Dragging Multiple Segments

Dragging a system with inverse kinematics is actually a bit simpler than reaching, so Ill cover that first. Lets begin with a couple of segments.

Dragging two segments

Starting with the previous example, I put another segment down on stage and named it seg1 . I then scaled both of them down to 50%. Then I changed the seglength variable to 60 to reflect that change.

The strategy is pretty simple. You already have seg0 dragging on the mouse position. You just have seg1 drag on seg0 . To start with, you can simply copy and paste the code, and change some of the references. The new block of code is shown in bold.

 var segLength:Number = 60;  function onEnterFrame():Void {       var dx:Number = _xmouse - seg0._x;       var dy:Number = _ymouse - seg0._y;       var angle:Number = Math.atan2(dy, dx);       seg0._rotation = angle * 180 / Math.PI;       seg0._x = _xmouse - Math.cos(angle) * segLength;       seg0._y = _ymouse - Math.sin(angle) * segLength;  var dx:Number = seg0._x - seg1._x;   var dy:Number = seg0._y - seg1._y;   var angle:Number = Math.atan2(dy, dx);   seg1._rotation = angle * 180 / Math.PI;   seg1._x = seg0._x - Math.cos(angle) * segLength;   seg1._y = seg0._y - Math.sin(angle) * segLength;  } 

You see how in the new block of code, you figure the distance from seg1 to seg0 , and use that for the angle and rotation and position of seg1 . You can test this example and see how its a pretty realistic two-segment system.

Now, you have a lot of duplicated code there, which is not good. If you wanted to add more segments, this file would get longer and longer, all with the same code. The solution is to move the duplicated code out into its own function, called drag . This function needs to know what segment to drag and what x, y point to drag to. Then you can drag seg0 to _xmouse , _ymouse , and seg1 to seg0._x , seg0._y . Heres the code ( ch14_03.fla ):

 var segLength:Number = 60; function onEnterFrame():Void {  drag(seg0, _xmouse, _ymouse);   drag(seg1, seg0._x, seg0._y);  }  function drag(seg:MovieClip, x:Number, y:Number)   {   var dx:Number = x - seg._x;   var dy:Number = y - seg._y;   var angle:Number = Math.atan2(dy, dx);   seg._rotation = angle * 180 / Math.PI;   seg._x = x - Math.cos(angle) * segLength;   seg._y = y - Math.sin(angle) * segLength;   }  

Dragging more segments

Now you can add as many segments as you want. Say you throw down a total of six segments, named seg0 through seg5 . You can even use a for loop to call the drag function for each segment. You can find this example in ch14_04.fla . Heres the enterFrame code for this file, as its the only part that changes:

 function onEnterFrame():Void {       drag(seg0, _xmouse, _ymouse);  for(var i=0;i<5;i++)   {   var segA:MovieClip = this["seg" + i];   var segB:MovieClip = this["seg" + (i+1)];   drag(segB, segA._x, segA._y);   }  } 

Here, segA is the segment being dragged to, and segB is the next segment in linethe one that is being dragged. You just pass these to the drag function. Figure 14-2 shows the result.

Figure 14-2: Multiple-segment dragging

Well, there you have the basics of inverse kinematics. Thats not too complex, huh? In ch14_05.fla , Ive dynamically attached 50 segments and scaled them down a bit more. Using the same code, they form a nice long chain, as you can see in Figure 14-3, showing just how robust this system is.

Figure 14-3: Dragging 50 segments