IK animation

Inverse Kinematics (IK) is a system that allows animators to set up animation constraints by laying out a structure of bones, which determines how certain pieces are allowed to move. This is heavily used in 3D modeling tools for character animation. One of the most anticipated new features of Flash CS4 is the new built-in support for IK animation as well as the ability to control these animations at runtime using ActionScript. This tutorial will walk you through the basics of creating a simple IK animation.

If you’d like to download the file used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.

1 OPEN THE EXAMPLE FLA
Open crane.fla in Flash CS4 and inspect the contents. This file targets Flash Player 10, but the IK features will also work in Flash Player 9. In the Timeline panel you’ll see five layers. The first four contain the supporting artwork for the dock scene. All of the crane pieces that will be used in the IK animation are held in the crane arm layer.

2 TWO NEW TOOLS
If you look in the Toolbox, you’ll see a new toolset devoted to IK animation—easily identified by the bone icon. This toolset actually contains two tools. The first, the Bone tool, is the one that we’ll be focusing on in this tutorial. This tool allows you to draw bones that connect objects on the stage, allowing the IK animation to take place. The second tool is the Bind tool, which allows you to bind multiple control points to a bone and multiple bones to a control point.

3 SETTING THE TRANSFORMATION POINTS
(For those of you familiar with traditional Flash animation, the concept of a transformation point shouldn’t be new.) Select the Free Transform tool (Q), click on the first arm of the crane and rotate it. It’s not rotating from the bottom but rather from the center where the little white circle is—this transformation point controls where the rotation will pivot. Click-and-drag the transformation point to the correct place (as shown above). Do this for the remaining crane pieces, moving each transformation point to where it connects with the previous object.

4 CREATING A BONE
Now you’re ready to create your very first bone. Select the Bone tool (X) and click-and-drag a new bone from the base of the crane to the start of the second crane arm. The tool should snap to the transformation points you positioned in Step 3 to make things easier for you. When you release your mouse, you should see a bone similar to the one shown here. Flash will automatically reset the transformation point for the object based on the bone. You can always adjust this later if it isn’t perfect.

5 THE ARMATURE LAYER
After drawing that first bone you may have noticed something strange in the Timeline panel—a new layer named Armature_1 This is a new layer type introduced in Flash CS4 for holding your IK structure. It’s also known as a “pose layer.” If you turn off the visibility of the crane arm layer, you’ll see that Flash has moved the first two arms of the crane to this new armature layer. Your first bone connected the first pieces of the crane and that’s why they were the ones moved.

6 CREATE THE REMAINING BONES
Now that you’ve created your first bone, you’ll need to finish off the crane skeleton. Select the Bone tool again and click on the first crane arm to show the bone you’ve already created. Now put your mouse directly over the joint connecting the first and second arms and drag a new bone to the third piece. Again, because of the transformation points, it should snap into place. Now do the same thing from the third joint to the fourth joint, which will connect the end of the crane to the cable. Once complete your structure should look like this.

7 MOVING THE STRUCTURE
The crane arm layer is now empty so you can delete it by dragging it to the Trash icon.

Now that you’ve defined the bone structure (or skeleton) of the crane, you can start to have some fun with it. Grab the Selection tool (V), click on a piece of the crane, and begin moving it around. You should immediately see how the bones are constraining the movement of the various pieces. Another thing you should notice is that you’re able to make the crane do things that would be impossible in real life.

8 SETTING CONSTRAINTS
The IK system has the ability to set rotation constraints so that things behave more like they do in the real world. For instance, the first piece of the crane shouldn’t be allowed to rotate 360°. Get the Selection tool and click-and-drag on the first bone. In the Property inspector under Joint: Rotation, click on the Constrain checkbox. Here you can restrain the rotation to whatever you like. I found that a Min value of -57° and Max value of 0° worked well. Do the same for the rest of the joints.

9 TIMELINE IK ANIMATION
Animating an IK structure is no different than animating anything else in Flash CS4 (check out Layers, Jan/Feb 2009, p. 82 for more on the new animation features). Drag-and-select Frame 60 for all the layers in the Timeline. Control-click (PC: Right-click) and select Insert Frame to extend the entire Timeline by 60 frames. The nice thing about an armature layer is that it is automatically set up to animate. Position the playhead at frame 60 and move some of the crane arms around. Press the Return (PC: Enter) key to see the animation.

10 ANIMATION EASING
Like most types of animation in Flash, you’ll probably want to apply some easing to your motion to make it look more realistic. (Unfortunately you can’t use the fancy new Motion Editor to apply custom easing to your IK animation.) Select the entire armature layer by clicking on the layer name. In the Property inspector you’ll see an Ease section, which gives you a couple of options for your animation. The Strength property obviously controls the strength of the easing effect. The Type drop-down menu allows you to choose which type of easing to use.

11 ADDING WEIGHT
If your animation doesn’t seem realistic, set a weight for each bone. With the Selection tool, click on the first bone you created. Notice, in the Location section of the Property inspector, that there’s a Speed property, which allows you to essentially set a weight for your bone. A value of 100% means that it basically has no weight and can be thrown around like a rag doll. If you lower this value, you can make an object heavier. In this example you’d want the first piece of the crane to have the slowest speed since it’s the biggest.

12 RUNTIME IK CONTROL
Animating on the Timeline is great, but what if you want to allow your users to click-and-drag your IK structure around—luckily, this is extremely easy in Flash CS4. First you’ll need to remove any keyframes you’ve created on the armature layer: Control-click (PC: Right-click) on them and select Clear Pose. Now click on the armature layer name in the Timeline to select it. In the Property inspector, you’ll see a Type drop-down menu under the Options section. Change it from Authortime to Runtime. Now, press Command-Return (PC: Ctrl-Enter) to test the movie and you’ll be able to drag around the crane at runtime.

13 IK with ActionScript
While it’s way out of scope for this tutorial, it’s important to note that there’s a full ActionScript 3.0 API for manipulating IK armatures created in Flash CS4. When you select a bone, you’ll see that you can give it a name and that’s the name you’ll be able to call from the ActionScript. Be forewarned though that ActionScript manipulation can get extremely complicated. But for things like games it’s essential, as you need everything to be dynamically controlled.