How
To Use The Comp_To_UI.jsx
script
(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:
- 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.