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

 


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.

  • 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 you would like to see together with a better description of my issue:

    https://forums.creativecow.net/thread/227/32745

    Thank you in advance as always..

    • 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.

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