Welcome to episode 12 (part1 and part2) of the After Effects ExtendScript Training series. Last week we focused on building a floating panel with GUI elements, so this week we are gonna rebuild the same thing, but with a twist. We will use the same elements, but we are going to use different code which will allow us to make this panel either dockable or a floating panel in After Effects. We'll also be using a resource string to build the elements. A resource string is a very common way to code a GUI and in our case allows for the elements to be a bit more cross compatible with PC and Mac by way of an auto layout system. We can choose which direction a group of buttons should flow, or have elements resize with the main panel, restrict some element sizes while allowing others to auto fill, etc… A resource string involves a lot more typing, but it's absolutely worth it. By having a panel dockable, it will also take on the color scheme and appearance of the main After Effects interface by default. This adds a nice native look to your script GUI and allows for a more professional feel to your script.

AFTER EFFECTS CC NOTE: This series was recorded before After Effects CC was released. In After Effects CC, Adobe updated the ScriptUI for ExtendScript, so some of the information in this tutorial may not work in After Effects CC. This tutorial was made using After Effects CS6 and the code explained should be compatible with CS3, CS4, CS5, CS5.5 and CS6. I am currently in the process of researching the newly made changes in After Effects CC and may post an update to this tutorial at a later date.

If you missed any of the previous episodes in this series, follow the links below.

Previous episodes in the series:

Episode 1 (Intro)

Episode 2 (Javascript Basics p1)

Episode 3 (Javascript Basics p2)

Episode 4 (After Effects Object Model structure overview / Script Preparation and development tips / Single Item Access of various project items, comps and layers)

Episode 5 (Access Renderqueue items, output modules and file paths / Multiple item access of project items, comps and layers / Batch change all renderqueue items file paths)

Episode 6 (Collecting data into an Array() / Changing values / Various tips)

Episode 7 (Create new comps and folders / Create Null, Solid, and Text layers)

Episode 8 (Create multiple comps of various sizes / Use Undo group / Add solids to match each comp / Various tips)

Episode 9 (Globally change blue solids to red / Replace solid name blue with red)

Episode 10 (Build a custom function to collect all CompItem objects / Modify function to dynamically allow for choice of CompItem, FolderItem or FootageItem)

Episode 11 (Build floating GUI)

In this episode:
– Build a dockable panel that contains these GUI elements: group, button, checkbox, radiobutton, dropdownlist, progressbar, iconbutton, image, statictext, edittext, slider, scrollbar, panel, tabbedpanel, tab, listbox, treeview, node, and item
– Resource string creation
– Various tips