Adobe Flash CS4 Professional can create two types of tweened animation: motion tweens and shape tweens. Flash can also create Classic Tweens, and you can read in this section why they're not covered in this learning guide.

Motion tweens are a very common way to create movement with Flash, because Flash does most of the work, making things easy for you. Also, motion tweens can help minimize file size, particularly over frame-by-frame animation, since you have fewer assets in your documents.

With motion tweening you create the motion tween and then define properties such as position, size, and rotation for an instance or text block at one point in time, and then you change those properties at another point in time. When you do this, Flash automatically creates the gradual change between the first and second point in time. You can also apply a motion tween that follows a motion path. For more information on using motion tweens that have motion paths, see Animation Learning Guide for Flash: Motion paths.

Note: As mentioned earlier, Flash CS4 has introduced a new way of creating motion tweens, as discussed in this article. Although it's new, you can use these new tweens with all versions of ActionScript and Flash Player. If you actually need to create a SWF for Flash Player 1 with the new motion tweens, you can.

In shape tweening, you draw a shape at one point in time, and then you change that shape or draw another shape at another point in time. Flash interpolates the values or shapes for the frames in between, thus creating the animation. The shape morphs from the first shape into the second shape, or you can animate color and gradients. For more information on shape tweens, see "Creating shape tweens."

Tip: To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart (Modify > Break Apart). To apply shape tweening to text, you must break the text apart twice to convert the text to objects. For more information, see the Break text apart section of the Flash product documentation.

Requirements

To make this most of this learning guide, you need to install the following software:

Flash CS4 Professional

• Try
• Buy

Prerequisite knowledge

A basic knowledge of the Flash workspace.

What you can tween

You can motion-tween many properties of symbol instances and text fields. Flash can tween the position, size, rotation, and skew of instances and text. You can also tween color effects and filters, such as the alpha transparency and blur applied to instances. Most individual properties can be tweened independently from each other. For example, you can tween the tint color independently from the tint amount. Oh, the power you now hold!

For more information on creating symbols, see the Create symbols section of the Flash product documentation. For information on applying color effects and filters to symbol instances, see the Applying filters section in the Flash product documentation.

What are these so-called classic tweens?

You may notice a reference to inserting "Classic Tweens" in Flash menus. "Classic Tween" refers to tweening in Flash CS3 and earlier, and is maintained in Flash primarily for transition purposes. Because the new motion tweens are easier to use and offer much more functionality than classic tweens, you should use the new model whenever possible. For information on when you might want to use classic tweens, see the "When to use classic tweens" section in the motion migration guide for Flash CS4.

Classic tweens in Flash CS4 are largely created and modified the same way as in previous versions of Flash (the main difference being you cannot create a classic tween from the Property inspector). There is a lot of information freely available online about creating and editing classic tweens, including the legacy Animation Learning Guide for Macromedia Flash 8 and the Working with classic tweens section of the Flash product documentation.

Working with the target object of a tween

A motion tween that you create with Flash CS4 has a single object in a tween span, and it is typically called the tween's target object. If you're used to motion tweens in earlier versions of Flash, instead of creating motion between two different objects (keyframes), you manipulate the properties of a single object across a number of frames. There are several advantages to having a single target object in a tween:

• You can save a tween as a preset and reuse it in that or other documents. For information on how to do this, see Animation Learning Guide for Flash: Motion presets.
• Motion tweens are easy to move around now—either on the timeline (drag the tween span around), or on the Stage by selecting the motion path and just moving it around the Stage. If you're used to using Edit Multiple Frames to do the same thing, you should find this much easier. To learn how, see "Creating shape tweens."
• You can apply a new instance to an existing tween by just pasting it onto a tween to swap it out, drag a new instance from the Library, or use Swap Symbol. you can even have a tween without an instance applied to it, and all properties of that tween will be saved until you apply an instance to it. You can give your tween an instance name and then give other instances that same tween at runtime. We talk more about that in "Using tween instances."

This also means that there are some changes to the way tweening can work, between the old and new version. You can read more about these changes in the Motion migration guide for Flash CS4 Professional.

Creating a motion tween

To animate the changes of a target object's properties, you use motion tweens (see Figure 19). Motion tweens automatically convert changes you make to properties over time into smooth animations.

You can create a motion tween using one of three methods:

