Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Flash

Flash Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Working With Layers and Keyframes

Last updated Aug 22, 2003.

The world associates Flash with one thing: animation. Flash may not be the best tool for animation, but it’s certainly the most well-known. A quick visit to a Web site like AtomFilms, for example, will show you some of the innovative ways designers are using Flash animation to create Hollywood-style video shorts.

As with chess, although Flash animation is easy to learn, it can take a lifetime to master. There are essentially four types of Flash animation:

  • Frame-based animation
  • Motion tween animation
  • Shape tween animation
  • ActionScript-controlled animation

The first three animation types live in the Timeline. Generally, you’ll find that ActionScript-controlled animation is also placed in the Timeline, but not always. The Timeline, as shown below, has been part of Flash since version 1.0 and it’s where you’ll do most of your work as an animator. It’s worth your time to become familiar with the Timeline before jumping into animation.

Using The Timeline

The Timeline has various tools you can use for creating animation. In this tutorial, I’m going to focus on creating layers and frames. In future tutorials, I’ll give you a detailed analysis of each part of the Timeline.

The layers, on the left side of the Timeline, operate similarly to layers in Photoshop. You can control objects in any layer. This means that you can create a layer to be your background and additional layers for each segment of animation.

In the Timeline, time is broken down into frames. The numbers across the Timeline do NOT correspond to time, but rather the number of frames in an animation. This takes a little getting used to as you can change the number of frames that are played by second. The default playback speed for Flash is 12 FPS (frames per second), which means that for every 12 frames, one whole second of time will elapse. You can make your movie appear to run faster or slower by changing the speed of the frames per second.

The movie’s speed is highlighted on the Timeline. The following illustration demonstrates this:

You can double-click the FPS box on the Timeline to open the Document Properties window. The Document Properties Window allows you to change the frame rate.

To give you some perspective of what this can mean, here is a table listing a few standard frame rates:

  • 12 FPS — Default in Flash
  • 24 FPS — Cinema movies broadcast at this rate
  • 29 FPS — Conventional TV
  • 60 FPS — High definition
  • 100 FPS — Animation speed with a 256 MB video card

The faster your animation, the more fluid and realistic it will appear. To pull it off, however, you’ll need a computer with a good video card to process your new movie.

Working With Keyframes

Objects need to be added to the Stage for them to appear on the Timeline. In the following image, you can see that several objects have been added to several different layers:

In the Timeline, you’ll see a black dot in the first frame of each layer. This black dot is called a "keyframe." It is significant because it indicates a change in position for an object on the screen. You can move objects by creating new keyframes. You can move the helicopter, for example, from one place to another by adding a new keyframe.

To add a new keyframe, select a new frame and press F6. Selecting F6 adds a new keyframe to the Timeline. A copy of the previous frame is made and pasted into the new keyframe. You can now move the object in your new frame. Keep adding keyframes until you have the desired animation effect, as shown in the following image:

When using keyframes, you don’t need to duplicate the ForeGround and BackGround layers. However, I’ve added blank frames so that the ForeGround and BackGround layers can be seen throughout the entire animation. To add a blank frame, press F5.

Creating layers and keyframes are the first steps to learning how to create animation in Flash. In future tutorials, I’ll cover more advanced techniques, so stay tuned.