User Guide Cancel

How to work with classic tween animation in Animate

  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

 

Classic tweens are an older way of creating animation in Animate. These tweens are similar to the newer motion tweens, but are more complicated to create and less flexible. However, classic tweens do provide some types of control over animation that motion tweens do not. Most users choose to work with the newer motion tweens, but some users still want to use classic tweens. For more information about the differences, see Differences between motion tweens and classic tweens.

Before you begin:

Before working with classic tweens, keep in mind the following points:

  • Classic tweens are the older way of creating tweened animation in Animate. The newer, easier way is to use motion tweens. See Motion tween animation.

  • You cannot tween 3D properties with classic tweens.

For samples of classic tween animation, see the Animate Samples page at www.adobe.com/go/learn_fl_samples. The following samples are available:

  • Animated Drop Shadow: Download and decompress the Samples ZIP file and navigate to the Graphics\AnimatedDropShadow folder to access the sample.

  • Animation and Gradients: Download and decompress the Samples ZIP file and navigate to the Graphics\AnimationAndGradients folder to access the sample.

 Like most things in Animate, animation does not require any ActionScript. However, you can create animation with ActionScript if you choose.

Creating and editing keyframes for classic tween animation

Changes in a classic tween animation are defined in a keyframe. In tweened animation, you define keyframes at significant points in the animation and Animate creates the contents of frames between. The interpolated frames of a tweened animation appear as light blue with an arrow drawn between keyframes. Because Animate documents save the shapes in each keyframe, create keyframes only at those points in the artwork where something changes.

Keyframes are indicated in the Timeline. A solid circle represents a keyframe with content on it, and an empty circle before the frame represents an empty keyframe. Subsequent frames added to the same layer have the same content as the keyframe.

Only keyframes are editable in a classic tween. You can view tweened frames, but you can’t edit them directly. To edit tweened frames, change one of the defining keyframes or insert a new keyframe between the beginning and ending keyframes. Drag items from the Library panel onto the Stage to add the items to the current keyframe.

To display and edit more than one frame at a time, see Use onion skinning.

 This feature is about creating keyframes for the older classic tweens. For more information on property keyframes for the newer motion tweens, see Create tween animation.

Creating keyframes

  1. Do one of the following:
    • Select a frame in the Timeline, and select Insert > Timeline > Keyframe.

    • Right-click (Windows) or Control‑click (Macintosh) a frame in the Timeline and select Insert Keyframe.

Inserting frames in the timeline

  • To insert a new frame, select Insert > Timeline > Frame.

  • To create a keyframe, select Insert > Timeline > Keyframe, or right-click (Windows) or Control‑click (Macintosh) the frame to place a keyframe. Select Insert Keyframe.

  • To create a blank keyframe, select Insert > Timeline > Blank Keyframe, or right-click (Windows) or Control‑click (Macintosh) the frame to place the keyframe. Select Insert Blank Keyframe.

Deleting or modifying a frame or keyframe

  • To delete a frame, keyframe, or frame sequence, select it and right-click (Windows) or Control‑click (Macintosh) and select Remove Frames. Surrounding frames remain unchanged.

  • To move a keyframe or frame sequence and its contents, select it and drag to the desired location.

  • To extend the duration of a keyframe, Alt‑drag (Windows) or Option-drag (Macintosh) it to the final frame of the new sequence.

  • To copy and paste a frame or frame sequence, select it and select Edit > Timeline > Copy Frames. Select a frame or sequence, and select Edit > Timeline > Paste Frames. To paste and replace the exact number of copied frames on the target timeline, use the Paste and Overwrite Frames option.

  • To convert a keyframe to a frame, select the keyframe and select Modify > Timeline > Clear Keyframe. Or right-click (Windows) or Control‑click (Macintosh) it and select Clear Keyframe. The cleared keyframe and all frames up to the subsequent keyframe are replaced with the contents of the frame preceding the cleared keyframe.

  • To copy a keyframe or frame sequence by dragging, select it and Alt‑drag (Windows) or Option-drag (Macintosh) to the new location.

  • To change the length of a tweened sequence, drag the beginning or ending keyframe left or right.

  • To add a library item to the current keyframe, drag the item from the Library panel onto the Stage.

  • To reverse an animation sequence, select the appropriate frames in one or more layers and select Modify > Timeline > Reverse Frames. Keyframes must be at the beginning and end of the sequence.

