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.
- Click the Zoom Timeline to Fit button at the bottom of the Timeline.
- Move the playhead to the very end of the slideshow, at 0:10 seconds.
- 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).
- View the content of the current script.
- From the menu of code snippets on the right-hand side of the panel, select the Play from option.
- Replace the 1000 within the parentheses in the code with 0.
- Close the panel and preview your project in a browser by pressing Ctrl+Enter (Windows) or Command+Return (Mac OS).
The entire slideshow animation appears in the available space in the Timeline panel.
)
)
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.
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.
)
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.
)
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.
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.
- To move a trigger, click and drag the trigger icon on the Timeline to a new position.
- To delete a trigger, select the trigger on the Timeline and press the Delete key.
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.
The trigger moves to a different position, so the actions are executed when the playhead reaches a new time.
The trigger is removed from the Timeline.
Script panel viewing options
The script panel that opens when you add a trigger has several options to help you make viewing the code easier. The top-right options menu has three choices that control what’s displayed.
)
- Show Line Numbers displays sequential numbers next to each line of code so you and other developers who share the script can pinpoint code.
- Font Size controls the display size (Small, Medium, or Large) of the text in the script. The default option is Small.
- Include Snippet Comments automatically adds comments to the code that you add from the snippet options on the right side of the panel.
In addition to these display options, you can click the vertical border that divides the white script area with the menu of code snippets to collapse the menu to make more room for your code. Click the divider again to expand the menu.