Introduction to Inverse Kinematics and the Bone and Bind Tool

Inverse Kinematics (IK)

Inverse kinematics is a field of study which calculates the set of motions required to achieve a desired position. As noted in the Wikipedia article on the subject, "Key to the successful implementation of inverse kinematics is animation within constraints: computer characters' limbs must behave within reasonable anthropomorphic limits."

The Bone and Bind tools were introduced in Flash CS4 to do Inverse kinematircs. One uses a structure (called an armature) with multiple linked segments called bones. You manipulate the structure to create various configurations or poses. Flash interpolates between poses to create animation.

Using Armatures to Connect Symbols

To link symbol instances in a linear armature

Create a symbol (say an oval) and place instances of the symbol on the Stage, arranging them in the desired configuration. In this exercise, place four instances of the oval symbol lined up horizontally. Select the Bone Tool -- the pointer changes to a small black bone with a plus sign. Position the pointer over the first symbol -- the pointer changes to a white bone, indicating you are over a symbol where you can start a bone. Click and drag (creating the head of the bone) to connect with the second symbol instance in the chain. As you release the mouse button (creating the tail of the bone), Flash pulls the two symbol instances out of their current layer(s) and puts them in a new layer, called a pose layer. You can't add content directly to the pose layer. Flash gives the new layer a default name (e.g Armature_1). To draw the second bone in the chain, put your cursor over the tail of the first bone you created and click and drag into the third instance. Repeat this process for the last bone. You don't need to be precise in positioning the head of a child bone; it automatically connects to the tail point in that node. By default the transformation points of the symbol instances (about which rotation occurs) are moved to the head and tail points of the bone.

Working with Poses

To define the pose span length, click in the frame to mark the end of the span and click F5. To create a new pose frame within the armature layer, right-click the desired frame and choose Insert Pose. Alternatively, just click the desired frame in the pose span or position the playhead at the desired frame. Then use the selection tool to manipulate the armature on the Stage. Flash adds a diamond icon representing a pose to the current frame. To reposition a selected bone, click it and drag it. The bone will rotate around its head; other bones and nodes move in response if their joint settings allow for movement. To remove a pose from the pose span, position the playhead at the frame containing the pose, right click the frame, and choose Clear Pose.

Flash automatically interpolates between the various poses to create animation. To see this, create several poses in the timeline and then Control>Test Movie.

Creating IK Shapes

You can add IK bones to a shape and Flash will convert it to a new type of shape, an IK shape. This means that changes in the shape will be controlled by changes in the IK armature. The armature functions like a skeleton. Whereas above we only had a skeleton, now we have a shape with an invisible skeleton

To combine linear and branching armatures inside a shape

Using Flash's drawing tools, create a shape to which you want to add an internal armature structure. In this exercise, create a rounded rectangle, making it fairly long and narrow. You'll create an armature that has two linear chains branching from a central point in opposite directions. Select the Bone Tool and then draw the first bone by clicking in the middle of the rectangle and dragging and then releasing. To draw the second bone, position the pointer over the tail of the first bone and click and drag. To draw the second branch, position the cursor of the head of the first bone and then click and drag in the opposite direction. This arrangement allows the two halves of the rectangle to curve independently, thus creating more complex poses.

As before, one can click in a later frame, choose F5, and manipulate the structure and test the animation through Control>Test Movie.

Appling Spring to a Motion

To demonstrate this, select the Rectangle tool, and make sure Object Drawing mode is turned off. In the Properties Panel, set the Stroke to None and draw a thin, horizontal rectangle across the top of the Stage. Slect hte Bone tool and add two bones to the shape - make the bone on the left shorter than the one on the right. In the timeline, click Frame 24 and press F5. With the selection tool, drag the right end of the rectangle down to the bottom of the Stage. Press Enter to preview the animation -- the shape remains pretty much unchanged through the moion. Select the bone on the right and then change Properties>Spring>Strength to 70 -- this makesthe relationship between parent and chile bones pretty loose. Press Enter to preview the animation -- the motion should now be more fluid.

(example from Flash CS5.5 The Missing Manual, pp. 352-354)

Constraining IK Motion

You can contrain IK motion in two ways. First, by selecting the armature, in the Property Inspector you can set the Strength and Type of easing. Second, you can control movement on a bone by bone basis as described below.

