17.4 Controlling Timelines

Dreamweaver provides behaviors to start, stop, and loop timelines. Each timeline can be started and stopped independently, and they can each have different frame rates (set using the Fps field in the Timelines panel).

17.4.1 Starting a Timeline

You can start a timeline automatically using autoplay or trigger it with another event, such as a button click.

17.4.1.1 Playing a timeline with autoplay

To start a timeline when the document loads, enable the Autoplay checkbox (see Figure 17-1) in the Timelines panel (if using multiple timelines, the autoplay mode can be set separately for each timeline). When you set a timeline to autoplay, Dreamweaver automatically attaches the Play Timeline action to the document's <body> tag and triggers it with the onLoad event.

17.4.1.2 Starting and stopping a timeline with an event

To play a timeline, apply the Timeline Play Timeline behavior using the Add Behavior (+) pop-up menu in the Behaviors panel. This behavior is typically applied to an image acting as a "Play" button and triggered by the onMouseDown event. Applying it opens the Play Timeline dialog box (not shown) from which you can choose the timeline to play. Apply one instance of the behavior for each timeline you wish to play. You can even apply this behavior in the Behaviors channel of one timeline to start another timeline.

By default, a timeline plays once and then stops. To stop a timeline prematurely, apply the Timeline Stop Timeline behavior using the Add Behavior (+) pop-up menu in the Behaviors panel. This behavior is typically applied to an image acting as a "Stop" button and triggered by the onMouseDown event. Applying it opens the Stop Timeline dialog box (not shown) from which you can choose to stop all timelines or a specific timeline. Again, you can apply this behavior in the Behaviors channel of one timeline to stop another timeline.

17.4.2 Looping a Timeline

Timelines can be played once (the default), played a limited number of times, or looped indefinitely. If you enable the Loop checkbox in the Timelines panel (see Figure 17-1), Dreamweaver adds the Go To Timeline Frame behavior to the frame following the last occupied frame of the timeline. The behavior causes the timeline to loop back to the beginning when it reaches its end.

By default, the Go To Timeline Frame behavior causes the timeline to loop indefinitely. To edit the behavior's parameters, select the frame containing the behavior in the Behaviors channel of the Timelines panel. Then, open the Behaviors panel and double-click the Go To Timeline Frame action. This gesture opens the Go To Timeline Frame dialog box, shown in Figure 17-7, which lets you set the starting frame of the loop and specify how many times to repeat the loop. If the Loop field is left blank, the timeline will loop indefinitely.

Figure 17-7. Go To Timeline Frame behavior parameters

To change the loop's ending frame, move the behavior to a different frame of the Behaviors channel in the Timelines panel. Test your animation to ensure that it loops seamlessly (the animation doesn't stutter or jump when the timeline loops ).

The Go To Timeline Frame behavior can also be applied manually by choosing Timeline Go To Timeline Frame from the Add Behavior (+) pop-up menu in the Behaviors panel. This behavior could be applied to an image acting as a "Rewind" button and triggered by the onMouseDown event. If this behavior is applied outside of the Timelines panel, it ignores the Loop field setting and stops the timeline after reaching the destination frame. To play the timeline once it arrives at the new frame, attach the Play Timeline behavior to the same HTML tag used for the Go To Timeline Frame action; trigger the Play Timeline action with the same event, but make sure it appears last in the Behaviors panel.