he previous lesson in this series (Learning to Animate in Macromedia Flash MX) introduced you to the Timeline and Keyframes?the basic building blocks of Flash MX animation. After this lesson, you’ll be able to use Graphic Symbols and Movie Clips to create lightweight and more complex Flash movies. Symbols are important in Flash animations because they reduce file size and are necessary for adding interactivity to your movies.

There are three types of Symbols in Flash: Graphic Symbols, Movie Clips and Buttons. For the purposes of this lesson, you will use the first two Symbol types to create an animated Flash file that requires 2K!

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

After opening Flash MX, click the Window menu and then click on the Panel Sets item. From the options available in Panel Sets, select the item Designer [1024 X 768]. The Color Mixer, Tools, Timeline and Properties panels are still your primary working areas, but you will also need to open a new panel because you’ll be creating Symbols for this lesson. From the Window menu, click on the Library option. A floating palette will appear. It’s empty for now, but as you create Symbols, the Library panel will store them for you to drag and drop onto the stage.

After changing the Panel Set to Designer Mode, go to the Properties panel and click on the Size button. In the dialog box that appears, enter a Width of 250 pixels and a Height of 150 pixels. Next, select a background color for the movie. As before, use any color other than white. (See the Colors Used in the Sample sidebar for a list of the colors used in the sample movie.) Ensure that the frame rate is set to 12 as in the last project and click OK.

You will create a Flash file (see Figure 1) that relies on Movie Clips to generate a single-frame looping animation.

Creating the First Symbol and Modifying Instances

Figure 2: The “SYMBOLS!” text should look like this after you convert it to vector art.

Begin by renaming Layer 1 “Background.” The background layer will hold the “Symbols! Symbols! Symbols!” text. Choose the Type tool from the Tools panel and in 36 point Bold Arial font, type the word “SYMBOLS!” in all caps. From the Tools panel, click on the Arrow tool and select the text you just put on the stage. From the Modify menu, choose the Break Apart command to break the type into individual letters. The “Break Apart” command converts the text to a Graphic Symbol that Flash stores in the Library. As part of that process, the command also converts the text into vector art based shapes, thereby ensuring that it will display properly on client computers that do not have the Arial font installed. Finally, use the Break Apart command again to turn the individual letters into editable vector art. (see Figure 2) Save your file.

Using the Arrow tool, select the letter “O” and delete it. Now select all the remaining letters with the Arrow by clicking and dragging a marquee around them. With all the letters onstage selected, open the Insert menu and choose the Convert To Symbol option. In the dialog box that appears, label this new symbol “Symbols! Text” and then click on the Graphic option. After setting these properties, click OK. Figure 3 shows how the Convert to Symbol dialog box should appear after you set all these options.

Figure 3: Here’s how the Convert to Symbol dialog should look after you set all the options.

Note that the new symbol is present in the Library panel (Figure 4.)

Figure 4: Here’s the new symbol in the Library, ready to use.

Whenever a symbol is on the stage, it’s called an Instance of that symbol, or simply an Instance, because you can alter an instance of a symbol without altering the symbol itself, thereby decreasing the file size of the final Flash movie. Move the “SYMB LS!” instance to the top of the stage with the Arrow tool. Now drag the symbol you just created from the Library onto the stage and place it under the top instance. Repeat this process, leaving 3 instances of the symbol on the stage (see Figure 5)

Figure 5: You can have multiple instances of the same symbol on the stage simultaneously.

Next you will modify the last two instances of the “SYMB LS!” text by changing their color, or tint. Select the second instance with the Arrow and go to the Properties panel. From the Color pull-down menu, select the Tint option, and then choose a color from the color swatch directly to the right of the menu. The color of the instance changes onstage. Repeat the process for the third instance, choosing a third color (see Figure 6.) Save the file.

Figure 6: Use the Properties panel to alter an Instance’s tint.

Creating Movie Clips and Placing Symbols Within Symbols
Now you need to create the three Movie Clips that will feature the Flash movie’s animation. Movie Clips are symbols that have their own timeline that functions independently of the main timeline. In other words, they are self-contained looping animations of graphic symbols that you can place on the stage as a simple object. For this example, you will place three Movie Clips on stage, each on its own layer.

Figure 7: A red circle on the stage, ready to be converted to a symbol.

Add another layer to the Timeline. Name it “Tint Circle Clip” and draw a red circle with no stroke in place of the missing “O” in the first “Symbols!” instance on the stage. Figure 7 shows you how it should look.

Select the red circle, then click the Insert menu and choose the Convert To Symbol option. In the dialog box that appears, label this new symbol “Circle” and click on the Graphic option. After setting these properties, click OK. (See Figure 8 for an example of how the Convert to Symbol dialog box should look after you set all the options.) The new Symbol appears in the Library. Save the file

Figure 8: Create a new graphic symbol from the red circle.

The next step is to create the actual Movie Clips using the “Circle” symbol. Placing a symbol inside another symbol is a common method for controlling the structure and file size of Flash movies. Start by deleting the red circle on the stage, and then deselect everything by clicking outside the active stage area with the Arrow. From the Insert menu choose the Create New Symbol option. In the dialog box that appears, name the new symbol “Tint Circle” and choose the Movie Clip option. Click OK. Figure 9 shows how the dialog box should look.

Figure 9: Use the Create New Symbol dialog to create a Movie Clip symbol.

