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:

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.

  • 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 button, StaticText says “Project not yet prepped”; after button-press it says “Project ready”. Is such a thing possible?

  • 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, variableVal){

    var currentVal = variableVal;

    switch(currentVal){

    case true: //I’m assuming that your variable will be true or false value

    myStaticTextObject.text = “Project Ready”;

    break;

    case false:

    myStaticTextObject.text = “Project not yet prepped”;

    break;

    }

    So when you run your button code, just include the checkMyText() method and it’s arguments. Hopefully that makes sense.

  • 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 be added to get the script to work at all, I write this as an extra comment here for everyone who like me skipped over all the controls and default values he thought wasn’t needed for his script.

    As I googled to find a solution to my problem I’ve found several people having the same problem as they followed your tutorial but also did miss this essential piece of code.

    Once again: Thank you David for this comprehensive tutorial series!

    -Tobi

    • 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 when I was still new’ish myself to ExtendScript and much has changed since CS6. I’m glad people still find this series useful and maybe someday I can update the videos with my now more informed brain. 🙂

  • 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

      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

        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 🙂

PVC Logo
PVC App Demo

Now Available in the App Store

Get access to our latest and featured articles from your favorite authors, wherever you are, directly on your phone!

  • Clean and Easy to Read
  • Blazing Fast Notifications for New Articles
  • Free Tuesday Webinar Access
Apple App Store
Google App Store
Get your FREE Search Bins Project File!
Want Us to Remind You?
Enter your email and subscribe!
Get Access!
Please enter your email address to view our free live webinar!
*you will be added to the ProVideoCoalition.com newsletter and if you’re already signed up, it won’t send you duplicate e-mails