Home / Articles / Adding Basic Interactivity in Adobe Edge Animate

Adding Basic Interactivity in Adobe Edge Animate

Article Description

Learn how to use Adobe Edge Animate’s built-in code snippets and intuitive panels to add actions to create engaging, user-driven, interactive experiences.
Timeline triggers

Timeline triggers

Triggers are the simplest way to add code to your Edge Animate composition. Triggers are executed automatically when the playhead reaches them on the Timeline. You can have multiple triggers along the Timeline. The minimum time interval between triggers is 1/1000th of a second, but practically, you’d never need or want actions to be executed so close together.

Creating a loop

For this slideshow of Myanmar, you’ll insert a trigger at the end of the Timeline to make the playhead automatically return to the beginning, creating a loop.

  1. Click the Zoom Timeline to Fit button at the bottom of the Timeline.
  2. The entire slideshow animation appears in the available space in the Timeline panel.

  3. Move the playhead to the very end of the slideshow, at 0:10 seconds.
  4. In the Timeline panel, click the Insert Trigger button on the top Actions row. You can also choose Timeline > Insert Trigger or press Ctrl+T (Windows) or Command+T (Mac OS).
  5. An icon that appears as a diamond enclosed by curly braces appears on the Timeline at 0:10 seconds. The icon represents a trigger.

    A panel appears with a large white text-entry field and a column of code snippet options on the right side. The panel is titled Trigger@10000ms, referring to the trigger’s position at 10,000 milliseconds, or 10 seconds.

  6. View the content of the current script.
  7. The current script, //insert code here, is known as a comment. Comments always begin with two backslash characters, and are descriptions of the code. Comments are non-functional, and don’t significantly add to the file size of your composition.

  8. From the menu of code snippets on the right-hand side of the panel, select the Play from option.
  9. New code appears in the panel after the existing comment. The new code comes with its own comments that describe its function. The code, sym.play(1000);, moves the playhead to a particular point in time on the Timeline and begins playing.

  10. Replace the 1000 within the parentheses in the code with 0.
  11. The number in between the parentheses of the play() command represents the time to which the playhead will move. Since you want the playhead to move to the beginning of the Timeline at 0:00 seconds, enter 0 in the parentheses of the play() command.

  12. Close the panel and preview your project in a browser by pressing Ctrl+Enter (Windows) or Command+Return (Mac OS).

The slideshow plays through and repeats when it reaches the end at 10 seconds.

Editing triggers

Editing the script for your triggers is simple and easy. The panel that appeared when you added the trigger is always available for modifications, additions, or deletions.

  • To edit a trigger, double-click the trigger icon on the Timeline.
  • The script panel opens to display the trigger, and you can modify the argument, delete the code, or add new code from the snippet options on the right side of the panel.

  • To move a trigger, click and drag the trigger icon on the Timeline to a new position.
  • The trigger moves to a different position, so the actions are executed when the playhead reaches a new time.

  • To delete a trigger, select the trigger on the Timeline and press the Delete key.
  • The trigger is removed from the Timeline.

5. Minding your syntax | Next Section Previous Section