Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Flash CS4’s New Animation Method
Flash has two core animation methods: the “classic” method and the new method, which is available for the first time in Flash CS4. This new method is useful for simple animations (e.g., text flying onstage). For more complex work, switching to the classic method is often best.
Since it’s a bit simpler, let’s start by trying the new method.
- Continue working in the same file or open text_added.fla from the -Chapter_02 Project Files folder. Right-click a plane (making sure it’s on a layer by itself).
- From the context menu, choose Create Motion Tween.
- Drag the plane to a new location on the Stage (or offstage if you want it to leave the screen—the gray area around the Stage won’t be -visible in the published file).
- Point to the motion path with the Selection tool. When the cursor is right up against it, a curve appears. Click and drag to manipulate the shape of the path.
- Switch to the Subselection tool (the white arrow), and click the head or tail, or the motion path (which looks like unfilled circles).
- Flash displays Bezier control handles on the motion path. Experiment with dragging the handles to adjust the motion path.
- Drag the playhead right and left to watch the animation.
- Place the playhead at frame 20, and drag the plane to a new location.
- Move the playhead to frame 10, drag the object to yet another location. Each drag at a new point in time adds a new keyframe. The animation is not realistic because the plane isn’t facing the direction it’s flying.
- To fix this, click inside the tween span in the Timeline, and then select the “Orient to path” option on the Properties panel.
- Press the Return (Enter) key to play the animation in realtime. As the animation is playing, you can press Return (Enter) to pause it. Press Return (Enter) again to replay the animation from the beginning.
Flash adds a blue span to the Timeline and moves the playhead to the end of the span. On the Stage, you’ll see everything vanish except for the plane. This is because the plane tweening extended the plane’s “lifetime” to frame 30, whereas all the other images just exist in frame 1. Later, we’ll extend all the images so that they exist as long as the plane.
){kind=small}
Note that there is only one keyframe symbol for this layer (a black dot), which is at the start of the span.
)
There’s now a second keyframe at the end of the span. The dotted line indicates the motion path of the plane.
){kind=small}
)
)
)
)
Notice that Flash places a keyframe on every frame of the tween. This is because it has to calculate frame-by-frame rotations to keep the plane facing the right direction.
You’ve surely noticed at this point that the water, map, and other vehicles vanish after the first frame. By default, all layers have a one-frame duration. Don’t worry, you’ll solve this problem next.
Extending Layers in Time
When you add an asset to a new Flash layer, it only exists for one frame. However, you can extend its life so that it exists for as long as you like. Here’s how.
- Right-click frame 30 of the water/map layer.
- From the context menu, choose Insert Frame.
)
Flash extends the layer so that it lasts until frame 30. Each time you do this, a nonanimated layer will exist longer in time. Extend the text layers so that they also exist for 30 frames.
)
One Keyframe to Rule Them All
After Effects animators may be wondering how to access layer Transform properties. From an After Effects standpoint, it’s a bit odd that you just animated the position of a layer without first accessing its Position property. If you think that’s odd, prepare yourself for a real twilight-zone experience.
- Move the playhead back to frame 1, and select a different plane. Using the Free Transform tool (Q key on the keyboard), rotate the plane so that it’s facing the direction you want it to move.
- Right-click it and select Create Motion Tween. The plane’s Timeline span increases to 30 frames and the playhead moves to the end of the span.
- Leave the playhead at the end of the span, and move the plane to a new position.
- Press Q to switch to the Free Transform tool and resize the plane by dragging inward to make the plane smaller. Additionally, slightly rotate the plane by moving the cursor just outside the transform boundaries, and drag inward to make the plane smaller.
- Press V to switch back to the Selection tool, click the plane, and in the Properties panel, choose Alpha from the Style drop-down menu (under Color Effect). If it’s not already set there, drag the slider to 0%.
- Press Return (Enter) to see the plane move, resize, rotate, and fade out.
- If you just want to, say, get rid of the fade without deleting all the other transforms, right-click the end keyframe and choose Clear Keyframe > Color (because Alpha is a Color Effect).
- Press Return (Enter) again to view the animation. Remember to save your work.
)
Notice that there is only one keyframe at the end of the Timeline. That keyframe holds information for all the animatable properties. Unlike in After Effects, there aren’t separate keyframes for Position, Rotation, Scale, Opacity (Alpha), and Effects.
){kind=small}
This may seem too simplistic to you. When Flash is overly simple, it’s usually because—historically—it was built to be a simple tool for nonprofessional animators. However, if you want finer (property-by-property) control, stay tuned.
){kind=small}