Welcome to episode 11 of the After Effects ExtendScript Training series. This week we are finally building a GUI (Graphic User Interface). I will show you how to create nearly every, if not every, GUI element ExtendScript offers. So if you were looking to create a floating window panel that has groups, buttons, checkboxes, radio buttons, dropdown lists, progress bars, icon buttons, images, static text, edit text boxes, sliders, scroll bars, panels with names, tabbed panels with multiple tabs, listbox lists, listbox lists with multiple columns, or tree view lists, then this video is for you.

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. 

For those that are interested in the resource string way of building a GUI and are looking to make dockable scripts. I will be explaining all that next week. I chose to split this section up as it is very detailed and immense in it's information. The dockable, resource string version I recorded will be a double episode due to all of the code involved. So those two videos will be posted next week. In the meantime we still have a lot to cover in this video so let's dive on in. 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)

In this episode:
– Build a floating 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