g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.


Add Flash+Keyframes+and+Animation to Twitter Add Flash+Keyframes+and+Animation to Facebook Add Flash+Keyframes+and+Animation to MySpace Add Flash+Keyframes+and+Animation to Digg Flash+Keyframes+and+Animation Add Flash+Keyframes+and+Animation to Yahoo My Web Add Flash+Keyframes+and+Animation to Google Bookmarks Add Flash+Keyframes+and+Animation to Stumbleupon Add Flash+Keyframes+and+Animation to Reddit


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

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor