acromedia’s Web site contains the prominent claim that 97.8 percent of all Web users already have Flash installed; in other words, those users can view Flash content without having to download and install a plug-in. This impressive statistic highlights the level of saturation that Flash media has achieved since its introduction more than six years ago. Flash animation is vector based, meaning that the images used in its creation are drawn with lines (vectors) and are resolution-independent, so their files are smaller than most animated GIFs, which use bitmapped images and are resolution-dependent. The first article in this series showed you the basic tasks involved in creating images using Flash MX’s drawing tools. This article shows you how to bring your images to life through Flash’s powerful animation features.

If you don’t have Flash MX, you can download a free 30-day trial version that you can use to explore Flash’s capabilities.

Setting Up the Flash MX Work Area and a New Document
Open Flash MX, click the Window menu and then click on the Panel Sets item. From the options available in Panel Sets, select Designer [1024 x 768]. As before, you will make extensive use of the Color Mixer, Tools, and the Timeline panels, but you will also be using the Properties panel at the bottom of the work area to alter your Flash movie properties as well as the objects you create.
 

After opening the Panel Set in Designer Mode, go to the Properties panel and click on the Size button. In the dialog box that appears, enter a Width value of 250 pixels and a Height value of 100 pixels. Now select a background color for the movie. Any color other than white is fine. (See the sidebar “Sample Animation Colors” for a list of colors used in the sample animation). Leave the Frame Rate option set to the default of 12 fps. The frame rate refers to the number of frames per second (fps) that your Flash movie will display. The frame rate for motion picture films is 24 fps, but Web browsers are capable of displaying only about 14 fps without difficulty. In most cases, to ensure smooth delivery over the greatest range of clients, it is best to create your Flash animations with the default frame rate of 12 fps. After setting the document size, background color and frame rate, click OK.

In this lesson, you’ll create the animation shown, which demonstrates Flash MX’s Shape Tweening and Motion Tweening features.

Organizing Layers and Setting Type
As in the last lesson, you will begin by adding and renaming Layers in the Timeline panel. Layers are necessary for two reasons:

1. They keep your document organized
2. Flash will not let you animate layers that contain more than one object.

Create three new layers for a total of four, and then rename all four in this order, from top to bottom:

1. “Motion Animation”
2. “Motion Tween TEXT”
3. “Shape Animation”
4. “Shape Tween TEXT”

When you are finished, your Timeline panel should look like Figure 1.

Figure 1: Here’s the Timeline panel with four newly renamed layers.

From the Tools panel select the Text tool. In the Properties panel choose the Helvetica font and set the type size to 28. Select a color for the text and choose the Bold option (see Figure 2 for an example of how the Properties panel should look after all you set all these options.)

Figure 2: You can view the settings for the Text tool in the Properties panel.

Next, select the Layer named “Shape Tween TEXT” and use the Text tool to typeset the words SHAPE TWEEN in all caps in the movie. Continue by clicking on the Layer named “Motion Tween TEXT” and then typing the words MOTION TWEEN in all-capital letters as well. Figure 3 shows how the final words should appear in the movie.

Figure 3: Here’s what your movie should look like after entering the text for the animation.

You will now use Flash’s Break Apart feature on the type you’ve created. The Break Apart feature uses the font information from your selected typeface to turn each letter into an editable art object. Breaking the type apart lets you create the morphing “A” that you see in the final movie (see the Flash animation on page 1 of this article) and ensures that the type will display properly on all client computers?even if the font you selected isn’t installed on the client. Select both sets of words with the Arrow tool, then select Break Apart from the Modify menu. Flash will breaks the words into individual letters. From the Modify menu select Break Apart again, to convert the letters into art objects. Now, deselect all the letters by pressing Ctrl+Shift+A, then take the Arrow tool and select the first “O” in the words “Motion Tween” and delete it.

At this point, you have to turn the remaining letters in the phrase “M TION TWEEN” into a graphic Symbol. Symbols are important elements in Flash movies and you’ll learn more about them in the next lesson; but you must create one now because Flash can only apply motion-based animation to symbols and not to actual art objects. Use the Arrow tool and click and drag to select the bottom line of type. From the Insert menu select Convert to Symbol. In the dialog box that appears, name the Symbol Motion Tween text symbol and then click the Radio button labeled “Graphic” under the Behavior option. Click OK. Flash regroups the letters and places a registration mark in the center (see Figure 4.)

Figure 4: This is how your Flash movie should look with the new symbol in place.

