logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Animation Behaviors in Motion Project

Importing Photoshop Images into Motion

Motion 3D Animation - The Graphics

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor