The Motion Editor in Animate CC 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.
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.
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:
In this article, it is assumed that you have already created a Motion Tween, and are using the Motion Editor to refine your tween. For information on creating a Motion Tween, see Motion Tween Animation.
To open the Motion Editor, do the following:
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 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 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.
To edit the Properties of a tween, do the following:
To edit Property Curves using Control Points, do the following:
You can also copy Property Curves across Properties within the Motion Editor.
To copy a Property Curve, do the following:
To reverse a Property Curve, do the following:
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 CC 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 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.
To add Ease to a tweened Property, do the following:
To create and apply Custom Ease to a tweened Property, do the following:
To copy an Ease Curve, do the following:
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:
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.
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.
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.