Keyframes
Frame By Frame Animation
Motion Tween Animations


 

WORKING WITH KEYFRAMES

 

Traditionally a master animator doesnt draw every frame of the animation. The master animator will only draw the key action frames, and a flunky animator would come behind and fill in the frames in-between. If the story called for an animated character to sit down, the master animator might draw two frames, the character standing, and the character sitting. Those two frames are the Keyframes in the animation sequence.

When using Flash, youre the master animator. Youll set the keyframes. Flash, your own personal flunky, will fill in the animation between the keyframes.

 

Understanding Keyframes

When you play an animation, youll see the playback head moving across the timeline. As the playback head moves itll intersect dots in the different layers. Those dots are keyframes.

Each key frame is a critical point in the animation, where an object begins or ends an action. Among other things, the object could be fading, spinning, moving, or making a sound.

 

  1. Open Layer Example.fla
  2. Play the movie by hitting ENTER on your keyboard.
    Watch as the playback head moves across the keyframes.
  3. Use your carrot keys ("<" and ">") on the keyboard to move the playback head one frame at a time. Notice that each keyframe represents the beginning or end of a change in the animation.

It helps some people to think of keyframes as dots in a game of connect the dots. Traveling through the animation, the movie travels from dot to dot in a specific order.

 

Inserting Keyframes

Inserting keyframes is easy. You only need click the frame you want the keyframe to be on, and then stick the keyframe in. After you have the keyframe, you can place or move objects in your movie.

  1. Open a new movie
    Notice that the timeline is blank. There is one frame in the first layer, but it is not a keyframe. Its just a blank frame.
    (With a college education and a lot of hard work, many blank frames grow up to someday become keyframes).

 

  1. Draw a circle on the movie stage. Make your circle into a symbol by selecting it and hitting F8. By making the circle a symbol, we can use multiple times without fear of increased download time.
    Notice that the keyframe fills in as soon as you put something in the movie.


Anytime something changes, youll need a keyframe. Flash is nice enough to put the first one in for you. Youll have to insert the rest yourself.

 

  1. In Layer 1, Right-click (Windows) or Control-click (Mac) on frame number 10. Choose Insert Keyframe.
    Make sure you click in Layer 1, and not on the playback bar.
    You could have also clicked INSERT-> KEYFRAME, but youll be inserting so many keyframes; you might as well know the shortcut.

 

A keyframe will pop in! Notice that the keyframe is now selected on the timeline, and that anything on the screen in Layer 1 is also selected. A hollow rectangle represents the last frame in the animation span.

 

 

  1. In your movie, select the circle and move it.

 

  1. Click Frame 1
    Notice how the circle moves back to its original position?
  2. Click Frame 10
    Back and forth, back and forth.

  3. Add another keyframe at Frame 20.
    (Right-click frame 20 (Windows) or Control-click (Mac)
  4. Move the circle you drew.
  5. Play your movie by hitting ENTER!
    The circle should jump from point to point.

 

You just made your first Flash Movie! Later we will set up animations that smoothly move from point to point.

 

REVIEW STEPS FOR MAKING KEYFRAMES

  1. CLICK WHERE YOU WANT THE KEYFRAME TO GO
  2. RIGHT-CLICK (WINDOWS) OR CONTROL-CLICK (MACINTOSH)
  3. CHOOSE "INSERT KEYFRAME".
  4. MOVE OR PLACE AN OBJECT IN THE MOVIE

 

Experiment with adding keyframes and moving objects.

 

Removing Keyframes

To remove a keyframe, Right-click the keyframe (Windows) or Control-click (Mac), and choose Remove Frame.

 

Adding and Removing Frames to an Animation

You may want to add regular frames to an animation to increase its length, or remove frames to shorten. Regular frames are not keyframes. Regular frames are the frames in-between keyframes.

 

Adding Frames

To add a frame:

1.      Right-click (Windows) or Control-click (Mac) and choose Insert Frame
or

1.     Hit F5
(Mac users may have to set F5 as the "add frame" shortcut if it doesnt work. You can set shortcuts by clicking Edit-> Shortcuts)

 

Removing Frames

To Remove a Frame:

1.      Right-click the keyframe (Windows) or Control-click (Mac), and choose Remove Frame

Or

1.      Hit SHIFT + F5
(Mac users may have to set SHIFT + F5 as the "add frame" shortcut if it doesnt work. You can set shortcuts by clicking Edit-> Shortcuts)

 

Moving Keyframes

You can click and drag a keyframe, if youd like.

You can also copy and paste keyframes and groups of keyframes. You cant just use regular copy and paste, though. Regular copy and paste copies movie elements in the screen.

 

You can copy and paste frames by selecting them and clicking:

EDIT-> COPY/CUT FRAMES

EDIT-> PASTE FRAMES

 

Labeling Keyframes

When youve got a whole bunch of keyframes, sometimes its hard to tell which keyframe corresponds to which part of your animation.

 

To Label a keyframe:

1.      Select the keyframe

2.      Open the Frame Panel
(WINDOW-> PANELS-> FRAME)

3.      Type the Frame Label in the Frames palette.

 

The label will appear above the keyframe.

Continue to Frame By Frame Animation | | web design course