Editing property curves with the Motion Editor



The Motion Editor panel lets you view all tween properties and their property keyframes. It also provides tools for adding precision and detail to tweens. The Motion Editor displays the properties of the currently selected tween. Once you have created a tween in the Timeline, the Motion Editor allows you to control the tween in several different ways.

The Motion Editor panel allows you to:

  • Set the value of individual property keyframes.

  • Add or remove property keyframes for individual properties.

  • Move property keyframes to different frames within the tween.

  • Copy and paste a property curve from one property to another.

  • Reverse the keyframes for individual properties.

  • Reset individual properties or property categories.

  • Exert fine control over the shape of the tween curves of most individual properties using Bezier controls. (The X, Y, and Z properties do not have Bezier controls.)

  • Add or remove filters or color effects and adjust their settings.

  • Add different preset eases to individual properties and property categories.

  • Create custom ease curves.

  • Add custom easing to individual tweened properties and groups of properties.

  • Enable roving for individual property keyframes for X, Y, and Z properties. Roving allows the property keyframe to move to different frames or between individual frames to create smooth motion.

View full size graphic
The Motion Editor.

A.
Property values

B.
Reset Values button

C.
Playhead

D.
Property curve area

E.
Previous Keyframe button

F.
Add or Remove Keyframe button

G.
Next Keyframe button

When you select a tween span in the Timeline or a tweened object or motion path on the Stage, the Motion Editor displays the property curves of the tween. The Motion Editor displays the property curves on a grid representing the frames of the Timeline in which the selected tween occurs. The playhead appears in both the Timeline and the Motion Editor, always in the same frame number.

The Motion Editor represents tweened property values using a two-dimensional graph for each property. Each property has its own graph. Each graph represents time horizontally (from left to right), and the change to a property value vertically. Each property keyframe for a specific property appears as a control point on the property curve for that property. If an ease curve is applied to a property curve, a second curve appears as a dashed line in the property curve area. The dashed line curve shows the affect of the ease on the property values.

Some properties cannot be tweened because they can have only one value for the life of an object in the Timeline. An example is the Quality property of the Gradient Bevel filter. These properties can be set in the Motion Editor, but do not have graphs.

You can precisely control the shape of most property curves in the Motion Editor by adding property keyframes and manipulating the curve with standard Bezier controls. For the X, Y, and Z properties, you can add and remove control points on the property curves, but you cannot use Bezier controls. When you change the control points of a property curve, the changes appear on Stage immediately.

The Motion Editor also allows you to apply easing to any property curve. Applying easing in the Motion Editor lets you create certain types of complex animation effects without creating complex motion paths. Ease curves are graphs that show how the values of a tweened property are interpolated over time. By applying an ease curve to a property curve, you can create complex motion with little effort.

Some properties have minimum or maximum values that cannot be exceeded, such as Alpha transparency (0-100%). The graphs for these properties cannot apply values outside the acceptable range.

The following video tutorials demonstrate how to use the Motion Editor:

Control the Motion Editor display

In the Motion Editor, you can control which property curves appear, and the size of the display of each property curve. Property curves that are displayed at a large size are easier to edit.

  • To adjust which properties appear in the Motion Editor, click the triangle next to a property category to expand or collapse the category.

  • To control the number of frames of a tween shown in the Motion Editor, enter the number of frames you want to display in the Viewable Frames field at the bottom of the Motion Editor. The maximum number of frames is the total number of frames in the selected tween span.

  • To toggle a property curve between expanded and collapsed views, click the property name. The expanded view provides a lot more room to edit the property curve. You can adjust the size of the collapsed and expanded views with the Graph Size and Expanded Graph Size fields at the bottom of the Motion Editor.

  • To enable or disable tooltips in the graph area, select Show Tooltips from the panel options menu.

  • To add a new color effect or filter to a tween, click the Add button in a property category row and choose the item you want to add. The new item appears in the Motion Editor immediately.

Edit the shape of property curves

The Motion Editor allows you to precisely control the shape of each property curve of a tween, except for X, Y, and Z. For all other properties, you can edit the curve of each graph with standard Bezier controls. Using these controls is similar to how you edit strokes with the Selection tool or the Pen tool. Move a curve segment or control point upward to increase the property value, move it downward to decrease the value.

