Using Timelines to Create Moving and Interactive Layers


Have you ever wondered how some web pages move content or images across the screen as though they were being dragged? The likely answer is that movement either took place as part of a Flash movie or through the use of moveable layers. We have already talked in depth about using Flash movies to create motion, so let's take a look at a feature that has returned to Dreamweaver in version 8Timelines.

Timelines enable you to animate the layers in your page by moving them or resizing them. The process of creating and managing these animations is controlled by the Timelines panel, shown in Figure 28.24. You can access this panel by choosing Window, Timelines.

Figure 28.24. The Timelines panel enables you to animate your layers.


As you can see, the Timelines panel looks a lot like the Flash development environment in that it can accommodate multiple objects and it uses frames and keyframes. To create a timeline, add a layer to your page and insert an image into the layer. Select the layer in the Design view, right-click in the first row of the Timelines panel, and choose Add Object from the menu. This indicates to Dreamweaver that the timeline will be changing the layer in some fashion. Dreamweaver adds the object to the Timelines panel and creates a default 15-frame timeline for the object (see Figure 28.25).

Figure 28.25. The layer has been added to the timeline as an object.


Note

By default, the timeline is set to 15 frames per second in the FPS field. This means that the default 15 frames that Dreamweaver establishes play for only one second.


Suppose that you wanted to move your layer across the screen over a 3-second period. The easiest way to do this is to extend the object to 45 frames (3 seconds at 15 frames per second) by clicking on the ending keyframe, indicated by a white circle, and dragging it out to 45 (see Figure 28.26).

Figure 28.26. Extend the number of frames out to 45 by dragging the ending keyframe.


Now you need to indicate where the layer should end up after the timeline is completed. To do this, drag your layer to wherever you want it to end up in the Design view. Notice that Dreamweaver creates a line in the Design view that shows the path the layer will take as it is animated (see Figure 28.27).

Figure 28.27. The path of the layer is indicated by a line in the Design view.


But what if you don't want the layer to proceed to its destination in a straight line? You can accommodate custom paths by using the Record Path command. To see how this works, create a second layer with an image inside it and add it to the Timelines panel. Now select the layer in the Design view and click on the Menu button for the Timelines panel. From the menu, choose Record Path of Layer.

After you click this link, Dreamweaver remembers where you drag the layer and creates a custom path for it. In the design view, drag the layer in a looping manner to a random destination. Notice that Dreamweaver draws the line following the path you indicated. When the layer is at its destination, release the mouse button and Dreamweaver alerts you that only certain aspects of the layer can be controlled (see Figure 28.28).

Figure 28.28. Dreamweaver alerts you that some modifications to layers aren't visible in earlier versions of Netscape.


Click OK to close the alert. In the Timeline panel, click the first frame for this object and then use the right arrow to proceed through the frames. The layer moves according to the path you recorded. To see your animations in action, save the page and preview it in your browser.

Note

Although layer animations and timelines are fun, be aware that they can get annoying after a while. Be cautious in how you apply them and make sure that they serve a true purpose that enhances your website, and that they aren't just used for the wow factor.




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net