Hands-On: Flash MX 2004 Movie Clips

Exercise 26: Build an Animated Graphic Symbol

In this exercise you will learn the difference between animated Graphic symbols and Movie Clip Symbols. Although they will appear to be the same when view; the most evident feature is that Graphic symbols require more than one Frame on the Stage. Follow the next few steps to build your animated graphic symbol.

1. Using the same file you’ve been working on, resave it as LCVmcVsGfx.fla.
2. Click on the Stage. In the Properties Inspector, click on the Size setting button and change the width to 400 px.
3. Press [F11] to open the Library if it is not already opened. Right-click on the LCVoutlineFillMC Movie Clip symbol and then choose Duplicate to make a copy of the symbol.
4. In the Duplicate Symbol dialog box, name the symbol LCVgfxOutlineFill and then choose Graphic for the Behavior option. Click OK.



5. In the Information Bar, click on Scene 1 to return to the Main Timeline.
6. In the Timeline, lock the movieClip layer. Add a new layer by clicking the Insert Layer button in the Timeline. Rename this layer animGfx.
7. Delete the empty outline layer since it is not needed any longer.
8. Click on Frame 1 of the new animGfx layer and drag an instance of the LCVgfxOutlineFill symbol onto the Stage, and position it to the right of the LCVoutlineFillMC Movie Clip symbol. Choose Window > Design Panels > Align. And then align the vertical center.
9. Create another layer and call it text, click to the right of the word text to highlight, and then drag to the bottom of the layer stack.
10. Select the Text tool with Arial > 10 pts > black color to type below each graphic on the Stage the following descriptive names: Under the MovieClip symbol type: Movie Clip Symbol, and under the Animated symbol type: Animated Graphic Symbol. This will help you remember what each graphic symbol represents when you preview them later.

TIP: To save time with these labels, why not duplicate the first label and then edit for content? The easy way is to use the black arrow key to select the text box, and then hold the [Alt] key down to drag a copy to the right. Just remember to release the mouse button before releasing the [Alt] key or you’ll just be moving the text instead of duplicating.

11. Shift-click to select both text boxes, use the Align panel to align to the Bottom edge, and then using the arrow keys move both up closer to their animations.



12. Press Enter to test the movie, and notice that nothing happens. You only have one Frame on the Timeline and the animation takes 40 Frames to perform. Next choose Control > Test Movie to preview the movie, this time the Movie Clip works but the animated Graphic symbol still does not. You’ll fix this next.
13. On the Main Timeline select Frame 40 and press [F5] for each of the layers. Press Enter and you’ll see the Animated Graphic now works. Choose Control > Test Movie and both will be working exactly as planned.
14. Save this file for one last version, an Animated Button instance.