Add interactivity with JavaScript

Search
Edge Animate User Guide

On this page

Applies to: Edge Animate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Note:

As of November 2015, Edge Animate is no longer being actively developed. For more information, see Edge family of products | End of development.

You can use JavaScript to add interactivity to your compositions. You can define actions for each element using a built-in code editor and snippet library. Actions are functions that can be added to handle a single event.

Adding Interactivity

Adding Interactivity
Paul Trani

Define actions

  1. On the Timeline, click the Open Actions button on the left side of an element or symbol name.

    Open Actions button

    You can also click the Open Actions button on the left side of an element or symbol name in the Elements panel.

  2. Select an event to trigger the action.

    The Actions Editor appears with a code editor and a list of code snippets on the right.

  3. Write the code for the event.

    You can write your own code or use the code snippets to add common functions. For reference information, see the Edge Animate API guide.

Use the Code editor

The Code editor gives you a complete view of the JavaScript code in your project. It also allows you to view the raw code for the actions file.

  1. Select Window > Code.

    You can also press Ctrl+E (Windows) or Cmd+E (Macintosh).

  2. Select an event or an element by clicking the Plus (+) icon on the left of Stage in the left sidebar.

  3. To edit the entire JavaScript file, click the Full Code button on the upper right of the panel.

    Full Code button

Add labels to the Timeline

You can insert labels on the Timeline and then use them as time references in function parameters. You can use a label name as a parameter for any playback function expecting a timecode value. Labels let you create actions like playing or seeking to a point on the Timeline.

To add a label:

  1. Move the Playhead to the location you want.

  2. Click the Insert Label button on the upper-right corner of the Timeline.

    Insert label button

    Note:

    You can also press Ctrl+L (Windows) or Cmd+L (Macintosh).

  3. Specify a name for the label.

  4. When defining an action for an element in the code editor, use the label name as a parameter for playback functions expecting a timecode value.

    For example, instead of sym.play(1000), you can use sym.play('mylabel').

Add triggers to the Timeline

You can place triggers on the Timeline to execute JavaScript code at a point in time.

To add a trigger:

  1. Move the Playhead to the location you want.

  2. Click the Insert Trigger button on the upper-right corner of the Timeline.

    Insert trigger button

    Note:

    You can also press Ctrl+T (Windows) or Cmd+T (Macintosh).

    The Code panel appears.

  3. Define the action to take at the trigger. For reference information, see the Edge Animate API guide.

You can modify the code for the trigger at any time by double-clicking the trigger icon on the Timeline.

Trigger icon

Learn more