User Guide Cancel

How to edit motion tweens using Motion Editor

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

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.
(A) Properties applied to the tween (B) Add Anchor Point button (C) Fit-to-view toggle (D) Remove Property button (E) Add Ease (F) Vertical Zoom toggle

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.

(A) Property Curves overlaid on top of each other. (B) Property Curve in focus for the currently selected Property.

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.

Curve plotted for the Bounce Preset Ease

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.

(A) Resultant Curve for Bounce-In preset Ease applied to Location X Property.

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.

 Adobe

Get help faster and easier

New user?