Character animation with the Bone tool in Flash

Adobe Flash CS4 Professional includes a new Bone tool that enables you to link symbols together quickly and easily in a parent/child relationship commonly referred to as inverse kinematics. The entire bone structure is also referred to as an armature. You can apply a armature to a series of movie clip symbols or to a raw vector shape that can then be manipulated across time by dragging the armature to a new pose.

This article examines how to create a basic bone structure using symbols and shapes, and then apply these techniques to make a cartoon character walk across a scene.

You can use the Bone tool to create an armature using movie clip symbols or an armature within a vector shape. Let's start by building a basic armature using Symbols:

1. Create a new Flash document and make sure to select ActionScript 3.0. The Bone tool will only work with AS 3.0 documents (see Figure 1).

2. Draw an object on the Stage. For this example, I kept it simple and used the Rectangle tool to create a basic shape.
3. Once you are done creating your shape, convert it to a Movie Clip or a Graphic symbol.
4. Since you'll need more than one object to create a chain of linked objects, duplicate the symbol by holding down the Alt (Windows) or Option (Mac OS) key and dragging the symbol to a new location. Flash will duplicate the instance every time you click and drag it. Repeat this procedure a few more times to create multiple instances of the same symbol (see Figure 2).

5. Link all of these objects together to create your armature. Select the Bone tool (X) from the Tools panel (see Figure 3).

6. Decide what will be your parent or root symbol instance in the armature. This is the symbol instance to which you will apply the first bone segment. Then drag to the next symbol instance to link them together. When you release the mouse, a solid bone segment will appear between the symbol instances (see Figure 4).

7. Repeat this procedure to link the second symbol instance to the third instance. Continue dragging from one symbol to the next until you have linked all symbol instances with bones (see Figure 5).

8. The next step is the fun part. Select the Selection tool from the Tools panel (V) and drag the last bone in your chain. The entire armature can now be manipulated in real time as you drag the last bone around the Stage (see Figure 6).

It's easy to animate your armature by increasing the amount of frames of the IK span by clicking and dragging its edge to the desired frame number (see Figure 7). With the frame indicator on a new frame number, drag your armature to a new position. Flash will insert a keyframe in the current frame number and interpolate the motion within the IK span.

Congratulations! You've just animated a simple armature using the Bone tool in Flash.

You can also use the Bone tool to create an armature entirely within a vector shape. This is an exciting way to animate shapes like never before in Flash. I use this technique often to produce tail-waving animations for animal characters.

Let's start with a rectangle that's very tall and thin. You could even taper the top end of it using the Subselection tool (A) to simulate the end of a tail (see Figure 8).

1. Select the Bone tool (X). Starting at the bottom (base) of the tail, click and drag upward inside the shape to create the root bone (see Figure 9). Flash will convert the shape to an IK shape object as soon as the first bone is drawn inside of it.

2. Continue creating bones moving upward, one after the other, so that they connect with one another from head to tail. I recommend that each bone gradually decrease in length so that articulation gradually increases towards the tip of the tail. This will allow for anatomically realistic motion. When you are done adding bones to the tail, it should look something like Figure 10.

3. Using the Selection tool (V), drag the last bone at the top of the chain (at the very tip of the tail). Because a perfectly straight tail isn't very natural-looking, position the armature so it resembles an "S" shape similar to Figure 11.

4. Insert additional frames in your IK span by clicking a frame number further down the Timeline and then pressing F5 (Insert Keyframes), or drag the right edge of the IK span to the right. What you want to achieve is a seamless looping animation. This requires the first and last frames to be identical.
5. Position the frame indicator (playhead) in the last frame of the span and insert a keyframe by pressing F6. This will insert a keyframe at the end of the IK span that contains the identical armature pose (see Figure 12).

6. Position the frame indicator on a frame in the middle of your IK span at the halfway point and manipulate the armature into a new position similar to the one in Figure 13.

7. To add realism to the tail wave, add a secondary motion to the tail. Because the tail's movement is initiated by the root bone, the end of the tail will have a delayed reaction to the root bone's movements. To animate this, position the frame indicator a few frames after the initial pose in frame 1 and manipulate the armature so that the end of the tail is curved in the direction opposite that of the root bone (see Figure 14).

8. Don't forget to add a secondary motion just after the pose at the midway point in the IK span (see Figure 15).

Play back the animation and you will see the tail has much more articulation and feels more natural due to the secondary poses that you added. Now take it another step further by adding some easing in and easing out. Without easing, the animation can look and feel very mechanical and robotic.

