| In Lesson 4, you created two Movie Clip buttons: one for a table of contents, and the second for a sample chapter. In this exercise, you'll animate the Movie Clip button to create a mouse-over effect. The effect will be produced by a brightness tween inside the movie clip. When the visitor mouses over the button, the button animates, and what's more, it also animates when the cursor moves off the button as well so that the brightness returns to its initial state. The Movie Clip buttons use special frame labels so Flash knows to treat each labeled keyframe like a button state instead of as a normal frame label. These special labels you are going to work with are _over, and _down (representing the Over and Down states of a normal button symbol). Remember, you set these labels already in Lesson 4. You are still working with bookstore9.fla file in this example. 1. | Find mcSampleChapter in the library and double-click the movie clip. After you double-click the symbol, the movie clip opens in symbol-editing mode. Unlock the fill layer and make sure that the other layers are locked before proceeding with the animation, which helps prevent selecting the text or stroke layers. | 2. | Select the fill layer and insert a keyframe on Frames 5, 14, and the last frame in the movie clip (Frame 25). Frame 5 on the Timeline corresponds with the frame labeled _over. This frame will begin an animation when a user rolls the mouse cursor over the Movie Clip button. Click to select the Frame 5 and press F6 in order to add a keyframe; repeat this process on Frame 14 and 25 on the same layer. There are two animations: one for the _over state, and a second for the _down state. You want to create an animation for the _over state that is reversed for the _down state, so the beginning of the _over animation and the end of the _down animation are exactly the same. | 3. | Add a brightness tween to grFill and then insert a keyframe on Frame 15. Select Frame 5 in the fill layer and expand the Property inspector. Select Motion from the Tween drop-down list to insert a motion tween. Select grFill on Frame 14, select Brightness from the Color drop-down list in the Property inspector, and change the value to 85%. When you finish, select Frame 15 and press F6 to insert a keyframe. Change the Tween drop-down list in the Property inspector to Motion. Scrub the Timeline to view both of the motion tweens you have created.
Tip If you test the button at this point, you cannot see the brightness tweens because Movie Clip buttons in Flash are engineered to go to each special frame label and stop. You need to add a bit of ActionScript code to tell it to actually go and play each animation and then stop at the end of the animation. You will do this in another lesson. | 4. | Repeat Steps 1 to 3 with the mcToc instance. The mcToc movie clip should also be in the library. Double-click the symbol in the library and it opens in symbol-editing mode. Repeat the same steps as with mcSampleChapter, so that each of the buttons animates the same way. | 5. | Lock the fill layer in the movie clip's Timeline, save the changes, and return to the main Stage. |
|