Work with tween spans in the Timeline



When creating animation in Flash, it is often appropriate to set up tween spans in the Timeline first. By establishing the initial arrangement of objects in layers and frames, you can then finish the tweens by editing the tweened properties in the Property inspector or the Motion Editor.

To select tween spans and frames in the Timeline, do one of the following:

  • 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-click (Windows) or Command-click (Macintosh) the frame inside the span.

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

  • To select frames within multiple tween spans on different layers, Ctrl+drag across multiple layers.

  • To select an individual property keyframe in a tween span, Ctrl+click 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.

    Note: 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.

    This allows you to make room for frames between the two spans.

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

    Both tween spans have same target instance.

    Note: You cannot split motion if more than one frame is selected. If the tween that was split had easing applied, the two smaller tweens may not have exactly 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. Flash 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. Flash extends the tween span and adds a property keyframe for all properties to the selected frame. If you press F5, Flash adds frames but will not add a property keyframe to the selected frame.

    Note: To add static frames to the end of a span that is immediately adjacent to another span, first move the adjacent span to make room for the new frames.

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) to 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.

View and edit property keyframes of a tween span

  • To view frames containing property keyframes in a span for different properties, select the span and choose View Keyframes from the span context menu and then choose the property type from the submenu.

  • To remove a property keyframe from a span, Ctrl-click (Windows) or Command-click (Macintosh) the property keyframe to select it and then right-click (Windows) or Ctrl-click (Macintosh) the property keyframe and choose Clear Keyframe for the property type you want to delete the keyframe for.

  • To add property keyframes for a specific property type to a span, Ctrl-click (Windows) or Command-click (Macintosh) to select one or more frames in the span. Then right-click (Windows) or Ctrl-click (Macintosh) and choose Insert Keyframe > property type from the span context menu. Flash adds property keyframes to the selected frames. You can also set a property of the target instance in a selected frame to add a property keyframe.

  • To add a property keyframe for all property types to a span, place the playhead in the frame where you want to add the keyframe and choose Insert > Timeline > Keyframe, or press F6.

  • To reverse the direction of motion of a tween, choose Motion Path > Reverse Path from the span context menu.

  • To change a tween span to static frames, select the span and choose Remove Tween from the span context menu.

  • To convert a tween span to a frame-by-frame animation, select the span and choose Convert to Frame by Frame Animation from the span context menu.

  • To move a property keyframe to a different frame in the same tween span or a different tween span, Ctrl-click (Windows) or Command-click (Macintosh) the property keyframe to select it and then drag the property keyframe to the new location.

  • To copy a property keyframe to another location in the tween span, Ctrl-click (Windows) or Command-click (Macintosh) the property keyframe to select it and then Alt-drag (Windows) or Option-drag (Macintosh) the property keyframe to the new location.

Add or remove 3D property keyframes in a tween

 Right-click (Windows) or Ctrl-click (Macintosh) the tween span in the Timeline and choose 3D tween from the context menu.

If the tween span contained no 3D property keyframes, Flash adds them to each existing X and Y position and rotation property keyframe. If the tween span already contained 3D property keyframes, Flash removes them.

Copy and paste a motion tween

You can copy the tweened properties from one tween span to another. The tweened properties are applied to the new target object, but the location of the target object is not changed. This allows you to apply a tween from one area of the Stage to an object in another area without repositioning the new target object.

  1. Select the tween span that contains the tweened properties you want to copy.
  2. Select Edit > Timeline > Copy Motion.
  3. Select the tween span to receive the copied tween.
  4. Select Edit > Timeline > Paste Motion.

    Flash applies the tweened properties to the target tween span and adjusts the length of the tween span to match the copied tween span.

    To copy a motion tween to the Actions panel or use it in another project as ActionScript®, use the Copy Motion as ActionScript 3.0 command.

Copy and paste motion tween properties

You can copy the properties from a selected frame to another frame on the same tween span or a different tween span. The property values are added only to the selected frame when the properties are pasted. The copied property values of color effects, filters, and 3D properties are only pasted if the tweened object at that frame has the color effect, filter, or 3D properties already applied. 2D position properties cannot be pasted onto a 3D tween.

  1. To select a single frame in a tween span, Ctrl-click (Windows) or Command-click (Macintosh) the frame.
  2. Right-click (Windows) or Command-click (Macintosh) the selected frame and choose Copy Properties from the context menu.
  3. Select a single frame to receive the copied properties by Ctrl-clicking (Windows) or Command-clicking (Macintosh) the frame.

    The destination frame must be in a tween span.

  4. To paste the copied properties into the selected frame, do one of the following:
    • To paste all of the copied properties, right-click (Windows) or Command-click (Macintosh) the selected frame of the target tween span and choose Paste Properties from the context menu.

    • To paste only some of the copied properties, right-click (Windows) or Command-click (Macintosh) the selected frame of the target tween span and choose Paste Properties Special from the context menu. In the dialog box that appears, select the properties to paste and click OK.

Flash creates a property keyframe for each of the pasted properties in the selected frame and reinterpolates the motion tween.

Convert a tween span to frame-by-frame animation

You can convert a 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.

Copy motion as ActionScript 3.0

Copy the properties that define a motion tween in the Timeline as ActionScript 3.0 and apply that motion to another symbol, either in the Actions panel or in the source files (such as class files) for a Flash document that uses ActionScript 3.0.

Use the fl.motion classes to customize the Flash-generated ActionScript for your specific project. For more information, see the fl.motion classes in the ActionScript 3.0 Language and Components Reference.

Copy Motion As ActionScript 3.0 can capture the following properties of a motion tween:

  • Position

  • Scale

  • Skew

  • Rotation

  • Transformation Point

  • Color

  • Blend Mode

  • Orientation To Path

  • Cache As Bitmap Setting

  • Easing

  • Filters

  • 3D rotation and position.

  1. Select the tween span in the Timeline or the object on the Stage that contains the motion tween to copy.

    Only one tween span or tweened object can be selected to copy as ActionScript 3.0.

  2. Do one of the following:
    • Select Edit > Timeline > Copy Motion As ActionScript 3.0.

    • Right-click (Windows) or Control-click (Macintosh) the tween span or the tweened instance on the Stage and choose Copy Motion As ActionScript 3.0.

    Flash copies to your system’s clipboard the ActionScript 3.0 code that describes the selected motion tween. The code describes the tween as a frame-by-frame animation.

    To use the copied code, paste it into the Actions panel of a Flash document that contains a symbol instance that you want to receive the copied tween. Uncomment the line that calls the addTarget() function and replace the <instance name goes here> text in that line with the name of the symbol instance you want to animate.

    To name the symbol instance you want to animate with the pasted ActionScript, select the instance on the Stage and enter the name in the Property inspector.

    You can also name a motion tween instance by selecting the tween span in the Timeline and entering a name for the motion tween in the Property inspector. You can then reference the tween span in ActionScript 3.0 code.

    For more information about animating with ActionScript 3.0, see the fl.motion classes in the ActionScript 3.0 Language and Components Reference.