Creating Keyframes and the Animated Elements
Now you are going to create the objects you’ll animate and mark the timing of the animation by placing keyframes in the timeline. Begin by selecting the letter “A” and cutting it to the clipboard (Ctrl+X.) Select the layer labeled “Shape Animation,” and then choose Paste in Place from the Edit menu. Paste in Place is a Clipboard function exclusive to Flash that lets you drop an item in the exact position that you cut or copied it from. Placing the letter “A” on a separate layer lets you create the “morphing” animation.

Select the “Motion Animation” layer and use the Oval tool to create a small, (about 5-pixel-diameter) circle with a solid color fill and no stroke. Since you’ll animate this circle with a motion-based animation, you’ll need to convert it to a graphic symbol in the same manner as you converted the “Motion Tween” text. Select the circle with the Arrow tool and from the Insert menu select Convert to Symbol. In the dialog box that appears, name the Symbol Sphere symbol and click the Radio button labeled “Graphic” under the Behavior option. Click OK.

Look at your Timeline panel. It should resemble Figure 5, with a solid black dot inside the first frame next to each layer name. The dots represent an object or objects present in each layer. You will now add Keyframes to the timeline, which will allow you to animate your movie

Figure 5: The Timeline panel, ready for animation scripting.

When you look at the Timeline panel, you are looking at a snapshot of time. The frame rate for this movie is 12 frames per second; therefore, Flash will play 12 frames every second. The numbers at the top of the Timeline panel mark frames in the movie. The 12th frame equals one second of elapsed time. The 24th frame represents two seconds of elapsed time, and so on.

This movie will be only three seconds long; but major image changes will occur during each second. These changes are delimited by Keyframes. A Keyframe is a frame that contains a milestone change in a graphic around which the rest of the animation will be built. Follow the next steps closely to see how to build a Flash animation around keyframes.

In the Timeline panel, position your cursor in the top layer anywhere in the 12th frame, and then click and drag your mouse from the top layer all the way to the bottom layer and release the mouse button. All four layers should have the 12th frame highlighted, as in Figure 6.

Figure 6: Click and drag across all four layers to select the 12th frame.

From the Insert menu, select the Keyframe option. Doing that causes frame 12 to become a keyframe in all the layers. You can differentiate keyframes from non-keyframes visually; notice that the IDE places black dots in frame 12 on all four layers and fills the in-between frames with a gray color. Repeat the click and drag selection process across all four layers at frames 24 and 36, inserting keyframes at those intervals as well. When you are finished, your Timeline panel should look identical to Figure 7.

Figure 7: The Timeline panel, with all keyframes in place.

Now you will put the shapes in place for the letter “A” to morph into during the Shape Tween. In the Timeline panel, click on keyframe 12 in the “Shape Animation” layer. Refer to Figure 8 to ensure that you select the proper keyframe in the correct layer.

Figure 8: Here’s how the Timeline looks when you select keyframe 12 in the “Shape Animation” layer.

Delete the “A” and replace it with a circle with a solid fill and no stroke using the Oval tool. Return to the Timeline panel and click on keyframe 24 in the “Shape Animation” layer. Delete the “A” and replace it with a square with a solid fill and no stroke using the Rectangle tool.

Tween Animations
You are now ready to animate the movie. Flash has two ways of generating automatic animations: Shape Tweening and Motion Tweening. The term “Tweening” refers to the process of generating the visual content for the frames that exist “in-between” keyframes. Shape Tweening basically involves morphing one shape into another. Motion Tweening is much more common and consists of moving an art object through space or different visual states.

Create a Shape Tween Animation
Start by applying a Shape Tween to the letter “A.” Select frame 1 in the “Shape Animation” layer in the Timeline panel. In the Properties panel, select the “Shape” option from the Tween pull-down menu (see Figure 9.)

Figure 9: Select the Shape Tween from the Properties panel

Repeat these steps for keyframes 24 and 36 in the “Shape Animation” layer. When you are finished, note that the timeline for the “Shape Animation” layer has turned light green, with arrows bridging the gaps from keyframe to keyframe. The light green color and arrows indicate that a Shape Tween occurs during those frames. Your Timeline panel should now look like Figure 10.

Figure 10: Here’s the Timeline panel after setting a Shape Tween for the Shape Animation layer.

