Keith Hair

You ever wanted an Object to move along the path of a curve?...a curve drawn with the ActionScript drawing API.

The curves drawn using the API are quadratic. Using the following expressions, you can plot an "x" or "y" value on a curve at a time between 0 - 1. You could even plot a "z" value for 3D if you wanted.

var x:Number=Math.pow(1-time,2)*startvalueX+2*(1-time)*time*controlX+Math.pow(time,2)*endvalueX;
var y:Number=Math.pow(1-time,2)*startvalueY+2*(1-time)*time*controlY+Math.pow(time,2)*endvalueY;

/*-----------------------------------------------------------------
			===========================================
			Interpolation of a Point on Quadratic Curve
			===========================================
 
-Add drag-n-drop ability to "control_mc","start_mc", and "end_mc".
-Use ENTER_FRAME event to run "onFrame" function.
"placeOnCurve" will called continuously to place "plotter_mc" on curve
depending on where "control_mc", "start_mc" and "end_mc" are located.
 
								Have Fun,
								Keith H
------------------------------------------------------------------*/
addDragBehavior(control_mc);
addDragBehavior(start_mc);
addDragBehavior(end_mc);
plotter_mc.addEventListener(Event.ENTER_FRAME,onFrame);
 
//----------------------------------------------------------------------
//Returns value between "startvalue" and "endvalue" at the given "time".
//"time" must be a value between 0-1.
//"control_mc" creates quadratic easing effect depending how
//close this value is to startvalue or endvalue.
//----------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////////
function curve(startvalue,control,endvalue,time:Number):Number
{
    var v:Number=Math.pow(1-time,2)*startvalue+2*(1-time)*time*control+Math.pow(time,2)*endvalue;
    return v;
}
 
//-------------------------------------------------------------------------------
//Returns a Point in 2D along a Quadratic curve between Point "a" and Point "b".
//The curve function is used both "x and y" plot a point at "time".
//"time" is value between 0 and 1.
//-------------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////////
function placeOnCurve(a:Point,b:Point,con:Point,time:Number=0):Point
{
    var p:Point=new Point();
    p.x=curve(a.x,con.x,b.x,time);
    p.y=curve(a.y,con.y,b.y,time);
    return p;
}
 
//--------------------------------------------------------
//Adds drag-n-drop behavior to a Sprite.
//--------------------------------------------------------
///////////////////////////////////////////////////////////
function addDragBehavior(display:Sprite):void {
	var onPress:Function=function(evt:Event):void
	{
	    display.startDrag();
	};
	var onRelease:Function=function(evt:Event):void
	{
	    display.stopDrag();
	};
	display.addEventListener(MouseEvent.MOUSE_DOWN,onPress);
	display.addEventListener(MouseEvent.MOUSE_UP,onRelease);
}
 
//------------------------------------------------------------------------
//Draw the curve and lines each time "placeOnCurve" function is called.
//------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////
var t:Number=0;
var p:Point=new Point();
function onFrame(evt:Event):void {
	t+=0.02;
	if (t > 1) {
		t=0;
	}
	p=placeOnCurve(new Point(start_mc.x,start_mc.y),new Point(end_mc.x,end_mc.y),new Point(control_mc.x,control_mc.y),t);
	plotter_mc.x=p.x;
	plotter_mc.y=p.y;
	Sprite(plotter_mc.parent).graphics.clear();
	Sprite(plotter_mc.parent).graphics.lineStyle(0,0x999999);
	Sprite(plotter_mc.parent).graphics.moveTo(start_mc.x,start_mc.y);
	Sprite(plotter_mc.parent).graphics.lineTo(end_mc.x,end_mc.y);
	Sprite(plotter_mc.parent).graphics.moveTo(start_mc.x,start_mc.y);
 
	//-------------------------------------------------
	//Draw current quadratic curve with ActionScript.
	//-------------------------------------------------
	////////////////////////////////////////////////////
	Sprite(plotter_mc.parent).graphics.lineStyle(2,0x00FF00);
	Sprite(plotter_mc.parent).graphics.curveTo(control_mc.x,control_mc.y,end_mc.x,end_mc.y);
 
	//---------------------------------
	//Draw tangents to control_mc points.
	//---------------------------------
	////////////////////////////////////
	Sprite(plotter_mc.parent).graphics.lineStyle(0,0x999999);
	Sprite(plotter_mc.parent).graphics.moveTo(start_mc.x,start_mc.y);
	Sprite(plotter_mc.parent).graphics.lineTo(control_mc.x,control_mc.y);
 
	Sprite(plotter_mc.parent).graphics.moveTo(end_mc.x,end_mc.y);
	Sprite(plotter_mc.parent).graphics.lineTo(control_mc.x,control_mc.y);
 
}

This entry was posted on Friday, May 30th, 2008 at 1:49 pm and is filed under ActionScript 3.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.