Creating Tweened Animations
Flash can create two types of tweened animation: motion tweening and shape tweening.

In motion tweening, you define properties such as position, size, and rotation for an instance, group, or text block at one point in time, and then change those properties at another point in time. After you do so, you can apply the motion tween between those two frames. Flash automatically creates the movement between the first and second point in time. You can also apply a motion tween and assign a path for it to follow. For more information on motion tweens, see the next section, Creating Motion Tweens.

In shape tweening, you draw a shape at one point in time, and then 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. For more information on shape tweens, see the later section, Creating Shape Tweens.

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

Tweened animation is an effective way to create movement and changes over time while minimizing file size and development time. In tweened animation, Flash stores only the values for the changes between frames. To quickly prepare elements in a document for tweened animation, distribute objects to layers (Modify > Timeline > Distribute to Layers).

Creating Motion Tweens
To tween the changes in properties of instances, groups, and type, you use motion tweening. Flash can tween position, size, rotation, and skew of instances, groups, and type. Additionally, Flash can tween the color of instances and type, creating gradual color shifts or making an instance fade in or out. To tween the color of groups or type, you must make them into symbols.

If you apply a motion tween and then change the number of frames between the two keyframes, or move the group or symbol in either keyframe, Flash automatically tweens the frames again.

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

• Create the starting and ending keyframes for the animation and use the Motion Tweening option in the Property inspector.
• Create the first keyframe for the animation, insert the number of frames you want in the Timeline, select Insert > Timeline > Create Motion Tween, and move the object to the new location on the Stage. Flash automatically creates the ending keyframe.

The animation has several layers. All of the assets of the bee are within a movie clip. Therefore, you can animate the instance on the main Timeline. Inside the instance, some elements (such as the wings) are movie clip instances with nested animations. The wings contain frame-by-frame animations.

When tweening a position, you can make the object move along a nonlinear path. To create a motion tween using the Motion Tweening option:

1. Create a new file and call it motiontween.fla.
2. Select Frame 1 of Layer 1. This is where the animation will start.
3. Create a graphic with the Pen, Oval, Rectangle, Pencil, or Brush tool. Select it and then choose Modify > Convert to Symbol.
4. In the Convert to Symbol dialog box, make sure the Movie Clip option is selected and then click OK. Now the graphic you created is an instance on the Stage (with a symbol in the Library).
5. Select Frame 10 on Layer 1 and then press F6 to create a second keyframe. This is where the animation will end.
6. Select your instance on the Stage at Frame 10. Do any 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.

7. Click any frame in the tween's frame span (for example, select Frame 5 of Layer 1) and select Motion from the Tween pop-up menu in the Property inspector (Window > Properties > Properties).
8. With the frame still selected, drag the arrow next to the Easing value in the Property inspector (Window > Properties > Properties) or type in a value to adjust the rate of change between tweened frames. Note: By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.
9. To rotate the selected item while tweening, select an option from the Rotate menu:

• Select None (the default setting) to prevent rotation
• Select Auto to rotate the object once in the direction requiring the least motion
• Select Clockwise (CW) or Counterclockwise (CCW) to rotate the object as indicated, and then enter a number to specify the number of rotations

Note: The rotation in Step 9 is in addition to any rotation you applied to the ending frame in Step 6.

10. Select Control > Test Movie to test the animation.

Applying Easing and Custom Ease-in and Ease-out to Motion Tweens
The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.

To produce a more realistic sense of motion, you can apply easing to the motion tween you create. Flash provides two methods by which you can apply easing to a motion tween: You can specify an easing value for each motion tween you create using the Ease slider, or you can use the Custom Ease In/Ease Out dialog box (Flash Professional only) to control the speed of the motion tween more precisely.

To apply regular easing to a motion tween:

1. Create a new file and call it motionease.fla.
2. Select Frame 1 of Layer 1. This is where the animation will start.
3. Create a graphic with the Pen, Oval, Rectangle, Pencil, or Brush tool. Select it and then choose Modify > Convert to Symbol.
4. In the Convert to Symbol dialog box, make sure the Movie Clip option is selected and then click OK. The graphic you created is an instance on the Stage (with a symbol in the Library).
5. Select Frame 10 on Layer 1 and then press F6 to create a second keyframe. This is where the animation will end.
6. Select your instance on the Stage at Frame 10. Do any 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.

7. Click any frame in the tween's frame span (for example, select Frame 5 of Layer 1) and select Motion from the Tween pop-up menu in the Property inspector (Window > Properties > Properties).
8. With the frame still selected, drag the arrow next to the Easing value in the Property inspector (Window > Properties > Properties) or type in a value to adjust the rate of change between tweened frames:

• To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the slider up or enter a negative value between ­1 and ­100.
• To begin the motion tween rapidly and decelerate the tween toward the end of the animation, drag the slider down or enter a positive value between 1 and 100.

Note: By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.

9. Select Control > Test Movie to test the animation. The SWF file shows regular easing (the top bee) and customized easing (the bottom bee). The vertical line that animates from left to right has no easing applied.

Custom easing enables you to control these elements through an intuitive graph that provides independent control over the position, rotation, scale, color, and filters used in a motion tween. When you create a motion tween and then select it in the Timeline, you can click a button labeled Edit to customize the motion tween.

The Custom Ease In/Ease Out dialog box displays a graph representing the degree of motion over time. Frames are represented by the horizontal axis and the tween's percentage of change is represented by the vertical axis. The first keyframe is in the animation is at 0% and the last keyframe is at 100%. The rate of change of the tweened instance is shown by the slope of the graph's curve. If you create a horizontal line (no slope) on the graph, the velocity is zero; if you create a vertical line on the graph, there is an instantaneous rate of change.

• Flash Animation Learning Guide (Part II)

• Figure 1
• Figure 2
• Figure 3
• Figure 4