Adding classic tween animation to an instance, a group, or text

 This feature is about creating older classic tweens. For more information on creating the newer motion tweens, see Create tween animation.

To tween the changes in properties of instances, groups, and type, you can use a classic tween. Animate can tween position, size, rotation, and skew of instances, groups, and type. Also, Animate can tween the color of instances and type, creating gradual color shifts or making an instance fade in or out.

Before tweening the color of groups or type, make them into symbols. Before animating individual characters in a block of text separately, place each character in a separate text block.

If you apply a classic tween, and change the number of frames between the two keyframes, Animate automatically tweens the frames again. Or, if you move the group or symbol in either keyframe, Animate automatically tweens the frames again.

 

Creating a classic tween animation

  1. To make a layer as an active layer, click a layer name and select an empty keyframe in the layer, to start. This frame is the first frame of the classic tween.

  2. To add content to the first frame of the classic tween, do one of the following:
    • Create a graphic object with the Pen, Oval, Rectangle, Pencil, or Brush tool, and then convert it to a symbol.

    • Create an instance, group, or text block on the Stage.

    • Drag an instance of a symbol from the Library panel.

     To create a tween, you must have only one item on the layer.

  3. Create a second keyframe where you want the animation to end, and leave the new keyframe selected.
  4. To modify the item in the ending frame, do any of the following:
    • Move the item to a new position.

    • Modify the item’s size, rotation, or skew.

    • Modify the item’s color (instance or text block only). To tween the color of elements other than instances or text blocks, use shape tweening.

  5. To create the classic tween, do one of the following:
    • Click any frame in the tween’s frame span and select Insert > Classic Tween.

    • Right-click (Windows) or Control-click (Macintosh) any frame in the tween’s frame span and select Create Classic Tween from the context menu.

    If you created a graphic object in step 2, Animate automatically converts the object to a symbol and names it tween1.

  6. To tween the size of the selected item, select scale in the tweening section of the Property inspector. As a prerequisite, you modify the size of the item in step 4.

  7. To produce a more realistic sense of motion, apply easing to the classic tween. To apply easing to a classic tween, use the Ease field in the Tweening section of the Property inspector. Use the Custom Ease dialog box to more precisely control the speed of the classic tween.

    To adjust the rate of change between tweened frames, drag the value in the Easing field or enter a value.

    • To begin the classic tween slowly and accelerate the tween toward the end of the animation, enter a negative value between ‑1 and ‑100.

    • To begin the classic tween rapidly and decelerate the tween toward the end of the animation, enter a positive value from 1 through 100.

    • To produce a more complex change in speed within the tween’s frame span, click the Edit button next to the Ease field. It opens the Custom Ease dialog box.

      By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.

  8. To rotate the selected item during the tween, select an option from the Rotate menu in the Property inspector:
    • To prevent rotation, select None (the default setting).

    • To rotate the object once in the direction requiring the least motion, select Auto.

    • To rotate the object as indicated, and then enter a number to specify the number of rotations, select Clockwise (CW) or Counterclockwise (CCW).

     The rotation in step 8 is in addition to any rotation you applied to the ending frame in step 4.

  9. If you’re using a motion path, select Orient To Path in the Property inspector to orient the baseline of the tweened element to the motion path.
  10. To sync up the animation of graphic symbol instances with the main timeline, select the Sync option in the Property inspector.

     Synchronize Symbols and the sync option both recalculate the number of frames in a tween to match the number of frames allotted to it. Use the Sync option if the frames in an animation sequence are not an even multiple of the number of frames in the graphic instance.

  11. If you’re using a motion path, select Snap to attach the tweened element to the motion path by its registration point.

