Hands-On: Flash MX 2004 Movie Clips

Exercise 27: Create an Animated Rollover Button

Pay particular attention to how this section works and you’ll be making animated buttons as easily as static buttons. The trick is having an animation appear in the Over State of the button, and a Movie Clip symbol is just the item to do this since it only takes one frame to work. Using the last exercise that should still be open, do the following:

1. In the Property Inspector, click on the Size button and change the width to 600px.
2. From the Library, create a New Symbol, click on the New Symbol button in the bottom left corner.
3. In the Create New Symbol dialog box, name the symbol btnAnim, and set it Behavior to Button. Click OK.
4. Rename Layer 1 to outline. Drag an instance of the line symbol onto the Stage. This symbol is static and contains only the outline of the monogram.
5. With this symbol still selected on the Stage, choose the Align panel to center on the Stage.
6. Press [F5] in the Down frame to add frames in the Over and Down states of the button. Lock this layer.
7. Click the Insert Layer button and double-click on the Layer 2 name and change this to movieClip.
8. In the Library, right-click on the LCVoutlineFillMC Movie Clip symbol and then choose Duplicate to make a copy of the symbol.
9. In the DuplicateSymbol dialog box, name the symbol LCVoverAnim and choose Movie Clip for Behavior. Click OK.
10. On the movieClip layer, press [F7] first in the Over frame and again in the Down frame to add blank keyframes to both of these states.
11. With the Over state of the button selected, drag an instance of the LCVoverAnim Movie Clip onto the Stage. Use the Align panel to center in the middle of the Stage.



12. When finished, lock the movieClip layer.
13. Click the Insert Layer button to add a new layer. Rename this new layer Hit. Click to the right of the layer name, and then drag this layer below the outline layer so it is the bottom layer.
14. Press [F7] in the H it frame to add a blank keyframe to the Hit state of the button. In the Toolbox select the Rectangle tool and draw a red rectangle that covers the monogram. (To make this easier to do, unlock the outline layer, and select the Onion Skin Outlines button to be able to see the monogram while you draw the rectangle. Turn off the Onion Skin button when you are finished.)
15. Click on Scene 1 to return to the Main Timeline.
16. In the Main Timeline, lock both the animGfx and movieClip layers. Click the Insert Layer button to add a new layer, and then rename the layer to animBtn.
17. Click on the first frame of the animBtn layer and then select the Arrow tool and drag an instance of the btnAnim Button symbol from the Library onto the Stage. Position it to the right of the last two symbols.
18. Return to the text layer and then using the Text tool, name this Graphic symbol Animated Button Symbol.



19. Choose Control > Test Movie to preview and test all of the symbols.



20. Save this file again so you can use later in an ActionScript exercise that controls how and when it will animate.