| As you learned earlier, you can use motion tweens to change the position, brightness, alpha, or tint of a symbol instance on the Stage. In the Property inspector's Properties tab is a drop-down menu called Color, which is used to change the brightness, alpha, or tint of an instance as well as an advanced option, which allows you to change both color and alpha values. If you have an instance you are motion tweening, changing the values using this drop-down menu for one of the keyframes creates a transition to or from the new property you have set. Now that you have set up the movie clip with keyframes and have the beginning and end positions for the instance, you are ready to add the motion tweens that will actually move the menus. You will also animate the brightness of the menu using the motion tween and changing a value in the Property inspector. 1. | In bookstore9.fla, double-click to open mcProductsMenu if it isn't already open. Select the menu tween layer again. You will be working with the same movie clips and content you set up in the previous exercise. | 2. | Create a motion tween between Frames 1 and 12 to slide the menu downward. Right-click or Control-click any frame between Frames 1 and 12 on the menu tween layer, and select Create Motion Tween from the context menu. The first thing you notice is that the background color for the frames spanning the menu tween layer have changed into a purple color, and an arrow spans from the beginning to the end of the span of frames. The change in appearance indicates that you have correctly added a motion tween on that layer. The figure following Step 3 shows you a Timeline containing motion tweens. Note Had you incorrectly added a motion tween, you would see dotted lines in your layer instead of a solid line with an arrow. Usually, this happens because there is more than one item in one of the keyframes you are animating between. Note If you attempt to set a motion tween between keyframes that do not contain symbols, Flash will convert the graphics in those keyframes to graphic symbols named Tween1, Tween2, and so on. Always convert your graphic assets to symbols before you even extend your Timeline (when possible) to avoid this. | 3. | Add a second motion tween to animate the menu upward, and then review the animation by scrubbing the Timeline. Repeat Step 2 to add a motion tween between Frames 12 and 20. Select any of the frames between Frames 12 and 20, Right-click (or Control-click), and select Create Motion Tween from the contextual menu. When you finish, the movie clip animates downward between Frames 1 and 12, and then animates upward between Frames 12 and 20. Click and drag the playhead to view the animation. Tip After motion tweens are applied to a series of frames, you can still change the duration of the tween by adding or removing frames in-between the two keyframes. You can add frames by selecting a frame within the tween and pressing F5 (to add more frames), or remove frames by selecting Remove Frames from the contextual menu (to delete frames). Flash automatically modifies the tween for you.
| 4. | Add easing to the menu motion tween using the Property inspector. The Ease slider is found in the Property inspector when you select the beginning keyframe of a motion tween. You can ease the animation so it appears to be speeding up or slowing down along the duration of the motion tween, which is very useful for gravity-type effects. By default, easing is set to 0 (no ease), but by moving the Ease slider to a positive number (between 1 and 100), you are telling Flash to begin the animation quickly and then slow the animation down at the end of the tween. Setting the amount of easing to a negative number (1 to 100) starts the animation a bit more slowly, but speeds the movement up toward the end of the tween. Either way, the animation still has to execute in the same amount of time. Select Frame 1 and expand the Property inspector. Use the Ease slider to set the easing to 100, which means it is easing out and gradually slowing down as it animates downward. Then select Frame 12 and set the Ease slider value to 100, which means that the menu is easing in toward the end of the animation. The menu gradually speeds up as the menu closes.
Note When performing a motion tween, there is also an option to set the direction and amount of rotation for the selected symbol. There are four choices for rotation: None, Auto, CW (Clockwise), and CCW (Counterclockwise). If you chose Auto, the item is rotated in the direction that requires the least amount of movement. Clockwise and Counterclockwise rotate the object a specified number of times in either of those directions. | 5. | Add a brightness tween to the menu, and then test the animation by scrubbing the Timeline. Select the instance of mcProductsMenu on Frame 1 of the menu tween layer. You must select the instance, not the frame, to access the Brightness property. Select Brightness from the Color drop-down list on the Property inspector's Properties tab and change the value to 85%. Select the instance of mcProductsMenu on Frame 12 and make sure that the brightness is still set to 0. Scrub the Timeline by dragging the playhead back and forth. Take a look at how the animation looks so far. Tip You should try to use a brightness tween instead of an alpha tween whenever possible because alpha tweens, particularly over detailed bitmaps, are much more processor-intensive than brightness tweens are. Flash needs to perform many more calculations when tweening with transparency than when you tween the brightness of a color.
| 6. | Repeat Steps 2 through 5 for the other two menus in the FLA file. Scrub over the animation to make sure that the animations work correctly. Repeat Steps 2 through 5 for the remaining two menus in the FLA file so that all three menus have animation added to them. When you are finished adding animations for the three menus, click the playhead directly above the frames on the Timeline. Drag it to the rightyou can see the animation play as you drag the playhead. You can also play the animation in the Flash authoring environment by pressing Enter, and the animation begins to play right on the Stage and then stops at the end of the animation. Note Don't forget, scrubbing means dragging the playhead over the Timeline with your mouse. | 7. | Return to the main Stage. Clean up the library and then save the FLA document. Click Scene 1 in the edit bar to return to the main Stage. Clean the library by moving mcProductsMenu, mcCompanyMenu, and mcContactMenu into the movie clips folder in the library. Save the changes you made to the FLA file. |
|