After Effects ExtendScript Training: Ep. 12 Part1&2

ExtendScript Script Writing Training

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


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

5 Comment threads
9 Thread replies
Most reacted comment
Hottest comment thread
6 Comment authors
David TornoJeroen RommelaarsBenjamin ParkerDavid TornoTobi Recent comment authors
newest oldest most voted
Notify of
Joshua Badger
Joshua Badger

I’ve discovered this series several years after the fact and it’s proving to be quite helpful. I’m starting to build some custom tools for my setup at home and I’m running into a roadblock or two. Could you explain for me a couple of things? 1. I can’t find in the video where it explains why the normal add method doesn’t work with ScriptUI Panels, and why we use resource strings instead. 2. What would I do if I want to have a StaticText update based on a variable that gets assigned different values? For example: before I press a… Read more »

David Torno
David Torno

Sorry for the late reply, I got married recently and have been off the grid for a bit. The resource string method is just an alternate way to do the same thing as the add method. It mostly boils down to personal coding preference. I find it easier to make UI via resource string vs add. Others like add better. For the text change you would use the switch() method. I would probably place it into a custom function to make your life easier. That way it can be run various times withouut retyping the code. Something like function checkMyText(myStaticTextObject,… Read more »


Thank you David for this great tutorial series. I’m posting this comment for everyone that has the same problem as me, which is: As soon as you place the script in the scriptUI Panels folder and launch it as a dockable script in After Effects, all button and controls are not visible anymore and all you get is a blank Panel. THE EASY FIX TO EVERYONE LOOKING FOR THE ANSWER: add the line: myPanel.layout.layout(true); right before “return myPanel”. David actually shows this in the second part at 28:30, but as this is an essential line of code that needs to… Read more »

Benjamin Parker
Benjamin Parker

Hi David I have been enjoying the series very much. I am probably being very dense but where can I find the information on how to get you GUI buttons to use code and do something? you mentioned that you would be telling us how to do this but I cannot seem to find it. i have written my little script and I have my GUI but for the life of me I cannot figure out how to put them together. many Thanks

Jeroen Rommelaars

Thanks so much for this series. This is helping me beginning to get a grip on extendscript. I have a questsion. I tried following your guide on creating a script for inside a window in AE, however im lost as to where to put all the functions for the buttons etc. I have one script that works individually, and one script that can create windows inside AE – Im trying to combine them, to get the first script inside a window – but Im only getting erros. Any idea what im doing wrong? Here’s my script to create a window:… Read more »