Setting up animation tween spans

When creating animation in Animate, it is often appropriate to set up tween spans in the Timeline first. By arranging objects in layers and frames, you can change the property values to complete the tweens.

To select tween spans and frames in the Timeline, do any of the following. 

 Ensure that Span-based Selection is enabled in the General Preferences (Edit > Preferences) menu option.

• To select an entire tween span, click the span.

• To select multiple tween spans, including non-contiguous spans, Shift-click each span.

• To select a single frame within a tween span, Ctrl+Alt-click (Windows) or Command+Option-click (Macintosh) the frame inside the span.

• To select multiple contiguous frames within a span, Ctrl+Alt-drag (Windows) or Command+Option-drag (Macintosh) inside the span.

• To select frames within multiple tween spans on different layers, Ctrl+Alt-drag (Windows) or Command+Option-drag (Macintosh) across multiple layers.

• To select an individual property keyframe in a tween span, Ctrl+Alt-click (Windows) or Command+Option-click (Macintosh) the property keyframe. You can then drag it to a new location.

Move, duplicate, or delete tween spans

• To move a span to a new location in the same layer, drag the span.

   Locking a layer prevents editing on the Stage but not the Timeline. Moving a span on top of another span consumes the overlapped frames of the second span.

• To move a tween span to a different layer, drag the span to the layer or copy and paste the span into the new layer.

  You can drag a tween span onto an existing normal layer, tween layer, guide layer, mask layer, or masked layer. If the new layer is a normal empty layer, it becomes a tween layer.

• To duplicate a span, Alt-drag (Windows) or Command-drag (Macintosh) the span to a new location in the Timeline, or copy and paste the span.

• To delete a span, select the span and choose Remove Frames or Clear Frames from the span context menu.

Edit adjacent tween spans

• To move the breakline between two contiguous tween spans, drag the breakline.

  Each tween is recalculated.

• To separate the adjacent start and end frames of two contiguous tween spans, Alt-drag (Windows) or Command-drag (Macintosh) the start frame of the second span.

  To split a tween span into two separate spans, Ctrl-click (Windows) or Command-click (Macintosh) a single frame in the span. Choose Split Motion from the span context menu.

• Both tween spans have same target instance.

   You cannot split motion if more than one frame is selected. If  easing was applied on the split tween, the two smaller tweens does not have the same motion as the original.

• To join two contiguous tween spans, select both spans and choose Join Motions from the span context menu.

Edit the length of a tween span

• To change the length of an animation, drag the right or left edge of the tween span.

  Dragging the edge of one span into the frames of another span replaces the frames of the second span.

• To extend the presence of a tweened object on Stage beyond either end of its tween, Shift-drag either end frame of its tween span. Animate adds frames to the end of the span without tweening those frames.

  You can also select a frame after the tween span in the same layer and press F6. Animate extends the tween span and adds a property keyframe for all properties to the selected frame. 

   To add static frames to the end of a span next to another span, move the adjacent span to make room for the new frames.

Convert a tween span to frame-by-frame animation

You can convert a classic or motion tween span to frame-by-frame animation. In frame-by-frame animation, each frame contains separate keyframes (not property keyframes) which each contains separate instances of the animated symbol. Frame-by-frame animation does not contain interpolated property values. For more information, see Frame-by-frame animation.

• Right-click (Windows) or Ctrl-click (Macintosh) the tween span you want to convert and choose Convert to Frame by Frame Animation from the context menu.

Add or remove frames within a tween span

• To remove frames from within a span, Ctrl-drag (Windows) or Command-drag (Macintosh) to select frames and choose Remove Frames from the span context menu.

• To cut frames from within a span, Ctrl-drag (Windows) or Command-drag (Macintosh) to select the frames and then choose Cut Frames from the span context menu.

• To paste frames into an existing tween span, Ctrl-drag (Windows) or Command-drag (Macintosh). Select the frames to replace and choose Paste Frames from the span context menu.

  Simply pasting an entire span onto another span replaces the entire second span.

Replace or remove the target instance of a tween

To replace the target instance of a tween span, do one of the following:

• Select the span and then drag the new symbol from the Library panel onto the Stage.

• Select the new symbol in the Library panel and the target instance of the tween on the Stage and choose Modify > Symbol > Swap Symbol.

• Select the span and paste a symbol instance or text from the clipboard.

To remove the target instance of a tween span without removing the tween, select the span and press the Delete key.