Designing With Flash: All About Key Frames

This article explains what keyframes are, what they do, and how they are used.

Flash is an easy to use application that helps you develop rich media content for your web site. Traditional object animation involved making a series of drawings in which an object changes slightly from drawing to drawing. Lining up these drawings one after the other formed the animation. Flash does something similar. Each frame represents a single drawing. The timeline displays the frames serially. The advantage of using Flash is that it is a vector-based program, which means that the graphics are stored in a mathematical form, or as vectors, rather than as pixels. Vector information takes up less space than pixel graphics, which means Flash files are much smaller and load faster.

The keyframe is one of the basic elements of a flash movie. It marks where an event begins, for example, the size and location of a symbol, and where the event ends. Keyframes need to be placed in a frame the first time you use a symbol, and anytime the appearance or location of that symbol changes. Keyframes can also contain actions that change the flow of the movie.

Let's take the example of moving an object from the left side of the screen to the right. To do this we need to determine where on the stage we want the object to appear, how much time it should take to move, and where on the stage it should end. We can then instruct Flash to create the animation in between. The two frames at the beginning and end of the animation are the keyframes. The number of frames in between the keyframes determine how long it will take the animation to occur. The framerate (in the Properties window) is normally set to 32 frames per second for high quality animations, but for faster loading animations, should be set to 12 frames per second.

In order to create a Keyframe, select the frame where you want to start your animation and click Insert and then Keyframe, or right click on the frame. You can also click on the frame and hit F6 to automatically insert a keyframe. Once you've inserted the key frame a hollow dot will appearing the frame. Now place an object on the left side of the stage in your keyframe. The hollow dot now becomes a solid black dot. Create another keyframe several frames ahead of the first one. Your object should be visible on the stage in this new keyframe. Move your object to the right side of the screen.

The term "Tweening" is a mixture of the words "in between". Tweening simply means going from one keyframe to another while taking small steps for each of the frames in between. Once you have inserted your two key frames, one at the beginning of your animation, and one at the end, you can now tween your object. Right-click on one of the frames in between your two keyframes and select Tween. You can choose to do a Motion tween or a Shape tween. A Motion tween moves a symbol from its location in your first keyframe to the location in your second keyframe. A Shape tween can only be used with objects that have not been converted to symbols, and it morphs the object from one shape to another. For our example, select a Motion tween. You should see a black line and purple fill now between your two keyframes. When you test your movie, your object will move smoothly from one location to another.

© High Speed Ventures 2011