Requirements

Prerequisite knowledge

A basic knowledge of the Flash Professional workspace.

User level

Beginning

In Adobe Flash Professional CS5 when you position-tween an instance across the Stage, you see a motion path for that animation appear on the Stage. The motion path is a line that represents the spatial movement of the tweened instance; its dots (sometimes called "tween dots" or "frame dots") represent the target objects position along the path at frames on the timeline—either single frames, or groups of frames if you have a long tween span selected. The tween dots not only signify frames, but can help you see the instance's position as affected by any applied easing or 3D.

Using the Motion Property inspector

When you select a tween span or a motion path on the Stage, the context-sensitive Property inspector displays motion properties (see Figure 32). This is called the Motion Property inspector, and it's where you can find useful information about the selected motion tween, such as the location and size of its motion path and its instance name (if one has been added for the tween). You can also rotate the tweened instance across the entire tween span, set the tween's orientation along its motion path, or apply a simple ease from the Motion Property inspector.

You need to use the Motion Property inspector's panel menu to access an option that lets you view all motion paths on the stage simultaneously. When you have multiple motion paths on the Stage, select one of the tweens and select Always Show Motion Paths from the Motion Property inspector panel menu (see Figure 33). If you do not have this option selected, you see only the motion path when the playhead is within the tween span.

Creating and removing motion paths

If you changed the position of a tweened instance in earlier sections of this learning guide, you have already created a motion path. It is very easy to do in Flash Professional.

To create a motion path for a tweened instance:

  1. Create a new document with a movie clip on the Stage.
  2. Right/Control-click the instance on the Stage and choose Create Motion Tween.
  3. Drag the instance to a new location on the Stage. A motion path is created between the first and second position of the instance (see Figure 34).
  4. Select the motion path on the Stage, and then press the Delete or Backspace key. The motion path is removed from the tween, so the instance no longer animates its position.
  5. Insert a new layer on the Timeline, and use the Pencil or Pen tool to draw a path.
  6. Double-click the path to select it using the Selection tool, and then select Edit > Copy to copy the path to the clipboard.
  7. Select the tween span and select Edit Paste. The path you drew is now used as the motion path for the tween.

There are some limitations to the motion path you can paste. It cannot be a closed shape, such as a closed circle. To use a circle shape, you would need to erase a bit of the circle so it has a slight gap. You also cannot use fills, like the Brush tool, to create motion paths. You also need to make sure that your path does not have segments that overlap for more than one pixel (you might need to zoom in to see them), although intersecting lines in a path, such as a loop, are okay. To successfully paste the path, you may need to optimize it or delete and rejoin the offending sections.

If you have a very short motion tween and paste a long path onto that tween, you may see a dialog box that prompts you to optimize or sample the motion path. This affects how many keyframes are added to the x and y property graphs. Optimizing will reduce the number of keyframes in the graphs, although this may affect the appearance of the motion path on the Stage. Sampling the motion path will maintain the Stage appearance, although you will have a lot of keyframes in the Motion Editor. This also means your path will be difficult to further modify on the Stage.

You can edit a motion path after you create or add them to the instance. Keep reading to learn how.

Editing motion paths

Editing motion paths works a lot like editing paths using the Subselection tool, so it may be familiar if you're used to the Pen. You can also modify your paths by bending them like you do with the Selection tool in Flash.

To edit a motion path using the Selection tool:

  1. Open the file called edit-path-selection.fla from the source files.
  2. Select the Selection tool, and then make sure the path is deselected on the Stage.
  3. Move the Selection tool near the motion path until you see a curved line next to the arrow (see Figure 35).
  1. Click and drag the line segment so it bends.
  2. Move the cursor over the endpoints of the motion path, or other points along the path until you see the following cursor (see Figure 36) .
  1. Drag the end or corner point to further modify the motion path.

To edit a motion path using Bézier controls:

  1. Open the file called edit-path-bezier.fla from the source files.
  2. Select the Subselection tool, and then select the motion path on the Stage. Notice that several hollow squares appear along the path, representing the property keyframes on the path.
  3. Click and drag one of the hollow squares on the Stage (see Figure 37).
  1. Now hold Alt/Option and drag one of the hollow squares. Handles extend from the control point, and it converts to a smooth point instead of a corner point.
  2. Select the Convert Anchor Point tool (you can access this from the Pen tool sub-menu in the Tools panel, it looks like an upside-down V).
  3. Click the point you just edited with the Convert Anchor Point tool. It converts back to a corner point. You can click and drag the point again using this tool, and it changes to a smooth point again.

