Click to Show Lecture Notes

ANIMATION: The Components

Several general animation terms have a specific meaning in Flash. You'll want to understand both the general meaning and how the term applies to Flash.

NEW TERM: Framerate is the rate at which frames are played back for the user, measured in frames per second (fps).

Framerate Versus the Number of Frames

When you design your animation, you want to pick a framerate and stick to it. When you change the framerate, you're changing it for the entire movie. So, fixing one part of the movie will make changes to the entire movie.

There are other ways to change the effective speed. It's hard to estimate the right speed for an animation until you consider the framerate at 12fps.

NEW TERM: Effective Speed is how fast something seems to move. Actual speed, is absolute and can be measured. If an animation uses 12 frames (at12fps), the elapsed time of 1 second is its actual speed. Effective speed is a psychological impression of what is happening. If a lot of action occurs in those 12 frames, it's effectively fast. If only one slight change occurs, the effective speed is slow.

Framerates of Different Types of Animation

Different media use different framerates. For instance, motion pictures use 24fps. Television uses 30pfs. Flash uses 12pfs, and if you go much below this, your user will notice much jumpiness. If you use a higher number it will be very real looking. As nice as this seems, running movies at high frame rates requires a bigger file size and places a burden on the computer receiving the Flash movie. It might not be able to keep up and slow down the movie so that it appears jumpy. Remember, that framerate is important, but it isn't everything!

Keyframes and Blank Keyframes

A keyframe is simply a frame in which you establish exactly what should appear onstage at the particular point. A blank keyframe is still a keyframe; it's just one in which nothing appears onscreen.

You have two things to decide when creating keyframes: When you want them to occur (in the Timeline) and what you want to appear onscreen at those moments.

To establish a keyframe, click the cell in the Timeline exactly where you want a keyframe and select Insert > Keyframe (or press F6). Flash copies the previous keyframe and places it inside the new keyframe, if it was blank, then that will be what is placed inside. (This is a good thing since this keyframe is a copy and the original is still safely intact.)

NEW TERM: Scrub is a term used in all kinds of animation software. It's a technique to preview your animation. You simply grab the red current frame marker and drag it back and forth (through all the frames of your animation). You move your mouse in a scrubbing motion, hence the name.

Take a peek at one of the movies that comes with your installed copy of Flash MX before you begin the session. (You can follow along with the Practice Session on this movie as well as the one suggested in the session, if you open the movie in Flash). Find this by choosing C: > Program Files > Macromedia > Flash MX > Samples > FLA > Import_video.fla. Click on the Glasses icon to view this movie as a .swf file.

Play a movie that is from the samples folder that came with Flash MX

Hide the Image

Click for Practice Session on Animation Analyze a Finished Animation

TASK: Analyze a Finished Animation

In this task you'll view a sample animation and make some edits so you can better understand keyframes.

 

  1. Download the file "keyframing.fla" from the following address: http://www.phillipkerman.com/teachyourself/sourcefiles/keyframing.fla In Flash, open this file and then press Enter to watch the animation.


  2. A Timeline with many Layers
    Hide the Flash Movie


  3. There are separate layers (Sparkle, X, M, Flash, and Background) Look at each separately. You may have to resize the height of the Timeline.


  4. It will be easier to make edits when the Timeline preference "span-based selection" is selected (under Edit, Preferences, General) Please make this selection.


  5. The Background layer appears initially in frame 1 and remains unchanged onscreen for the duration of the animation. Notice that there's a keyframe in frame 1, followed by many regular frames.


  6. Scrub frames 31 through 60 by dragging the current frame marker in the numbered area of the Timeline. Notice the animation of "Sparkle". In the Sparkle layer, you'll notice a keyframe in each frame from 31 to 54. Onscreen, a different drawing of the sparkle appears for each frame. Scrub past frame 54, and the sparkle is gone. That's because in the Sparkle layer, there are no frames after 54.


  7. The layer called Flash is more interesting. In frame 1 the word "Flash" appears, but there isn't another keyframe until frame 4, where the word changes. Then in frames 4 through 15, a different keyframe for every frame contains a modified image of the word (to make it look like it spins). You can press the comma and period keys to step through this animation (as scrubbing might be too abrupt).


  8. Both the "M" and "X" layers are interesting to view. Look on the Timeline to see where they start, stall, and change.


  9. Observe the results of adding frames after frame 29 in the "M" layer. Click the cell at frame 60 and select Insert >Frame (or press F5). When you play the animation now, the "M" never disappears.


  10. You can continue to tinker with this file later, but for now close this file without saving.


  11. Hide Practice Session
Page Updated on March 2, 2003