Graphic Effects Learning Guide for Flash: Inverse kinematics

The Bone tool in Adobe Flash Professional CS5 enables you to create armatures using inverse kinematics (IK), a method for creating graphics and animations where an object or groups of objects are articulated in relation to one another using bones. Bones connect parts of a drawing object or a collection of symbol instances in an armature structure that can be easily manipulated.

An armature creates coordinated movements within a chain of connected parts. The parts within the armature are defined as bones connected by joints. You can think of it like bones and joints in a skeleton allowing a person to move in a coordinated way. Affecting a joint causes connected joints to react in unison. You can adjust the attributes of the joints by constraining their movement and rotation—as well as their springiness.

Armatures can be constructed and posed in various movements. A pose is a keyframe on a pose layer defining the layout of the armature at that frame. You can create a single pose or combine poses to create animations. You can adjust the pose(s) using the Flash Timeline and the Bone tool or ActionScript at runtime.

The Bone Tool (M) can be used to create an armature in a drawing object or a collection of symbol instances. When applied to a drawing object, the armature creates sections of bones within the shape, allowing you to create more intricate transformations and shape tween animations. When applied to a collection of symbol instances, the armature makes it easy to create poses and pose generated animations (see Figure 1).

To create a simple armature:

1. Create a new ActionScript 3 FLA file and name it ik.fla.
2. Draw a shape on Frame 1 and convert it to a symbol (Modify > Convert to Symbol or F8).
3. Duplicate the shape (Edit > Duplicate) two times and spread the instances out on the Stage about 50 pixels apart.
4. Click the Bone tool in the Tools panel. Select the instance farthest to the left and drag the selection to the next instance to the right. Notice the bone-selection indicator that connects the two instances. The first object that you select is the root joint, from which all other joints in the armature stem. Connect all the instances with the Bone tool.
5. Choose the Selection Tool (V) and click the instance farthest to the right, and then drag it around the screen. Notice how you can use the armature to position the collection of graphics at author-time.
6. Click each joint in the armature and experiment with the constrain settings in the Properties panel. Drag the instances on the Stage with the Selection tool to see the difference in movement when joints are constrained.
7. Select the keyframe in the Timeline containing the armature to show its frame properties in the Properties panel. Change the Type field from Authortime to Runtime under the Options section.
8. Export the SWF file (Control > Test Movie) to see the armature animation at runtime. Drag the shapes around to see the effect.
9. Save the file.

You can work with armatures with either the Authortime or Runtime setting. In Authortime mode, you can create tweened animations by creating pose frames on the armature layer.

For a detailed overview of animating with pose layers, read Character animation with the Bone tool in Flash by Chris Georgenes. Read the Bone tool section of the Flash glossary for more information, too.

Along with constraining the movement and rotation of the joints in an armature, you can apply two types of physics effects to your animation: easing and spring. Easing affects the speed of a pose animation by speeding up or slowing down over the course of a movement. For example, a character's upward leg swinging would naturally slow down as it reaches the top of the swing.

Control over the spring in a pose animation is new to Flash Professional CS5. Spring adds the element of springiness to movements. This effect can be used to create literal spring movements or more subtle effects, like impact on the armature.

For more information on working with the new spring physics engine, see Exploring the Spring tool in Flash Professional CS5 by Chris Georgenes.

Armatures must be created at author-time in Flash Professional. Once an armature exists, it can be manipulated on the Timeline or at runtime using ActionScript. If you'd like to dynamically control armatures at runtime, start by creating the armatures in your FLA file and then manipulate them using ActionScript.

For more information on using ActionScript with inverse kinematics, see the Working with inverse kinematics section of the ActionScript 3 Developer's Guide. Also refer to the fl.ik package in the ActionScript 3 Reference for the Flash Platform.

This section of the Graphics Effects Learning Guide provides an overview of working with inverse kinematics in Flash Professional. If you'd like more information about the basics of using IK in Flash, see the Inverse kinematics section of the Flash Professional online help.

Also check out the following demos on Adobe TV for working with inverse kinematics:

• Using inverse kinematics (7:30)
• Flash Downunder: Inverse kinematics (9:05)
• Animating bones (2:41)
• Using spring properties with IK bones (7:50)