Edit the motion path of a tween



You can edit the motion path of a tween in the following ways:

  • Change the position of the object in any frame of the tween span.

  • Move the entire motion path to a different location on the Stage.

  • Change the shape or size of the path with the Selection, Subselection, or Free Transform tools.

  • Change the shape or size of the path with the Transform panel or Property inspector.

  • Use the commands in the Modify > Transform menu.

  • Apply a custom stroke as a motion path.

  • Use the Motion Editor.

You can use the Always Show Motion Paths option to show all motion paths on all layers on the Stage simultaneously. This display is helpful when designing multiple animations on different motion paths that intersect each other. When a motion path or tween span is selected, you can choose this option from the Property inspector options menu.

Change the position of the tweened object

The simplest way to edit a motion path is to move the target instance of the tween in any frame of the tween span. If the frame does not already contain a property keyframe, Flash adds one to it.

  1. Place the playhead in the frame where you want to move the target instance.
  2. With the Selection tool, drag the target instance to a new location on the Stage.

The motion path updates to include the new location. All other property keyframes in the motion path remain in their original locations.

Change the location of a motion path on the Stage

You can drag the entire motion path on the Stage or set its location in the Property inspector.

  1. Click the Selection tool from Tools panel.
  2. Select the motion path by doing one of the following:

    • Click the motion path. Flash displays the Motion Tween properties in the Property inspector. Do not click the tween target instance.

    • Drag a marquee around the motion path and the target instance to select them both.

  3. Move the motion path by doing one of the following:

    • Drag the path to desired location on the Stage.

    • Set the X and Y values for the path in the Property inspector. The X and Y values are for the upper-left corner of the bounding box of the motion path.

    • Use the Arrow keys to move the motion path.

Note: To move the tween target instance and the motion path by specifying a location for the motion path, select both and enter the X and Y locations in the Property inspector. To move a tweened object that has no motion path, select it and enter X and Y values in the Property inspector.

Edit the shape of a motion path with the Selection and Subselection tools

With the Selection and Subselection tools, you can reshape a motion path. With the Selection tool, you can reshape a segment by dragging. Property keyframes in the tween appear on the path as control points. With the Subselection tool, you can expose the control points and Bezier handles on the path that correspond to each position property keyframe. You can use these handles to reshape the path around the property keyframe points.

When you create a non-linear motion path such as a circle, you can have the tweened object rotate as it moves along the path. To maintain a constant orientation relative to the path, select the Orient to Path option in the Property inspector.

A tweened object not oriented to the motion path (left) and oriented to the motion path (right).

  1. Click the Selection tool in the Tools panel.
  2. Click the Stage away from the motion path and the tween target instance so that neither is selected.
  3. With the Selection tool, drag any segment of the motion path to reshape it. Do not click to select the segment first.
  4. To expose the Bezier control points of a property keyframe point on the path, click the Subselection tool and then click the path.

    The property keyframe points appear as control points (small diamonds) on the motion path.

  5. To move a control point, drag it with the Subselection tool.
  6. To adjust the curve of the path around a control point, drag the Bezier handles of the control point with the Subselection tool.

    If the handles are not extended, you can extend them by Alt-dragging (Windows) or Option-dragging (Macintosh) the control point.

Edit a motion path with the Free Transform tool

  1. Click the Free Transform tool in the Tools panel.
  2. With the Free Transform tool, click the motion path. Do not click the tween target instance.
  3. Scale, skew, or rotate the path with the Free Transform tool.
Note: You can also perform free transforms on the path by selecting it with the Subselection tool and then pressing the Control (Windows) or Command (Macintosh) key. Pressing the key displays the same controls as the Free Transform tool. You can then drag to perform transforms while pressing the key.

Delete a motion path from a tween

  1. Select the motion path on the Stage by clicking it with the Selection tool.
  2. Press the Delete key.

Copy a motion path as a stroke

  1. Click the motion path on the Stage to select it.
  2. Choose Edit > Copy.

You can then paste the path into another layer as a stroke or as a motion path for another motion tween.

Apply a custom stroke as a motion path

You can apply a stroke from a separate layer or a separate timeline as the motion path for a tween.

  1. Select a stroke on a layer separate from the tween layer and copy it to the clipboard.

    The stroke must not be closed. Only uninterrupted strokes can be used.

  2. Select a tween span in Timeline.
  3. With the tween span still selected, paste the stroke.

    Flash applies the stroke as the new motion path for the selected tween span. The target instance of the tween now moves along the new stroke.

  4. To reverse the start and end points of the tween, right-click (Windows) or Ctrl-click (Macintosh) the tween span and select Motion Path > Reverse Path in the tween span context menu.

Use roving property keyframes

A roving property keyframe is a keyframe that is not linked to a specific frame in the Timeline. Flash adjusts the position of roving keyframes so that the speed of motion is consistent throughout a tween.

Roving keyframes are available only for the spatial properties X, Y, and Z. They are useful when you have edited a motion path on the Stage by dragging the tweened object to different locations in different frames. Editing motion paths this way often creates path segments in which the motion is faster or slower than the other segments. This is because the number of frames in the path segment is greater or smaller than other segments.

Using roving property keyframes is helpful for making the speed of an animation consistent throughout a tween. When property keyframes are set to roving, Flash adjusts the position of the property keyframes in the tween span so that the tweened object moves the same distance in each frame of the tween. You can then use easing to adjust the movement so that the acceleration at the beginning and end of the tween has a realistic appearance.

When you paste a custom path onto a tween, Flash sets the property keyframes to roving by default.

To enable roving keyframes for an entire tween:

  • Right-click (Windows) or Command-click (Macintosh) the tween span in the Timeline and choose Motion Path > Switch keyframes to roving in the context menu.

To enable roving for an individual property keyframe in a tween:

  • Right-click (Windows) or Command-click (Macintosh) the property keyframe in the Motion Editor panel and choose roving in the context menu. For more information about the Motion Editor, see Editing property curves with the Motion Editor.

When property keyframes are set to roving, they appear as round dots instead of squares in the Motion Editor.

Note: If you enable roving keyframes for a tween span and then disable them, the keyframes retain their locations in the span that resulted from enabling roving.
A motion path with roving keyframes turned off. Note the uneven distribution of frames, resulting in uneven speed of motion.

The same motion path with roving keyframes turned on, resulting in even distribution of frames along the path and even speed of motion.