- Adobe Animate User Guide
- Introduction to Animate
- Animation
- Animation basics in Animate
- How to use frames and keyframes in Animate
- Frame-by-frame animation in Animate
- How to work with classic tween animation in Animate
- Brush Tool
- Motion Guide
- Motion tween and ActionScript 3.0
- About Motion Tween Animation
- Motion tween animations
- Creating a Motion tween animation
- Using property keyframes
- Animate position with a tween
- How to edit motion tweens using Motion Editor
- Editing the motion path of a tween animation
- Manipulating motion tweens
- Adding custom eases
- Creating and applying Motion presets
- Setting up animation tween spans
- Working with Motion tweens saved as XML files
- Motion tweens vs Classic tweens
- Shape tweening
- Using Bone tool animation in Animate
- Work with character rigging in Animate
- How to use mask layers in Adobe Animate
- How to work with scenes in Animate
- Interactivity
- How to create buttons with Animate
- Convert Animate projects to other document type formats
- Create and publish HTML5 Canvas documents in Animate
- Add interactivity with code snippets in Animate
- Creating custom HTML5 Components
- Using Components in HTML5 Canvas
- Creating custom Components: Examples
- Code Snippets for custom Components
- Best practices - Advertising with Animate
- Virtual Reality authoring and publishing
- Workspace and workflow
- Creating and managing Paint brushes
- Using Google fonts in HTML5 Canvas documents
- Using Creative Cloud Libraries and Adobe Animate
- Use the Stage and Tools panel for Animate
- Animate workflow and workspace
- Using web fonts in HTML5 Canvas documents
- Timelines and ActionScript
- Working with multiple timelines
- Set preferences
- Using Animate authoring panels
- Create timeline layers with Animate
- Export animations for mobile apps and game engines
- Moving and copying objects
- Templates
- Find and Replace in Animate
- Undo, redo, and the History panel
- Keyboard shortcuts
- How to use the timeline in Animate
- Creating HTML extensions
- Optimization options for Images and Animated GIFs
- Export settings for Images and GIFs
- Assets Panel in Animate
- Multimedia and Video
- Transforming and combining graphic objects in Animate
- Creating and working with symbol instances in Animate
- Image Trace
- How to use sound in Adobe Animate
- Exporting SVG files
- Create video files for use in Animate
- How to add a video in Animate
- Draw and create objects with Animate
- Reshape lines and shapes
- Strokes, fills, and gradients with Animate CC
- Working with Adobe Premiere Pro and After Effects
- Color Panels in Animate CC
- Opening Flash CS6 files with Animate
- Work with classic text in Animate
- Placing artwork into Animate
- Imported bitmaps in Animate
- 3D graphics
- Working with symbols in Animate
- Draw lines & shapes with Adobe Animate
- Work with the libraries in Animate
- Exporting Sounds
- Selecting objects in Animate CC
- Working with Illustrator AI files in Animate
- Applying blend modes
- Arranging objects
- Automating tasks with the Commands menu
- Multilanguage text
- Using camera in Animate
- Graphic filters
- Sound and ActionScript
- Drawing preferences
- Drawing with the Pen tool
- Platforms
- Convert Animate projects to other document type formats
- Custom Platform Support
- Create and publish HTML5 Canvas documents in Animate
- Creating and publishing a WebGL document
- How to package applications for AIR for iOS
- Publishing AIR for Android applications
- Publishing for Adobe AIR for desktop
- ActionScript publish settings
- Best practices - Organizing ActionScript in an application
- How to use ActionScript with Animate
- Accessibility in the Animate workspace
- Writing and managing scripts
- Enabling Support for Custom Platforms
- Custom Platform Support Overview
- Working with Custom Platform Support Plug-in
- Debugging ActionScript 3.0
- Enabling Support for Custom Platforms
- Exporting and Publishing
- How to export files from Animate CC
- OAM publishing
- Exporting SVG files
- Export graphics and videos with Animate
- Publishing AS3 documents
- Export animations for mobile apps and game engines
- Exporting Sounds
- Best practices - Tips for creating content for mobile devices
- Best practices - Video conventions
- Best practices - SWF application authoring guidelines
- Best practices - Structuring FLA files
- Best Practices to optimize FLA files for Animate
- ActionScript publish settings
- Specify publish settings for Animate
- Exporting projector files
- Export Images and Animated GIFs
- HTML publishing templates
- Working with Adobe Premiere Pro and After Effects
- Quick share and publish your animations
- Troubleshooting
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:
- 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:
- 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).
- Scroll down and select the Property you want to edit. To invert selection, right-click and select Invert Selection.
- With the Property Curve for the selected Property in view, you can choose to do the following:
- 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.
- 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.
- 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:
- 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).
- Scroll down and select the Property you want to edit. To invert selection, right-click and select Invert Selection.
- With the Property Curve for the selected Property in view, you can choose to do the following:
- 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
- Select an existing Anchor Point on the grid.
- 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.
- 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:
- 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).
- Select the Property whose curve you want to copy, and right-click > Copy OR press Ctrl + C (Cmd + C on MAC).
- 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).
- 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:
- In the Motion Editor, select a Property.
- 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:
- In the Motion Editor, select the Property you want to apply Ease for, and click the Add Ease button to display the Ease panel.
- On the Ease panel, you can choose to:
- Apply a Preset Ease by selecting a preset from the left pane. Specify Ease strength by entering a value in the Easing field.
- 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.
- 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:
- 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.
- On the Ease panel, you can modify the default Custom Ease curve by:
- Pressing Alt + Click to add Anchor Points on the curve. Further, you can move these points to any desired point on the grid.
- Enabling Control Points (alt+click on an Anchor Point) on an Anchor point to smoothen curve segments on either sides of an Anchor Point.
- 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:
- On the Ease panel, select an Ease curve you want to copy, and press Ctrl + C (Cmd + C on MAC).
- 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:
- In the Motion Editor, select the Property Group, and click the Add Ease button to display the Ease panel.
- 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.