After you click OK, you will see the stage and timeline for the “Tint circle” movie clip. The stage and timeline here are independent of the timeline and stage for the main movie, so don’t panic when all the work you’ve done thus far disappears from the screen. After you build this movie clip, you will return to the stage of the main scene, and your previous work will reappear.

Drag the “Circle” symbol from the library to the center of the stage. Insert a keyframe at frame 12 and a keyframe at frame 24 in the timeline. Select keyframe 12 in the timeline and then select the circle on the stage. Change the circle’s tint to another color, as you did with the two instances of the “SYMB LS!” text on the main stage. At this point, on keyframe 1, the circle should be red, at keyframe 12, the circle should have a new tint, and at keyframe 24 it should again be the original shade of red. Go back to the timeline and create a Motion Tween from the Tween pull-down menu at keyframes 1 and 12 in the Properties panel (see Figure 10). Press the “Enter” key to preview the color shift animation.

Figure 10: Usw the timeline to create a Motion Tween at keyframes 1 and 12 in the Movie Clip.

Now that the “Tint Circle” movie clip is complete, you need to return to the main timeline of Scene 1 to place it on the stage. Click on the “Scene 1” link in the dark gray toolbar between the stage and the timeline to return to the main movie (see Figure 11).

Figure 11: Click the “Scene1” link to return to the main Scene from the Movie Clip timeline and stage.

Once back in the main stage and timeline of Scene 1, select the “Tint Circle” Movie Clip from the Library window and drag it in place of the “O” in the first “Symbol!” at the top of the stage. Save the file (see Figure 12).

Figure 12: Drag the new Movie Clip from the Library to the stage.

Next up is the Movie Clip that fades the red circle out and in again. You’ll refer to this as the “Alpha Circle” movie clip, because in Flash MX, the word “Alpha” refers to an object’s transparency. In other words, when an object has an Alpha state of 100%, it is completely opaque, and when it has an Alpha state of 0% it’s transparent, or invisible.

Start by adding another layer to the timeline. Name it “Alpha Circle clip” and deselect all objects on the stage. Choose Create New Symbol from the Insert menu and in the dialog box that appears, name it “Alpha Circle” and choose the Movie Clip option. As when creating the “Tint Circle” Movie Clip, once you click OK you will be taken to the stage and Timeline for the “Alpha circle” movie clip. Drag the “Circle” symbol from the library to the center of the stage. Insert a keyframe at frame 18 and a keyframe at frame 36 in the timeline. Select keyframe 18 in the timeline and then select the circle on the stage. Select the “Alpha” option from the Color pull-down menu in the Properties panel and set the circle’s Alpha state to 0% (see Figure 13.) Create a Motion tween at frame 1 and another Motion Tween at frame 18. Press “Enter” to preview the circle’s alpha shift.

Figure 13: Use the Color pull-down menu to set the Alpha state of the circle at keyframe 18.

Go back to Scene 1 of the main movie. From the Library window, select the “Alpha Circle” Movie Clip from the Library and drag it in place of the “O” in the second “Symbol!” at the center of the stage. Save the file (see Figure 14.)

Figure 14: Drag the “Alpha circle” Movie Clip from the Library to the stage.

Finally, you’ll create the last Movie Clip?an animation in which the circle first doubles in size and then shrinks back to its original dimensions. Add another layer to the timeline. Name it “Scale Circle clip” and deselect all objects on the stage. Choose Create New Symbol from the Insert menu and in the dialog box that appears, name it “Scale Circle”. Choose the Movie Clip option and click OK. You will find again that Flash has opened the stage and timeline for the new Movie Clip that you are about to create. Drag the “Circle” symbol from the library to the center of the stage. Insert a keyframe at frame 10 and a keyframe at frame 20 in the timeline. Select keyframe 10 in the timeline and then select the circle on the stage. From the Modify menu at the top of the screen, select the Transform option and then choose Scale and Rotate. In the dialog box that appears, enter 200% for scale and click OK (see Figure 15). When you return to the stage, you will see that the circle at keyframe 10 has doubled in size. Create a Motion tween at frame 1 and another Motion Tween at frame 10. Press “Enter” to preview the circle’s scale animation.

Figure 15: Double the size of the circle at keyframe 10.

Go back to Scene 1 of the main movie. From the Library window, select the “Scale Circle” symbol and drag it in place of the “O” in the third “Symbol!” at the bottom of the stage. (See Figure 16.)

Your Flash movie is complete. Note that the main timeline only has one frame. Because all the animation takes place within timelines in the Movie Clips, the main timeline merely holds animated objects. You should also note that Movie Clips loop by default, so you don’t have to write any ActionScript to force the animations to repeat (see Figure 16).

Publishing Your Work

Figure 16: Drag the “Scale circle” Movie Clip from the Library to the stage.

If you wish to preview your movie as it will appear in a stand alone Flash file, go up to the Control menu and select the Test Movie option. When you are finished previewing the movie, simply close the window. To create a final Flash file and embed it in an HTML page click on the Arrow tool and go 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.

With this tutorial, you can begin to see the possibilities inherent in Flash’s powerful animation and interactive capabilities. The movie you just created uses only a handful of letters and a single circle, but Flash refers to those objects multiple times, which keeps the final file size under 2K. Try creating a movie using many different movie clips that contain the same graphic symbol to see how far you can push and test the Library’s capabilities.