How to edit motion tweens using Motion Editor

The Motion Editor in Animate helps you create complex Motion Tweens with minimal effort. The Motion Editor presents a compact view of all Properties applied to a selected tween span as two-dimensional graphs. You can choose to modify each of these graphs, and hence their corresponding tweened properties individually. With precise control and high granularity, you can greatly enrich your animations to emulate real-world behavior using the Motion Editor.

About Motion Editor

The Motion Editor is desgined to make it easy for you to create complex tweens. Motion Editor lets you control and manipulate properties of a tween. After creating a Motion tween, you can take advantage of the Motion Editor to precisely refine your tween. The Motion Editor facilitates focused editing of the tween by allowing you to select and modify one property at a time.

Why use the Motion Editor?

The Motion Editor is designed to make it easy for you to create complex tweens. Hence, the Motion Editor offers granular control over tween and its properties. The following can only be achieved using the Motion Editor:

• Easy access and modification of all Properties applied to a tween within a single panel.
• Add different ease presets or custom ease: The Motion Editor lets you add different presets, add multiple presets, or create a Custom ease. Adding Ease to a tweened property is an easy way to emulate real world behavior of objects.
• Resultant curve: You can apply eases to individual properties, and see the effects of eases on individual property graphs using the Resultant curve. A resultant curve is a representation of the actual tween.
• Anchor Points and Control Points: You can isolate and make edits to key sections of a tween using Anchor Points and Control Points.
• Refined Animations: The Motion Editor is the only way to make certain kinds of animations, such as creating a curved path tween on an individual property by adjusting its Property curve.

Opening the Motion Editor panel

In this article, it is assumed that you have already created a Motion Tween, and are using the Motion Editor to refine your tween.

To open the Motion Editor, do the following:

1. On the Timeline, select the motion tween span you want to refine, and double-click the tween span. You could also right-click on the tween span and select Refine Tween to bring up the Motion Editor.

Property Curves

The Motion Editor represents Properties of a tween using two-dimensional graphs called Property Curves. These graphs are composited within a grid on the Motion Editor. Each property has its own Property Curve plotted against time on the horizontal axis (from left to right), and the change to the value of a property on vertical axis.

You can manipulate Motion Tweens by editing Property Curves within Motion Editor. To its end, the Motion Editor facilitates smooth editing of Property Curves, there by allowing you to gain precise control over the tween. You can manipulate a Property Curve by adding property Keyframes or Anchor Points. This allows you to manipulate key parts of the Property Curve, where you want the tween to display transitions for a said Property.

Take note that the Motion Editor allows you to edit only such properties that can be altered during a tween span. For example, the Quality property of the Gradient Bevel filter can only be assigned one value during a tween span, and hence, cannot be edited using the Motion Editor.

Anchor Points

Anchor Points provide greater control over Property Curves, by allowing you to explicity modify key parts of a curve. You can precisely control the shape of most curves in the Motion Editor by adding property keyframes or anchor points.

The Anchor Points appear as squares on the grid. Using the Motion Editor you can control the behavior of the tween by adding Anchor Points to a Property Curve or modifying their positions. On adding an Anchor Point, a corner is created, where in the Curve passes through angles. However, you can smoothen any segment of a Property Curve using Bezier controls for Control Points.

Control Points

Control Points allow you to smoothen or modify a Property Curve on either sides of an Anchor Point. Control Points can be modified using standard Bezier Controls.

Editing Property Curves

To edit the Properties of a tween, do the following:

1. In Animate, with a tween span selected, Right-click > select Refine Tween to bring up the Motion Editor (or simply, double-click the selected tween span).
2. Scroll down and select the Property you want to edit. To invert selection, right-click and select Invert Selection.
   
3. With the Property Curve for the selected Property in view, you can choose to do the following:
   1. Add Anchor Point by clicking the  button and clicking a desired frame on the Property Curve to add an Anchor Point. Or double-click the curve to add an anchor point.
   2. Select and move an existing Anchor Point (in any direction) to a desired frame on the grid. The vertical limit of the movement is restricted to the value range of the Property.
   3. Remove an Anchor Point by selecting and pressing Ctrl + Click (Cmd + Click on MAC).

Editing Property Curves using Control Points

To edit Property Curves using Control Points, do the following:

1. In Animate, with a tween span selected, Right-click > select Refine Tween to bring up the Motion Editor (or double-click the selected tween span).
2. Scroll down and select the Property you want to edit. To invert selection, right-click and select Invert Selection.
   
3. With the Property Curve for the selected Property in view, you can choose to do the following:
   1. Add Anchor Point by clicking the  button and clicking a desired frame within the grid to add an Anchor Point. Or double-click the curve to add an anchor point.
      
      OR
      
      
   2. Select an existing Anchor Point on the grid.
4. With the Anchor Point selected, Alt+Drag vertically to enable Control Points. You can modify the shape of the curve to smoothen corner segments using bezier controls. 

Copying Property Curves

You can also copy Property Curves across Properties within the Motion Editor.

To copy a Property Curve, do the following:

1. In Animate, with a tween span selected, Right-click > select Refine Tween to bring up the Motion Editor (or double-click the selected tween span).
2. Select the Property whose curve you want to copy, and right-click > Copy OR press Ctrl + C (Cmd + C on MAC).
3. To paste the curve with absolute values, select the Property you want to paste the copied property curve on, and right-click > Paste or press Ctrl + V (Cmd + V on MAC).
4. To paste the curve within the target curve’s range, select the Property you want to paste the copied property curve on, and right click > Paste to fit current range.

