Creating labels
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.
Adding labels
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.
- 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.
)
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.
){kind=small}
Editing labels
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
Now that the Timeline contains labels, you can change the references in the JavaScript code.
- 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:
- 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");
- Preview your Edge Animate composition in a browser by choosing File > Preview in the browser, or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS).
- At any point during the slideshow, click the thumbnail images.
- Return to Edge Animate and select all the elements on the Timeline by choosing Select > All, or by pressing Ctrl+A (Windows)/Command+A (Mac OS). Make sure none of the elements are locked.
- Click and drag the last keyframe of the last animated element on the Timeline. Drag the keyframe to the left to decrease the total amount of time of the slideshow.
The Code panel opens.
All the code for the thumbnail events and actions are displayed in the single script pane.
)
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.