Orienting Graphics to a Motion Path

I l @ ve RuBoard

Orienting Graphics to a Motion Path

Imagine a waiter carrying a full tray through a crowded room, raising and lowering the tray to avoid various obstacles but always keeping the tray level so as not to spill anything. That's how the animation you created in the preceding exercise works. Flash moved the circle in each in-between frame to snap its center point to the motion guide, but it did not rotate the circle at all.

With a circle, that procedure results in a nat-ural-looking motion, but with other objects, the result is very unnatural . Imagine animating a lizard following a path: If the lizard graphic snaps to different spots along the motion path, never changing the way that it's oriented in space, the lizard appears to be in the grip of some invisible force, not moving forward of its own volition.

To create more-natural movement, Flash gives you the option of forcing a tweened graphic to orient itself parallel to the path in each frame of the tween.

To match a graphic's orientation to the path:

1. Create a 10-frame motion tween of an item that follows a motion guide, using the steps in the first exercise in "Moving Graphics Along a Path" earlier in this chapter.

   This time, however, don't use a circle; draw a small animal or create a simple noncircular graphic. An arrow or triangle works well.

2. Turn on onion skinning to see how the item moves along the path without orientation.

3. In the Timeline, in the layer containing the tweened graphic, select Frame 1.

4. In the Frame Property Inspector, check the Orient to Path checkbox (Figure 9.28).

   Figure 9.28. With Motion tweening selected in the Frame Property Inspector, check Orient to Path to make Flash rotate a tweened item to "face" the direction of movement.

   

   Flash redraws the tween. In the in-between frames , Flash rotates the tweened item to align it with the path more naturally (Figure 9.29).

   Figure 9.29. The arrow in the top tween is not oriented to the path; it stays parallel to the bottom of the Stage and moves to various points along the path. The bottom tween is oriented to the path. The arrow rotates to align better with the path.

   

Tips

• The Orient to Path option does not always create the most natural positions for your graphic. Step through the tween one frame at a time. When you get to a frame where Flash positions the graphic poorly, you can fix it. In the Timeline, select the in-between frame, and choose Insert > Keyframe. In the new keyframe that Flash creates, select the graphic and rotate it manually to align it with the motion guide. Flash redraws the in-between frames (Figure 9.30).

  Figure 9.30. Here, Flash could be doing a better job of aligning this lizard with the path (top). Creating a new keyframe and rotating the lizard manually in the seventh frame (middle) helps the Orient to Path feature do its job (bottom). (Tweaking the orientation of the lizard in the first and last keyframes would further improve this tween.)

  

• Turn on onion skinning as you follow the preceding tip. That way, you can see how your adjustments affect the orientation of your graphic in each frame of the tween.

• Sometimes, moving the center point of your graphic will help it orient to the path in a more lifelike manner. The center point of the lizard in Figure 9.30 coincides with the center point of the graphic's bounding box. Because the lizard has a huge curved tail, that point is not even inside the lizard body. Moving the center point to the middle of the lizard's body lets the Orient to Path setting create more lifelike movement. (You can use the free-transform tool to reposition the center point of a grouped graphic or a symbol instance.)

I l @ ve RuBoard