Bring the characters to life using Classic Tweening

Characters come alive through Classic Tweening. Want to spell life to your animations? Watch the tutorial at the end of this example and follow these steps:

  1. Select the object and click Modify.

  2. Select Convert to Symbol… and choose the following options:

    • Name: Enter the name of the symbol.
    • Type: Select Graphic in the drop-down list.
  3. Click OK and select the Free Transform Tool.

  4. Drag the white dot in the center to skew the object.

  5. Right click the frame and select Create Classic Tween.

How to bring your characters to life using Classic Tweening

Watch the video to know how to create motion to animation.

Working with Classic tweens saved as XML files

Animate allows you to work with Classic Tweens as XML files. Natively, Animate allows you to apply the following commands on any Classic Tween:

  • Copy Motion as XML

  • Export Motion as XML

  • Import Motion as XML

Copy Motion as XML

Allows you to copy Motion properties applied to any object on the Stage at a said frame. 

  1. Create a Classic Tween.

  2. Select any keyframe on the Timeline.

  3. Go to Commands > Copy Motion as XML.

The Motion properties are copied to the clipboard as XML data. You can then use any text editor to work on the XML file.

Export Motion as XML

Allows you to export Motion properties applied to any object on the stage to an XML file that can be saved.

 

  1. Create a classic tween. 

  2. Go to Commands > Export Motion as XML.

  3. Browse to a suitable location where you want to save the file.

  4. Provide a name for the XML file, and click Save.

    The Classic tween is exported as an XML file at the specified location.

Import Motion as XML

Allows you to import an existing XML file that has Motion properties defined.

  1. Select an object on the stage.

  2. Go to Commands > Import Motion as XML.

  3. Browse to the location, and select the XML file. Click Ok.

  4. On the Paste Motion Special dialog box, select the properties that you want to apply on the selected object.

  5. Click Ok.

Creating a motion guide layer

To control the movement of objects in a classic tween animation, create a motion guide layer.

You cannot drag a motion tween layer or inverse kinematics pose layer onto a guide layer.

  1. Drag a normal layer onto a guide layer. This action converts the guide layer to a motion guide layer and links the normal layer to the new motion guide layer.

     To prevent accidentally converting a guide layer, place all guide layers at the bottom of the layer order.

Creating classic tween animation along a path

 This feature is about working with older classic tweens. For more information on using the newer motion tweens with motion paths, see Edit the motion path of a tween animation.

Motion guide layers let you draw paths along which tweened instances, groups, or text blocks can be animated. You can link multiple layers to a motion guide layer to have multiple objects follow the same path. A normal layer that is linked to a motion guide layer becomes a guided layer.

Motion path
In this example, two objects on separate layers are attached to the same motion path.

Create a motion path for classic tweened animation

  1. Create a classic-tweened animation sequence.

    If you select Orient To Path in the Property inspector, the baseline of the tweened element orients to the motion path. If you select Snap, the registration point of the tweened element snaps to the motion path.

  2. Right-click (Windows) or Control-click (Macintosh) the layer name of the layer containing the classic tween and choose Add Classic Motion Guide.

    Animate adds a motion guide layer above the classic tween layer and indents the name of the classic tween layer. It represents that classic tween layer is bound to the motion guide layer.

     If you already have a guide layer in the timeline, you can drag a layer containing the classic tween below the guide layer. This action converts the guide layer to a motion guide and binds the classic tween to it.

    Motion guide layer
    A motion guide layer above the layer containing the classic tween.

  3. To add a path to the motion guide layer, select the motion guide layer and use Pen, Pencil, Line, Circle, Rectangle, or Brush tool.

    You can also paste a stroke onto the motion guide layer.

  4. Drag the object you are tweening, to snap it to the beginning of first frame or to the end of the last frame.

    A graphic snapped to the beginning of a guide stroke
    A graphic of a car snapped to the beginning of a guide stroke.

     For best snapping results, drag the symbol by its transformation point.

  5. To hide the motion guide layer and the path click in the eye icon column on the motion guide layer. If you hide, only the object’s movement is visible while you work. 

    The group or symbol follows the motion path when you play the animation.

