17.2 Altering Object PropertiesTimelines can modify the width, height, top, left, z-index, and visibility attributes of layers, but width and height changes work in Internet Explorer only (they are ignored by NN4 and Opera). Timelines can also modify the src attribute of images to create a slideshow. To change other image attributes, such as to animate its position, place the image within a layer (likewise for other HTML elements) and then alter the layer attributes.
Table 17-1 explains how to set the attributes of layers and images. The src attribute applies to images only; the remaining properties apply to layers only.
17.2.1 Animating Layer PositionSection 17.2.1.1 shows how to change a layer's position over time. 17.2.1.1 Procedure 6
If an animation bar contains two keyframes, the animation path is a straight line. When using additional keyframes, the animation path is a Bézier curve as seen in Figure 17-2. To alter the path, change the position of the layer in a keyframe, adding keyframes as necessary. To create straight line paths, create a series of separate animation bars, each with beginning and ending keyframes only. 17.2.1.2 Recording an animation pathYou can record an animation path directly by selecting a layer and choosing Modify Timeline Record Path of Layer (or by choosing Record Path from the contextual menu). When you select Record Path, the Timelines panel opens. Drag the layer by the tab in its upper-left corner using the left mouse button. Drag it around the Document window along the desired path to create an animation, as shown in Figure 17-3. (Dreamweaver creates keyframes as needed to approximate the intended path.) Figure 17-3. Layer with recorded path17.2.2 Changing Properties with the Properties PanelYou can also alter properties by selecting a keyframe and then setting the new value in the Property inspector. Figure 17-4 shows how to set the Left and Top coordinates for two keyframes of an animation using the Property inspector. Figure 17-4. Layer at positions (100, 100) and (200, 200)
Changing the layer position while a tween frame is selected shifts the entire path without altering its shape. For example, if you select a tween frame and increase the Left coordinate by 50 pixels, the entire animation path shifts 50 pixels to the right. Likewise, changing a property without first selecting a keyframe changes the property's setting for the entire timeline (the life span of the document). 17.2.3 Working with ImagesYou can alter an image's src attribute over time, which changes the picture displayed by changing the graphic file associated with the <img> tag. Select a keyframe before changing the src attribute in the Property inspector. Changing the src attribute outside of a keyframe changes it for the entire document's lifespan. All image files should be the same size (if not, they will all be scaled to the size of the image indicated in the Property inspector). To move an image over time, place it in a layer and animate the layer in a timeline. To create the effect of images appearing and disappearing, insert the images into layers and then change the layer visibility over time. This technique is often more effective than changing a single image's src attribute. Likewise, you can simulate a change in both an image's graphic and position by animating two different images in two different layers as follows:
17.2.4 Animation RateA timeline's frame rate controls animation playback speed and can be changed in the Fps field of the Timelines panel. The default frame rate is 15 frames per second (fps). Lowering the frame rate below 6 or 8 fps may result in jerky animation. Because animation is processor-intensive, higher frame rates may not be achievable on lower-end machines. The target frame rate is the maximum speed at which the animation will occur; achieving the rate is not guaranteed. Each timeline can have a different frame rate.
Keep animations simple and don't expect a high frame rate. If you must use browser animation, consider these tips:
|