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

Lesson 14. 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.

1.
In the show.htm 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.

2.
Draw a layer on the page where it won't overlap any of the objects as they animate on the page. Name the layer startL.

The object to which you attach the Play Timeline behavior 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.

3.
Insert the play_movie.gif image from the Lesson_14_Timelines/Images folder or from the Assets panel Favorites Lesson 14 folder. Name the image play.

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

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

The Play Timeline dialog box appears.

5.
Click OK. Save your file and test it in the browser.

When you click Play, the animation should begin. If the animation does not begin, go back to the document and make sure that the play movie graphic does not overlap any of the objects as they animate on the page.

NOTE

You can make the pointer change to a pointing hand when you move it over the button in the browser by selecting the graphic and typing a number (#) sign in the Link field of the property inspector. Keep in mind that this may cause the behavior not to work in Netscape. Test your pages to be sure everything works as you expect.

You can close this file.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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