Keyframes
Frame By Frame Animation
Motion Tween Animations


 

FRAME BY FRAME ANIMATION

Frame by frame animation is accomplished by showing a series of keyframes, each with a slightly different object.

You can draw the object yourself using Flashs drawing tools, or you can display individual imported bitmap images, one after another, just like an animated GIF.

 

Drawn Frame by Frame Animations

You can draw each frame at a time, just like traditional animators. To do this youll make a number of keyframes, and then come back and fill them in. Youll make use of "Onion Skinning", a technique that will allow you to see previous frames.

 

To Draw a Frame By Frame Animation

  1. Create a new movie.
  2. Youll have to insert a bunch of keyframes. This is most easily accomplished by using the keyframe shortcut, F6. On a Mac, you may have to set the F6 shortcut in Edit-> Shortcuts.
    1. Click on Frame 1 and hit F6 a whole bunch of times

Youll get a bunch of blank frames. Youll only get a black dot keyframe when you put something on the screen.

 

Next youll turn on Onion Skinning. This will allow you to see previous frames so you can keep your animation fluid.

  1. Click the Onion Skin button

 

Onion Skin markers will appear above your frames. They look kind of like bookends.

  1. Drag the Onion Skin markers to cover five frames.

  2. Click in Frame 1 and draw something in the movie.



  1. On the keyboard, hit the right carrot ( > )
    The playback head will move one frame.
    Notice that you can still sort of see frame ones image. This is the Onion Skins working.
  2. Draw a slightly different image on Frame 2
  3. Repeat Steps 6 and 7.

 

Some effects will only be attainable through frame-by-frame animation.

 

Bitmap Frame-by-Frame Animation

Bitmap frame-by-frame animation is achieved using the same steps as above, except you wont draw on each frame. Instead, youll place a totally separate bitmap picture on each frame.

Check out Frame by Frame.fla in the Flash Samples Web Design Course Folder for an example.

Continue to Tweened Animation | Back to Courseware