To know more about animation guide based on variable width stroke and variable stroke color, see Animation Guide

  1. Do one of the following:
    • Drag an existing layer below the motion guide layer. The layer is indented under the motion guide layer. All objects on this layer automatically snap to the motion path.

    • Create a layer under the motion guide layer. Objects you tween on this layer are automatically tweened along the motion path.

    • Select a layer below a motion guide layer. Select Modify > Timeline > Layer Properties, and select Guide.

  1. To unlink, select the layer and do one of the following:

    • Drag the layer above the motion guide layer.

    • Select Modify > Timeline > Layer Properties, and select Normal as the layer type.

Pasting classic tween animation properties

 This feature is about pasting properties of older classic tweens. For more information on pasting properties of the newer motion tweens, see Copy and paste motion tween properties.

The Paste Motion command lets you copy a classic tween, and paste only specific properties to apply to another object.

  1. Select the frames in the Timeline that contain the classic tween to copy. The frames you select must be on the same layer, however, they do not have to span a single classic tween. The selection can span a tween, empty frames, or two or more tweens.
  2. Select Edit > Timeline > Copy Motion.

  3. To receive the copied classic tween, select the symbol instance.

  4. Select Edit > Timeline > Paste Motion Special. Select the specific classic tween properties to paste to the symbol instance. The classic tween properties are:

    X Position

    How far an object moves in the x direction.

    Y Position

    How far an object moves in the y direction.

    Horizontal Scale

    The ratio between the current size of the object and its natural size in the horizontal direction (X).

    Vertical Scale

    Specifies the ratio between the current size of the object and its natural size in the vertical direction (Y).

    Rotation And Skew

    The rotation and skew of the object. These properties must be jointly applied to an object. Skew is a measurement of rotation in degrees, and when you rotate and skew, each property affects the other.

    Color

    All color values such as Tint, Brightness, and Alpha are applied to the object.

    Filters

    All filter values and changes for the selected span. If filters are applied to an object, the filter is pasted with all values intact. And, its state (enabled or disabled) applies to the new object.

    Blend Mode

    Applies the blend mode of the object.

    Override Target Scale Properties

    When deselected, specifies that all properties be pasted relative to the target object. When checked, this option overrides the scale properties of the target.

    Override Target Rotation And Skew Properties

    When deselected, it specifies that all properties be pasted relative to the target object. When checked, the pasted properties override the existing rotation and scale properties of the object.

    The necessary frames, tween, and symbol information are inserted to match the original, copied tween.

    To copy a symbol’s classic tween to the Actions panel or use it in another project as ActionScript, use the Copy Motion as ActionScript 3.0 command.

Creating ease presets

Ease presets are pre-configured eases that can be applied to an object on the stage.

A set of commonly used ease presets are available for Classic tween. You can select the preset from a list of ease presets and apply it to the selected property.

  1. Click the layer that contains a tween in the timeline of Animate.

  2. To open tweening properties, click the Tweening category in the property panel. You can access the property-wise easing using the ease type drop-down.

    You can apply ease presets property-wise for classic tweens. In properties panel, an option to choose property-wise easing is provided. You can select Each properties separately to apply different easing presets for each property. 

    property-wise presets
    property-wise presets

    You can select unique ease presets for position, rotation, scale, color and filter properties of a classic tween. 

    Position Specifies ease settings for the position of an animated object on stage. 

    Rotation Specifies ease settings for the rotation of an animated object on stage.  

    Scale Specifies ease settings for the scale of an animated object on stage. 

    Color Specifies ease settings for the color transitions applied to an animated object on stage. 

    Filters Specifies ease settings for filters applied to an animated object on stage. 

  3. Alternatively, if you want to have same easing across all properties of the tween, choose All properties together option. Select the ease preset of your choice from the ease type pop-up dialog box and double-click ease preset to apply. 

    If you choose to apply classic ease, you can also increase or decrease the intensity of ease by moving the slider. 

    List of ease presets
    List of ease presets

  4. Click the edit icon next to Ease to apply a custom ease. 

