| Motion tweens are used to change the position of an object over a fixed period of time. What's more, you can change properties such as scale, alpha, tint, or rotation using a motion tween. An optional motion guide lets you make more-complicated animations by animating an item along a vector path, which you will do later in this lesson. Here's the catch: You can only motion tween symbols, so you should always change an object into a symbol before motion tweening the instance. Because motion animation is an illusion affected by producing many copies of the same graphic in slightly different positions, using a symbol makes sense. It helps keep your file size much lower when exporting the SWF file. The file size is kept low because Flash can reuse assets from the library instead of re-creating a whole new copy of them each time one is encountered on the Timeline. Note Shape tweening is the reverse: You can shape tween raw data, but you cannot shape tween symbol instances, grouped items, or bitmaps. They have to be broken apart into raw data first by choosing Modify > Break Apart. You will learn how to apply a shape tween to raw data (vector drawings) later on in this lesson. There are a few different ways to add motion tweens to a FLA document, which you will learn to do in the following exercises. In this particular exercise, you will be adding a motion tween to the bookstore menus you built in earlier lessons. Ultimately, the menus will open and close when a user presses a button or rolls off a menu after it's been displayed. You will also add a stop action to stop the animation from repeatedly looping when the SWF file plays. 1. | Open bookstore8.fla from your TechBookstore folder or from the lesson05/start directory, and save a new version of the file as bookstore9.fla in your TechBookstore folder on your hard drive. In Lesson 4, you created most of the symbols you will animate in this lesson. You want to version the file up because you will be making some significant changes, and if you break something, you'll have a stable file to go back to. | 2. | Find the instance of mcProducts on the Stage, press F8 to place it inside another movie clip, and name the movie clip mcProductsMenu. You're probably wondering why you put a movie clip inside of another movie clip. In Flash, for various reasons you often need to have animations, but don't want to make those animations on the main document Timeline. The solution is to create your animations inside of movie clip symbols and then place an instance of that movie clip on the Stage. In this circumstance, you will be creating a motion animation inside of the mcProductsMenu movie clip. Don't forget that you can create motion tweens only with symbols, which is why mcProducts has to be nested inside of mcProductsMenu. Tip The buttons layer is on top of your menu layer, which may make the menu movie clips difficult to select. Lock the buttons layer and hide it to make it easier to select the menu movie clips. | 3. | Double-click mcProductsMenu to edit it on the Stage. Zoom in on the menu if necessary. After you double-click mcProductsMenu, the rest of the Stage is dimmed, so you can concentrate on the symbol you're editing. You're actually editing the symbol's master properties, which would affect all instances of that symbol in your document. Because there is only one instance of this movie clip on the Stage, edit-in-place mode won't have any unintended ill effect. You're specifically editing in this mode because your animation has to start and stop at specific places on the Stage, and this mode lets you see the Stage and entire graphics while you work. | 4. | Select Layer 1 and rename it menu tween; then insert a new layer and rename it actions. Add keyframes to the actions layer on Frames 11 and 20. Select the menu tween layer, click the Insert New Layer button, and rename it actions. Create new keyframes on Frames 11 and 20 of the actions layer by selecting each frame and pressing the F6 key. You will change the position of the movie clip in each keyframe. Changing the movie clip position creates the animation after you add the tweens in-between each keyframe. You will add the tweens in the following exercise. One of the important things to remember about movie clips is that they have their own independent Timelines. They're like teenagers: They won't do anything unless you tell them toor worse, won't stop doing something unless otherwise instructed. (No offense to you teenagers reading this book, of course.) What that means for you is that when you make an animation in a movie clip, it will loop over and over unless you tell it to stop, and not only to stop, but when it should. You want your animation to work like most drop-down lists: A user clicks on one of the buttons (Products), the menu animates down until it's fully displayed, and then stops to display all of the options. When an option is chosen, or the user rolls off of the menu, you want it to animate back up until it's gone. So you will ultimately want to tell the movie clip to stop animating in two different places: Frame 11 and Frame 20. | 5. | Add stop actions on the Timeline to control the animation. Stop actions are added from the Actions panel. Although you haven't learned about ActionScript yet, you can still make use of ActionScript with a simple point-and-click operation. Open the Actions panel by selecting Window > Actions from the main menu. The Actions panel opens, docked below the Stage on Windows or as a floating panel on OS X. The Actions panel is separated into three different panes: the Script pane, the Script navigator, and the Actions toolbox. The Script pane is the large text field located to the right of the Script navigator and Actions toolbox. The following figure shows you the different parts of the Actions panel.
You'll add stop actions to keyframes 11 and 20 of the actions layer using Script Assist. The Script Assist feature is very useful if you're new to ActionScript because you select an action that you want to add, and Script Assist helps you fill it in correctly with a series of menu options and buttons. Select keyframe 11 of your actions layer and make sure that your Actions panel shows Actions-Frame in its title bar. The Actions panel title bar will let you know if you have a frame or an object selected. So will the Script navigatorlook at the Current Selection option in the Script navigator, and it should show Frame 11 of the actions layer. So does the script tag at the bottom of the Script pane, for that matter. Press the Script Assist button in the upper-right corner of the Script pane. In the Actions toolbox on the left, click once on the Global Functions category, and select Timeline Control. From the Timeline Control category, double-click on the stop action to add it to the Timeline. Script Assist will indicate at the top of the Actions pane that the stop action takes no parameters. Repeat these steps to add a stop action to keyframe 20 of the actions layer. Tip Script Assist will describe the action you have selected in the Actions toolbar in the upper-left corner of the Script pane. Underneath the description are instructions on how to add the action to your script.
When you finish adding the ActionScript, lock the actions layer by clicking the dot underneath the Lock Layer icon, which prevents anything being added to the Stage on the actions layer. It is a good practice to never place any raw data, symbols/instances, components, or assets onto a layer that has ActionScript. If you place code on the same layer as objects, such as components or movie clips that contain ActionScript, and then sometimes code conflicts can arise in the SWF file. Your FLA file might also be more difficult to debug. Note Actions, like any other element on a Timeline, must be placed on keyframes if you are adding frame actions. You cannot add ActionScript to a normal frame. | 6. | Insert a new layer and rename it labels. Then add new keyframes and frame labels to Frames 2 and 12, and lock the layer when you finish. Select the menu layer and press the Insert Layer button. Rename this layer labels. Create new keyframes on Frame 2 and Frame 12 by selecting each frame and pressing F6. You will use ActionScript to tell the playhead to move directly to these keyframes and play when someone presses on the Products button or rolls away from the menu after it has animated. The easiest way to use ActionScript for this task is to label those keyframes. Here's why: You may decide that you don't like how long it takes for your menu to animate down or up, so you may adjust the amount of frames in which those animations occur. When you do that, where your animations begin and end might move to different frames. If you've told ActionScript to go to a frame number then you have to go into your Actions panel and change the script to reflect the new numbers. If you choose to send the playhead to a labeled frame, however, when the start and stop frames move, the label goes with it, and you won't have to adjust your Script. Select Frame 2 on the labels layer and enter a frame label named slidedown into the <Frame Label> text field in the Property inspector. Then select Frame 12 on the labels layer and enter slideup into the <Frame Label> text field. When you finish, lock the layer as you did in the previous step to prevent accidentally adding any content to it later on. | 7. | Insert new keyframes on Frame 12 and Frame 20 of the menu tween layer. These frames determine how the menu animates. Frame 12 is the end of the animation for the menu opening and the beginning of the animation for the menu closing. | 8. | Change the position of the mcProducts movie clip at Frame 12. Select mcProducts on the Stage at Frame 12. Move the movie clip straight downward by holding the Shift key and pressing the Down arrow key until the clip is directly underneath the grBar, as shown in the following figure. Tip When you hold down the Shift key while pressing the Down arrow key on the keyboard, your selected graphics move in 10 pixel increments. Pressing the Down arrow by itself moves items in 1-pixel increments, and is often referred to as "nudging." | 9. | Return to the main Stage and repeat each of these steps for the other two menus. Click Scene 1 in the edit bar to return to the main Stage. Repeat Steps 2 through 8 for mcCompany and mcContact. Name their wrapper movie clips mcCompanyMenu and mcContactMenu respectively. Then, all three menus can be animated tweening. | 10. | After you finish, remember to save the changes you have made to the FLA. You have now set up each of your movie clips for motion tweening. Note In motion tweening, you can only animate one symbol instance to another instance of the same symbol in the same layer. Those symbol instances are the only things allowed to be in those keyframes, because Flash can only tween one thing at a time in a keyframe. If you put other items in the same keyframe as the symbol that's going to animate, Flash isn't capable of understanding which item you want to animate; It has too many decisions to make. Like a very hungry person in a grocery market. If you need to animate more than one thing at a time, separate those animations into their own layers. Tip Flash 8 comes with a feature called Distribute to Layers, which is useful when you need to animate individual characters of a text block (that has been broken apart) or if you are importing a group of items onto the Stage while you are creating your FLA. When you select multiple objects on the Stage, and then select Modify > Timeline > Distribute to Layers, Flash places each selected object on a new layer and renames each layer for you, although you'll probably want to go through and make sure they've been named the way you want them to. While you don't use it here, this feature is a useful way to keep your FLA organized not to mention the fact that it certainly speeds up development. |
|