KEYFRAMES

The concept of moving pictures being familiar to you all, I will skip the background theory and practice.

Each frame in a layer (called a protoframe until it has something in it) represents a moment in time. You do not have to place a new image in each frame to make a movie. All you need to do is place keyframes across the layer, and then ask Flash to ¡¡ãtween¡¡À between those keyframes.

A keyframe defines a shift in content. The black dots in the timeline represent changes that occur. The black dots in the ¡¡ãsunflower¡¡À layer represents the position and appearance of the sunflower symbol at those moments in time.

Clicking on a non-keyframe will show you what¡¯s happening, but you can¡¯t edit anything unless you make it a key frame (just press F6 and it will change into one).

Connecting the keyframes using animation is called ¡¡ãtweening.¡¡À Flash takes the symbol in the first keyframe, and gradually (over the number of frames between keyframes) transforms it into what it looks like in the next keyframe. Transformations include position, size, color, transparency, rotation, movement and so on.

It¡¯s very simple. Place a symbol on the stage at the beginning of the layer. Click on another frame later on (say, frame 20) to select it, and choose insert keyframe (from the Modify menu) or F6. Flash inserts the same symbol in the same location on frame 20. You now have about a 2 second movie of an object sitting still.

To make the symbol move, click on frame 20 and move the symbol.

Then select the first keyframe and from the Modify menu, choose ¡¡ãcreate motion tween,¡¡À or select ¡¡ãmotion tween¡¡À from the properties palette, or (my favorite) click and hold on the first keyframe to get a popdown menu and select ¡¡ãcreate tween.¡¡À (This trick only works for motion tweens, however.)

One thing you must remember is that you cannot create tweens between more than one symbol per layer. You can¡¯t even place a simple drawing on the same layer with a symbol if you want to tween. It makes Flash crazy.

Once you¡¯ve got something on a layer that moves, there are two ways to preview the action. The first is with the control window (Window > toolbars > controller). This is a standard graphic representation of play, stop, and rewind, as well as step forward or backward one frame. The other is command return. This command opens a Flash Player window and automatically plays the action over and over again. Both are valuable in their own ways.

After previewing what you¡¯ve done, you may decide that something isn¡¯t exactly right. You can click anywhere between two key frames and insert another (F6).

Having created a new keyframe, you can now make adjustments to the symbol to fix the action.

By the way, you could think of keyframes as creating the opportunity for an instance, if that helps keep things straight.

ONION SKINNING

Original cell animation allowed the artist to see the position of objects before the one s/he was working on. This is called ¡¡ãonion skinning¡¡À in Flash (and other animation programs). It allows you to see what is on the frames before and/or after the current frame.

The two options for onion skinning (just below the frames at the bottom of the timeline) are onion skinning which shows previous frame objects in paler colors, or ¡¡ãwire onion skinning,¡¡À which just shows you the outlines of the objects on previous frames.

When you select an onion skinning option, Flash indicates the frames being viewed with a grey marker at the top of the timeline. To see more or fewer frames, pull the edges of the indicator in or out.

To move all the objects on a layer, or within a tween¡ªto a different location on the stage, for instance¡ªclick on one of the onion skin options, and drag the grey bar so it covers the frames you want to move. Then click on the edit multiple frames button. Union skin the range of frames you want to edit.

Click inside the stage area and choose Edit > select all (command A) to highlight the objects, and drag them to a new location on the stage, resize them as a group, or otherwise modify everything at once. Lock any layers you don¡¯t want to mess up.

FRAME RATE

The speed of your movie makes all the difference between a cheap .gif animation and a real nice, smooth and professional one. Regular film animations use a frame rate of about 29.9 frames per second (fps). The default frame rate in Flash is 12 frames per second. You can change that in the movie properties dialog box by clicking on the frame rate under the time line or using the properties palette.

The higher the frame rate, the more frames you need, or your movie will be over before you can blink. In any case, I would never recommend anything faster than 18 fps for the web¡ªthe file size will be too large, making it slow to load and weird when it plays.

Remember that the frame rate applies to the whole animation¡ªyou can¡¯t speed up or slow things down within an animation by changing the frame rate at random: use fewer or more frames to speed up or slow down the animation.

FRAME TRICKS

Once you¡¯ve made something happen once, you may want it to go back (in an animated way) to where it was originally. Rather than redoing the whole process in reverse order, it¡¯s a simple matter to take what you¡¯ve already done and reverse it.

Simply select all the frames you want to reuse and instead of copying them, choose Edit > timeline > copy frames.

Select the keyframe(s) where you want the action to start going backwards and choose ¡°paste frames¡± from the edit menu. Make sure all the newly pasted frames are selected. Then, use Modify > timeline > reverse frames. That¡¯s all there is to it!

If you¡¯ve developed a sequence within a movie that you want to use over and over again¡ªsay a star that flashes every once in a while, you can actually turn that sequence of frames into a movie clip symbol which then allows you to use it whenever you want, without cutting and pasting frames each time. This too, is easier than you might think.

First, using motion and/or shape tweening, develop the animation you need on the stage. Select all the frames and copy them (Edit > timeline > copy frames).

Choose ¡°new symbol¡± from the Insert menu (F8). Make sure it is defined as a graphic.

Select the first frame of the timeline in edit symbol mode, and then Edit > timeline > paste frames. Flash will place all the frames and layers onto your stage and into the timeline.

In your library, you will see a new symbol that represents your animation. Whenever you want to use it, simply drag it from the library to the stage.

Even though this animation is represented with one dot on the timeline, it still requires time to play. You must have the number of frames required to view the animation in its entirety or you will only see the first frame(s) of the animation.

Animated symbols (where you would choose ¡°movie clip¡± in the new symbol pop-up box) are made the same way as animations saved as graphic symbols. The difference between the two is that a movie clip symbol can be placed into a single frame of a movie and it will play over and over, independent of what else is going on.

To make a file really, really small, you could even turn your whole movie into a movie clip, place it in a frame in a new Flash file and export it for use on the web.

In a small experiment, I discovered my original 17K file was reduced to 8K by doing this.