Time

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.