User Guide Cancel

How to use frames and keyframes in Animate

 

Overview

Adobe Animate documents divide lengths of time into frames similar to films. 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 are played back, together determine your movie's overall length. A brief description of some of the concepts on frames is explained below for your reference.

Frames

In the timeline, you work with the 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.

Keyframe

A keyframe is a frame 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.

Using keyframe you can set a position, add anchor points, actions, comments and so on. 

Span

Span-based frame selection allows you to select a range of frames between two keyframes with a single click.

Static frame span

In static frame span, same content is available for entire duration of span. You can use this type of span whenever you need to display graphics for fixed amount of time. 

Tweened frame span

In tweened frame span, the content changes within the span for each frame. You can use this type of span for animations. 

Add or insert frames in the timeline

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

  • To create a keyframe, select Insert > Timeline > Keyframe (F6), or right-click (Windows) or Control‑click (Macintosh) the frame where you want to place a keyframe, and select Insert Keyframe from the context menu.

  • To create a blank keyframe, select Insert > Timeline > Blank Keyframe, or right-click (Windows) or Control‑click (Macintosh) the frame where you want to place the keyframe, and select Insert Blank Keyframe from the context menu.

Effects on frames

The filters and color effects used to be applicable only to movie clips and graphic symbols. With the advanced layers, filters and color effects can now be applied to a selective frame(s), which in turn applies to all its content including shapes, drawing objects, graphic symbols, and so on. Layer effects can also be tweened using classic, shape, and IK tweens across frames.

For more information, see Applying layer effects

Select and label frames in the timeline

You can select frames by using two methods provided in Animate. You can also label frames to organize its contents. 

Animate offers two different methods for selecting frames in the timeline. In frame-based selection (the default), you select individual frames in the timeline. In span-based selection, the entire frame sequence, from one keyframe to the next, is selected when you click any frame in the sequence. 

Select frames in the timeline

Single or multiple frames selection

  • To select one frame, click the frame. 
  • To select multiple contiguous frames, drag the cursor over the frames, or Shift-click additional frames.

  • To select multiple non-contiguous frames, Control‑click (Windows) or Command-click (Macintosh) additional frames.

  • To select all frames in the timeline, select Edit > Timeline > Select All Frames.

Span based frames selection

As a prerequisite for span based selection, you can specify span-based selection in Animate timeline by clicking the hamburger icon at the upper-right corner and selecting Span Based Selection menu item. 

  • To select a whole span of frames (motion tween or inverse kinematics) click on frame. 
  • To select multiple spans, click on each of them while holding the Shift key.

Label frames in the timeline

You can label frames in the timeline as a way of helping organize its contents. You can also label a frame in order to be able to refer to that frame in ActionScript by its label. That way, if you rearrange the timeline and move the label to a different frame number, the ActionScript will still refer to the frame label and will not have to be updated.

Frame labels can only be applied to keyframes. A best practice is to create a separate layer in the timeline to contain your frame labels. Using separate layer for labels enables you to organize content and keyframes better. 

To add a frame label:

  1. Select the frame you wish to label in the timeline.

  2. With the frame selected, enter the label name in the Label section of the Property inspector. Press Enter or Return.

  3. As a best practice, create a separate layer for all labels in the frame. 

Enable span-based frame selection

Span-based frame selection allows you to select a range of frames between two keyframes with a single click.

  1. Click the hamburger icon at the upper-right corner of the timeline section. 

    A pop-up menu appears. 

  2. Select the Span Based Selection from the pop-up menu. 

Distribute to keyframes

Distribute to keyframes option allows you to distribute multiple objects (Symbols and Bitmaps) on the stage to individual kyframes each.

  1. Select multiple objects of any layer on the stage.
  2. Right-click anywhere on stage, and select Distribute to KeyFrames.

Copy, paste, delete, or move a frame or frame sequence

A keyframe and the span of regular frames that follow it are known as a keyframe sequence. The timeline can contain any number of keyframe sequences.

To copy or paste a frame or frame sequence, do one of the following:

Copy or paste a frame or frame sequence

  • Select the frame or sequence and select Edit > Timeline > Copy Frames. Select the frame or sequence that you want to replace, and select Edit > Timeline > Paste Frames.

  • Alt‑drag (Windows) or Option-drag (Macintosh) a keyframe to the location where you want to copy it.

Delete a frame or frame sequence

Delete a frame, frame sequence or a keyframe

Select the frame or sequence and select Edit > Timeline > Remove Frame, or right-click (Windows) or Control‑click (Macintosh) the frame or sequence and select Remove Frame from the context menu.

Surrounding frames remain unchanged.

Delete keyframe

Select the keyframe and select Edit > Timeline > Clear Keyframe, or right-click (Windows) or Control‑click (Macintosh) the keyframe and select Clear Keyframe from the context menu.

Move a keyframe or frame sequence

Select a keyframe or frame sequence and then drag the keyframe or sequence to the desired location.

Change the length of a static framesequence

Control-drag (Windows) or Command-drag (Macintosh) the beginning or ending frame of the span to the left or right.

To change the length of a frame-by-frame animation sequence, see Create frame-by-frame animations.

Preview frame content in the timeline

Choose Preview from the timeline panel options menu at the upper-right corner of the timeline panel.

In each keyframe of the timeline, you can view a thumbnail preview of the items in the keyframe.

Get help faster and easier

New user?