Ken Willes Interactive Designer & Developer

Bones Tool

May 28, 2012

The bones tool is used to embed a bone-like structure into shapes and symbols for animation purposes. The easiest way to think about how this tool works is to think about your own body and how it can move.

In this post:

   
• Bones Overview
   
• Connecting Bones to Symbols
   
• Connecting Bones to Shapes
   
• Human Doll Construction
   

Bones Overview

When you raise your hand up into the air, you don’t think about moving any other part on your body except for your hand; yet, your shoulder rotates along with your upper arm and forearm. In similar manner, a bone structure can be created for graphics that relate to each other in certain ways as they are moved and rotated.

The ability for one control point to influence movement of an inter-connected joint network is also referred to as Inverse Kinematics (IK). The movement of one bone at a top of a chain will influence other bones to move. This movement is all done without having to manipulate each individual bone for the desired pose.

Click and drag the human doll below to explore how the bone structure affects the movement of parts in this Inverse Kinematic relationship.

The bone structure is not visible in the figure 1 (Flash hides the structure upon export), however the effects of the bones are noticeable when the doll is moved. In figure 2, you can see what the bone structure looks like.

   
Figure 2. Bone Structure of Figure 1

Connecting Bones to Symbols

Bones may be connected to either symbols or shapes. In this section, I’ll show you how to start connecting symbols together with the bone tool ( ).

We’ll make a simple connection of train cars in this example. Download the file below to follow along.

The problem with this train is that it is too rigid right now, each car needs to have a joint at the connection so that it can follow the curves of the hill (figure 3).

   
Figure 3. Train Car Without Bones

1. Add Bones

To add bones, click and drag from the engine to the car with the bone tool.

   
Figure 4. Connecting the First Bone from the Engine to the Car

2. Add More Bones

Then click and drag from the last bone end-point to the next car.

   
Figure 5. More Bones Connected

3. Finish Adding All the Bones

Repeat this process until all the cars have been linked. Then with the selection tool ( ), click and drag the cars around to see how they move in relation to one another. Click and drag the circles (bone heads) to rotate objects. Notice that the cars break up where you don’t want them to (figure 6).

   
    Figure 6. Poor Joint Placements

4. Reposition Bone Pivot Locations

To fix this, use the transform tool ( ) to relocate center pivot points for each object to the hitch of each car.

   
    Figure 7. Relocating Pivot

5. Align Graphic to Proper Place

Then adjust the placement of the car or engine to match the level of the hitch by using the select tool with CTRL key (or Command key on the Mac) held down.

   
    Figure 8. Reposition Graphic with Selection Tool and CTRL Modifier Key

When you reposition the pivots and placement of the objects, you’ll have something that looks like the following:

   
    Figure 9. Bones and Shapes Repositioned

6. Add a Locator for the End Car

There is still one more thing to fix to make this train bend properly. The last train car will not rotate because it does not have a bone head to rotate from. You might think, oh just add another bone to the symbol—but that will not work. Only one bone may be added per symbol.

To solve this challenge, you’ll need to add a locator (a locator is a term I borrow from the Maya 3D Modeling software). The locator is a point in space that can be associated with a bone structure. You can create a locator easily by just creating a Movie Clip with a dot in it (there is one provided in the library of the example).

To associate the locator with the bone structure, simply click and drag the bone tool from the last end point of the bone (tail) to the locator. The flash file should now look like this:

   
    Figure 10. Locator Added

Notice that now the last car has a rotation handle on the hitch.

7. Animation on Armature Layer

Throughout this demo, you’ve noticed that Flash created a layer called Armature—this is the layer that the symbols get added to as connections are made with the bones. This layer is also where you would create keyframes for animation purposes. The Armature layer behaves just like Motion Tween layers except keyframes are considered poses.

Insert frames in the Armature layer and try animating the train over the hills. I’ll start with putting the train off the stage to the left on the first keyframe. Select all the objects and use the Free Transform tool to move the objects as a whole. Set your keyframes and adjust the animation as needed.

   
    Figure 11. Train Animation Started

8. Finished Demo

Here is the final animated piece:

Connecting Bones to Shapes

You can also connect bones to a shape. The best way to think about this effect is to imagine a wiggling worm. There are many points of movement, but the body of the worm is all one piece.

I’ll animate a simple tube-shape worm and show you some of the considerations of connecting bones to shapes. Download the starter file to follow along.

1. Connect Bones to Shape

The first step is to connect the bones to the shape. Since we are not connecting bones to a symbol, you can add as many bones as you wish (I personally like to get away with as few bones as possible).

Select the shape and click and drag bones internally to the shape.

   
    Figure 13. Train Animation Started    

2. Create a Starting Pose

Next, click on one of the middle bones and raise the middle of the worm body upwards. This will be the starting pose.

   
    Figure 14. Pose of Worm

3. Insert a Pose

Insert a keyframe for the next pose.

   
    Figure 15. Keyframe Pose

Then move and flatten the worm out and scrub the timeline to preview the motion.

   
    Figure 16. Worm Movement

4. Move and Pose, Move and Pose

The rest of the process involves repeating the steps above.

5. Adjust Bindings

You can adjust how a bone binds to a shape. Click on the Bind tool ( ), then CTRL select points and bones you want to associate or bind together. Think of this process as gluing skin onto the bones.

In figure 17, the triangles represent points along the shape that are bound to the bone in red. More points can be added by using the direct select tool ( ) and CTRL clicking the new points with the Bind tool.

For this worm animation, you really don’t need to adjust the bindings, but it is there in case you wanted to.

   
    Figure 17. Worm Movement

Eventually you’ll finish with a worm that looks like figure 18.

Summary

The bone tool lets you add a structure from which shapes may be animated from.

---

« Back to blog index