Select the first frame of the timeline and press the “Enter” key. The “A” morphs into other shapes and back into an “A”, but the morph is a little sloppy. You can correct this with Shape Hints. Shape Hints are specific points that Flash uses to control Shape Tweens. Select the first frame of the timeline in the “Shape Animation” layer, and from the Modify menu scroll down to Shape and choose Add Shape Hint. A small dot with a lower case “a” will appear on the movie. Click on the dot and drag it into the position shown in Figure 11. Add two more Shape Hints, (they will be labeled “b” and “c”) and place them on the letter “A” as in Figure 11. (You may need to zoom in using the View menu to place the Shape Hints accurately.)

Figure 11: Keyframe 1 should look like this after you place the Shape Hints for the tween animation.

Next, select keyframe 12 on the “Shape Animation” layer in the timeline. Flash automatically places Shape Hints in that keyframe for you. The Shape Hints may all be on top of one another though, making them a little difficult to see. These Shape Hints serve as “ending” points for the Shape Hints in keyframe 1. Click and drag all three Shape Hints into place as illustrated in Figure 12. Press the “Enter” key to see the new, smoother shape morph between the letter “A” and the circle.

Figure 12: Keyframe 12 should look like this after you place the Shape Hints for the tween animation.

Select keyframe 24 on the “Shape Animation” layer in the timeline. Set four Shape Hints at each corner of the square and place their corresponding end points in keyframe 36 as shown in Figure 13. Press the “Enter” key to see how the square takes on the shape of the “A” more easily.

Figure 13: Here’s how keyframes 24 and 36 should look with the Shape Hints in place.

Create a Motion Tween Animation
Now that you’ve completed the Shape Tweening, you can animate the sphere on the “Motion Animation” layer in an orbital path. Flash can easily move a symbol from point to point along a straight line, but to get the Sphere symbol to move in a circular motion requires a Motion Guide. Motion Guides are simply paths of any shape that serve to guide a symbol along a specific route. In this case, the Motion Guide for the Sphere symbol will be a simple circle.

Select keyframe 1 in the “Motion Animation” layer and then click on the Add Motion Guide button to add a Motion Guide layer to the “Motion Animation” layer. Figure 14 shows the Add Motion button location and shows how the Timeline should appear after you click the button.

Figure 14: You can find the Add Motion button under the Timeline. Here’s how the Timeline should appear after you click the button.

Select keyframe 1 in the Motion Guide layer and draw a perfect circle with a stroke of black and no fill using the Oval tool. This Motion Guide circle will be visible only while you’re working in the Flash document; it will not be viewable in the published movie. See Figure 15 for the approximate size and placement of the motion path.

Figure 15: The Motion Guide for the orbiting sphere symbol appears only in the Flash IDE, not in the finished movie.

Select keyframe 1 on the “Motion Animation” layer. Click and drag the ball to the top of the circle. Note that because the Motion Guide layer is linked to the layer you are working in, the sphere symbol easily snaps to the motion guide path. After placing the sphere at the top of the circular motion guide in frame 1, refer to Figure 16 to see the approximate placement for the sphere in keyframes 12, 24 and 36.

Figure 16: Set the positions for the orbiting sphere on the motion guide at keyframes 1, 12, 24 and 36 as shown.

154

Finally, select keyframe 1 in the “Motion Animation” layer. Apply a Motion Tween by going down to the Properties panel, and selecting the “Motion” option from the Tween pull-down menu. Repeat the process for keyframes 12 and 24. Your timeline panel should look identical to Figure 17, with the “Motion Animation” layer colored in light blue and arrows that indicate a Motion Tween occurs between keyframes. Press the “Enter” key to preview the animation. Save your Flash file, if you haven’t already.

Figure 17: Here’s the final Timeline, with all the animation scripting in place.

PublishYour Work
If you wish to preview your movie as it will appear in a stand-alone Flash file, go to the Control menu and select the Test Movie option. When you are finished previewing the movie, you can simply close the window. To create a final Flash file and embed it in an HTML page click on the Arrow tool, move down to the Properties panel and click on the button labeled Flash Player 6

In the dialog box that appears, simply click the “Publish” button. Clicking the Publish button creates an HTML file with your animated movie embedded in it, located in the directory where you saved your .fla file. To see the completed image, load that HTML file into your browser.

Congratulations! You’ve just completed your first venture into Flash animation. Animation is an extremely visual medium, and this tutorial covers only the basics. If you want to experiment on your own, try adding more Shape hints to the letter “A” and the square. This will give you a better idea of how much control you can exert over Shape Tweens in Flash. You might also try drawing more complex or abstract paths in the Motion Guide layer to see the limitless number of ways you can guide an object along a path.