- 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
Use this article to learn about the various components of Time in Animate.
Timeline
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
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
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.
Keyframes
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
Edit multiple frames.
FPS
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
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
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
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 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
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.