Macromedia Flash MX 2004 Course

Macromedia Flash MX 2004 Section 4: Flash Animation

In this section, you will learn:

• Creating motion tweens
• Creating frame by frame animations
• Using motion guide layers
• Create shape tweens
• Adding timeline effects

Creating Animation

Introduction to Flash Animation

Despite all the newer features that make it possible to develop Rich Internet Applications in Flash, at its heart, Flash is an animation tool. As such, it relies on the Timeline, which controls what the user sees on the screen (though this is no longer true in Flash MX Professional). Creating animations in Flash is very similar to creating cartoons on paper and then shuffling the paper to simulate motion. Each frame on the Timeline would represent one of those pieces of paper. As the playhead moves from frame to frame, the user sees whatever objects appear on the frames. With minor differences in the objects in each frame, the objects appear to move and change shape.

Of course, this is a very simplistic explanation of Flash’s power. In reality, you no longer have to create minute variations for a moving graphic—Flash can take two graphics and plot the steps required to gradually move from the first to the second. This is called “tweening”. (“Tweening” stands for “in between”, referring to the middle frames Flash fills in for you.)

For complex animations in which it’s important to show specific changes (like facial expressions), it’s better to add the graphic for each frame manually. But for simpler animations, Flash can not only fill in middle frames for you, but also morph an object’s shape over the course of several frames, and plot a course of movement across the Stage based on lines or curves you draw. Flash’s built-in Timeline effects let you add pre-designed animation effects to objects on the Stage.

You aren’t limited to graphics in Flash, either. You can introduce and fade out sounds and video, “change screens” (move to a new frame) based on user input, and control how objects are animated on the Stage based on user input or other events. For example, you can write a collision-detection script that tells Flash to move the playhead to a different frame (to display a new animation) when two objects collide or move too close to each other. Animations can be “nested” or embedded in other animations, which are nested in other animations and so on, creating extremely complex but compact movie clips that can be used over and over again.

Creating Motion Tweens

A motion tween is created by placing two instances of an object, each with different properties (color, size, position, etc.), several frames apart and then instructing Flash to fill in the middle frames. The motion tween displays a gradual change from the first object’s instance to the second.

The start and end object instances are placed on special frames called keyframes, which you’ll insert into the Timeline. A keyframe is simply a frame used to hold objects that represent changes in the animation (such as a new graphic) or actions that control the movie.

To create a motion tween:

1. On the Timeline, select the layer and frame where you want the animation to start. In a new Flash document, you can select the first frame of Layer 1.
2. Place a starting object (for example, an instance of a graphic symbol) on the Stage. You should position it where you want the object to appear at the beginning of the animation.

1. On the Timeline, click a different frame on the same layer, several frames away from the starting frame.

1. In the new frame, insert a keyframe: from the Insert menu, select Timeline and then Keyframe. Or, right-click and select Insert Keyframe from the shortcut menu, or just press F6 on your keyboard.

The keyframe appears as a black circle inside the frame:

When you insert a keyframe, Flash copies the objects on the Stage from the last keyframe and pastes them into each subsequent frame through the new keyframe. If you click on any frame between the two keyframes, you’ll see your object selected on the Stage:

The magic of animation is simply altering those objects. In frame-by-frame animation, you would select each frame in turn, create a new keyframe, and then move or replace the object. However, in a simple animation, Flash can make these individual changes for us based on the objects in the beginning and ending keyframes.

1. Right-click on any frame between the two keyframes and, from the shortcut menu, select Create Motion Tween (this command is also available from the Insert Timeline submenu).

Flash indicates the motion tween with a forward arrow leading from the first keyframe to the second:

1. Remember, we haven’t changed our object on the Stage, so the motion tween doesn’t do us much good—our car isn’t going anywhere. We need to add our ending instance of the object. We’ll use the same graphic on the Stage, but we’ll move it to a different location, so the animation will appear to show the car moving from one point to the next.

Click the second keyframe on the Timeline to select it:

1. On the Stage, move the object to a new location:

1. We can change other properties of the object, as well, depending on the effects we want to achieve. For example, to make the car gradually fade out as it drives away, change its Alpha value to 0%:

Note:

If you can’t see the list boxes on the left side of the Actions panel, click the arrow button on the left side of the Script pane.

1. 1. Double-click the stop function to add it to the Script pane.

Flash inserts the code:

This is the only code you need to stop the current animation. You could have just as easily typed it into the Script pane: stop();

On the Timeline, Flash inserts a small “a” into the keyframe, which tells you that an action appears on that frame:

You can always adjust the length of an animation by clicking and dragging the second keyframe to a new location in the Timeline:

Flash automatically adjusts the motion tween to accommodate the new frames. If you do adjust the Timeline, be sure to drag the keyframe with your stop action to the new location:

Creating Frame-by-Frame Animations

As mentioned earlier, you use frame-by-frame animation when a graphic changes in every frame. Although it’s more time-consuming (and results in a larger file size) than tweening, frame-by-frame animation is essentially created the same way as tweened animations:

1. Click the layer and frame where you want the animation to begin.
2. Insert a keyframe by pressing F6 on your keyboard.
3. Add the starting graphic to the Stage, in the position where you want it.
4. Click the next frame on the same layer and insert another keyframe (F6) to copy the graphic from the last frame, or insert a blank keyframe (F6) if you want to add a new graphic.

For example, if you’re animating a comic face, the second graphic might show the eyebrows slightly raised and the eyes subtly widened. If the animation shows the same image in motion, nudge the position of the graphic.

1. Continue as above, replacing and repositioning graphics in each keyframe.

1. To test the animation, drag the playhead along the Timeline, or press Ctrl+Enter (or Cmd+Return) to test the compiled movie.