inverse kinematics - reaching and dragging with a single element - AS3
http://www.actionscript.org/resources/articles/825/1/inverse-kinematics---reaching-and-dragging-with-a-single-element---AS3/Page1.html
Annie Burns
Flash, PHP, SQL, Javascript, XML By Annie Burns
Published on October 27, 2008
Inverse Kinematics will show you how pieces will fall(drag) or move(reach) into the correct positions.
example : You're trying to grab something.
Your fingers move toward the object, your wrist pivots to put your fingers as close as possible, your elbow, shoulder and your whole body move to get the longest "reach". You either reach it or you don't. If the object moves you and your limbs keep moving to reposition.
example : Something is being dragged.
That person might be asleep, in danger or some such. You grab their hand and drag it around. Your force to the hand causes the wrist, elbow (rest of body) to pivot.
example : You're trying to grab something.
Your fingers move toward the object, your wrist pivots to put your fingers as close as possible, your elbow, shoulder and your whole body move to get the longest "reach". You either reach it or you don't. If the object moves you and your limbs keep moving to reposition.
example : Something is being dragged.
That person might be asleep, in danger or some such. You grab their hand and drag it around. Your force to the hand causes the wrist, elbow (rest of body) to pivot.
reach
Reaching with a single segment
the target will be the mouse. You need the distance between x and y axes. Use Math.atan2 for the angle between in radians. Convert to degrees and voila!
package {
import flash.display.Sprite;
import flash.events.Event;
public class UnoSegment extends Sprite
{
private var segmentU:Segment;
public function UnoSegment ()
{
init();
}
private function init():void
{
segmentU = new Segment(200, 30)
addChild(segmentU);
segmentU.x = stage.stageWidth / 2;
segmentU.y = stage.stageHeight / 2;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void
{
var dx:Number = mouseX - segmentU.x;
var dy:Number = mouseY - segmentU.y;
var angle:Number = Math.atan2(dy, dx);
segmentU.rotation = angle * 180 / Math.PI;
}
}
}
the target will be the mouse. You need the distance between x and y axes. Use Math.atan2 for the angle between in radians. Convert to degrees and voila!
package {
import flash.display.Sprite;
import flash.events.Event;
public class UnoSegment extends Sprite
{
private var segmentU:Segment;
public function UnoSegment ()
{
init();
}
private function init():void
{
segmentU = new Segment(200, 30)
addChild(segmentU);
segmentU.x = stage.stageWidth / 2;
segmentU.y = stage.stageHeight / 2;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void
{
var dx:Number = mouseX - segmentU.x;
var dy:Number = mouseY - segmentU.y;
var angle:Number = Math.atan2(dy, dx);
segmentU.rotation = angle * 180 / Math.PI;
}
}
}
drag
Dragging with a single segment
this is not using StartDrag and StopDrag methods (but you could). The segment is attached to the mouse at the second pivot point. Same as the reach method(rotate sprite to mouse) with one more step. Move the segment into position where the second pivot point is the exact same position as the mouse.
You need: distance between 2 pins for each axis. Take difference from segments getPin() point and its current x, y location, call it w & h. subtract w & h from current mouse position. This is where to put the segment. only OnEnterFrame method changed from reach.as
private function onEnterFrame(event:Event):void
{
var dx:Number = mouseX - segmentU.x;
var dy:Number = mouseY - segmentU.y;
var angle:Number = angle * 180 / Math.PI;
//new stuff and junk
var w:Number = segmentU.getPin().x - segmentU.x;
var h:Number = segmentU.getPin(). - segmentU.y;
segmentU.x = mouseX - w;
segmentU.y = mouseY - h;
}
The segment is perma attached to mouse and rotates to drag behind it. Push the segment around in the opposite direction!
that's it that's all for now folks.. over and out. shsshchssshhhshsh...
this is not using StartDrag and StopDrag methods (but you could). The segment is attached to the mouse at the second pivot point. Same as the reach method(rotate sprite to mouse) with one more step. Move the segment into position where the second pivot point is the exact same position as the mouse.
You need: distance between 2 pins for each axis. Take difference from segments getPin() point and its current x, y location, call it w & h. subtract w & h from current mouse position. This is where to put the segment. only OnEnterFrame method changed from reach.as
private function onEnterFrame(event:Event):void
{
var dx:Number = mouseX - segmentU.x;
var dy:Number = mouseY - segmentU.y;
var angle:Number = angle * 180 / Math.PI;
//new stuff and junk
var w:Number = segmentU.getPin().x - segmentU.x;
var h:Number = segmentU.getPin(). - segmentU.y;
segmentU.x = mouseX - w;
segmentU.y = mouseY - h;
}
The segment is perma attached to mouse and rotates to drag behind it. Push the segment around in the opposite direction!
that's it that's all for now folks.. over and out. shsshchssshhhshsh...