Motion Tweening | Macromedia Studio MX Bible

< Day Day Up >

Motion tweening is movement between two symbols. Motion tweening uses a beginning and an ending symbol. Flash fills in the steps in-between for you. The shapes between the two symbols are based on changes, such as location, size, rotation, color, and transparency, you make to the symbols. The two symbols have to be the same, but you can change characteristics. Because there are only two keyframes and two symbols involved, you save on file size.

The basic steps to make a motion tween are simple:

Open the head.fla file from the chapter27_exercises folder. It's a symbol that is in Frame 1.
Select Frame 20, add a Keyframe (F6), and move the symbol to a different location.
Select Frame 1 and in the Property inspector choose Motion from the Tween drop-down menu (Insert ® Create Motion Tween). Notice the line with an arrow in the Timeline from Frame 1 to Frame 20. This indicates the motion has been added. A dotted line indicates an improperly working tween.

Move the playhead over the frames and notice all the intermediate shapes Flash added. It's really that easy to add motion to two symbols. After you select a tween type, the Property inspector changes and offers several more options, as shown in Figure 27-9.

click to expand
Figure 27-9: The properties available for a motion tween

Notice that you can set rotate and ease options, which determine the acceleration and deceleration of the tween. The ease setting determines whether the object moves slower or faster. A setting of 0 is a constant rate of movement; a negative value eases into the animation slowly at the beginning and faster at the end. Just how slow or fast depends on the amount you enter. A positive value is just the opposite; the animation begins fast and slows down at the end.

Making an e-card using motion tweening

Habitat Alert site We used motion tweening extensively for one of the e-cards for the Habitat Alert site so you can learn how to use motion tweening by making a simple e-card. This is based on a small, animated banner that Japi Honoo made (Bonus Tutorial on the CD).

FreeHand MX, Fireworks MX Because the banner made in Fireworks used vector graphics (made in FreeHand), they were easily resized for use in Flash.

Choose Modify ® Document, change the Width to 600 × 400, and click OK. You can also do this in the Property inspector. If you can't see the document properties, click on the stage.
Choose File ® Import and navigate to the chapter27_exercise folder and select ecard1_bk.gif and open it.
Double-click the layer name and name it background (Figure 27-10).

Figure 27-10: The background image in place and the layer renamed
Add a new layer and name it goldleft. You are going to add some gold herons that move from the left of the stage and stop when they are on top of the blue herons. Then repeat for the right side.
Choose File ® Import to Library and navigate to the chapter27_exercise folder and select goldheron.png. The Fireworks PNG Import Settings dialog box opens. Choose to import to a new layer and to keep paths and text editable, and click OK (Figure 27-11).

Figure 27-11: The Fireworks PNG Import Settings dialog box with the settings used
When you import the Fireworks file as a Library item, it is automatically made into a symbol. Choose Windows ® Library to open the Library panel.
Drag a copy of the goldheron symbol onto the stage. Notice that the keyframe on this layer has a solid black dot because you added content.
Position the gold heron directly on top of the blue herons and note the y coordinate of 143.3 in the Property inspector. Use your left arrow key to move the birds to the left of the stage and off of it as shown in Figure 27-12.

Figure 27-12: The gold herons added to the second layer and moved off the stage
Select Frame 25 and insert a keyframe (F6). You no longer see the background. You need to extend the Timeline for your background image. In the background layer right-click the first frame and choose Insert frame (or press F5). Now drag the little hollow white rectangle to Frame 25. The gray line extends to Frame 25.
Back in the goldheron layer with Frame 25 selected, drag the goldheron symbol from the left of the stage, and position it exactly on top of the blue herons (x: 98.5, y: 143.3). You now have one symbol in Frame 1 and one in Frame 25. Now all you need to do is add the tween.
Select the first keyframe and choose Insert ® Motion Tween. Press Enter/Return to see your animation. Lock the heronleft layer.
Add a new layer and name it goldright.
You want this animation to play at the same time as the left heron layer, so select Frame 1 and place a goldheron symbol from the Library off to the right of the stage with a y coordinate of 143.3.
Select Frame 25 and press F5 to insert a keyframe. Place the symbol on the right on top of the blue herons. Select Frame 1 and add the motion tween (Insert ® Create Motion Tween). Press Enter/Return to play the animation. Figure 27-13 shows the Timeline so far.

Figure 27-13: The Timeline showing both motion tweens added

Note
Only one motion tween can be on a layer.
Save the animation. A copy is saved for you in the chapter27_exercise folder named ecard1_gold.fla.

Adding opacity settings to a motion tween

Motion tweens are good for more than simple motion. You can also change the symbol's properties, such as color and opacity, as well as transformations. The Habitat Alert e-card uses a simple text animation that moves and fades in and out. You add the first bit of text here; then you can inspect the finished file to see how the same techniques were used to finish the animation.

Open ecard1_gold.fla if you closed it.
Click in the background layer and insert (F5) 14 frames to extend the background to Frame 40.
Add a new layer and name it saveit. Lock the goldright layer.
On the saveit layer, select Frame 26, and add a keyframe (F6). You want the text animation to begin playing after the gold herons have moved into position.
Choose Insert ® New Symbol. Name it saveit, choose Graphic, and click OK. The Symbol Editor opens.
Select the Text tool. Change the font to Arial Black with a size of 96. Click the color box and type a hex number of 7A9ABA. Using lowercase letters, type the words save it into the Symbol editor.
I want a stroke on the text so it'll have to be broken apart. With the text selected, choose Modify ® Break Apart. Repeat one more time, you'll see little dots in the text.
Select the Ink Bottle tool, and set the stroke color to black. Click at the edge of each letter to give it a black stroke (Figure 27-14). Click inside the "a" and the "e" to stroke the centers.

Figure 27-14: The stroke being added to the text
Return to Scene 1 and drag a copy of the symbol onto the stage (x: 126, y: 240).
Select Frame 40 and insert a keyframe (F6), which has a copy of the text in it. Since you want to fade the text to almost invisible, select the text. In the Property inspector in the Color drop-down list, choose Alpha and change the opacity to 20%.
Select Frame 26 and choose Insert®Create Motion Tween. Move the playhead and notice how the text fades.
The next word starts from a fade on the same frame as the words "save it" and goes to full opacity. Add three more frames to the background layer. In the saveit layer, select Frame 41 and insert a new keyframe.
Choose Insert ® New Symbol and use the same font type, except change the color to 999933. Break it apart and give it a black stroke. Return to the stage and drag a copy to the center of the "save it" text.
Select or and change the color to Alpha and 20%. Select or and choose Edit ® Copy.
Add a new layer and name it or. Select Frame 41 and add a keyframe. Choose Edit ® Paste in Place. This pastes "or" in the same position as the previous layer. The text is now ready for you to add another symbol to it and apply a motion tween. You can find the finished file, named ecard1.fla, in the chapter27_exercise folder.

< Day Day Up >