If you use HTML5 canvas document type, you can get an optimized js output file for ease presets. HTML5 canvas uses the easing functions of Tween JS while creating an output. 

Applying custom ease to classic tween animation

 This feature is about adding easing to older classic tweens. For more information on adding easing to the newer motion tweens, see Easing tween animations.

The Custom Ease dialog box displays a graph representing the degree of motion over time. The horizontal axis represents frames, and the vertical axis represents percentage of change. The first keyframe is represented as 0%, and the last keyframe is represented as 100%.

The slope of the graph’s curve represents the rate of change of the object. When the curve is horizontal (no slope), the velocity is zero; when the curve is vertical, an instantaneous rate of change occurs.

Saving custom eases

You can save the custom eases by the click of a button and reuse them by choosing your customized ease from the custom list. Click Save and Apply in edit mode after making the changes. In the following screenshot, you can find the customized ease preset with the name MyEase1

 You can reuse the customized ease presets only within the same document type.

You can use the preset eases across multiple spans in the timeline by selecting the corresponding spans and applying the ease.

More controls for the CustomEase dialog box

Play and Stop buttons

Let you preview an animation on the stage using all the current velocity curves defined in the Custom Ease dialog box.

Delete

Deletes the current custom ease. 

Save and Apply

Saves and applies the changes you have done for the easing presets. 

Reset button

Lets you reset the velocity curve to the default, linear state.

Position of the selected control point

In the lower-right corner of the dialog box, a numeric value displays the keyframe and position of the selected control point. If no control point is selected, no value appears.

To add a control point to the line, click the diagonal line once. To achieve a precise degree of control over the motion of an object, drag the positions of the control points.

Using frame indicators (represented by square handles), click where you want an object to slow down or speed up. Clicking the square handle of a control point selects that control point, and displays the tangent points on either side of it. Hollow circles represent tangent points. To position them, drag the control point or its tangent points with the mouse or use the keyboard’s arrow keys.

Tip: By default, the control points snap to a grid. You can turn off snapping by pressing the X key while dragging the control point.

Clicking an area of the curve away from any control points adds a control point to the curve at that point. This action does not change the shape of the curve. Clicking away from the curve and control points deselects the currently selected control point.

Adding a custom ease

  1. Select a layer in the Timeline that has a classic tween applied to it.

  2. Click the Edit button next to the Ease slider in the frame Property inspector.
  3. To add a control point, Control‑click (Windows) or Command-click (Macintosh) the diagonal line.
  4. To increase the speed of the object, drag the control point up; to slow down the speed of the object, drag it downwards.
  5. To further adjust the ease curve, and fine tune the ease value of the tween, drag the vertex handles.
  6. To view the animation on the stage, click the play button in the lower-left corner.

  7. Adjust the controls until you achieve the desired effect.

 If you use the Custom Ease dialog box, the edit field shows --. If you use edit or pop-up slider, the custom ease graph is set to the equivalent curve. And, the Use One Setting For All Properties check box is selected.

Copying and pasting an ease curve

  • To copy the current ease curve, press Control+C (Windows) or Command+C (Macintosh).

  • To place the copied curve into another ease curve, press Control+V (Windows) or Command+V (Macintosh).

    You can copy and paste the ease curve. The copied curve remains available until you exit the Animate application.

Unsupported easing curves

Certain types of easing curves are not supported. No part of the graph can represent a nonlinear curve (such as a circle).

The Custom Ease dialog box automatically prevents moving a control point or a tangent handle to a position that would render an invalid curve:

  • All points must exist on the graph. Control points cannot be moved beyond the bounds of the graph.

  • All segments of the curve must exist within the graph. The shape of the curve is flattened to prevent it from extending beyond the bounds of the graph.

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online