Animation Learning Guide for Flash: Motion tweens

Adobe Flash Professional CS5 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. Motion tweens can also 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: You can use motion tweens with all versions of ActionScript and Flash Player. In fact, if you needed to create a SWF for Flash Player 1 with motion tweens, you could.

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.

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.

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.

Classic tweens in Flash CS4 and later are largely created and modified the same way as in previous versions of Flash—the main difference being that 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 tween animation section of the Flash product documentation.

A motion tween that you create with Flash Professional has a single object in a tween span, typically called the tween's target object. If you're used to motion tweens in earlier versions of Flash, you manipulate the properties of a single object across a number of frames instead of creating motion between two different objects (keyframes). 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, 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."

All this 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.

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.

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.

3. Because the instance you turned into a tween was at frame 1 of a new layer, with nothing after it, one 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.

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.

Read other sections of the Animation Learning Guide to learn more about working with motion tweens:

• Manipulating motion tweens
• Using motion paths in animations
• Using the Motion Editor
• Animating with preset and custom eases
• Animating with motion presets