• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 16. Animating with Timelines > Making the Timeline Play

Making the Timeline Play

In the previous exercises, the timeline automatically played in the browser because you selected the Autoplay option. At times you might want the user to control the playback of the timeline. You can add a Start Timeline button to play the animation when the user rolls over a button or clicks an image.

In the navigate.html document, deselect Autoplay on the Timelines panel. Select the first frame in the Timelines panel by clicking the 1 in the row of frame numbers.

The playback head moves to frame 1 when you select the first frame. When you deselect Autoplay, the JavaScript Play Timeline action, which used an onLoad event to start the animation once the page loaded, is removed from the <body> tag.

Draw a layer on the page just below the lower right corner of the cliffs layer. Name the layer start and insert the play.gif image from the Lesson_16_Timelines/Images folder into the new layer.

This is the graphic to which you will attach the Play Timeline behavior in the next step.


The object you attach the Play Timeline behavior to does not have to be contained in a layer. It can be any text, graphic, or object on the page. In this exercise, using a layer is an easy way to control the placement of the graphic.

Select the play.gif image. In the Behaviors panel, click the plus sign (+) button to add a behavior and choose the Timeline > Play Timeline behavior.


Be sure that frame 1 is selected in the Timelines panel.

The Play Timeline dialog box appears. Click OK.

With the play.gif image still selected, select the Play Timeline behavior in the behaviors panel. Click the down arrow to the right of onLoad to open the event drop-down menu and choose (onClick).

You may need to choose the Show Events For option at the bottom of the actions drop-down menu and select 4.0 and Later Browsers.

Click OK. Save the navigate.html file and test it in the browser.

When you click Play, the animation should begin.

You can close this file.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint