Using Keyframes


All animations are controlled by keyframes. Keyframes are the pivotal instances that define what happens in the animation. After you place a layer on the timeline, you use keyframes to control the movement of that layer on the page. A keyframe marks a point in the animation when a change is made to specified properties (such as position or size) for the layer.

Dreamweaver interpolates valuesthat is, it creates the values needed for all frames between keyframes to come up with the path of the layer. The path line that is automatically generated between the keyframes is based on the values and locations of the layers at the keyframes. By default, there will always be a beginning keyframe and an ending keyframe, which are indicated by open circles at the beginning and end of the animation bar. An animation with only these two keyframes will move in a straight line. To create an animation that doesn't move in a straight line and has movement that is more fluid and follows a more complex path, you need to add keyframes at other frames in the timeline.

To add a keyframe, in the Timelines panel, hold down Cmd (Macintosh) or Ctrl (Windows) until the pointer changes to a circle; then click on the animation bar at the desired point or type the number of the frame into the frame text field to select it and choose Modify > Timeline > Add Keyframe. To remove a keyframe, select the keyframe and choose Modify > Timeline > Remove Keyframe.

The frame text field will tell you which frame number the selected keyframe is on. You can move keyframes on the timeline by dragging them left or right to new frames. If you want to shorten and speed up the animation or expand and lengthen it, drag the last keyframe to the left or right (respectively) to change the size of the animation barall the keyframes will automatically move proportionally to stay in the same position relative to the other keyframes. To prevent the other keyframes from moving, press Ctrl (Windows) or Cmd (Macintosh) while dragging the keyframe at the end of the animation bar. The modifier keys restrain the movement to only the last keyframe.

Note

When animating a layer containing an image, users with a Macintosh and Internet Explorer 5.0 might notice a trail of pieces of the image as it moves across the screen. Internet Explorer 5.0 on a Macintosh cannot calculate the layer dimensions as it moves across the page if the layer is the same size as the image. To fix this, you will need to change the size of the layer (or the layer you are animating) to make it larger than the image. When the layer is on the timeline, you have to change the size of the layer at each keyframe. Use the Property inspector to exactly match the sizes of the layer at each keyframe. If you have a timeline with more than two keyframes, it might be easier to remove the layer from the timeline and start again.





Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

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