User Guide Cancel


  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


Use this article to learn about the various components of Time in Animate.


Timeline in motion tween animation

The Timeline in Adobe Animate organizes and controls a document's content over time in layers and frames. Like a movie film, Animate documents divide lengths of time into frames. Layers are like multiple filmstrips stacked on top of one another, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead.

  • Layers in a document are listed in a column on the left side of the Timeline.
  • Frames contained in each layer appear in a row to the right of the layer name.
  • The Timeline header at the top of the Timeline indicates frame numbers.
  • Playhead indicates the current frame displayed on the Stage. As a document plays, the playhead moves from left to right through the Timeline.

By default, the playhead loops when it reaches the end.The Timeline status displayed at the bottom of the Timeline indicates the selected frame number, the current frame rate, and the elapsed time to the current frame.

For more information on Timeline, see How to use Timeline in Animate.


Frames are at the core of any animation, dictating each segment of time and movement. The total number of frames in your movie, and the speed at which they're played back, together determine your movie's overall length.

To know more on Frames, see the article on Frames and the article on creating frame by frame animation.

Frame Span

Framespan in motion tween animations

A keyframe and the span of regular frames that follow it are known as akeyframe sequence. The timeline can contain any number of keyframe sequences. If the keyframe in a sequence contains graphical content that is visible on the stage, the regular frames that follow it will appear gray. If the keyframe in a sequence contains no graphical content, the regular frames that follow it appear white.


Frames and keyframes in Animate CC

Like films, Adobe Animate documents divide lengths of time into frames. In the Timeline, you work with these frames to organize and control the content of your document. You place frames in the Timeline in the order you want the objects in the frames to appear in your finished content.

A keyframe is a frame in Adobe Animate where a new symbol instance appears in the Timeline. A keyframe can also be a frame that includes ActionScript code to control some aspect of your document.

You can also add a blank keyframe to the Timeline as a placeholder for symbols you plan to add later or to explicitly leave the frame blank.A black dot in the Timeline indicates a single keyframe. Light gray frames after a single keyframe contain the same content with no changes.

These frames have a vertical black line and a hollow rectangle at the last frame of the span.A black dot at the beginning keyframe with a black arrow and blue background indicates a classic tween.

Do not confuse keyframes with property keyframes; the Timeline icon for a property keyframe is a solid diamond, whereas a standard keyframe icon is an empty or filled circle.

Multiframe editing

Multiframe editing in motion tween animation

Edit multiple frames.


Frames per second

The frame rate (the speed at which the animation in Adobe Animate is played) is measured by the number of frames per second (FPS). A frame rate that is too slow makes the animation appear to stutter (stop and start), while a frame rate that is too fast blurs the details of the animation. A frame rate of 24 fps is the default setting for new Animate documents and usually gives the best results on the web. (The standard rate for motion pictures is also 24 fps.)

The complexity of the animation and the speed of the computer playing the animation affect the playback's smoothness. To determine optimum frame rates, test your animations on a variety of computers with different processing capabilities.Because you specify only one frame rate for the entire Animate document, be sure to set the desired frame rate before creating your animations.The frame rate essentially determines the rate at which the playhead moves across the Timeline.

Read the article on animation basics to know more about frames per second.


Easing is a technique for modifying the way that Adobe Animate calculates the property values in between property keyframes in a tween. Without easing set, Animate moves tweened objects at the same speed on each frame of the animation. With easing, you can adjust the speed of tweened objects to make movements appear more natural and to create complex animations.An ease is a mathematical curve that is applied to the property values of a tween.

The final effect of the tween is the result of the combination of the range of property values in the tween and the ease curve that makes the tweened objects start slow and speed up, start fast and slow down, or some combination of these effects.

For example, if you animate a picture of a car across the Stage, the motion is more realistic if the car starts slowly from a stopped position and gradually gains speed as the acceleration builds momentum.Eases applied in the Property inspector affect all of the properties that are included in a tween. Eases applied in the Motion Editor can affect a single property, a group of properties, or all of the properties of a tween.

See Shaping Tweens and How to edit motion tweens for detailed information on Easing.

Onion Skinning

Onion skinning in Animate CC

Use Onion skinning to compare the previous and next frames and adjust the objects in the current frame.When onion skinning is turned off (the default setting), one frame of the animation sequence appears on the Stage at a time.

The frame displayed corresponds to the location of the playhead in the Timeline.When Onion skinning is enabled, the frame under the playhead appears in full color, while surrounding frames are dimmed, as though each frame is drawn on a sheet of translucent onionskin paper and the sheets were stacked on top of each other.

Dimmed frames cannot be edited; they are merely displayed as a visual reference.

For more information about Onion skinning, see Creating frame-by-frame animations and Timeline.


Layers in motion tween animations

Layers help you organize the artwork in your Adobe Animate document. You can draw and edit objects on one layer without affecting objects on another layer. In areas of the Stage with nothing on a layer, you can see through it to the layers below.To draw, paint, or otherwise modify a layer or folder, select the layer in the Timeline to make it active. A pencil icon next to a layer or folder name in the Timeline indicates that the layer or folder is active.

Only one layer can be active at a time—although more than one layer can be selected at a time.When you create a Animate document, it contains only one layer. To organize the artwork, animation, and other elements in your document, add more layers. You can also hide, lock, or rearrange layers. 

he number of layers you can create is limited only by your computer's memory, and layers do not increase the file size of your published SWF file. Only the objects you place into layers add to the project's file size.To help create sophisticated effects, use special guide layers to make drawing and editing easier, and to make mask layers.

To know more about layers, go to Creating timeline layers.

Mask layer

Mask layer in Animate CC

Mask layers contain objects used as masks to hide selected portions of layers below them. Only the portion of the mask layer not covered by the mask is visible.

To know how to use mask layers, see Using mask layers in Animate.

Guide layer

Guide layer in motion tween animations

To align objects when drawing in Adobe Animate, create guide layers and align objects on other layers to the objects you create on the guide layers.  Any layer can be a guide layer. Guide layers display a guide icon to the left of the layer's name. Guide layers are not exported and do not appear in a published SWF file.

Although you cannot drag a motion tween layer or inverse kinematics pose layer onto a guide layer, you can drag a normal layer onto a guide layer. This converts the guide layer to a motion guide layer and links the normal layer to the new motion guide layer.


Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

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

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online