Animating with the Bone tool

Another cool new feature in Flash CS4 Professional is the ability to create an armature using the Bone tool. An armature is a series of symbols or shapes that are linked so that they move in relation to each other when clicked on or animated. This method of animation is called inverse kinematics (IK). The classic example is a puppet on marionette strings. The puppet is made up of limbs bound together at the joints. When the puppeteer moves any of the strings, the limbs connected to that joint move in relation to the limb that changed position.

Armatures add new visual states to the Flash authoring environment (see Figure 6). The lines that connect the center points of the objects are called bones. The joints at which the bones connect can be selected so that unique properties and constraints can be applied to each section of the armature.

Figure 6. Shape with an armature added (left) and several symbols with bones attached (right)

Building the armature

The first thing to mention is that armatures cannot be dynamically created at runtime. They must be created at authortime using the Bone tool in Flash CS4 Professional. This is easy.

Once you've created an armature, you can save it in a movie clip and animate it using ActionScript at runtime. So in terms of programmatic animation, working with armatures is a two-step process where the first step involves building the armature in a FLA file in Flash.

Follow these steps to create an armature:

1. Select File > New and create a new ActionScript 3.0 document called armature.fla.
2. Name the default layer Assets.
3. Draw a circle on the Stage approximately 10 pixels wide and 10 pixels tall using the Oval tool.
4. Select the circle and use the Align panel to center the object on the Stage.
5. Select the circle and convert it to a symbol (F8). Make sure the registration point is set to center.

6. Duplicate the instance four times and place the duplicates above, below, and to the sides of the first circle. Add two more duplicates below the circles on either side (see Figure 7).

   

   Figure 7. Bone markers connecting the segments in the armature

7. Select the Bones tool from the Toolbar. Click on the circle at the top of the group and drag downward to the circle below. The first click defines the root joint, from which all other joints will hinge. Notice the line drawn to represent the bone marker.
8. Click and drag the Bone tool from circle to circle until you connect them all in a logical order. You can delete bone section by selecting them and pressing the Delete button. It's interesting to experiment to see how the armature behavior changes based on the way you configure the joints.
9. Click on the circles at the end joints of the bone markers and edit the constraint properties in the Property inspector. First try to enable all the transformation properties and then try adding constraints and removing properties.

10. To set up the armature for runtime manipulation, click on the first keyframe in the armature layer to select it. In the Property inspector, change the Type options field from Authortime to Runtime (see Figure 8).

    

    Figure 8. Armature settings for runtime use

Animating the armature

In this sample the animation actually happens as part of the behavior of the armature. When you publish the movie, you can click on the circles to see them move in relation to one another. To visualize the segments of the armature better, and to provide a foundation for some interesting animation possibilities, the following code addition will analyze the armature using ActionScript and draw lines between the joints.

Follow these steps to finish off the sample:

1. Return to the armature.fla file.
2. Create a new layer named Actions.

3. Select the first frame of the Actions layer and open the Actions panel. Copy and paste the following code into the panel:

   import fl.ik.*;
   import flash.display.Sprite;
   // Retrieve the armature and the root joint
   var armInst:IKArmature = IKManager.getArmatureAt(0);
   var rootJnt:IKJoint = armInst.rootJoint;
   var lineContainer:Sprite = new Sprite();
    
   // Add a container for drawing lines
   // to the bottom of the display object stack
   addChild(lineContainer);
   setChildIndex(lineContainer, 0);
    
   // Traverse the armature and draw lines to
   // connect the joint...
   function drawConnectingLines(jnt:IKJoint):void
   {
      var len:uint = jnt.numChildren;
      for(var n:uint=0;
      n<len; n++)
      {
            var childJnt:IKJoint = jnt.getChildAt(n);
            var childClip1:DisplayObject = getChildByName(childJnt.bone.headJoint.name);
            var childClip2:DisplayObject = getChildByName(childJnt.bone.tailJoint.name);
            
            lineContainer.graphics.lineStyle(3, 0xCCCCCC);
            lineContainer.graphics.moveTo(childClip1.x, childClip1.y);
            lineContainer.graphics.lineTo(childClip2.x, childClip2.y);
      
            drawConnectingLines(childJnt);
      }
   }
    
   // Update line drawing every frame
   function enterFrameHandler(event:Event):void
   {
      lineContainer.graphics.clear();
      drawConnectingLines(rootJnt);
   }
   addEventListener(Event.ENTER_FRAME,
   enterFrameHandler);

4. Test the movie (Control > Test Movie) to see the results. Click on the circles and drag them around. Observe how movement and constraints on movement adjust based on the settings of the joints in the armature.
5. Experiment with changing the joint values to see what happens.

For more information about this feature, see About inverse kinematics in the Flash documentation.

Page 6 of 8

Previous Page

Next Page