Applying actions (keyframe animation)

Selected objects can be assigned an event and corresponding action. The use of actions provides an interactive experience in response to a user's mouse up/down/press/release, key press/up/down, roll over, etc. As a typical example, an event such as a mouse press on an object can initiate an action such as a jump to a particular keyframe, e.g. an important point in your animation that could indicate contact details, important messages, etc.

Actions are grouped into a tree menu structure whose categories include:

  • Advanced: Begin/End blocks, apply conditions, create variables, variable control.
  • Browser: navigate browser to URL, navigate frame to URL, open browser with URL.
  • Effect: named object control (hide, show, recolor).
  • Position: move objects by pixel or to screen areas.
  • Pre-loader: rewind animation, object stretch.
  • Sound: increase/decrease volume, play/stop sound, set volume.
  • Timeline: go to marker, animation frame, animation playback control (stop, play, rewind).

DrawPlus makes use of ActionScript, a language specifically designed for Adobe Flash applications, to allow a high level of interactivity between the exported Flash SWF and the user (e.g., a web visitor).

When an action is applied from the menu you may be prompted for a parameter setting (pixel width, color, etc) but you can alter parameters at any time— without having to view underlying ActionScript code.

Creating Animations 243 Optionally, a new action can be created from scratch within the dialog. Simply

code directly or paste ActionScript into an Edit window.

To apply an action to selected object(s):

  1. Select an object on any keyframe.
  2. Double-click an event from the Actions tab.
  3. From the dialog, navigate the tree menu, expanding the options if necessary, and click on a chosen action (e.g., Timeline Actions>Go to marker X).
  4. Click the button to apply the selected action (it moves across into the Applied Actions box), then repeat for optional additional actions. You may be presented with a dialog which prompts for object names or parameter values (colors, number of pixels, marker names, etc.) required for the underlying ActionScript code to act on.
  5. (Optional) For multiple applied actions, you can order the Applied Actions list with the Up or Down buttons.
  6. Click OK. You'll notice the selected event now shown in bold in the Actions tab.

The applied action can be edited by double-clicking the tab's bold event entry and, from the dialog, clicking the Paramsbutton (with object selected). To delete an action, use the Delete button to remove it.

We've looked at actions assigned to objects, but a keyframe can equally have an action associated with it. Especially useful on a starting keyframe, an Effect Action can be used to hide one or more selected objects before having them displayed on the second and subsequent keyframe (great for text introductions!). Actions are applied to keyframes via the Frame Actions dialog, which offers the same actions as those that can be applied to objects.

To apply action(s) to a keyframe:

• Click on the icon under the keyframe's thumbnail.

The dialog displayed is identical to that used for actions applied to objects. Follow the above object actions procedure to apply actions to keyframes.

244 Creating Animations

ActionScript, the underlying scripting language for actions, is normally hidden from the user in the above easy-to-use dialogs—you can view actions, their settings (as parameters), and select the action but generally not the underlying code driving it. However, the more experienced and/or adventurous can make use of a simple text entry system for developing ActionScript code from the same dialog.

To create custom ActionScript:

  1. For a selected object, double-click an event from the Actions tab. - or -

For a keyframe, right-click the keyframe and choose Frame Actions.

  1. Click the New button to add a New Action entry to the Applied

Actions list.

  1. With the entry selected, click the Edit button. The Action Script Code Editor window is displayed.
  2. Enter your ActionScript code either by coding directly or by pasting existing code in the window.
  3. Click OK.

Click the Flatten button to rationalize several listed actions into one. A combined action named "Flattened Code" is created instead. Each code snippet will be run consecutively.

ActionScript Version 2 is supported in DrawPlus.

Creating markers

Working in a similar manner to bookmarks, markers work along with actions, allowing jumps to particular keyframes on the storyboard. Markers are positioned between keyframes along the storyboard and need to be activated for use. Each marker can be named, which is especially useful for marker identification when you're using multiple markers along your storyboard. Additionally, a marker can be used to stop an animation, preventing your animation from looping—the Stops playheadmarker setting will prevent the animation from continuing past that marker position.

To set a marker:

  1. Click a marker icon after a chosen keyframe.
  2. From the dialog, enter an easily identifiable Marker Name.
  3. (Optional) Check Stops playheadto prevent your animation from continuing.
  4. Click OK.
  5. The marker's appearance will change accordingly, i.e.

Marker not set Marker set Marker set (with (shown with blue line) Stops playhead

set; shown with red line)

When used in conjunction with the Timeline Actions "Goto marker X" or "Goto marker X and stop" the exported animation can jump to different section according to a chosen object's event or the display of a keyframe.

Affecting change over time (keyframe animation)

DrawPlus uses the term envelopes to describe editable motion paths (or profiles) intended to define the rate of change (acceleration/deceleration) to an object's transformation or physical attributes (color or transparency) in your animation run.

Envelopes are applied, created, modified and saved in the Easing tab. A series of envelope types can be applied between key objects in your animation or throughout the entire animation run. Typically, a non-linear Position envelope would alter how an object speeds up or slows down over the animation run. Other envelope types can alter the rate of transformation such as Rotate, Morph, Scale, and Skew.

You can manually edit any profile independently of each other such that you may have a mix of edited profiles and default linear ones. The Easing tab's

Creating Animations 245

246 Creating Animations

Envelope type drop-down menu lets you select your envelope type, allowing you to then define a profile shape for that envelope in the pane. In most instances, an "All Envelopes" option can be used to affect a variable rate of change for all envelopes simultaneously.

The process or editing an envelope is identical, irrespective of envelope type. By default, any envelope is applied linearly (i.e., they change at a uniform rate over time) so you have to manually edit the envelope to apply a non-linear rate of change.

The differing rates of change of can be illustrated with a Position Envelope between two simple circles.

linear non-linear
(default) (manual editing of profile shape)

To apply an envelope:

  1. Display the Easing tab.
  2. Select an object from the Storyboard tab to which you want to apply the envelope.
  3. Select a profile from the Envelope type drop-down menu (Easing tab). The displayed profile will be linear by default (see above), unless you've applied the envelope previously.

4. Pick a preset profile from the drop- down menu below the profile window.
- or -

For a custom profile, hover over the turquoise line (the cursor changes) and drag in any direction to position a newly created red node. Repeat the process for the number of nodes that you want to add to make up the profile. You can then fine-tune the profile shape by adjusting node positions accordingly.

DrawPlus will keep the applied profile unless you modify it or you reset the profile manually. If you'll be using the profile shape in the future you can save the current settings to your own saved profile.