Flash Keyframes and Animation

Flash Keyframes and Animation
FlashR CS6 is a frame-based animation software. But just what does that mean? Much like an old movie film strip, the Flash Timeline contains individual frames that when played in sequence creates animation.

There are two types of frames in the Flash Timeline. They are Keyframes and frames. Keyframes are used to indicate important points in the animation. We will continue to use the project file that we created in the past tutorial to demonstrate what a Keyframe is and how it works.

We will create a simple animation that will move the circle from the left side of the stage to the right. This is called a linear animation because the object moves along a straight line. We will use the same 50 frames that we already have on the Timeline. To control this simple animation, we only need two control points, or Keyframes. The first Keyframe will be at the start of the animation and the second Keyframe will be at the end.

Open your project file. Flash automatically adds a Keyframe to the first frame of every layer. So on the circle layer, we already have a Keyframe on Frame 1.

1. Select the first frame on the circle layer to move the Playhead to Frame 1.

On this frame, the circle is at the left of the stage.

2. Move the Playhead to the last frame - Frame 50.

3. Right-click on Frame 50 and choose Insert Keyframe from the menu.

3. With the Selection tool, click on the circle and drag it to the right edge of the stage.

Now drag the Playhead backwards to Frame 1. As you can see, the circle jumps from the right position back to the left position. This really isn't much as an animation. What we need is to move the circle a little amount to the right on each of the 50 frames. Before there was animation software, the animator would draw each of these 50 frames making slight changes to the circle's position on each frame. These individual frames between the first and last frame are called "tweens". However, Flash can perform this laborious task for us.

4. Right click on any frame between Frame 1 and Frame 50. Choose Create Classic Tween from the menu. You will see the color of the layer change and an arrow added.

Now drag the Playhead along the Timeline again. This time, we see the circle move along the stage in small increments.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2022 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.