After Effects ExtendScript Training: Ep. 11

ExtendScript Script Writing Training

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


Support ProVideo Coalition
Shop with Filmtools Logo

Share Our Article

David Torno is a Visual Effects professional based in Los Angeles, California. His work over the years has included commercials, feature films, music videos, and multimedia projects. During his free time, David enjoys expanding his…

Leave a Reply

2 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
3 Comment authors
Dj RudraDavid TornoFabio A Recent comment authors
newest oldest most voted
Notify of
Fabio A
Fabio A

Hi David! Hope this message finds you well! I don’t want to take much of your time, but if you don’t mind, I would like to ask you a question. Within my UI, I am trying to replicate the render queue progress bar when clicking the render button I placed within the UI, I really don’t have much of an idea on how to accomplish this, so if you could guide me in the right direction, I will be very thankful. Recently I asked the question in creative cow, i attached a snapshot of that section of the UI if… Read more »

David Torno
David Torno

Hi Fabio, If you are looking to update a progressbar for a specific render it will be difficult. ExtendScript does not give direct access to that info. If however you are rendering image sequences, you can do a work around where you check the folder the images are rendering to and get the file count and compare it to the total frames that will be rendered and update your progressbar accordingly. For example, if the render is 10 frames long and only 5 frames exist in the folder, the render is 50% complete. Hopefully that helps.

Dj Rudra
Dj Rudra

Can you help me how to set image folder path? You have shown ~/Desktop.. But I wanna place an image with in a Tab & I want image folder path should be assigned properly. All your script working but how to assign file path properly? Pls help.