Tip: You can use the Remove Anchor Point tool to delete control points from the path (except for the first one). The other drawing tools cannot be used with the path.

Another way to edit a motion path is to draw a new one using the Pencil or Pen, and then paste it onto your tween. There are times when this can be the best and easiest solution for changing the tween path.

To adjust the position motion paths on the Stage:

  1. Open any file that contains an animation with a motion path.
  2. Select the motion path using the Selection or Subselection tool.
  3. Drag it to a new position on the Stage. Yeah, it's fairly straightforward.

Tip: You can select multiple motion tweens and adjust their positions on the Stage. (You might want to choose the Show All Motion Paths option from the Motion Property inspector panel menu first.) Make sure that you select the tweened instance and the motion path for all of your instances before dragging them, or you might end up with some inadvertent motion paths.

Orienting animation along a motion path

You might need your tweened instance to look like it's consistently rotated on the motion path. If you select Orient to Path in the Motion Property inspector, the baseline of the selected tweened instance orients to the motion path. You can see how this works in the following example.

To orient animation along a motion path:

  1. Open the file called orient-to-path.fla from the source files. Scrub the timeline to view the animation.
  2. Select the tween span in the Timeline, or the motion path, and open the Property inspector.
  3. Select the Orient to Path option (see Figure 38).
  1. Scrub the timeline to view the changed animation (also demonstrated in Figure 39).

If you look in the Motion Editor, you see that the rotation property is used to properly orient your tweened instance on each frame. For more information on how the Motion Editor works, see Animation Learning Guide for Flash: Motion Editor.

If you use the rotation tool to rotate the object at any point along the path, while orient to path is on, the tween is recalculated to use that new orientation over the entire tween—meaning that Flash maintains that new rotation in relation to the path for the rest of the tween. You can do this at any playhead position along the tween span.

Note: The tween span in the timeline now shows property keyframes on all frames of the tween span, because rotation has been updated on each frame. This might not be as useful to you, so you may want to change the settings for the tween span. Right/Control-click the tween span and choose View Keyframes > Rotation to deselect the Rotation property. The property keyframes are no longer shown for rotation.

Using roving keyframes

Roving keyframes let you create smooth animation across a motion path. When you paste a motion path onto a tween span, roving keyframes create the animation along the motion path so it moves at the same rate across the path that you paste. The animation is smooth and consistent across the path, largely because the keyframes are not bound to frame boundaries. The keyframes will fall on or between frame boundaries as necessary to achieve this. This kind of keyframe is called a roving keyframe.

Note: You will only find roving keyframes on x, y, and z (spatial) properties. For more information on spatial properties, see "Spatial properties and the Motion Editor."

Roving keyframes are not the same as property keyframes. They display in the Motion Editor differently (as circles instead of squares), can exist between frame boundaries (for example, between frame 4 and 5), and you cannot edit them like you can edit property keyframes. As such, they do not show up as diamond icons in a timeline span. Roving keyframes are controlled by Flash to make correct time calculations so that your motion tween animates smoothly. Therefore, consider a roving keyframe to be controlled by Flash unless you convert it to a non-roving keyframe so you can edit it.

Note: If you adjust the property keyframes around a roving keyframe, the roving keyframes will update so the animation remains smooth between those adjacent property keyframes.

Non-roving keyframes are used when you need the object to be at a specific position (x, y, or z) at a specific time on the Timeline. If you want a point on the path to exist in order to help define the actual shape of the path, but you don't care if or when the target object ever hits that point in time, then set the keyframe to roving. Setting all keyframes in a tween span to roving is useful when you want to make the motion along the path constant, and then use easing to control its speed along that path.

Switching a span between roving and non-roving keyframes

You can use the tween layer's context menu to switch a tween span between roving and non-roving keyframes. This can be useful when you want to change an animation to move at the same rate of speed along the motion path. For example, you may have an animation that moves quickly between the first and second property keyframe, but then moves slowly along the path between the second and third keyframes. To see an example of how to make this animation move along the path at the same speed, follow this exercise:

  1. Open roving.fla from this learning guide's source files.
  2. Select Control > Test Movie to view the animation, then return to the authoring environment.
  3. Right/Control-click the tween span and choose Motion Path > Switch keyframes to roving.
  4. Test the SWF file again. This time the motion is distributed evenly across the entire span.

For information about roving keyframes in the Motion Editor, see "Spatial properties and the Motion Editor."

Where to go from here

Read other sections of the Animation Learning Guide to learn more about working with motion tweens: