Create Flash Animation

Animating 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.

Shape Tween

* 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.

Shape Tweening Heart
Shape Tweening Star

* 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.


Motion Tween

* 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.

Animations can be reused. For example, let's say you create an animation in a movie symbol of a bouncing ball. You could pull that ball out of the Library as many times as your computer can handle. You can put them all on independent layers, animate the position, scale, tint, alpha, etc.

Animating along a Path

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.

Frame by Frame Animation

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.

Onion Skin Icon

Exercise:

* 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.

Smiley Face Animation

* 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.