As discussed earlier in this chapter, Adobe gives you a bunch of snazzy motion tweens with Flash. But one designer's perfect tween is another designer's, well…nearly perfect tween. Fortunately, you can customize presets after you apply them. In fact, tweaking a motion preset is great learning ground for designing and perfecting your own tweens. Editing a motion preset is no different from editing a tween you created yourself, so the following sections on Changing the Motion Path (below) and Editing a Tween Span apply to both motion presets and the tweens that you create from scratch.
Whether you use a motion preset or create your own tween, chances are you'll want to tweak the motion path. Perhaps the ball doesn't bounce in just the right places, or that car looks like it's driving off the road. The motion path looks like a line trailing off from the tweened object. As you drag the playhead in the timeline, you'll notice that the tweened object follows the motion path. If you need a practice file, download 08-2_Motion_Path.fla from the Missing CD (www.missingmanuals.com/cds).
You can change this path on the stage using the same Selection tool that you use to modify any line:
Move the entire motion path. With the Selection tool, drag a box around any part of the path. Then drag everything to a new spot.
Move the starting point for the motion path. With the Selection tool, drag the diamond-shaped selection point at the beginning of the motion path to a new location. The end of the path remains anchored where it was, while the motion path stretches or shrinks to accommodate the move.
Move the ending point of the motion path. Select the diamond-shaped end point of the path and drag it to a new location. The starting point of the tween remains anchored in place, and the motion path adjusts to the move.
Create a curve in the motion path. First, make sure the motion path is not selected, by clicking some empty spot on the stage. Then with the Selection tool, point to the path; when you see a curve appear next to the cursor arrow, drag to create a curved path (Figure 8-4). You can reshape the path by dragging different points along the path.
Change the tweened object's position at any point of the motion path. In the main timeline, move the playhead to the frame where you want to reposition the tweened object, and then drag the object to a new position. Flash creates a new property keyframe in the timeline and adjusts the motion path to the new position. To use this method to move the start or end point, make sure that the playhead is on the first or last frame of the tween. This action also creates a diamond-shaped control point in the motion path. You can use the point and the accompanying control handles to change the shape of the motion path. It's similar to any line you draw using the Pen tool (Pen tool).
Figure 8-4. Use the Selection and Subselection tools to modify a motion path just as you would any other line.
The example file 08-2_Motion_Path.fla includes a wheel with the bounce-smoosh tween applied. The animation would be much more interesting if the wheel rolled along the high step, dropped to the ground, and then bounced in a forward motion. Here's how to change the path for that effect:
Move the playhead to Frame 1 and make sure nothing is selected. Then drag the wheel so it sits on the step, as shown in Figure 8-5.
If the entire path moves with the wheel, you've selected both the path and the object. To deselect everything, click an empty spot or press Shift+Ctrl+A (Shift-⌘-A).
With the Selection tool, adjust the curve so that the wheel appears to roll along the top of the stairstep.
When you move the cursor close to the path, it changes to show a curved line next to the arrow. Drag to adjust the curve in the motion path. The solid line shows the general arc of the motion, while the small dots show the actual position of the tweened object at different points in time.
Adjust the end of the motion path so the wheel moves to the right as it bounces.
You can stretch the path to the right side of the stage, giving the wheel a feeling of increased forward motion as it bounces.
Preview the animation and fine-tune it as necessary.
If you got it perfect the first time, great! If not, try zooming in a little and fine-tuning the motion path as described in step 2.
You can delete a motion path from a tween by simply selecting it and then pressing Delete. The consequence, of course, is that your tween isn't going anyplace. The tweened object remains stranded at its starting point until you provide further instructions. For example, you can copy and paste in a new path, as described next.
Flash gives you tools to create perfect shapes like circles, rectangles, polygons, and stars, not to mention the precise control that comes with the Pen tool. You can use any of these drawing tools to create a motion path. If you need a path that matches a perfect shape or is extremely complex, it's faster and easier to use Flash's drawing tools, rather than dragging tween objects around the stage to modify a motion path. First you need to create the path with one of the tools that creates a stroke; that is, any of the shape tools, the Pen, the Pencil, or the Line tool. Then, you paste that stroke into an existing tween that doesn't have a motion path.
Note
A file with a completed version of this project, 08-3_Path_Orient.fla, is available at www.missingmanuals.com/cds.
Here are the steps:
In a new Flash document, create two layers, each with 48 frames.
After you create the second layer, Shift-click to select the 48th frame in both layers, and then press F5 to add new frames on both layers.
Create a text field with the words not oriented, and then rename the layer not oriented.
Make the text nice and bold and about 32 points in size. Double-click the layer name so you can edit it.
Right-click a frame in the timeline of the "not oriented" layer, and then choose Create Motion Tween from the pop-up menu.
You now have a motion tween with no motion and no tween, because you haven't yet made any changes to the tweened object's properties.
In the other layer, use the Oval tool to draw a circle, and then rename that layer circle.
Set the oval fill color to none by clicking the swatch with the Paint Bucket, and then, in the upper-right corner of the panel with color swatches, click the square with a stroke through it. Make the circle about 200 pixels in diameter. If necessary, you can set the size in the Properties panel.
Use the Eraser tool, with a small eraser size, to erase a little bit of the circle.
You can't use a closed shape as a motion path, so you need to break the path at some point. When you're done erasing, your stage should look something like Figure 8-6.
Using the Selection tool, drag a box around the circle to select the entire circle. Copy it (Ctrl+C or ⌘-C), click the "not oriented" tween layer, and then paste it (Ctrl+V or ⌘-V) into the tween.
As soon as you paste the circle into the tween layer, the text field attaches itself to the path. At this point, it's easier to examine your tween if you hide the original circle by clicking the Show/Hide button in the "circle" layer (Figure 8-6).
Press Enter or Return to preview the animation.
Your "not-oriented" text field moves in a circular motion, but the text isn't oriented to the circle. It remains right-side up and oriented to the stage. That looks a little odd, but don't fret. You'll learn how to orient the text to the circle in the next section.
You can use any stroke as a motion path, even complex strokes created using the Pen tool with multiple complex Bezier curves. Just make sure you're not using a closed path. Even though the circle isn't a closed path, the motion of the text looks like it's making a complete circle. When the movie clip loops, no one in your audience will ever know there's a break in the circle.
Orienting text fields and symbols to a motion path is as simple as clicking a checkbox. In this section, you'll learn how to do that, as well as another handy technique—copying and pasting a motion from one layer to another in the same animation. When you're done, you'll have one Flash file with two examples of circular motion. In one, the text field is oriented to the circle; in the other, it's not (Figure 8-7).
Click the Insert Layer button in the timeline's lower-left corner.
A new layer appears in the timeline.
Rename the new layer "oriented".
Double-click the layer, and then type the new name.
Click the "not oriented" layer name to select all the frames in that layer, and then copy the frames (Edit→Timeline→Copy Frames).
When you click the layer name, Flash automatically selects all the frames in the layer. You can also Ctrl-drag (Control-drag) over the frames to select multiple frames.
Click the first frame of the "oriented" timeline, and then paste the frames (Edit→Timeline→Paste Frames).
When you paste frames into the timeline, Flash inserts the pasted frames, pushing any existing frames on down the timeline.
Shift-drag the end of the "oriented" timeline to the 48th frame so it matches the length of other layers.
At this point, your oriented timeline is almost identical to the not-oriented layer.
Edit the text field to read "oriented."
With the Text tool still selected, you can resize the text field to fit the text by double-clicking the box in the text field's upper-right corner.
Click the motion path, and then, in the Properties panel, turn on the "Orient to path" checkbox.
If the "Orient to path" checkbox isn't showing, click to open the Rotation subpanel in the Properties panel, as shown in Figure 8-8. Notice that in the timeline, Flash has added a property keyframe to every frame of the tween, since the rotation of the text field changes in every single frame.
Preview your animation (Ctrl+Enter or ⌘-Return).
Your animation has two text fields that follow a circular path. The text that says "oriented" is oriented toward the circle and rotates as it makes its rounds. The text that says "not oriented" remains upright while it follows the motion path.
Figure 8-8. Here the Rotation panel is set to align a symbol to the motion path. Other options (not set) control the direction, angle, and number of rotations.
The Rotation subpanel in the Properties panel has a few other settings in addition to "Orient to path." You can use the Direction drop-down menu to choose clockwise (CW) or counterclockwise (CCW) rotation for a tweened symbol or text field. This rotation refers to the tweened object rotating around its center point, not to its path around the circular motion path; in other words, it makes a text field or symbol spin during the tween. Above the Direction drop-down menu, you can set the number of times the object spins and its angle at a particular point in time.
Note
If you turn on "Orient to path", these other settings are reset, as shown in Figure 8-8. Vice versa is true, too. Setting Direction to any setting other than "none" deselects the "Orient to path" option.
Suppose you create the perfect tween for a logo or a text banner. It spins, it moves in 3-D, and even the transparency changes so it fades in and out at just the right moments. Then your client informs you of a big change—there's a new company logo or different text. Before you pull your hair out, read on to see how easy it is to swap the object of a motion tween. Remember, a motion tween is applied to a single object, so it's simply a matter of shifting all the property value changes over to a new movie clip or text field. To swap a symbol for a tweened object, follow these steps:
In the original tween, select the symbol.
The symbol's properties appear in the Properties panel.
In the Properties panel, click the Swap button.
The Swap button appears beneath the symbol's name and type.
In the Swap Symbol box, select the new symbol, and then click OK.
The new symbol replaces the old symbol and performs all the same property changes.