1. Position the frame indicator between the first two keyframes in the IK span. In the Properties panel, select the type of easing using the Ease pop-up menu.
2. Once your preferred easing is selected, adjust the amount of easing using the Strength hot text slider. The easing will affect the motion between these two keyframes.

   You can apply different styles and strengths of easing for each motion by positioning the frame indicator between each set of keyframes and selecting a different easing preset and adjusting the amount of strength for each (see Figure 16).

So now that you've created two different IK armatures using the Bone tool in Flash, it's time to combine these techniques to create a walk cycle for a cartoon character. The character I have designed for this example is a rather sullen-looking monkey. All of his body parts have been separated into symbols on different layers (see Figure 17).

Tip: Set your Flash document to ActionScript 3 and 24fps.

The next step is to determine how to apply your armature. Your first instinct may be to apply a single armature that links all body parts together. But I have found this to be not the best way, because it can make for a very complicated armature and therefore difficult to manipulate. I prefer to create smaller individual armatures limited to just the arms and the legs.

Animating the legs

The leg itself is made up of three individual symbols (see Figure 18).

The idea here is to place all of these leg symbols inside a single Graphic symbol:

1. Select all three symbols and press F8 (Convert to Symbol) and name it leg_armature. Double-click this symbol to edit it.
2. Select the Bone tool (X) and connect these three leg objects, starting with the upper leg symbol as the root bone in the armature. Your completed armature should consist of only two bones and look something like Figure 19.

The next step is to constrain the joint rotation of each bone. This will limit the amount of articulation each bone will have and will help avoid anatomically impossible poses.

3. Select a bone by clicking it directly. The Properties panel will update and provide pop-up menus for Joint: Rotation and X/Y Translation options.
4. In the Joint: Rotation section, select the Constrain option and use the hot text sliders to adjust the amount of rotation needed (see Figure 20).

You might want to adjust the speed of the root bone at this time as well. The speed affects how the bone feels when manipulating it. A lower numerical value adds more weight to the bone, making it seem sluggish compared to a bone with a higher numerical value. I like to lower the value of the root bone a little bit because it provides a more natural feel to the entire armature (see Figure 21).

Since three objects require only two bones, the last object in the chain is more difficult to control because it lacks a dedicated bone to which to apply its constraints. A home-grown technique that solves this problem involves adding an extra object to allow for an extra bone in the armature. The object itself can be anything, because ultimately it will not be included in the published SWF file. I prefer to use a small red circle drawn with the Oval tool (O) (see Figure 22).

5. Flash does not allow objects to be added to an IK pose layer. Create a new layer for the new object to reside in temporarily.
6. Once the object is positioned near the end of the armature chain, select the Bone tool (X) and drag from the end of the current armature to the new extra object. Flash CS4 will automatically move the object to the armature layer, where it will become part of the linked chain of bones (see Figure 23).

7. Now you're ready to start animating the walk cycle. To help align the foot along a horizontal plane, choose View > Rulers to turn on rulers for the document, and then drag from the top ruler down across the Stage to create a horizontal guide. Position the guide directly along the bottom edge of the shoe. This guide will help align the walk cycle along a perfectly horizontal plane. Don't forget to choose View > Guides > Lock Guides to prevent the guide from being accidently moved during the animation process.
8. I prefer to start the animation with the leg in its most forward position, and then animate it sliding backward. Insert about 15 frames and position the frame indicator at about the midway point—in this case, frame 8.
9. Drag the sneaker to the right along the horizontal guide and make sure its bottom edge is aligned perfectly with the guide.

   Make it a habit to play back your animation frequently. Doing so will, at this early stage, reveal a problem with the leg animation. The foot travels in an arc, which it should, because the armature is currently not moving along its x or y axis. This is causing the shoe to move below the horizontal guide (see Figure 24).

The fix for this is to position the frame indicator on each frame, select the shoe symbol, and use the arrow keys to nudge the shoe until its bottom edge is aligned with the guide.

10. Continue the leg animation by positioning the frame indicator on subsequent frames and manipulating the armature into similar poses (see Figure 25).

11. Once your leg animation is as perfect as you can make it, you must hide that extra object at the end of the armature chain. To do this, open the Library (Control+L or Command+L) and locate the symbol used as the end of your armature. Double-click it, and then right-click over the layer containing the object and convert it to a guide layer. This will prevent the object from being included in the published file (see Figure 26).

Your finished leg animation should look similar to Figure 27 (mouse over the button to play).

Figure 27. Completed leg animation (mouse over the button to play)

