Animation Learning Guide for Flash: Timelines and keyframes

Keyframes and property keyframes

Keyframes and property keyframes are locations on a timeline where you either define a new copy of an object or changes to the properties of a motion-tweened object. A keyframe represents a new instance, or copy, of an object, such as a new instance of a movie clip symbol. A keyframe is represented by a solid dot. When you create a frame-by-frame animation, most frames are keyframes because you're creating new content in each frame to create the illusion of movement.

When you create a motion tween, every tween span has a single target object for the entire duration of the tween span. Therefore, the keyframe is always (and only) at the first frame of a tween span. Further changes on that tween span are called property keyframes, since they are not copies of an object, but instead represent changes to individual properties (x, y, scale, skew, rotation, or other properties) of the same object.

Note: Shape tweens do not share the concept of property keyframes or a single object per tween. A shape tween creates an animation by interpolating between two shapes or objects, as it did in previous versions of Flash. For more information on keyframing for shape tweens, see "Creating shape tweens."

A property keyframe is a new concept in Flash CS4. In motion-tweened animation, you define property keyframes at significant points on a tween span and let Flash create the animation between those property keyframes (on the in-between or tweened frames). Therefore, a property keyframe is where you want the animation to change. For example, you may want the blur to animate between frame 5 and frame 10. You make the initial blur setting at a property keyframe at frame 5, and a different setting on another property keyframe at frame 10. The blur then animates between those two settings between frames 5 and 10.

One way to think of the difference between property keyframes and traditional keyframes is to think about how they relate to the properties of an object. In Flash, an object has properties like X position, Y position, width, height, and rotation. A traditional keyframe is actually a full copy of an object. That copy has an X, Y value as well as a width and height, so the keyframe contains a value for all of the object's properties. In the new tweening model, Flash no longer tweens between multiple copies of an object. Instead, Flash treats each property as a completely separate entity, so each property has its own keyframes that define a value for the property at a specific time. For example, Rotation can have a keyframe at frame 1 and frame 20, and Width can have keyframes at frames 2, 5, 10, and 15. The use of property keyframes is consistent with other animation tools such as Adobe After Effects CS4. This model is much more flexible and powerful than traditional keyframes, as you will learn elsewhere in the Animation Learning Guide for Flash.

Keyframes and property keyframes are indicated in the Timeline, and (for a tween span) in a timeline and also in the Motion Editor. In the timeline, a keyframe with content (a new object) on it is represented by a solid circle, and a blank keyframe is represented by an empty circle within the frame. Property keyframes (changes in a property for a tweened object but not a change of the object itself) are represented by a small diamond. Subsequent frames that you add to the same layer (that don't have a solid circle) have the same content as the keyframe.

Page 2 of 5

Previous Page

Next Page