About the timeline

The timeline in Adobe Animate CC 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.

Timeline

The timeline shows where animation occurs in a document, including frame-by-frame animation, tweened animation, and motion paths. Controls in the layers section of the timeline let you hide, show, lock, or unlock layers, and display layer content as outlines. You can drag timeline frames to a new location on the same layer or to a different layer.

ws_timeline

Note:

When an animation is played, the actual frame rate is displayed. This frame rate can differ from the document’s frame rate setting if the computer cannot calculate and display the animation quickly.

Onion skinning

Do one of the following:

  • Select the Onion skin icon  (the icon to the left of the Loop icon) in the timeline. All frames between the Start Onion Skin and End Onion Skin markers (in the timeline header) are superimposed as one frame in the Document window. 
  • Select  to display onion skinned frames as outlines.

For more information, see Using Onion skinning.

Changing the appearance of the timeline

By default, the timeline appears below the main document window. To change its position, detach the timeline from the document window and float it in its own window. You can dock it to any other panel of your choice. You can also hide the timeline.

To change the number of layers and frames that are visible, resize the timeline. To view extra layers when the timeline contains more layers than can be displayed, use the scroll bars on the right side of the timeline.

ws_timeline_gripper
Dragging the Timeline

  • To move the timeline when it is docked to the document window, drag the title bar tab at the upper-left corner of the timeline.

  • To dock an undocked timeline to the application window, drag the title bar tab to the top or bottom of the document window.

  • To dock an undocked timeline to other panels, drag the timeline title bar tab to the location you choose. To prevent the timeline from docking to other panels, press control key while you drag. A blue bar appears to indicate where the timeline will dock.

  • To lengthen or shorten layer name fields in the timeline panel, drag the bar separating the layer names and the frames portions of the timeline.

Customizing the timeline view

  1. To display the Frame View pop‑up menu, click Frame View in the upper-right corner of the Timeline.

    ws_new_frame_view01
    Frame View pop‑up menu.

  2. Select from the following options:

    • To change the width of frame cells, select Tiny, Small, Normal, Medium, or Large. (The Large frame-width setting is useful for viewing the details of sound waveforms.)

    • To decrease the height of frame cell rows, select Short.


      Short and Normal frame view options.

    • To turn the tinting of frame sequences on or off, select Tinted Frames.

    • To display thumbnails of the content of each frame scaled to fit the timeline frames, select Preview. This preview can cause the apparent content size to vary and requires extra screen space.

    • To display thumbnails of each full frame (including empty space), select Preview In Context. This preview is useful for viewing the way elements move in their frames over the course of the animation.
    • To customize the number of frames in the timeline view, use the Resize timeline view slider bar. You can also use Fit less frames in view or Fit more frames in view button available next to the Resize timeline view slider bar.
    • Use Reset timeline zoom to the default level button to reset the view to the default level.

     

    TimelineZoom-After
    Timeline zoom

Change layer height in the timeline

  1. Do one of the following:

    • Double-click the layer’s icon (the icon to the left of the layer name) in the timeline.

    • Right-click (Windows) or Control-click (Macintosh) the layer name and select Properties from the context menu.

    • Select the layer in the timeline and select Modify > Timeline > Layer Properties.

  2. In the Layer Properties dialog box, select an option for layer height and click OK.

Set layer transparency

Do one of the following:

  • To set the visibility to transparent, use shift+click the eye column in the timeline.
  • Double-click the layer’s icon (the icon to the left of the layer name) in the Timeline.
  • Right-click (Windows) or Control+click (Macintosh) the layer name and select Properties from the context menu. In the Layer Properties dialog box, select Visibility>Transparent.
  • Right-click (Windows) or Control+click (Macintosh) the layer name and select Show Others as Transparent.

Resize the timeline panel

  • If the timeline is docked to the main application window, drag the bar separating the timeline from the stage area.

  • If the timeline is not docked to the main application window, drag the lower-right corner (Windows) or the size box in the lower-right corner (Macintosh).

Moving the playhead

The red playhead at the top of the timeline moves as a document plays to indicate the current frame displayed on the Stage. The timeline header shows the frame numbers of the animation. To display a frame on the stage, move the playhead to the frame in the timeline.

To display a specific frame when you are working with many frames, move the playhead along the timeline.

  • To go to a frame, click the frame’s location in the timeline header, or drag the playhead to the desired position.

  • To center the timeline on the current frame, click the Center Frame button at the bottom of the timeline.
  • With the loop option turned on in the timeline, you can now loop streaming audio within a range of frames along with other animations.
ws_move_playhead
Moving the playhead

Viewing time along with frames

The timeline displays the time in seconds along with the frame numbers. This feature allows faster conversion from frames to time and also keeps you aware of the frames per second (fps) value you have set throughout the animation process. 

In the following screenshot, the timeline displays 20 frames per second (fps): 

display-of-time
Viewing time along with frames

You can also hide the time markers on the timeline. Go to Edit > Preferences > General and select Hide time markers on the timeline.

hide-timemarkers-timeline
Option to hide time markers on timeline

Managing animation speed

You can manage animation speed by scaling the frame spans, by animating based on time intervals, or you can extend and compress animations by using time controls. 

Scale the frame spans

You can change frames per second (fps) for your animation without having to change the animation speed. Use the Scale Frame Spans option as you change fps to keep the time intact. 

scale-frame-spans
Option to scale frame spans

Animating based on time intervals

Turn your frame spans into 1s, 2s, 3s or to any desired interval. This feature works on classic tween span, shape tween span, motion tween span, keyframe span, or on a blank keyframe span.

custom-frame-by-frame
Custom frame by frame animation based on specific time intervals.

Convert to Frame-by-Frame animation option is available in Modify menu. You can also assign your desired keys in keyboard shortcut dialog to perform these tasks. 

Extend or compress animations using timeline controls

You can extend or reduce time for the selected span on the timeline. Select the frame span and drag the right-side edge of the selected span on timeline, forward or backward. The frames within the timeline are adjusted automatically.

You can replicate your animations multiple times (x2, x3, and so on) by dragging the spans in timeline. You can also compress the frames to their normal position, after extending them. 

Select the frames in timeline, click, and drag the highlighted right-side edge of the selection.

frameselection_rightborder
Frame selection and border

While dragging, as shown in the following screenshot, you can view the animation in multiples such as x2, x3, and so on. 

stretchselectedframes
Display of stretched frames while dragging.

In the following screenshot, you can view the extended span in multiple of x2. x2 is double the size of a selected span. x3 is three times the original size of a span. 

stretchedspans
Extended spans after dragging.

Keyframe navigation

You can navigate between keyframes on the active layer using the Control menu. You can also use Alt+. or Alt+, to move forward and backward to next or previous keyframes respectively in the timeline. 

Keyframe navigation options with keyboard shortcuts
Keyframe navigation options with keyboard shortcuts

You can navigate between keyframes on the active layer using the left and right controls on the layer. Also, you can use the menu and keyboard shortcuts. 

navigation-controls
Timeline displaying left and right controls on layer

Note:

You can use page navigation shortcuts such as  Alt+Shift+, for backward and Alt+Shift+. for forward navigation. 

Panning through timeline from stage

Now you can scrub the timeline right from the stage using the new time scrub tool. This tool is grouped with the hand tool in tools panel. You can also use spacebar+T keyboard shortcut to temporarily enable this tool. Drag left or right to view the timeline in the direction of pan. 

scrub-tool
Display of time scrub tool

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy