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


 


David Torno

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 knowledge in Visual Effects by learning new softwares and techniques that are being used. Along the way he also contributes to the visual effects community by offering helpful tools, and tutorials that creative professionals around the world can benefit from.

Leave a Reply

12 Comments on "After Effects ExtendScript Training: Ep. 12 Part1&2"

Notify of
avatar
Sort by:   newest | oldest | most voted
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 »
Tobi
Tobi
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 »
David Torno
David Torno
Thank you for the kind words Tobi and thank you for pointing out this important note. Yes it is vital to have that line as it lays out the UI in the panel. I get that the videos are long and can be a bit boring at times when you really just wanna do it right away. I do the same thing and jump around in tutorials myself, so I’m no stranger to the impatience of wanting a direct answer. I try to make the videos clear and informative as best I can. 🙂 This also was reccorded way back… 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

David Torno
David Torno

Hi Benjamin, in episode 18 I giver building a full script and I do create the “onClick” functionality there. I’d watch through all of it to get all of the info, but the onClick part starts in video 2 at the 1:25 mark. https://www.provideocoalition.com/after-effects-extendscript-training-ep-18/ I thought I had explained it in EP 12, but it’s been a long time since I made these videos and I can’t quite remember all of the details. 🙂 Hope this helps.

Benjamin Parker
Benjamin Parker

Nope its probably all me David. I had not got as far as EP18 and my head is buzzing from all I have learned today. Thank you for taking the time to point me in the right direction and thank you for taking the time to create these tutorials as well as the ESDU Plugin, Very much appreciated 🙂

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 »
David Torno
Hi Jeroen, It boils down to knowing how functions work. For a script to be dockable, it requires a function that refers to itself. This is why you see the first function called myScript(thisObj), being called like so… myScript(this); “this” is an actual Javascript Object that tells the system to look at itself and in turn tells After Effects what it should load when it launches, everything inside the function. This setup is an Adobe requirement for dockable panels. “thisObj” is an argument for the function saying that something is required to run the function. This argument name can actually… Read more »
Jeroen Rommelaars

Thanks a lot! Ill dive straight into it!

Jeroen Rommelaars

Thanks again! I got it to work!
I just want to add that ExtendScript toolkit CC still shows it as bad script. If i hit play in toolkit, all my vars are flagged red, but if I run it from AE – everything is fine and works beautifully. Stupid toolkit 😛

Thanks!

David Torno

Yes, ExtendScript Toolkit is unable to preview dockable scripts since that code is After Effects native. Only launching the script through After Effects Window menu will it be recognized. What I usually do is add a testing script to my ScriptUI folders so I can test dockable scripts on the fly without relaunching After Effects. You can have your script and the testing one open in ESTK, then you can then just copy and paste to it as you build and test.

wpDiscuz