About tweened animation



A tween is an animation that is created by specifying a value for an object property in one frame and another value for that same property in another frame. Flash calculates the values for that property in between those two frames. The term tween comes from the words “in between”.

For example, you can place a movie clip on the left side of the Stage in frame 1 of the Timeline, and then move that movie clip to the right side of the Stage in frame 20. When you create a tween, Flash calculates all the positions of the movie clip on Stage in between the two positions, right and left, that you specified. You end up with an animation of the movie clip moving from the left side of the Stage to the right side, from frame 1 to frame 20. In each frame in between, Flash moves the movie clip one 20th of the distance across the Stage.

The types of objects that can be tweened include movie clip, graphic and button symbols, and text fields. The properties of these objects that can be tweened include the following:

  • 2D X and Y position

  • 3D Z position (movie clips only)

  • 2D rotation (around the z axis)

  • 3D X, Y, and Z rotation (movie clips only)

    3D motion requires that the FLA file target ActionScript 3.0 and Flash Player 10 in the publish settings.

  • Skew X and Y

  • Scale X and Y

  • Color effects

    Color effects include alpha (transparency), brightness, tint, and advanced color settings. Color effects can be tweened only on symbols. To tween a color effect on text, convert the text to a symbol.

  • Filter properties (not including filters applied to graphic symbols)

A tween span is a group of frames in the Timeline in which an object on the Stage can have one or more properties changed over time. A tween span appears in the Timeline as a group of frames in a single layer with a blue background. These tween spans can be selected as a single object and dragged from one location in the Timeline to another, including to another layer. Only one object on the Stage can be animated in each tween span. This object is called the target object of the tween span.

A property keyframe is a frame within a tween span where you explicitly define one or more property values for the tween target object. Each property you define has its own property keyframes. If you set more than one property in a single frame, then the property keyframes for each of those properties reside in that frame. You can view each property of a tween span and its property keyframes in the Motion Editor. You can also choose which types of property keyframes to display in the Timeline from the tween span context menu.

In the preceding example of tweening a movie clip from the left side of the Stage to the right side from frame 1 to frame 20, frames 1 and 20 are property keyframes. You can use the Property inspector, the Motion Editor, the Transform panel, or various tools in the Tools panel to define explicit values for properties you want to animate. You specify these property values in the frames of your choosing, and Flash adds the required property keyframes to the tween span. Flash interpolates the values for each of these properties in the frames in between the property keyframes you have created.

Note: Beginning in Flash Professional CS4, the concepts of a “keyframe” and a “property keyframe” are different. The term keyframe refers to a frame in the Timeline in which a symbol instance appears on the Stage for the first time. The separate term property keyframe, which is new to Flash CS4, refers to a value defined for a property at a specific time or frame in a motion tween.

If a tweened object changes its location on the Stage during the tween, the tween span has a motion path associated with it. This motion path shows the path the tweened object takes during its movement around the Stage. You can edit the motion path on the Stage using the Subselection, Convert Anchor, Remove Anchor, and Free Transform tools, and commands in the Modify menu. If you are not tweening position, no motion path appears on the Stage. You can also apply an existing path as a motion path by pasting the path onto a tween span in the Timeline.

Tweened animation is an effective and efficient way to create movement and changes over time while minimizing file size. In tweened animation, only the values for the property keyframes you specify are stored in the FLA file and published SWF file.

Before creating tweens, it is helpful to understand the following Flash concepts:

  • Drawing on the Stage

  • Timeline layers and the stacking order of objects within a single layer as well as across layers

  • Moving and transforming objects on the Stage and in the Property inspector

  • Using the Timeline, including object lifetime and selecting objects at specific points in time

  • Symbols. Tweenable symbol types include movie clips, buttons, graphics, and text.

  • Optional: Bezier curve editing using the Select and Subselect tools. These tools can be used for editing tween motion paths.

For more information about these concepts, refer to the list of links at the bottom of this page.

Differences between motion tweens and classic tweens

Flash supports two different types of tweens for creating motion. Motion tweens, introduced in Flash CS4 Professional, are powerful and simple to create. Motion tweens allow the greatest control over tweened animation. Classic tweens, which include all tweens created in earlier versions of Flash, are more complex to create. While motion tweens offer much more control of a tween, classic tweens provide certain specific capabilities that some users may want.

The differences between motion tweens and classic tweens include the following:

  • Classic tweens use keyframes. Keyframes are frames in which a new instance of an object appears. Motion tweens can only have one object instance associated with them and use property keyframes instead of keyframes.

  • A motion tween consists of one target object over the entire tween span.

  • Both motion tweens and classic tweens allow only specific types of objects to be tweened. Applying a motion tween will convert all non-allowed object types to a movie clip when the tween is created. Applying a classic tween will convert them to graphic symbols.

  • Motion tweens consider text a tweenable type and do not convert text objects to movie clips. Classic tweens convert text objects to graphic symbols.

  • No frame scripts are allowed on a motion tween span. Classic tweens allow frame scripts.

  • Any object scripts on a tween target cannot change over the course of the motion tween span.

  • Motion tween spans can be stretched and resized in the Timeline and are treated as a single object. Classic tweens consist of groups of individually selectable frames in the Timeline.

  • To select individual frames in a motion tween span you must Ctrl-click (Windows) or Command-click (Macintosh) the frames.

  • With classic tweens, eases can be applied to the groups of frames between the keyframes within the tween. With motion tweens, eases apply across the entire length of a motion tween span. Easing only specific frames of a motion tween requires the creation of a custom ease curve.

  • You can use classic tweens to animate between two different color effects, such as tint and alpha transparency. Motion tweens can apply one color effect per tween.

  • Only motion tweens can be used to animate 3D objects. You cannot animate a 3D object using a classic tween.

  • Only motion tweens can be saved as motion presets.

  • With motion tweens, you cannot swap symbols or set the frame number of a graphic symbol to display in a property keyframe. Animations that include these techniques require classic tweens.

Additional resources

The following articles and resources are available about the differences between motion tweens and classic tweens: