Scripting: Creating Windows For Your After Effects Scripts

Contents
1. Introduction	6. Buttons
2. Windows	7. Options
3. Groups	8. Example
4. Panels	9. Conclusion
5. Text

Introduction

Creating a window for a script is ideal when you need the end user to input information, and display instructions. In this article I'll go through the basics of creating a window for your AE script using some basic javascript and Adobe Extendscript Toolkit CC.

Windows

To make your window, it's very simple:

//New Window
var mainWindow = new Window("palette", "Title", undefined);

new Window() is the argument to create the window. Then, inside you need to specify the type, title and bounds. A palette window is suitable for After Effects scripts, and leaving the bounds as undefined is also recommended, as the size and position can be affected later.

To call your window:

mainWindow.show();

Since there is nothing currently in the window, this will simply call a small window to show it is working.

Groups

The next thing to do is to create an object to house information for your window.

The "group" allows you to organize objects inside of it. Before mainWindow.show() add this line to your script:

group01 = mainWindow.add("group", undefined, "Group 01");

We add the group to our mainWindow, outlining the type, bounds, and text properties. Since we are adding a group, the first argument is "group". Again, you can leave the bounds undefined. Lastly, include what you want the group to be named. This is not displayed by default in the window.

The default orientation of panels is by row. If you want to change this to sort of column, you can do so by adding this to your script:

group01.orientation = "column";

Panels

However, if you do want the name of the group to be visible, you could consider using a "panel" object instead. This type of object is helpful for sectioning off parts of the window:

group02 = mainWindow.add("panel", undefined, "Group 02");

It has the same properties as the "group" object, but displays slightly differently.

The default orientation of panels is by column. If you want to change this to sort of row, you can do so by adding this to your script:

group02.orientation = "row";

Text

There are likely 2 types of text you would want to include in your script: static text, and editable text.

Static Text
Static text can be used for instructions to the end user. Add "statictext"to your object like so:

//New Window
var mainWindow = new Window("palette", "Title", undefined);

Again we use the add control object, with the same type, bounds, and text arguments.

Editable Text
Editable text provides a text box field for the end user to type into. This is useful if our script requires information from the end user, like customizable text layers. Add "edittext" to your object like so:

mainWindow.show();

This is simply a different type of object. The text we provide in the text argument will initially be inside the text box, ready for the end user to delete and write their own text inside.

As you can see, with the size of the boxes undefined, the text in the editable box is slightly cut off. We can fix this by defining the size after the fact:

group01 = mainWindow.add("group", undefined, "Group 01");

This allows us to make the textbox size adaptable later, if we so choose.

Buttons

It is also likely you will need buttons for your script, at the very least to give the end user an option to "run" the script.

Adding a button is a similar process:

group01.orientation = "column";

This creates our button.

However, for our button to do anything, we will need to tell our script what to do when our button is pressed. I like to create a function to house all the tasks I want the button to complete.

group02 = mainWindow.add("panel", undefined, "Group 02");

Here, we use button01.onClick to run our first function, where we ask it to run app.beginUndoGroup("Tutorial") so that undoing the script is a single action from inside After Effects. Next, we tell it to run our function completeTasks. Underneath, I define the function completeTasks. Here, include all the actions you want your button to complete (for now, mine only closes the script window), and finish the function by adding app.endUndoGroup("Tutorial") to close the undo group.

I'll be going into more detail about this in a future article.

Options

Other options for control objects available are located on the Javascript Tools Guide CC

Objects such as checkboxes, dropdown menus, radio buttons, and sliders are covered here, to name a few, and follow similar procedures to adding text or buttons.

Example

Let's connect what we've learned about windows to the previous article, and make an example script which creates and opens a new composition.

//New Window
var mainWindow = new Window("palette", "Title", undefined);

Let's go through this script.

I start off by creating my window and my groups. Group01 is my "panel", adding the heading "description" to the static text. Meanwhile the rest of my objects go inside Group02, a "group" object. Since I want the orientation of Group02 to be a column, I set that here.

Then, I create my objects. I start with my statictext inside of Group01. Next, I create 2 edittext objects inside of Group02, for the user to specify the size of the new composition they want to create, and I specify the size of both those text fields. Lastly, I create a button so that the script can be run by the end user.

Once I have created all my variables, I create my functions. I first set my onClick function for my button as explained, by opening the undo group and running the custom function completeTasks.

I then define completeTasks. First, I need to use parseInt() on the text of both compWidth and compHeight edit text objects. This converts them from text to integers, so that the rest of the script can understand the inputs. Once this is done, I create a new composition, setting the width and height to the values inputted by the user. The composition is then opened and becomes the active comp, before the script window closes, and the undo loop is closed.

Running this script allows you to make a new composition set to the width and height values specified in the text fields.

This script can be improved by adding an alarm, should anything be added to the text fields that isn't an integer (or perhaps setting a maximum value), to warn the user that the script has failed. This is something I will go over in more detail in another article. For now, if there is an illegal character in the text field, the script will simply not work until both the width and height text fields have numbers typed into them.

Conclusion

This concludes the beginners guide to creating windows for After Effects scripts using Adobe Extendscript Toolkit CC. Next article I will cover creating different types of layers for your compositions.

The above is the detailed content of Scripting: Creating Windows For Your After Effects Scripts. For more information, please follow other related articles on the PHP Chinese website!