You can control movement at a head point - allow full rotation, prevent rotation completely, limit rotation to create a joint that bends in other direction, like a knee or an elbow, or limit horizonal and vertical movement, known as x and y-translation). You cannot control movement at a tail point. In a branching armature, all the bones branch from a single spot, known as the root, and are known as sibling bones. Each symbol instance in a chain will reside in a single pose layer; if you start another chain, the symbol instances in that chain will be placed in a different pose layer.

You can allow or prevent a bone from rotating, or allow or prevent movement along a bone's x-axis or y-axis. The axes refer to the x and y axis of the bone, not the Stage. To determine the x and y axis of the bone, you can select the bone and look at the range-of-motion icon at its head. You will have double-headed arrows for unconstrained translation and I-beams for constrained translation. The I-beams indicate the directions in which the head point of the bone can move.

To constrain rotation at a bone's head (p. 384-387)

Using the Selection tool, click the parent bone. In the Property Inspector, in the Joint Rotation section, if the Enable checkbox is selected, the selected bone can rotate 360 degrees around its head. Select the Constrain checkbox, minimum -50 degrees and maximum +50 degrees are the default values. The values correspond to the bone's current orientation on the Stage. You will see a little icon indicating the allowed range of motion. Constrain settings apply throughout the IK pose span.

To allow x-axis and y-axis translation of the armature as a whole (via the parent bone) (p. 388-390)

It is often useful to disable, at least momentarily, rotation for a bone. You can then assign x- and y-translation constrains just as you did for rotation. Again, you can see the constraints on motion, particularly if you zoom in.

To allow x- and y-axis translation of individual child bones (p. 391)

To enable the head of the selected child bone to move farther from (or closer to) the head of the parent, allow movement along the bone's x-axis or y-axis. As you drag the selected child bone to reposition it, the parent's bone gets longer or shorter. .

Editing IK Elements

To edit an armature, you have to remove any poses you've created.

To reposition a bone's head/tail within an IK node

Using the selection or subselection tool, click the node and then choose the Free Transform Tool. The transformation point is a white circle. The head and tail points are location at the transformation point of an IK node and you can drag the transformation point to a new location, thus changing the head and/or tail points.

To reposition IK nodes - Ctrl drag one or multiple nodes. To changes bone length in IK shapes, use the subselection tool and drag the head or tail to a new location.

Using the Bind Tool (p. 395-396)

If you click on a shape containing bones with the Bind Tool and you click on an individual bone, you will see as yellow rectangles the points on the shape that are bound to that individual bone alone; a point on the shape that binds to multiple bones will appear as a yellow triangle. You can break a connection to the selected bone by Ctrl-clicking the yellow square or rectangle. To bind an unconnected control point (a blue square) to the selected bone, shift-click the control point. This latter technique can create a relationship between different parts of the shape. This is somewhat analogous to shape hints.

Exercise: Draw a shape (e.g. a human body with the brush tool). Fill in the shape with the paint bucket. Then add bones. Extend the pose by clicking F5. Move a bone and see how the shape responds when a bone is moved. Now click the bone with the Bind tool and break connections to some of the points. Now move the bone again and see how the shape responds. Add back in the connections, or add another, and then see how the shape responds when a bone is moved.

User Control

You can allow the user to play with armatures -- select the armature layer, the pose span, or any frame within the pose span. In the Property Inspector and then in the Options section, in the Type menu, choose Runtime (Authortime is the default). Flash will give you an error message if you choose the Runtime option for animation with multiple poses or containing graphic symbols. You can avoid the first issue by right-clicking on the extra poses in the timeline and choosing Clear Pose. You can avoid the second issue (such as connecting symbols with bones as discussed at the beginning of this handout) by using movie clip symbols.

Using IK Kinematics in a Larger Movie

One can select the armature layer, convert the IK animation to a symbol, and then use this symbol within the movie, and apply tweening to the symbol to achieve changes in postion, color, fade in and fade out, etc.


Source: Flash CS4 Professional Visual QuickStart Guide by Katherine Ulrich, pp. 365-398 and Flash Downunder Video on Inverse Kinematics. Revised December 5, 2011.