Animate along a Path with Flash CS5 Motion Guides and Snapping - dummies

Animate along a Path with Flash CS5 Motion Guides and Snapping

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Motion tweens you create in Adobe Flash Creative Suite 5 involve simple animation from one location to another. For some Flash CS5 tweens, however, you’ll want to have your symbol follow a more elaborate path of motion, such as a race car following a track. In these cases, you can give your tween a specific path to follow by creating a custom motion path.

Use Motion Guides in Flash CS5

Motion guides are especially useful when you work with a shape that has an obvious orientation (or direction, such as the nose of a car or an airplane). For this reason, be sure to use a symbol with an obvious orientation (such as a triangle) as your tweened object in these steps:

  1. Create a new Flash document, and create some interesting graphics on the stage.

  2. Using the Selection tool, select the graphics you created and press the F8 shortcut key to convert the graphic to a symbol.

  3. When the Convert to Symbol dialog box appears, choose Graphic from the Type drop-down list and enter a name for the symbol in the Name text box.

  4. Create another new layer on the Timeline, select the Pencil tool in the Tools panel, and select a stroke color from the Property inspector on the right.

    Make sure that Object Drawing mode is turned off. This button appears at the bottom of the Tools panel when the Pencil tool is selected.

  5. Draw a path on the stage with the Pencil tool.

    Jambone Creativ”/>
    Credit: Logo and illustration courtesy of Jambone Creative.
  6. Switch to the Selection tool and double-click the path you just created.

  7. Choose Edit→Cut to remove the path from the stage temporarily.

  8. Right-click (Windows) or Control-click (Mac) Frame 1 of the layer that contains your symbol and choose Create Motion Tween from the contextual menu that appears.

    A new tween span is created for your triangle symbol.

  9. Choose Edit→Paste in Place to paste the path you created earlier.

    Flash automatically converts the path to a motion path, and your symbol snaps to the path.

    Jambone Creativ”/>
    Credit: Logo and illustration courtesy of Jambone Creative.
  10. Press Enter or Return to play your movie.

    The symbol follows the path you created. Next, you can tweak the tween so that the symbol follows the exact orientation of the path.

  11. Select Frame 1 of your tween span; in the Property inspector, locate and select the Orient to Path check box (it’s located under the Rotation options).

  12. Press Enter or Return again to play your movie and you’ll see that the symbol now changes rotation to match the direction of the path.

Starting off your symbol on the right foot often helps produce better results when using Orient to Path. If the symbol orientation isn’t what you expect, try rotating the symbol in the right direction at both the beginning and ending frames of the tween span.

Watch out for paths that overlap themselves — the results may not be what you expect.

Use Snapping to Align Objects in Flash CS5

Snapping is useful for lining up objects uniformly, for positioning artwork on a ruler guide, and especially for positioning a symbol at the beginning or end of a motion guide path.

You can find snapping options by choosing View→Snapping, and you can fine-tune snapping behavior by choosing View→Snapping→Edit Snapping.

Choose View→Snapping→Snap to Grid when working with a grid or View→Snapping→Snap to Pixels to ensure that objects are positioned to the nearest whole pixel on the stage.