Path Animation

How to Animate along a Path in Flash CS6

Tutorial adapted from “For Dummies” , original link above.

For some tweens in Adobe Flash CS6, 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.

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, make 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 draw a circle using the Oval tool.
  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, select 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.
  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.
  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, which is located under the Rotation options.
  12. Press Enter or Return again to play your movie. The symbol 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.

And it’s done!


Leave a Comment