Manipulating springs of an inverse kinematics bone for animations

This article is the second of seven in a series highlighting examples of programming strategies that make it easier than ever before to create rich content in Adobe Flash CS5 Professional. Adobe Flash Player 10 introduced the ability to control parts of an animation using inverse kinematics (IK). Now, using Flash CS5, you can apply the effect of a spring to an IK armature.

The Developer Center article titled Exploring the Spring tool in Flash Professional CS5 explains how to add and control the spring's motion. In order to control an IK armature with ActionScript 3, you must first create the animation elements in the Flash authoring environment.

The following sample movie is designed as a bare bones test, so that is easier to understand how to set and control the properties. In a real world example, you can use any number of elements in the armatures you create.

1. Create two objects on the Stage.
2. Press F8 to convert each object to a movie clip symbol. (In this example, a bitmap graphic of a penguin and a yellow rounded rectangle shape were used to create the two movie clip symbols—but you can use two ovals or other shapes as desired).
3. Use the Bone tool to draw one IK bone that connects the two symbol instances. While it is selected, enter its name in the Property inspector: ikBoneBar.
4. In the Property inspector, enable Joint Rotation and set the Constrain values to a minimum value of −45° and a maximum value of 45°.
5. Rename the layer name of the IK armature to myArmature in the Timeline, as shown in Figure 1.

Notice that when you are working in the authoring environment, you could set the value for Spring by entering a numeric value in the Spring section at the bottom of the Property inspector; leave this value set to 0.

6. To set the Spring value with ActionScript, select the IK armature in the Timeline and set the Animation Type to Runtime using the Type menu in the Options section of the Property inspector (see Figure 2).

A Spring is assigned to a reference of an IK joint obtained from the IK bone. The process for controlling IK joints with ActionScript is essentially the same as in Flash CS4. First, you'll use the IKManager.getArmatureByName() method to get an IKArmature object, in order to pass in the IK Armature's name. Next, call the IKArmature.getBoneByName() method with the IKArmature object referrer and pass an IK bone's name to the method as an argument. The method will return the reference of the IKBone object. Finally, you can manipulate the IKJoint object by setting its IKBone.headJoint and IKBone.tailJoint properties.

At this point, a spring can be assigned to the IKJoint object. As you saw in Figure 4, the Spring section in the Property inspector for an IK bone contains two controls, Strength and Damping. Using ActionScript, two properties are available to set the values: IKJoint.springStrength and IKJoint.springDamping respectively.

7. Paste the following frame script into Frame 1 of the ActionScript layer. This script sets the IKJoint.springStrength and IKJoint.springDamping properties to a value of 50 each:

In the code above, a spring was assigned to an IKJoint of the IKBone object. Because the IK armature was set to Runtime, the instance of the head joint can be dragged in the published SWF file.

8. Save and test the movie.
9. Click and drag the objects in the SWF file. The instance of the tail joint follows with a spring-like motion (see Figure 3).

If you drag the instances too quickly, the movement may appear unnatural. After testing your animation, you may choose to make the armature more complex by setting some restrictions to the joint.

To learn more about working with Inverse Kinematics, watch the videos Using Spring properties with IK bones and Spring for bones on Adobe TV.

Where to go from here

As you can see from these examples, there are many new possibilities to explore when developing ActionScript 3 projects in Flash Professional CS5. Hopefully the scripts provided in these examples will serve as the starting point as you begin experimenting with the new events and capabilities for delivering rich content with interactivity.

Be sure to check out my other articles in this series:

• Working with TLF Text to control the appearance of text elements
• Leveraging code snippets and using enhanced code hinting
• Dynamically drawing a vector instance that contains elements
• Displaying the audio waveform captured from a microphone
• Deploying projects on devices with touch panels
• Catching errors globally to facilitate troubleshooting

To learn more about developing with ActionScript 3, see the following online resources:

• ActionScript Technology Center
• ActionScript 3.0 Reference for the Adobe Flash Platform
• Adobe ActionScript Cookbook

Also be sure to visit the Flash Developer Center to find more articles and sample files to help you take your Flash projects to the next level.