Reversing a Property Curve

To reverse a Property Curve, do the following:

1. In the Motion Editor, select a Property.
2. Right-click > Reverse to reverse the Property Curve.

Applying preset and custom Eases

Easing allows you to control the speed of a tween to produce realistic motion with pleasing effects. Applying Eases on motion tweens allows you to manipulate the beginning and the end parts of an animation to cause a more natural movement of the object. For example, one of the many common uses of easing is to add realistic acceleration and deceleration at the ends of the motion path of an object. In a nut shell, Animate makes alters to the rate of change of the value of Property depending on the Ease applied to it.

An ease can be simple or complex. Animate includes a wide range of preset eases that you can apply for simple or complex effects. You can also assign Strength to an Ease to enhance the visual effect of a tween. In the Motion Editor, you can also create your own custom ease curves.

Since ease curves in the Motion Editor can be complex, you can use them to create complex motion on the Stage without creating complex motion paths on the Stage. You can also use ease curves to create complex tweens of any other properties in addition to the spatial properties such as Location X and Y.

Custom Eases

Custom easing lets you create your own ease using the Custom Ease curve in the Motion Editor. You can then apply the custom ease to any property of a selected tween.

The Custom ease graph represents the degree of motion over time. Frames are represented by the horizontal axis, and the tween's percentage of change is represented by the vertical axis. The first value in the animation is at 0%, and the last keyframe can be set from 0 through 100%. The rate of change of the tweened instance is shown by the slope of the graph's curve. If you create a horizontal line (no slope) on the graph, the velocity is zero; if you create a vertical line on the graph, there is an instantaneous rate of change.

Applying Ease curve to a Property Curve

To add Ease to a tweened Property, do the following:

1. In the Motion Editor, select the Property you want to apply Ease for, and click the Add Ease button to display the Ease panel.
2. On the Ease panel, you can choose to:
   1. Apply a Preset Ease by selecting a preset from the left pane. Specify Ease strength by entering a value in the Easing field.
   2. Create a custom ease by selecting Custom Ease on the left pane and modifying the Ease curve. For more information, see Creating and Applying Custom Ease curves.
3. Click anywhere outside of the Ease panel to close it. Notice that the Add Ease button reads the name of the Ease you applied to the Property.
   

Creating and applying custom Ease curves

To create and apply Custom Ease to a tweened Property, do the following:

1. In the Motion Editor, select the Property you want to apply Custom Ease for, and click the Add Ease button to display the Ease panel.
2. On the Ease panel, you can modify the default Custom Ease curve by:
   1. Pressing Alt + Click to add Anchor Points on the curve. Further, you can move these points to any desired point on the grid.
   2. Enabling Control Points (alt+click on an Anchor Point) on an Anchor point to smoothen curve segments on either sides of an Anchor Point.
3. Click outside the Ease panel to close it. Notice that the Add Ease button reads Custom, indicating that you applied a Custom Ease to the Property.

Copying Ease Curves

To copy an Ease Curve, do the following:

1. On the Ease panel, select an Ease curve you want to copy, and press Ctrl + C (Cmd + C on MAC).
2. Select the Property you want to paste the copied ease curve on, and press Ctrl + V (Cmd + V on MAC).

Applying Ease to multiple properties

You can now apply preset or custom Ease to property groups. The Motion Editor organizes properties hierarchically in to property groups and subproperties. You can choose to apply Ease at any level, that is, to individual properties or property groups, within this hierarchy.

Note that, after you apply Ease to a Property group, you can continue to edit the sub-properties individually. This also means, that you can apply a different Ease (from that of the group) to a subproperty.

To apply Ease to multiple properties, do the following:

1. In the Motion Editor, select the Property Group, and click the Add Ease button to display the Ease panel.
2. On the Ease panel, select a Preset Ease or create a Custom Ease. Click anywhere outside the Ease panel to apply the selected Ease on the Property Group.

Resultant Curve

When you apply an ease curve to a property curve, a visual overlay called the Resultant Curve appears on the grid. The resultant curve is an accurate representation of the effect of Ease applied to a Property curve. It is indicative of the final animation of the tweened object. The resultant curve  makes it easier for you to understand the effect that you see on the Stage when testing the animation.

Controlling the Motion Editor display

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

• The new Motion Editor displays only those Properties that are applied to a tween.
• You can use the fit to view toggle () to fit Motion Editor to the width of the timeline.
• You can adjust the size of the Motion Editor and choose to display less () or more frames () in using the Timeline Zoom controls. You can also use the slider to set an appropriate view of the Motion Editor.
• The Motion Editor is also equipped with vertical zoom toggle. You can use the Vertical Zoom to display a suitable range of property values within the Motion Editor. Zooming in also allows you to make focused and finer edits to a Property Curve.
• The Properties appear expanded in the left pane of the Motion Editor, by default. However, you collapse the drill-down list by clikcing a property name.

Keyboard shortcuts

Double-click - on a property curve to add Anchor Point.

Alt+Drag - an anchor point to enable Control Points.

Alt+Drag - to manipulate a selected control point (single-sided editing).

Alt-click - an anchor point to disable control points (corner point).

Shift+drag - to move an anchor point in linear direction.

Command/Control + Click - to delete an anchor point.

Up/down arrow keys - to move a selected anchor point vertically.

Command/Control + C/V - to copy/paste a selected curve.

Command/Control + R - to reverse a selected curve.

Command/Control + Scroll - to zoom-in/out.