Animation in Flash
Animation in Flash is easy! Let's look at a couple of different ways
to achieve animation in Flash.
We built tweens in the Button and Symbols making" tutorial,
but let's do a quick review.
- Draw a shape at frame 1.
(Try a simple shape, like a heart.)
- Insert a blank keyframe at frame 30 in the Timeline. Draw another shape (like a star) in a different color at frame 30. The two shapes should be on the same layer. Click on the area between the two frames in the Timeline. The area will turn black.
- Now, open the Frames panel and choose Shape Tween. A light green
bar with a solid arrow will appear between the two frames. When
you scrub back and forth in the Timeline, the heart morphs to
the star, and changes color.
- See Example 6 in the Flash Examples section of this tutorial for a finished product.
- Create a symbol or pull one out of the Library onto a new layer on frame 1.
- Insert a keyframe at frame 30. This will keep the symbol on frame 30.
- Modify the symbol by changing the position, scale, rotation, and alpha. (Use the Effects panel for the alpha). Select the area between the frames on the timeline and it will turn black.
- Open the Frames Panel and choose Motion Tween. A light blue bar with a solid arrow will appear between the two frames. When you scrub back and forth in the Timeline, the symbol will move, scale, rotate and the alpha will change.
- Motion Tween has other options. You can choose the direction of the rotation from the pull-down menu in the Frames Panel and have the tween automatically rotate the object the number of times you specify.
- See Example 7 in the Flash Examples section of this tutorial for a finished product.
Let's say you want a small airplane to follow a path from the ground up to the clouds.
- Create a movie symbol of a little airplane with an animated propeller.
- Drag the symbol out onto the stage. You may want to add a runway and some clouds in the sky to make your animation more complete.
- Select the airplane layer and from the Insert menu, choose Timeline > Motion Guide. This creates a new layer called a Guide Layer on top of the airplane layer.
- Insert another keyframe in the Guide:airplane layer at the point where you want the motion to stop.
- Using the Pencil tool, draw a curve that you want the airplane to follow from the runway to the clouds. (It won't show up in the movie)
- Select the first keyframe in the airplane layer. Select the Arrow tool and move the airplane to the beginning of the curve.
- Now select the last keyframe. Move the airplane along the curve to the end of the curve.
- Double-click the first keyframe to open the Frame panel. Choose Motion from the Tweening menu and check Snap (snaps the registration point to the path).
- Scrub along the Timeline, and the airplane will follow the curve from first to last frame. When you publish, the plane's propellers will move. (Movie animations do not display in Flash on the stage.)
- See Example 8 in the Flash Examples section of this tutorial for a finished product.
This is the most file-size intensive
method, but sometimes it's the only way to get the effect you want.You
can turn on a nifty feature called Onion Skinning to see surrounding frames
so you can more accurately draw your frame.
- In frame one, draw a smiley face but with no mouth. (We'll add it in a minute.)
- In frame four or five, from the Insert menu, choose Keyframe. This copies the smiley face from frame one through frame four or five.
- Insert a new layer above the smiley face layer. You can call it "mouth."
- Draw the smiley mouth on the smiley face.
- Click on the Onion Skin icon from the options under the Timeline. You will see a faded version of the first frame.
- In frame two, draw another mouth on top of the faded version of frame one. Make the curve of the mouth a little straighter.
- Continue to do this for another few frames.
- Turn off the Onion Skin button.
- Now scrub through your animation. The smiley face loses its smile oh, too bad!
- See Example 9 in the Flash Examples section of this tutorial for a finished product.