By working with property curves directly, you can:

  • Create complex curves for complex tweened effects.

  • Adjust property values at property keyframes.

  • Increase or decrease property values along the entire property curve.

  • Add additional property keyframes to a tween.

  • Set individual property keyframes to roving or non-roving.

In the Motion Editor, the basic motion properties X, Y, and Z are different from other properties. These three properties are linked together. A frame in a tween span that is a property keyframe for one of these properties must be a property keyframe for all three of them. In addition, control points on the X, Y, and Z property curves cannot be edited with Bezier controls.

Control points of property curves can be either smooth points or corner points. When a property curve passes through a corner point, it forms an angle. When a property curve passes through a smooth point, it forms a smooth curve. For X, Y, and Z, the type of a control point in the property curve depends on the type of the corresponding control point in the motion path on the Stage.

In general it is best to edit the X, Y, and Z properties of a tween by editing the motion path on the Stage. Use the Motion Editor for minor adjustments to the property values or to move their property keyframes to different frames of the tween span.

  • To change the shape of a curve segment between two control points, drag the segment. When you drag a curve segment, the control points at each end of the segment become selected. If the selected control points are smooth points, their Bezier handles appear.

  • To reset a property curve to a static, non-tweened property value, right-click (Windows) or Command-click (Macintosh) the property graph area and choose Reset Property.

  • To reset an entire category of properties to static, non-tweened values, click the Reset Values button for the category.

  • To reverse the direction of a property tween, right-click (Windows) or Command-click (Macintosh) the property graph area and choose Reverse Keyframes.

  • To copy a property curve from one property to another, right-click (Windows) or Command-click (Macintosh) the graph area of the curve and choose Copy Curve. To paste the curve to another property, the graph area of the property and choose Paste Curve. You can also copy curves between custom eases and between custom eases and properties.

Work with property keyframes

You can edit the shape of a property curve by adding, removing, and editing property keyframes along each graph.

  • To add a property keyframe to a property curve, place the playhead in the desired frame and click the Add or Remove Keyframe button for the property in the Motion Editor.

    You can also Ctrl-click (Windows) or Option-click (Macintosh) the graph in the frame where you want to add the property keyframe.

    You can also right-click (Windows) or Command-click (Macintosh) the property curve and choose Add Keyframe.

  • To remove a property keyframe from a property curve, Ctrl-click (Windows) or Option-click (Macintosh) the control point for the property keyframe in the property curve.

    You can also right-click (Windows) or Command-click (Macintosh) the control point and choose Remove Keyframe.

  • To toggle a control point between corner point and smooth point modes, Alt-click (Windows) or Command-click (Macintosh) the control point.

    When a control point is in smooth point mode, its Bezier handles are exposed and the property curve passes through the point as a smooth curve. When a control point is a corner point, the property curve forms an angle when it passes through the control point. Bezier handles are not exposed for corner points.

    To set the point to smooth point mode you can also right-click (Windows) or Command-click (Macintosh) the control point and choose Smooth Point, Smooth Right, or Smooth Left. To set the point to corner point mode, choose Corner Point.

    View full size graphic
    A property curve showing a smooth point (frame 8) and a corner point (frame 17).

  • To move a property keyframe to a different frame, drag its control point.

    You cannot drag a property keyframe past the keyframes that follow or precede it.

  • To toggle a property keyframe for the spatial properties X, Y, and Z between roving and non-roving, right-click (Windows) or Command-click (Macintosh) the property keyframe in the Motion Editor. For more information about roving keyframes, see Edit the motion path of a tween.

    You can also turn off roving for an individual property keyframe in the Motion Editor by dragging the roving keyframe to a vertical frame divider.

  • To link associated pairs of X and Y properties, click the Link X and Y Property Values button for either one of the properties you want to link. When the properties are linked, their values are constrained so the ratio between them is preserved when you enter a value for either of the linked properties. Examples of associated X and Y properties include the Scale X and Scale Y properties and the Blur X and Blur Y properties of the Drop Shadow filter.