When the user clicks each thumbnail, Edge Animate moves the playhead to a new time on the Timeline, according to the argument in the stop() method. However, imagine that the client who has commissioned you to develop this slideshow wants the whole sequence to run a little slower. That’s an easy task to do because you can select all of the elements on the Timeline and move all the keyframes and animations forward to lengthen the total amount of time. But doing so causes the times that each image appears on the Stage to change, which would require you to change all the millisecond values in the stop() methods.
There is an alternate approach that would save you time and effort. Instead of using fixed-millisecond times in the stop() methods, you can use labels, which refer to points on the Timeline. Labels can move with your animation, so increasing or decreasing the length of your animation can move the labels proportionately.
Labels appear on the Timeline panel, below the time markers and just above the Actions layer.
- Move the playhead to 0:00 seconds.
- Click the Insert Label button, or press Ctrl+L (Windows)/Command+L (Mac OS).
- Rename the label fisherman, and press Enter to exit the text editing of the label.
- Add four more labels to the Timeline, each marking the starting point at which an image appears on the Stage.
The image of the fishermen appears at 0:00 seconds.
A label appears on the Timeline, named Label 1.
The label called fisherman is now associated with 0:00 seconds.
- Insert the label statues at 0:02 seconds.
- Insert the label houses at 0:04 seconds.
- Insert the label monk at 0:06 seconds.
- Insert the label women at 0:08 seconds.
There are several ways you can edit labels once you’ve inserted and named them:
- To rename a label, double-click the label name on the Timeline.
- To move a label, click and drag the label on the Timeline to a new position.
- To delete a label, select the label on the Timeline so it is highlighted and press the Delete key.
- To cut, copy, or paste a label, right-click on a label and choose your desired option, or use the standard keyboard commands for cut (Ctrl/Command+X), copy (Ctrl/Command+C), and paste (Ctrl/Command+V).
Changing the references to the Timeline
- Choose Window > Code, or press Ctrl+E (Windows)/Command+E (Mac OS).
- If it is not already selected, click the Full Code button to display the panel in Full Code mode.
- Replace all the millisecond times in the stop() methods with your labels. The following lines of code should be changed:
The Code panel opens.
All the code for the thumbnail events and actions are displayed in the single script pane.
- Change sym.stop(0); to sym.stop("fisherman");
- Change sym.stop(2000); to sym.stop("statues");
- Change sym.stop(4000); to sym.stop("houses");
- Change sym.stop(6000); to sym.stop("monk");
- Change sym.stop(8000); to sym.stop("women");
The slideshow stops and shows the selected image.
As you decrease the length of time for all the animated elements, the labels also move proportionally, preserving their identification of what’s displayed on the Stage. Return the total time of the composition to 0:10 seconds.