Shape tweening works similarly to motion tweening. It follows the same structure of keyframing in the Timeline. You can animate many of the same changes such as alpha, color, scale, and position, though its main purpose is to transform the shape of an object into another shape. Whereas motion tweening is applied to groups and symbols, shape tweening must be applied to an editable shape. You can determine whether an object is editable by selecting it with the Selection tool—if it doesn’t have a bounding box when selected, shape tweening can be applied. The reason for this is that when you convert a shape into a symbol, you are essentially protecting it from editing by storing it in its own Timeline. To apply shape tweening to a symbol, you must enter symbol editing mode and apply it to the shape contained inside the symbol. Shapes are created with any of Flash’s drawing tools, such as the Oval or Rectangle tools. By making changes to the shape with any of Flash’s editing tools, you can change the contours of the shape (for example, turn a circle into a square) and then use shape tweening to make this change happen gradually over time. Because the results of a shape tween can be unpredictable, you can set shape hints to let Flash know how to proceed with the tween. This is useful when you are working with complex shapes such as letterforms. In all cases you should only tween one shape at a time in a tweened span for best results.
In addition to shape tweening, you can also animate shapes using Inverse Kinematics (IK), which allows you to stretch and bend shape objects and link groups of symbol instances to make them move together in naturalistic ways using an internal structure of bones to create character animation.
You can use shape tweening when you need to alter the form of any editable shape gradually. Place artwork in a keyframe and then use any of Flash’s drawing and editing tools to adjust the contours of a shape on another keyframe. When you apply shape tweening, Flash draws the frames in-between the two keyframes so that the object appears to “morph” between the two states. To provide even more control, you can use shape hints.
FL 3.1
In most cases, you can easily shape tween any two simple shapes. Geometric forms such as lines, rectangles and circles yield the best results. Because Flash draws the tweened frames mathematically, the simpler the shape, the more likely it will tween without any problems or without having to apply corrections such as shape hints. Experimentation is the key. As long as both keyframes contain an editable shape, Flash will attempt to morph one object into another. Use any of Flash’s drawing tools or import a vector shape from another vector drawing program. If you want to apply a shape tween to grouped artwork or a symbol, you can break apart the group or enter symbol editing mode and apply the shape tween to any editable shape in the symbol’s Timeline. You can quickly view your animation by exporting it with the Test Movie command. By default, Flash loops animations in the Flash Player.
Create a new Flash document.
With any of Flash’s drawing tools, draw a shape on the Stage at frame 1.
Select the first frame.
Click the Insert menu, and then click Shape Tween.
Click the Insert menu, point to Timeline, and then click Blank Keyframe.
Flash tints a shape-tweened span a pale green.
With any of Flash’s drawing tools, draw a different shape on the Stage at frame 10.
Click the Control menu, and then click Test Movie to test the animation.
The shape on frame 1 slowly transforms into the shape on frame 10.
The procedure for adding or removing keyframes in a shape tween is similar to that of motion tweens except for one crucial difference. In a motion-tweened framespan you can drag the object on the Stage and a new keyframe is automatically created. In shape-tweened spans, the object is only selectable on a keyframe. To add additional locations or shape changes along a shape-tweened span, you must add the keyframe first and then edit the shape. You can do this by using the Add Keyframe function in the Insert menu. Once the keyframe is added, the shape at that point in the framespan becomes editable.
To create a shape tween you need to draw or place an editable shape in a keyframe. Use any of Flash’s drawing tools or import a vector shape from another vector drawing program. If you want to apply a shape tween to grouped artwork or a symbol, you can break apart the group or enter symbol editing mode and apply the shape tween to any editable shape in the symbol’s Timeline. You can quickly view your animation by exporting it with the Test Movie command. By default, Flash loops animations in the Flash Player.
Create a new Flash document.
Select the Oval tool on the Tools panel.
Set the Stroke Color to None.
On the first frame, draw a circle on the left side of the Stage.
Select the first frame.
Click the Insert menu, and then click Shape Tween.
Click frame 20 in the Timeline.
Click the Insert menu, point to Timeline, and then click Keyframe.
Flash tints a shape-tweened span a pale green.
Select the Selection tool on the Tools panel.
Select the circle on frame 20 and drag it to the right side of the Stage.
Click frame 40 in the Timeline, and then add another keyframe.
Select the circle shape on frame 40 and drag it back to the left side of the Stage.
Click the Control menu, and then click Test Movie to test the animation.
The ball animates back and forth across the screen.
Many of the same motion effects can be applied using either motion or shape tweening. What differentiates shape tweening from motion tweening is that shape tweening is applied to editable shapes. You can change the form of the shape on either keyframe and these changes will be applied gradually by Flash across the tween, slowly morphing one into the other. Additionally, you can combine movement with this tweening process, so your shape can change its shape as it changes its location.
Create a shape tween of a moving ball that begins on the left side of the Stage, hits the right side of the Stage, and then returns to the left.
Click to place the playhead between the first and second keyframes in the shape tween.
Click the Insert menu, point to Timeline, and then click Keyframe.
Select the Selection tool on the Tools panel.
Place the pointer on the left edge of the shape and pull it to create a tail off the circle.
The shape must be deselected on the Stage to pull the edges of the shape.
Click to place the playhead between the second and third keyframes in the shape tween.
Click the Insert menu, point to Timeline, and then click Keyframe.
With the Selection tool still selected, place the pointer on the right edge of the shape and pull it to create a tail off the circle.
Click the Control menu, and then click Test Movie to test the animation.
The ball stretches as it animates back and forth across the screen.
See Also
See “Changing Shape Positions with Shape Tweening” on page 274 for information on animating a moving ball.
When shape tweens are applied to keyframes, the Property Inspector enables several options for controlling how Flash draws the tweened frames. Settings such as easing in and easing out enable you to control how the shape changes are distributed across the frames in the tween. Frame Blending allows you to set preferences to let Flash know which qualities to maintain during the tween.
Click the Window menu, and then click Properties to open the Property Inspector.
Select a keyframe with shape tween applied.
Choose from the following settings:
• Ease. This sets the speed at which your object eases in or out of its motion. A positive value eases in, a negative value eases out.
• Blend. The Distributive option smoothes out the tweened shapes, while the Angular option preserves corners and straight lines in the shape tweens.
Because shape tweening can only be applied to editable shapes, you can’t use the same color style effects that are available to instances. Instead, you must make these changes directly to the shape using the color palettes, the Color Mixer, or the Swatches Panel. When shape tweening is applied, differences in color and alpha are tweened along with any shape changes. This applies to strokes as well as fills.
Select the beginning or ending keyframe in a shape tween or select the shape on the Stage.
Click the Window menu, and then click Color, if necessary.
Make changes to the shape’s stroke and fill colors by entering values in the RGB and Alpha fields, or by using the list arrows to the right of these fields.
Click the Control menu, and then click Test Movie to test the color tween.
Did You Know?
You can use any palette available to change the color of a shape in a tween. In addition to the Color Mixer, there are palettes located on the Tools panel, Property Inspector, and Swatches panel.
See Also
See “Modifying Instance Color Styles and Blends” on page 158-159 for more information on working with color and alpha options.
Sometimes it isn’t possible to predict how some, more complicated, shapes will tween. To exercise greater control over the tweening process, you can set shape hints to guide how Flash draws the in-between frames. You simply specify a beginning shape hint and then a corresponding end shape hint. In this way, Flash will know which parts of the shape in the first keyframe will transform into which parts in the end keyframe. Even with shape hints enabled, the results can be unpredictable, but you will have a greater control over the process.
Create a shape tween of a simple shape into a complex shape.
Click to place the playhead on the first frame of the shape tween.
Click the Modify menu, point to Shape, and then click Add Shape Hint.
A small red, circle with a small letter on it appears in the center of the shape. The first letter is “a”. Shape hints appear in alphabetical order “a, b, c...”. You can use up to 26 hints in one tween.
Drag the shape hint to an area of the shape you want to control.
Click to place the playhead on the last frame of the shape tween.
The corresponding shape hint appears as a small green circle with a corresponding letter that matches the beginning hint.
Drag the corresponding end shape hints to the part of the shape that corresponds to the placement of the beginning shape hint.
“a” should correspond with “a”, “b” should correspond with “b”, etc.
Move the playhead back to the first frame.
Repeat steps 3, 4, 5, 6, and 7 until you have set and placed shape hints on all areas of the shape you want to control.
Click the Control menu, and then click Test Movie to test the animation.
The shape hints help make complex shape tweens more predictable.
Did You Know?
You can remove shape hints. Drag shape hints off the Stage or click the Modify menu, point to Shape, and then click Remove All Hints.
You should place your shape hints consecutively in a clockwise or counter-clockwise direction. Placing shape hints out of order can confuse Flash and often produces unwanted results.
In addition to creating animation using the Timeline and Property Inspector, you can also use ActionScript to animate movie clips, buttons, text, and components. You can animate any instance name with ActionScript. For an ActionScript 3.0 example, see Project 4, “Modifying an Object with ActionScript on page 515. For ActionScript 2.0, you can animate an object over time and change any ActionScript property, such as scale, rotation, color, and transparency. ActionScript provides two events that work well for animation: onEnterFrame and setInterval. The onEnterFrame event is a continuously executing event based on the frame rate of your movie until you stop (delete) it. The setInterval event is a continuously executing event for only a certain period of time. The one disadvantage of these actions is the large use of memory and CPU, so you need to clear it.
• onEnterFrameevent. The following example is a frame script that animates a movie clip to the right until it reaches the position it should be in:
myMovieClip.onEnterFrame=function()
{
if(this._x<300)
{
this._x+=10;
}
else
{
delete this. onEnterFrame;
• setIntervalevent. This event requires two parameters: funtionName and an interval (amount of time in milliseconds between executions). If your interval is smaller than your frame rate, the screen cannot refresh. If your interval is greater than your frame rate, it executes as close as possible. The following example moves a TextArea component to the right every 10 milliseconds until it has reached its final location:
myInternval=setInterval(textAreaMove, 10);
function textAreamove() {
if (textAreaInstance._x<300) {
textAreaInstance._x += 10;
} else
clearInterval(myInterval);
}
}
FL 2.3, 3.7
Inverse Kinematic (IK) (New!) allows you to stretch and bend shape objects and link groups of symbol instances to make them move together in naturalistic ways using an internal structure of bones to create character animation.
You can add bones to the interior of a shape or to separate symbol instances. When you move one bone, the other connected bones move in relation to the one that initially moved. A chain of bones is called an armature, which is either linear or branched in structure.
There are two types of Inverse Kinematic animation: those with symbols and those with shapes. For the symbol type, you link them together as a chain. For the shape type, you add bones inside the shape.
When you add bones to a shape or symbol instance, Flash creates a new layer called a pose layer. For a shape, Flash also converts the selected shapes and bones into an IK shape object. Each pose layer can contain only one armature. The first bone in an armature is the root bone. It appears with a circle around the head of the bone. Each bone has a head, the round end, and a tail, known as the pointed end.
After you add bones to an armature, you can change the position and length of a bone, delete bones, and edit objects containing bones.
When you’re ready to animate an armature, all you need to do is add frames to the pose layer and reposition the armature on the Stage to create a keyframe. Keyframes in pose layers are called poses. To insert a frame in a pose layer, right-click (Win) or Option-click (Mac) a frame in a pose layer to the right of any existing frames, and then click Insert Frame. To add a pose to a frame, right-click (Win) or Option-click (Mac) the frame in the pose layer, and then click Insert Pose. After you insert a pose, you can use the Selection tool to change the configuration of the armature. If you want to change the length of the animation, drag the last frame of the pose layer to the right or left in the Timeline to add or remove frames.
You can adjust the speed of an armature animation in frame around each pose by applying an easing motion. To add easing to frames in a pose layer, click a frame in a pose layer, open the Property Inspector, click the Ease popup, select an ease option, and then enter an ease strength value (0-100, where 0 is no easing and 100 is the most easing).
FL 2.3, 3.7
With Inverse Kinematic (IK) (New!), you can use bones to create two types of IK animations: those with symbols and those with shapes. For the symbol type, you link them together as a chain. For the shape type, you add bones inside the shape. When you add bones to a shape or symbol instance, Flash creates a new pose layer. For a shape, Flash also converts the selected shapes and bones into an IK shape object. The first bone in an armature is the root bone. It appears with a circle around the head of the bone. Each bone has a head, the round end, and a tail, known as the pointed end.
Create one or more filled shapes and arrange them the configuration you want.
Select the entire shape on the Stage.
Click the Bone tool on the Tools panel.
Click inside the shape, and then drag to another location within the shape.
While you drag, a bone appears. When you connect the points, a solid bone appears between them. Flash converts the selected shape into an IK shape object and moves it to a new pose layer in the Timeline.
To add another bone, drag from the tail of the first bone to another location in the shape.
As you add bone instances, Flash moves each one to a new pose layer in the Timeline.
To create a branched armature, click the head of an existing bone, and then drag to create a new branch of the first bone.
Arrange the instances in the configuration you want.
Click the Bone tool on the Tools panel.
Click the symbol instance that you want as the root or head of the armature.
Drag the symbol instance to another symbol instance to connect it.
While you drag, a bone appears. When you connect the symbols, a solid bone appears between the symbols. As you add bone instances, Flash moves each instance to a new pose layer in the Timeline.
To add another bone, drag from the tail of the first bone to the next symbol instance you want to add to the armature.
To create a branched armature, click the head of an existing bone, and then drag to create a new branch of the first bone.
You can add as many branches as you want.
FL 2.3, 3.7
After you add bones to an armature, you can change the position and length of a bone, delete bones, and edit objects containing bones (New!). An armature can only be edited in pose layers that contain an initial pose in the first frame in which the armature appears in the Timeline. To edit the armature, you need to delete any additional poses after the first frame of the armature.
Select the bones and associated objects you want:
• Bone. Click the Selection tool, and then click a bone. You can Shift-click to select multiple bones.
• Armature. Double-click a bone.
• IK Shape. Click the shape.
• Symbol Instance. Click the instance.
To move bones, do any of the following:
• Bone. Drag a bone.
• IK Shape. Select the shape, and then change its X and Y position in the Property Inspector.
• Bone End in IK Shape. Click the Subselection tool, and then drag the end of the bone.
• Bone Joint, Head, or Tail. Use the Transform panel to move the transformation point of the symbol instance.
• Rotate a Bone. Shift-drag a bone to rotate it with its child bones with out moving the parent bone.
To delete bones, do either of the following:
• Bone. Select the bones you want to delete, and then press Delete.
• IK Shape or Symbol Instance. Select the shape or symbol, click the Modify menu, and then click Break Apart.
To edit an IK shape, do any of the following:
• Move the Position of a Bone. Drag a bone endpoint to move the position of a bone without changing the IK shape.
• Display Control Points of the Boundary. Click the stroke of the IK shape.
• Move Control Point. Drag the control point.
• Add Control Point. Click a part of the stroke without any control points. You can also use the Add Anchor Point tool on the Tools panel.
• Delete Control Points. Click a control point to select it, and then press Delete. You can also use the Delete Anchor Point tool on the Tools panel.
To set motion constraints, open the Property Inspector, and then specify the options you want to move or constrain joints, disable bone rotation around joints, constrain the rotation of a bone, make a bone stationary, or limit the motion speed of a bone.
FL 2.3, 3.7
When the stroke of an IK shape doesn’t distort in the way you want, you can use the Bind tool (New!) to edit the connections between individual bones and shape control points to create the appearance you desire. By default, the control points of an IK shape are connected to the bone that is nearest them. The Bind tool allows you to change it. You can bind multiple control points to a bone and multiple bones to a control point.
• Highlight Control Points Connected to a Bone. Click the Bind tool, and then click a bone.
The connected points are highlighted in yellow while the selected bone is highlighted in red.
• Add Control Points. Select a bone, and then Shift-click an unhighlighted control point.
• Remove Control Points. Ctrl-click (Win) or Option-click (Mac) a control point that is highlighted in yellow.
• Highlight Bones Connected to a Control Point. Click the Bind tool, and then click the control point.
The connected bones are highlighted in yellow while the selected control point is highlighted in red.
• Add Other Bones to a Control Point. Select a control point, and then Shift-click a bone.
• Remove a Bone from a Control Point. Select a control point, and then Ctrl-click (Win) or Option-click (Mac) a bone that is highlighted in yellow.