12. Since the leg animation is nested inside a symbol, it is easy to copy and paste it to be used as your second leg. There's no need to animate the leg again, which will save you lots of time. Just copy the leg symbol paste it to a new layer below the pelvis layer.
13. You can even adjust the brightness a little to push the second leg back even further. Select the instance and, in the Properties panel, select Brightness from the Color Effect drop-down menu, and adjust the slider to a negative value to darken it slightly.
14. While you are in the Properties panel, you will want to make sure the second leg begins looping on a different frame to avoid animating in parallel with each other. You'll want the leg to start about midway into the animation, so type 8 in the frame field in the Looping pop-up menu (see Figure 28).

15. Make sure the copied leg is a few pixels higher then the original leg to suggest space between them. You may also want to move the back leg a few pixels along the x axis to suggest more of a three-fourths view of the body (see Figure 29).

Animating the arms

The next step is to apply an armature to the character's arms. The process is similar to how you built and animated the legs: apply the armature and animation inside a symbol so it can be copied and repurposed for the other arm to save time.

The arm, like the leg, comprises three separate symbols: the upper arm, lower arm, and hand (see Figure 30).

If you want to control the hand like you did with the foot in the leg armature, use an extra object at the end of the chain to which you can apply a third bone (see Figure 31).

The leg armature is 15 frames long. For this reason, you should make the arm animation the same length so they will synchronize perfectly together.

1. Before you begin animating, set the initial pose in frame 1. I recommend that the arm start in its most forward position. Also, this is a good time to select each bone individually and adjust the preferred amount of rotational constraints (see Figure 32).

2. Place the frame indicator in frame 15 and press F6. This inserts a keyframe in the last frame and helps create a seamless loop.
3. Place the frame indicator in the middle of the span—say, around frame 8—and manipulate the armature so the arm is in a similar position (see Figure 33).

Your finished arm animation should look similar to Figure 34 (mouse over the button to play).

Figure 34. Completed arm animation (mouse over the button to play)

4. Like the legs, position the arm symbol with the nested animation relative to the character's body.
5. Copy and paste this arm symbol to a new layer below the body and adjust its position and brightness as you previously did with the back leg (see Figure 35).

Animating the tail

The monkey's tail is animated by applying a bone armature to a shape drawn with the Brush tool (B). Figure 36 shows what the vector shape looks like before the armature is added.

Figure 37 shows the tail with the armature added. Notice the root bone is the longest and that the bones get shorter as they get closer to the tip of the tail. This allows for more articulation at the end of the tail, which will look and feel more natural.

The tail animation does not need to be complicated. You just want to add some basic movement so it feels more alive than if it were just dragging along the ground behind the character:

1. The first step is deciding how many frames the tail animation should be. Since the arm and leg animations are both 15 frames in duration, try making the tail animation divisible by 15 so you can maintain a smooth looping cycle between all symbols. Increase the tail's IK span so its duration is 60 frames long.
2. Now is a good time to position the frame indicator near the end of your span and press F6. This inserts a second keyframe with the tail in its original position and ensures a seamless loop at the end of the span.
3. Position the frame indicator on or around frame 15 and manipulate your tail armature by dragging the last bone in the chain (see Figure 38).

4. Don't forget to add your secondary motions to the tail armature. Figure 39 shows the four main poses I used in my tail animation.

Animating a walk cycle

At this point you should have enough working parts to constitute a walk cycle for your character. The final technique is to nest the entire character inside a symbol. The advantage of this is having the ability to position, scale, rotate, and motion-tween the character across the Stage:

1. Select the entire character and press the F key (Convert to Symbol), name your symbol, and select Graphic in the Type drop-down menu. Click OK (see Figure 40).

2. Add a new layer to the Timeline, open the Library panel (Control+L, Command+L) and drag an instance of this new symbol to the Stage.
3. Right-click the symbol and select Create Motion Tween from the pop-up menu (see Figure 41).

The motion model in Flash CS4 Professional applies a new motion tween in the layer containing your symbol. Because this motion tween is object-based, you no longer have to insert keyframes in the Timeline manually. Position the playhead to a new frame and position the symbol across the Stage. Flash automatically creates the appropriate keyframes for you and applies a spline path that you can edit to suit your needs. Figure 42 shows the final walk cycle animation.

Figure 42. Completed walk cycle animation in action (mouse over the button to play)

Where to go from here

Be sure to hone your animation skills further by visiting the Animation Learning Guide for Flash, which explains how to use all of these animation types in Flash CS4 Professional, including the improved way of creating and editing motion tweens using the Timeline and Motion Editor.

Refer to Motion migration guide for Flash CS4 Professional for help with migrating your motion tweening skills from previous versions of Flash to the motion model in Flash CS4.

Control the display and expressiveness of impressive graphic effects features in Flash to enhance the look and feel of your projects by visiting the Graphic Effects Learning Guide for Flash.