Using inverse kinematics

Use inverse kinematics to add motion and distortion to objects. Use Bone and Bind tools to create armatures and animate them in the Timeline.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Flash Professional CS4

• Try
• Buy

Sample file

lrvid4058_fl.zip (ZIP, 299K)

Prerequisite knowledge

Intermediate knowledge of Flash animation

Using inverse kinematics

Inverse kinematics is the process of animating an articulated structure by calculating the changes needed to achieve its end state. This tutorial teaches you how to use the new Bone and Bind tools in Adobe® Flash® CS4 to create articulated structures.

Building an inverse kinematic structure

The Bone and Bind tools are used to build inverse kinematic structures. You can use these tools on symbol instances. To create an inverse kinematic (IK) structure with symbols:

1. Create a movie clip symbol from a basic drawing shape and place an instance on the Stage.
2. To create multiple instances of the symbol, hold down the Alt/Ctrl key and drag the first instance to duplicate it. Repeat this process until you have the desired number of shapes.
3. To link the shapes together, use the Bone tool. The Bone tool is located in the toolbox above the Paintbucket tool.

   

   Figure 1: Selecting the Bone tool
4. Click the first shape to designate it as the parent shape. Then, drag the Bone tool from the first shape to the next. Repeat this step until all of the symbols are linked. You have created an IK structure.

   Note: Notice that Flash has created an Armature layer. Anytime you use the Bone tool to build an armature IK structure, Flash automatically places it on an Armature layer.

Animating an inverse kinematic structure

You can also manipulate and animate an IK structure. To manipulate your structure:

1. Using the Selection tool, click the last symbol instance in the IK structure. Drag the instance to move the entire linked structure around the stage.
2. To animate the IK structure, move the playhead to an empty frame in the Timeline. Select the armature layer and then press the F5 key to insert the specified number of frames. This establishes the duration of the animation.

   

   Figure 2: Inserting additional keyframes
3. Move the IK chain again, repeating Step 2. Flash inserts a new keyframe at the end of the animation and a motion tween between the two frames, creating a simple animation. To view the animation, scrub the Timeline.

   Note: You can lengthen the animation by dragging the playhead in the Timeline to the right. Remember that you can reposition the chain by clicking and dragging the last symbol instance in the chain. You can also reposition individual bones in the chain by clicking and dragging them.

Selecting an animation type in Flash Player

An IK structure built with the Bone tool is unique in that in addition to animating in authortime (in other words, directly in the Flash authoring environment), you can also animate at runtime, or when you export the movie. The IK runtime animation process is similar to animating with ActionScript, where you do not animate directly on the Stage. To change the IK animation type from authortime to runtime:

1. Select Frames 2 through the end of the animation and press the Delete key. This step deletes the extra frames and removes the previous animation.

   Note: In order for the runtime animation to work, there can be no animation in the Timeline.

2. Go the Options pane in the Properties panel. Choose Type > Runtime.

   

   Figure 3: Choosing the Runtime for the animation type
3. Test the movie by pressing Cmd+Return/Ctrl+Enter. Flash exports a SWF file that will open in Adobe Flash Player. Notice that the IK chain does not appear to be animated.
4. In the Flash Player window, drag the shapes in the chain.

   Note: Notice that with the Bone tool, you can move the IK structure in realtime while the movie is running in Flash Player. Instead, the animation is based on user input.

Setting options in the Properties panel

Some of the other options in the Properties panel allow you to further manipulate the animation. To view these options, go to the Properties panel:

1. To enable properties for individual bones, select a bone and choose Enable under the pertinent properties in the Properties panels.

   

   Figure 4: Enabling properties for the IK structure
2. To constrain the rotation of individual bones, choose Constrain under Joint: Rotation. Scrub the unlined text next to the Min and Max to constrain the degree of movement for that bone. You can also constrain bones along the x and y axes.

Creating inverse kinematic structures with shapes

The bone tool can also create IK structures using shapes. To create an IK structure using shapes:

1. Choose File > New. The New Document dialog box opens. Select Flash File 3.0 and click OK to create a new Flash document. Click the Rectangle tool in the toolbox. Draw a long, thin rectangle on the stage.
2. To create an IK structure using the Bone tool, click the left side of your rectangle. Drag to create a series of bones inside the rectangle.

   

   Figure 5: Creating bones in a rectangle shape

   Note: Remember that the shape has not been converted to a symbol at this point.

3. Move the playhead to an empty frame in the Timeline and press F5 to insert frames. Notice that Flash has created another Armature layer.
4. Select the last frame of the Armature layer. Drag a bone on the right side of the shape to a different place on the Stage to insert a new keyframe and create an animation. You can insert additional frames and curl your shape in the opposite direction for a more complex animation.

   

   Figure 6: Drag bones to manipulate the shape

Adding and removing vector points

Adding or removing vector points helps build a more complex and versatile IK structure, which you can then manipulate using the Bind tool. First, to add or remove vector points:

1. Choose File > New. The New Document dialog box opens. Select Flash File 3.0 and click OK to create a new document.
2. Select another shape from the Shape tools. Draw a series of shapes on the Stage. Make sure the shapes are overlapping or connected.
3. Click the Bone tool in the toolbox. Starting at a point on the boundary of the first shape, drag to draw a series of bones through the connected shapes (as shown in Figure 7). Flash places these bones in a container. You should be able to see the blue bounding box of the container on the Stage.

   

   Figure 7: Creating bones in connected shapes
4. Move the playhead to an empty frame in the Timeline and press F5 to insert new frames.
5. Select the last frame in the Timeline. Choose the selection tool from the toolbox and drag one of the bones to create a basic animation.
6. Choose the Subselection tool from the toolbox. Click the shape on the stage to make it active. A blue outline will appear around the shape you have created.
7. To add vector points, click on different parts of the outline. Clicking automatically adds vector points. To remove points, click a vector point and press Delete.

   

   Figure 8: Adding vector points

Using the Bind tool

The Bind tool allows you to assign vector points to specific bones. To use the Bind tool:

1. Press and hold the Bone tool in the toolbox and select the Bind tool from the pop-up menu. With the Bind tool, click on a vector point of the shape container object. The bones that the specific point is assigned to are highlighted in yellow. This means any change to those bones will affect that point.

   

   Figure 9: Selecting the Bind tool
2. To add bones to a selected vector point, press Shift and click the desired bone. Press and hold down Ctrl/Command to unassign a vector point to a bone.

Where to go from here

• Flash CS4 Help and Support
• Learn Flash CS4
• Introducing Flash CS4 , by Todd Perkins
• Working with 3D art, by Chris Georgenes
• Using the decorative drawing tools, by Chris Georgenes
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors