Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Animation in Dreamweaver – Timeline Behaviors

Timeline Behaviors

Unlike the first animation, the Autoplay and Loop checkboxes will not be se-lected. Instead, we’ll use a Behavior to trigger the animation.

Open the Behaviors Inspector, SHFT+F3 (Windows) or CMD+F3 (Macintosh). Choose the “Click here to exit movie” option. For the Behavior to be added, the text must be a hyper link. In the Properties Inspector add a “#” to the Link field. This will make the text act like a link, without linking to any page. With the cursor on the new link, select from the Behaviors Timeline — Play Timeline. A popup window will ask which Timeline to play. Choose “Exit”, as shown below.

696_fig5

The Play Timeline Behavior will start an animation in a different Timeline.

Press F12 to preview the page. The original animation plays and stops with the CompanyLogo layer in the center of the page. When the link on the page is selected the second timeline plays. Any number of Timelines can be added to a single page. The Timeline Behaviors can control the starting and ending time fore each timeline.

The Behavior Layer

Timelines are, at their most basic, just JavaScript. Because of this additional JavaScript, Behaviors can interact at any time with a Timeline. For this purpose a special Behaviors layer is available on the Timeline, beginning with the letter B above the regular layers.

Objects in layers can’t be dragged from the page onto the Behaviors timeline: only Behaviors can be added.

As an example, select the “Exit” timeline and choose frame 15. Double click in the “B” layer of the Timeline to open the Behaviors Inspector. Select “Pop-up message” from the Behaviors. Add the text “Thank you for viewing our Website” and select OK.

Frame 15 of the “B” layer now displays a purple marker to represent that a Behavior will be activated when this frame is reached. Press F12. The first animation plays. Then click on the link to play the second animation. On the final frame of the second animation, a popup message will appear on screen, as shown here:

696_fig6

Behaviors can be easily added to the “B” layer of a timeline. The Behavior will be triggered when the Timeline reaches it.

A Behavior can be added at any point along a Timeline, allowing you to develop rich interactivity into any page. The Timeline is a good substitute for Flash in simple animations. The rich engagement between Behaviors and Time can result in exciting and engaging sites that present more to the user than just a static Web page. Have fun!

Comments