Hands-On: Flash MX 2004 Movie Clips

Exercise 24: Animated Graphics vs. Movie Clips

What you will learn in these exercises can be used in many of your future Flash MX movies. You will learn how to make an Animated Graphic Symbol, and then you will learn how to turn a many layered and framed Animated Graphic turn into a single framed Movie Clip. Then you will take this Movie Clip and turn it into the Over State for an Animated Rollover Button.
 
Follow these steps to begin the lesson:

Build a Tweening Graphic Symbol

1. Open the LCVmovieClip.fla file I created to practice this lesson.
2. Click the Insert Layer button to add a new layer to the Timeline. Name this layer colorFill.
3. Press [F11] to open the Library. Click on frame one of the colorFill layer and then drag an instance of the colorFill symbol onto the Stage in the colorFill layer. Use the arrow keys to position the graphic on top of the letter outlines. Use the Align panel to position to the center. (Change the zoom to 200% to view this a little easier.)



4. Select Frame 20 from the colorFill layer and then press [F6] to add a Keyframe. Select Frame 40 and press [F6] to add another Keyframe.
5. Place the Red Playhead marker over Frame 40, and select the instance on the Stage. Using the Properties Inspector, for the Color Styles options, choose Alpha and 0%.



6. Move the Red Playhead marker to Frame 1 and select the instance on the Stage. Using the Properties Inspector, set the Color Styles options to Alpha and 0%.



7. In the Timeline, click to the right of the colorFill layer name to select all the frames on the layer. In the Properties Inspector, choose Tween > Motion. This will add a motion tween across all of the frames.
8. In the Outline layer, click on Frame 40 and press [F5] to add frames up to Frame 40. This will make the outline stay visible on the stage while the motion tween is at work.
9. Press Enter to test the animation; you will see the color fade-in and fade-out while the outlines of the letters remain on the stage.