| Motion tweening is useful for animating symbols. As its name suggests, motion tweening typically is used to move an element from one place to another, but it can do much more than that. You can use motion tweening to scale, rotate, and skew elements, and to change the color settings and transparency of a symbol over time. You can apply motion tweening to only one element on a layer, so when you want to tween multiple elements, you must use multiple layers . -
Select frame 12 of the Main Page Bitmaps layer, and double-click the instance of the Bitmap Animation symbol on the stage. TIP You may find it useful to hide every layer except the Main Page Bitmaps layer. Just right-click (Windows) or Control-click (Macintosh) the Main Page Bitmaps layer, and choose Hide Others in the drop-down menu. Then drag the playhead to frame 12 and double-click whatever is on the stage. That should take you into the Bitmap Animation symbol, but you should still be able to see the stage.  When you double-click the instance of the Bitmap Animation symbol on the stage, Flash switches to symbol-editing mode. You are going to make some changes to this symbol, and it will be useful to see how the changes look in the context of the rest of the movie. You should still see the contents of every layer in the movie while you're in symbol-editing mode. -
Choose Edit > Select All to select all the bitmaps in the symbol. Now choose Modify > Distribute to Layers.  When you create a motion tween, you must first place each element you want to animate in a separate layer. The Distribute to Layers command makes it easy to create separate layers. The Distribute to Layers command, which is new in this version of Flash, lets you select elements in one or more layers and distribute each of them to its own layer. In this case, you selected four elements; Flash will create four new layers and place each element in one of the layers. When you distribute symbols or bitmaps, Flash also names each new layer after whatever is distributed to it. So you should end up with layers named lion.jpg, mara.jpg, frog.jpg, and fish.jpg. The layer that contained all the distributed elements stays, but it's empty. Leave the empty layer, which is probably named Layer 1, alone. You will use this empty layer in Lesson 5. NOTE Don't worry if your layer names don't contain the .jpg extension. That is perfectly OKthe extension is dependent on your system and won't affect the animation in any way. -
Select the lion.jpg bitmap on the stage, and convert it to a graphic symbol named Lion Bitmap. Do the same for the mara.jpg, frog.jpg, and fish.jpg bitmaps, naming the new symbols Mara Bitmap, Frog Bitmap, and Fish Bitmap.  You can convert the lion.jpg bitmap to a graphic symbol by selecting it and choosing Insert > Convert to Symbol. In the Convert to Symbol dialog box, type Lion Bitmap in the Name box, and set the Behavior to Graphic. Set the Registration to the top left or center, and then click OK. Repeat this process for the other bitmaps in the movie clip, giving each one the appropriate name. TIP Be sure to have only one bitmap selected when you choose Insert > Convert to Symbol. This command puts everything you currently have selected into a single symbol. To avoid mistakes, you may find it useful to lock any layer you're not currently working with, especially when you're first getting started with Flash. Graphic symbols are great for static images you plan to use more than once. For any motion tween, you need to use a graphic at least twiceonce in the initial position and once in the final position. The graphics will be moving through the motion tween, but the contents of the symbol are actually static. Using the Graphic behavior for symbols results in a smaller file size . It's important to place each of the bitmaps into a symbol before you proceed, or you might end up with some strangely named symbols in your library! Flash expects symbol instances in each endpoint of a motion tween, and if you don't have one at the endpoint when you perform the next step, Flash makes one for you.  NOTE If you ever end up with a bunch of symbols named Tween 1, Tween 2, and so on, and you can't remember making them, you probably tried to apply a motion tween to a frame containing something other than a symbol instance. If you should find unknown symbol names, just use the Undo command to go back to the point before you created the motion tween. -
Select frame 6 in each layer, and insert a keyframe. Select frame 1 in each layer, except the empty layer, and choose Insert > Create Motion Tween.  Click in frame 6 of the topmost layer, Shift-click frame 6 in the bottommost layer, and then choose Insert > Keyframe. Make sure you insert a keyframe and not a blank keyframe. When you insert a blank keyframe, you remove any content from the stage in that frame on that layer. If you insert a keyframe, the new keyframe contains the same contents as the previous keyframe in the same layer.  Notice that as you select each keyframe, even if you select all the frames at once, the Property inspector displays the settings for a frame. The settings include Frame Label, Tween, and several sound settings. You'll take a look at the Frame setting in Lesson 5, and you'll work with the sound settings in Lesson 6. After you choose Insert > Create Motion Tween, a small arrow should appear between frames 1 and 6 of the lion.jpg, mara.jpg, frog.jpg, and fish.jpg layers, indicating that a motion tween has been created. The frames in the motion tween are shaded. Notice that after you create the motion tween, the Property inspector changes. All the properties for the motion tween appear, including Tween, Scale, and Ease. The Tween setting should be set to Motion, since the selected frames have a motion tween applied to them. If you modify the size of either the initial or final instance in your motion tween and select the Scale option, Flash automatically scales the intermediate frames. The Ease setting allows you to modify the rate of change between tweened frames, and you can select any number between 100 and 100. Negative values simulate acceleration, and positive values simulate deceleration. Setting the Ease value to 0 makes the rate of animation constant.  The properties for a motion tween also include Rotate. You can set the Rotate value to None to prevent rotation, Auto to rotate the tweened element once in the direction requiring the least motion, CW to rotate the element clockwise, and CCW to rotate the element counterclockwise. If you choose CW or CCW, the Times field lets you enter a number, which corresponds to the number of times the element will rotate in the indicated direction. When you create a motion tween, you must have at least two keyframes. The first keyframe contains the initial state of the symbol to be animated, and the last keyframe contains the final state of that symbol. To create the motion tween, Flash interprets the state of the symbol in the in-between frames. You have to make sure to use instances of the same symbol in both the initial and final states. The properties, including the X, Y, Width, and Height, of each instance can be different. Right now the initial and final states of the motion tween are identicalyou'll change that in the next step. Before you continue, check your library to make sure you don't have any symbols named Tween 1 or something similar. If you do, you probably forgot to convert one of the bitmaps to a symbol. TIP If you ever need to convert a keyframe back to a frame, just select that keyframe and choose Insert > Clear Keyframe. -
Drag the Lion Bitmap symbol instance off the left side of the stage. Move the Mara Bitmap, Frog Bitmap, and Fish Bitmap symbol instances so that they are off the top, bottom, and right sides of the stage, respectively.  As you move each graphic symbol in frame 1, drag the playhead between frames 1 and 6 to see how the animation changes. You should notice that Flash automatically updates the movie clip's animation, creating a smooth animation from each graphic symbol's new initial state to its final state. In this exercise, you're using a motion tween to animate the movement of elements from one position to another. But you can use motion tweens to do much more. You can animate changes in scale, rotation, and skew. If you use a symbol in both the initial and final states, as you did in this exercise, you can also animate changes in color and transparency. NOTE You can only animate changes in color and transparency when using symbol instances because those settings are only available in the Property inspector for symbol instances. The Property inspector allows you to animate changes in color and transparency only for symbols. You can't apply color effects directly to bitmaps. TIP It's almost always a good idea to convert anything you're going to use in a motion tween to a symbol. -
Drag the playhead to frame 1, and choose Control > Play. Save the file as zoo16.fla. You now have a nice animation. It's actually relatively complex, with elements moving on several different layers. But as you can see, Flash makes creating such complex animations simple. You may notice as you play the movie that the animated bitmaps appear outside the frame in the Frame layer. You'll add a mask to fix that in the next exercise. NOTE If you choose Control > Test Movie to see the animation, you might not be able to see it. That's because by default, Flash movies loop. So the movie will get to the last frame and then jump back to the first frame and continue to play. If you want to stop the looping in the Test Movie window, choose Control > Loop. If there's a check next to the command, the movie will loop. If the Loop command is not checked, the movie will play once and then stop.
 |