• Create a graphic or instance that you want to tween, and then right-click a frame(s) in which it's present and select Create Motion Tween
• Select the graphic or instance that you want to tween, and select Insert > Motion Tween from the main menu
• Create a graphic or instance that you want to tween, and then right-click the instance on the Stage and select Create Motion Tween

In all of these cases, Flash converts the static frames to a tween span on the Timeline. You may encounter the following during the process:

• If the instance you have selected is not tweenable (for example, it is a raw shape instead of a symbol), you will be prompted to convert it to a symbol first. Click OK to continue creating the motion tween, and Flash creates a movie clip in this case.
• It is a good process to convert your selections into a tweenable instance, such as a movie clip or graphic symbol (if you're using text, you're good to go already), before you create the motion tween. This lets you control the attributes of the instance you create, meaning that it's the most appropriate symbol type and has a recognizable name in the Library.
• If you have multiple selected items on the same layer, Flash prompts you to convert them into a single symbol.
• You cannot have ActionScript on or within a tween, meaning code cannot be placed on the frame or on an object if you're using ActionScript 2.
• You cannot drag a motion tween to a layer that does not support tweens, such as a layer with a classic tween or an IK layer. If you create a motion tween on a layer with a classic tween, it moves to a new tween layer. You cannot create a motion tween on a layer with an IK span.

Figure 19. This animation has several layers. Some of the assets of the character are within a movie clip. Therefore, you can animate the instance on the main Timeline and on nested timelines simultaneously. For example, the eyes are movie clip instances with nested animations.

When tweening position, you can make the object move along a nonlinear path. For information on tweening along a path, see Animation Learning Guide for Flash: Motion paths.

To create a motion tween that animates position and rotation using the Motion Tween option:

1. Create and save a new FLA file, and then draw something at frame 1 of Layer 1.

2. Select your artwork, and then right/Control-click and choose Create Motion Tween (see Figure 20). Click OK to convert the instance into a movie clip. Optionally, you can rename the symbol in the Library.

   

   Figure 20. Right/Control-click an instance of artwork and choose Create Motion Tween.

3. Because the instance you turned into a tween was at frame 1 of a new layer, with nothing after it, 1 second's worth of frames was inserted on the timeline. If your FPS setting in Document Properties is 24, then Flash creates a 24-frame span. If your FPS is set to 12, then the span will be 12 frames long.

4. The playhead should be at the end of the frame span (if you changed its location, move it there again). Do any or all of the following to modify the instance:

   • Move it to a new position on the Stage
   • Modify the item's size, rotation, or skew using the Free Transform tool

5. After you make the change, you will see a small diamond icon appear at that frame (see Figure 21). This is a property keyframe, which indicates where a change takes place on the tween span.

   

   Figure 21. The playhead moves to the end of the tween span, where you make the change. A property keyframe appears at this frame, where you made adjustments to the animation. You also see a motion path on the Stage if you moved your instance.

   Tip: If you don't see this keyframe, make sure you have the Keyframe View set to All; to do so, right/Control-click the tween span and select View Keyframes > All. Because every property in a motion tween can have its own keyframes, and a timeline can only show one diamond on a frame, you need to specify which property keyframes the tween span shows. You will see a diamond if any property keyframe exists on that frame when you select All. If the property keyframes get in the way, you can always change your setting using this menu to display certain categories of property changes.

6. Move the playhead to the middle of the span, and change the object again by moving or transforming the instance on the Stage. Another property keyframe appears on the tween span.
7. Select Control > Test Movie to test the animation.

Note: For information on animating along a path, see Animation Learning Guide for Flash: Motion paths.

To remove a motion tween from a timeline, select a motion tween and do one of the following:

• Right/Control-click the tween span in the Timeline and choose Remove Tween.
• Right/Control-click the tweened instance on the Stage, and choose Remove Tween.
• Select the instance on the Stage, and then select Insert > Remove Tween from the main menu.

Note: To create 3D animation, just use the 3D tools to apply 3D rotation or 3D translation to the animated instance. For more information on using 3D tools and applying 3D to your tweens, read Exploring the new 3D features in Flash CS4 Professional.

Where to go from here

Read other sections detailing modifying motion tweens, such as Animation Learning Guide for Flash: Motion tween manipulations.

About the authors