How
To Use The Comp_To_UI.jsx
script
(a script that uses After Effects to create user interfaces for scripts for After Effects!)
(a script that uses After Effects to create user interfaces for scripts for After Effects!)
THIS SCRIPT'S INTERFACE
When you run Comp_To_UI.jsx in After Effects, A window (which was initially built with an earlier version of this script; the mock-up of which is used in the illustrations in this documentation), asks you to choose a few options:
The style of the generated window ("dialog" or "palette") is determined by the radio buttons on the left.
The three options on the right are two variable names and one function name used in the generated script. Run the script with the default values to see what goes where.
THE COMP:
The script recognizes the active comp as the mock-up for the planned user interface window; the size of the comp becomes the size of the window. The script will assume a default placement of 300 pixels from left and 100 pixels from top.
The name of the comp becomes the name of the window.
THE LAYERS:
Each layer's source name (not layer name -- see below illustration) is recognized as the class name of the item added to the window.
For example, when using a solid, if the solid's source is named "checkbox", it will end up as a checkbox class in the code.
Also, the source name may be "checkbox 1" (due to duplicating a 'checkbox' layer, for example), or "checkbox 2", etc., and the layer will be recognized as a checkbox. In other words, in terms of the class name, only the first word of the source name is recognized. Keep in mind that something like "checkbox2" will result in a classname "checkbox2", which is probably not what you want.
The layer's layer name (see below illustration) will be recognized as the control's property reference, (e.g.: okButton in win.okButton).
For a control item's default values, Use a marker with a comment in it. The script will recognize the first marker in the timeline as being this value. If there is no marker or if the marker does not have a comment, an empty string is given.
For pushbuttons, the name property is always added; we use the same string for the name as for the value parameter
(e.g.: win.add('button', [400,420,479,440], 'OK', {name:'OK'}) ). As far as I know, this is not a bad thing.
All pushbuttons are given window-closing onClick functions for the sake of simplicity. Mapping new functions to buttons is up to you.
Important:
Since layers representing panels need to be underneath other control objects like buttons, etc., the script works starting from the bottom of the timeline and upwards. Notice in the illustrations above that the 'panel layers' are at the bottom.
Comp_To_UI now (as of version 1.2) recognizes and corrects for errant anchor points; any layer with an anchor point not at [0, 0] will have its anchor point and position automatically recalculated and corrected.
PARENTING:
Parenting may be done between layers to represent, for example, radio button 'groups' that belong to a panel (see illustration above). The resulting controls' positions are relative to the panel to which they are parented. It is therefore advised that you place parented layers directly above their respective parents (see above illustration).
THE CODE:
The final stage of the script adds a text layer called "your code!" to the comp. You may double-click this layer and copy the text for pasting into your script.
When you run this script you should get a window that looks a heck of a lot like your mock-up.
TIPS:
When you run Comp_To_UI.jsx in After Effects, A window (which was initially built with an earlier version of this script; the mock-up of which is used in the illustrations in this documentation), asks you to choose a few options:
The style of the generated window ("dialog" or "palette") is determined by the radio buttons on the left.
The three options on the right are two variable names and one function name used in the generated script. Run the script with the default values to see what goes where.
THE COMP:
The script recognizes the active comp as the mock-up for the planned user interface window; the size of the comp becomes the size of the window. The script will assume a default placement of 300 pixels from left and 100 pixels from top.
The name of the comp becomes the name of the window.
THE LAYERS:
Each layer's source name (not layer name -- see below illustration) is recognized as the class name of the item added to the window.
For example, when using a solid, if the solid's source is named "checkbox", it will end up as a checkbox class in the code.
Also, the source name may be "checkbox 1" (due to duplicating a 'checkbox' layer, for example), or "checkbox 2", etc., and the layer will be recognized as a checkbox. In other words, in terms of the class name, only the first word of the source name is recognized. Keep in mind that something like "checkbox2" will result in a classname "checkbox2", which is probably not what you want.
The layer's layer name (see below illustration) will be recognized as the control's property reference, (e.g.: okButton in win.okButton).
For a control item's default values, Use a marker with a comment in it. The script will recognize the first marker in the timeline as being this value. If there is no marker or if the marker does not have a comment, an empty string is given.
For pushbuttons, the name property is always added; we use the same string for the name as for the value parameter
(e.g.: win.add('button', [400,420,479,440], 'OK', {name:'OK'}) ). As far as I know, this is not a bad thing.
All pushbuttons are given window-closing onClick functions for the sake of simplicity. Mapping new functions to buttons is up to you.
Important:
Since layers representing panels need to be underneath other control objects like buttons, etc., the script works starting from the bottom of the timeline and upwards. Notice in the illustrations above that the 'panel layers' are at the bottom.
Comp_To_UI now (as of version 1.2) recognizes and corrects for errant anchor points; any layer with an anchor point not at [0, 0] will have its anchor point and position automatically recalculated and corrected.
PARENTING:
Parenting may be done between layers to represent, for example, radio button 'groups' that belong to a panel (see illustration above). The resulting controls' positions are relative to the panel to which they are parented. It is therefore advised that you place parented layers directly above their respective parents (see above illustration).
THE CODE:
The final stage of the script adds a text layer called "your code!" to the comp. You may double-click this layer and copy the text for pasting into your script.
When you run this script you should get a window that looks a heck of a lot like your mock-up.
TIPS:
- Create a project with a 'library' of mock-ups.
- Use transfer modes and colors to distinguish objects from one-another.
- Use After Effects' "crop comp to area of interest" feature.
- Use the "Align & Distribute" palette in After Effects.