Uncategorised

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 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…

3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Dj RudraDavid TornoFabio A Recent comment authors
  Subscribe  
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 »

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.