Course Web Site Development:
Additional Website Components:
Web Based Animation Tools:
Macromedia Flash:
Understanding Frames & Keyframes

Before you start, it is recommended that you install Flash on your computer.  To do this, follow these directions.

This exercise will take you through the basic anatomy of Flash.  By the end of it you should have a good idea about the different components and features that go into making the program work.

  1. Open up Flash
  2. Create a new movie (File->New)
  3. Your screen will look like this:
  4. The large white space in the center of the screen is called the Stage.  The Stage is where all the action happens within your movie.  If an object does not appear on the stage, then it will not be visible to your users when you publish your project.
  5. The boxes along the left side of the screen are your drawing and editing tools.  These work similar to tools found in popular graphic design packages, such as Adobe Photoshop.
  6. The boxes along the right side of the screen are your property inspectors.  These continually change based upon what you're doing at a given time.  They will allow you to delve deeply into the appearance and behavior of all your objects on the stage.
  7. The top portion of the screen that contains the very long row with a tiled pattern of gray and white is called the Timeline.  Flash moves in three dimensions - Height, Width, and Time.  Height and width are taken care of visually on the Stage.  Time is measured by the timeline.  
  8. Notice the orange rectangle surrounding the number '1'.  That is the playback head.  Wherever the playback head is, that is how much time has elapsed in your movie.

To get a better understanding of how this all works, try the following example.

  1. Click your mouse inside the square under the #1 on the timeline.  You should be working in Layer 1 - we'll talk more about layers in a little while.
  2. Click on the Circle tool in the drawing toolbar.  Go out and draw a small circle at the left side of the screen on the stage.  Notice that the frame in the timeline changes.  It now has a small shaded in area with a circle in it.  This is called a keyframe.  Keyframes are areas on the timeline that denote a change from the previous frame.
  3. Click your mouse inside the square under the #5 on the timeline.  Go to the Insert menu and choose Keyframe.  Now click on the arrow tool and draw a box around your circle.  Move your circle to the center of the screen.
  4. Move the playback head between frames 1 and 5.  Notice how the circle changes position as it enters the keyframes.
  5. Click your mouse inside the square under the #10 on the timeline.  Go to the Insert menu and choose Keyframe.  Move your circle to the right side of the screen.
  6. Click on CONTROL->REWIND and CONTROL->PLAY.  Notice how the frames change every time the playback head reaches a keyframe.
  7. To make the animation go slower, we have a few options.  The first is to change the rate at which the playback head moves.  To do that, click on MODIFY->MOVIE.
  8. The playback rate should be set for 12 frames per second.  This is standard playback speed.  The higher this rate, the more crisp your animations will be, but the larger your file will become.  For web delivery, it is recommended that you stick with 12 fps.
  9. Another way to extend your movie is to move the keyframes.  Since the playback head must travel along the path of the timeline, extending its run will serve to slow the movie down.
  10. Drag the keyframe from frame 10 to frame 20.
  11. Drag the "end frame" [the frame with the hollow box] to frame 19.  An end frame is in a class of frames simply called "frames".  Frames are nothing more than gray boxes with or without hollow white boxes in them.  Frames denote a constant - nothing changes in a frame.  Changes only occur in keyframes.
  12. Drag the keyframe in frame #5 to frame #10.
  13. Drag the endframe in frame #4 to frame #9.
  14. Click on CONTROL->REWIND and CONTROL->PLAY.  Notice how it takes your movie longer to play.