[ Download ]


[Properties]
myPath._length
- (read only) the length of the path. If the path is just a line from point 0,0 to point 100,0
the _length would be 100.

myPath._position
- (read only) current position of the Path objects drawing. It exists as an object with
properties _x and _y both relating to the x and y coordinates of that point. To change
this, use moveTo();

myPath.curveToAccuracy
- determines the number of lines to use in evaluating a curveTo quadratic bezier curve. To
allow for smooth movement along the path, its divided into seperate straight line segments.
This value dictates how many segments for each curveTo. The more segments the more accuracy
though more segments also means a drop in performance. Default: 10.

[Methods]
moveTo(start_x, start_y);
- moves the current _position of the Path drawing to the passed coordinates. The next line or
curve added will start from this point.
Arguments:
- start_x: new starting x location of the path.
- start_y: new starting y location of the path.
Returns:
- the Path object

lineTo(end_x, end_y);
- extends and adds to the path a line from the current _position to the passed coordinates.
The line created from this extension will be part of the path and will be traveled along in
a path.traverse(). This operates much like MovieClip.lineTo();
Arguments:
- end_x: the ending x position of the line.
- end_y: the ending y position of the line.
Returns:
- the Path object

curveTo(con_x, con_y, end_x, end_y, type);
- extends and adds to the path a curve from the current _position to the passed coordinates.
The curve created from this extension will be part of the path and will be traveled along in
a path.traverse(). This operates much like MovieClip.curveTo();
Note: curveTo's are approximated in paths using straight line segments. You can adjust the
accuracy of this approximation using myPath.curveToAccuracy;
Arguments:
- con_x: the x position of the control point.
- con_y: the y position of the control point.
- end_x: the ending x position of the curve.
- end_y: the ending y position of the curve.
Returns:
- the Path object

circleTo(end_x, end_y, arc [, direction]);
circleCWTo(end_x, end_y, arc);
circleCCWTo(end_x, end_y, arc);
- extends and adds to the path a circular curve from the current _position to the passed end
coordinates.
Arguments:
- end_x: the ending x position of the curve.
- end_y: the ending y position of the curve.
- arc: the percentage of a circle to use in the curve. .5 or 1/2 is a half-circle making
a half-circle arc from the current _position to the end_x and end_y. .25 would be a quarter
of a circle. This value needs to be between 0 and 1 (non inclusive) - default: .5
- direction: (string, circleTo only, optional) determines whether the curve created is to
move clockwise ("CW") or counter-clockwise ("CCW"). Default: "CW" or counter-clockwise.
circleCWTo and circleCWTo are just circleTo with this value already applied. It is
recomended that these are used in favor of just circleTo for clearity.
Returns:
- the Path object

traverse(object, t, orient, wrap);
- places passed object's _x and _y at 't' location on the path.
Arguments:
- object: an object, most commonly a movieclip, to be placed on the path.
- t: (float) a number between 0 and 1 which relates to be a point along the path where
0 is the start _position of the path and 1 is the end position.
- orient: (optional, boolean) a true or false value which indicates whether or not the
object will have its _rotation to match the path's _rotation. Default: false, no _rotation.
- wrap: (optional) determines whether a t value outside the range of 0 through 1
is either capped off at 0 or 1 (false) or wraps. In other words a wrapping t value will
convert a 1.5 to .5. Default: true.
Returns:
- the Path object

Note:
- for a specific speed (in pixels per unit of movement), you can increment t by
speed/myPath._length;

The code for the posted swf example:

innerLoop = new Path(0,37.5); innerLoop.circleCWTo(0,-37.5, .5); innerLoop.lineTo(125,-37.5); innerLoop.circleCWTo(125,37.5, .5); innerLoop.lineTo(0,37.5); outerLoop = new Path(0,62.5).circleCWTo(0,-62.5, .5).lineTo(125,-62.5).circleCWTo(125,62.5, .5).lineTo(0,62.5); red_t = green_t = red_vel = 0; accel = false; track.onEnterFrame = function(){ red_t += red_vel = (accel) ? Math.min(Math.max(0, red_vel+.08), 2) : Math.min(Math.max(0, red_vel-.1), 2); green_t++; innerLoop.traverse(this.greenCar_mc, green_t%100/100, true); outerLoop.traverse(this.redCar_mc, red_t%100/100, true); } acceler_btn.onPress = function(){ accel = true; } acceler_btn.onRelease = acceler_btn.onReleaseOutside = function(){ accel = false; }


Note: the paths are relative to the coordinate space of the track clip and not _root

added
Path.draw(mc)
- draws the path using Flash drawing API
Arguments:
- mc: (movieClip) the movieclip the path is to be drawn in.
Returns:
- the Path object.

added
Path.clear()
- clears the Path object of all paths
Arguments:
- none
Returns:
- nothing

Senocular you are the KING !!!!
Very very impressive :bravo:

Thanks Jean-Louis ;)

reworked. curveTo now like movieclip.curveTo allowing a path along a curveTo curve. This pathing is approximated using a property called curveToAccuracy (default at 10) which can be adjusted per path to determine how accurate you want to render the curve.

In doing so, the previous curveTo's have been renamed to circleTo (circleCWTo and circleCCWTo).

I also made the circle drawing method for movieclips a method of the pathclass instead of movieclip (to prevent any possible confliction with other movieclip methods which might have the same name).

re-wrote circleTo to take, instead of a center point, an 'arc' value specifying how much of a circle the curve created will be. The main reason was that if you didnt pass a valid center point in the original functions you could get some distorted curves. This is also easier with arc I think.


// a half-circle from 0,0 to 0,100 myPath = new Path(0,0); myPath.circleCWTo(0,100, .5); // a quarter-circle from 100,0 to 50,50 myPath = new Path(100,0); myPath.circleCCWTo(50,50, .25);


added drawUpTo; swf example included...
myPath.drawUpTo(mc, t, wrap)
- draws a path upto a certain t value in a movieclip mc.
Arguments:
- mc: the movieclip in which the path is to be drawn
- t: the t position along the path to be drawn to
- wrap: (optional) determines whether a t value outside the range of 0 through 1
is either capped off at 0 or 1 (false) or wraps. In other words a wrapping t value will
convert a 1.5 to .5. Default: true.
Returns:
- the path object

added reverse:
myPath.reverse()
- creates a new Path object thats the reverse of the current
Technically, this is only useful in combination with drawUpTo since you can traverse a path
backwards by changing the direction of t in the traverse call (or 1-t);
Arguments:
- none
Returns:
- a new Path object thats the reverse path of the Path reverse was used on.

Some more examples:

use of drawUpTo:
Link to swf [ download ]

code used:

with(myPath = new Path(50,0)){ moveTo(0,70); lineTo(100,70); circleCWTo(120,50, .25); lineTo(120,-50); circleCCWTo(100,-70, .25); lineTo(-100,-70); circleCCWTo(-120,-50, .25); lineTo(-120,50); circleCWTo(-100,70, .25); lineTo(0,70); moveTo(0,50); curveTo(-55,0, -40,-20); curveTo(-25,-40, 0,-15); curveTo(25,-40, 40,-20); curveTo(55,0, 0,50); }; myRevPath = myPath.reverse(); t=0; dir=1; this.createEmptyMovieClip("pad",1).onEnterFrame = function(){ t += .005 * dir; if (t>=1){ t = 1; dir = -1; this.pen.inner.offset = 180; }else if (t<=0){ t = 0; dir = 1; this.pen.inner.offset = 0; }; this.clear(); this.lineStyle(3,0xaa3333,100); if (Key.isDown(1)){ this.beginFill(0xffefef,100); var rt = 1-t myRevPath.traverse(this.pen, rt).traverse(this.arrow, rt, true).drawUpTo(this, rt); this.endFill(); this.pen.inner._rotation = 180 + this.pen.inner.offset; if (dir>0) this.arrow._rotation+=180; }else{ myPath.traverse(this.pen, t).traverse(this.arrow, t, true).drawUpTo(this, t); this.pen.inner._rotation = this.pen.inner.offset; if (dir<0) this.arrow._rotation+=180; } }; pad._x = 150; pad._y = 100; pad.attachMovie("arrow","arrow",1); pad.attachMovie("pen","pen",2).inner.offset = 0;


a little on escape velocity and exiting a path.
Because traverse is based on 1, the vector of an object escaping a path is directly related to the path's _length. With orient, you can easily get a movement vector coming off a path using
changeOfT * myPath._length;

Link to swf [ download ]

code used:

windResist = .985; gravity = 1; track = new Path(20,20).lineTo(100,100).circleCCWTo(160,90, .28); this.createEmptyMovieClip("ramp_mc",1).lineStyle(1,0xaa4400,100); track.draw(ramp_mc); onRamp = function(){ if (this.t<1){ // while on ramp this.old_rotation = this._rotation; track.traverse(this, this.t, true); this.velocity += wax_slider.percent/350; this.t += this.velocity; }else{ // take off var power = this.velocity * track._length; var angle = this._rotation * Math.PI/180; this.movement_x = Math.cos(angle) * power; this.movement_y = Math.sin(angle) * power; this.spin = this._rotation - this.old_rotation; inFlight.call(this); this.onEnterFrame = inFlight; } }; inFlight = function(){ this._x += this.movement_x; this._y += this.movement_y; this._rotation += this.spin; this.movement_x *= windResist; this.movement_y += gravity; this.spin *= windResist; if (this._y > 400) initiate.call(this); }; initiate = function(){ this.t = this.velocity = 0; this.onEnterFrame = onRamp; }; initiate.call(jumper);


In terms of escaping a path based on speed and turning (using orient), there are 2 routes to take:
1) comparing a previous _rotation with current _rotation.
2) similarly comparing the arc length from projected vectors.

1 is basic and works 90% of the time. Where it doesnt work is in sharp turns like hard edge corners since rotation alters sharply from one span to the next. Projecting a vector will base the difference on rotation as well as speed, so if the speed is minimal, the distance of the arc between a previous and current vector will be minimal. At higher speeds, however, it will be greater and warrant the exit off a path.

another update:
- allows fills to work with drawn paths now.
- fixed a little drawing quirk in reverse
- cleaned things up a little.

Note:
- the code posted here is more recent than code in the examples - in using this class, you should use the code from the top of this page and not that found in the examples.

2 simple changes (well, 1 for two methods): Now both traverse and drawUpTo allow values of t less than 0 and greater than 1. A "wrap" parameter is given in each method to facilitate this addition (allowing you to set it to false in order to return it to its prior behavior where values < 0 were set at 0 and values > 1 were set at 1).

Waoooh Senocular this prototype is just awesome . !!!
I started to create dynamic path using hitTest with alot of checks : forget it ... :D

Yep I think so too : t'es le Roi !

This may be a useful extension allowing you to append one path to another:


Path.prototype.concat = function(path) { this._segments = this._segments.concat(path._segments); this._length += path._length; if (path._position._x && path._position._y) { this._position = path._position; } return this; };


Helpful if you want to do something like dynamic parabolic path:

var hill = new Object(); hill.points = new Array(); hill.points[0] = {x:0,y:65}; hill.points[1] = {x:30,y:50}; hill.points[2] = {x:150,y:180}; track = new Path(hill.points[1].x, hill.points[1].y); track.curveTo(hill.points[1].x - (hill.points[1].x-hill.points[0].x)/4, hill.points[1].y, hill.points[0].x, hill.points[0].y); track = track.reverse(); track.moveTo(hill.points[1].x, hill.points[1].y); track.curveTo(hill.points[1].x + (hill.points[2].x-hill.points[1].x)/4, hill.points[1].y, hill.points[1].x+(hill.points[2].x-hill.points[1].x)/2, hill.points[1].y-(hill.points[1].y-hill.points[2].y)/2); // a temp path to be reversed and appended to track var tt = new Path(hill.points[2].x,hill.points[2].y); tt.curveTo(hill.points[2].x - (hill.points[2].x-hill.points[1].x)/4, hill.points[2].y, hill.points[1].x + (hill.points[2].x-hill.points[1].x)/2, hill.points[1].y-(hill.points[1].y-hill.points[2].y)/2); // reverse it tt = tt.reverse(); // attach tt to track track.concat(tt); // get rid of tt delete tt; // ready to attach more segments track.moveTo(hill.points[2].x,hill.points[2].y); // draw the track this.createEmptyMovieClip("track_mc",1).lineStyle(3,0xaa4400,100); track.draw(track_mc);

Can someone pls show me how to use this class to make an object move around an oval? I can't seem to get it to work properly. The oval is a movieclip and I just want the object to move along its path. Please help someone!

Excellent prototype!

Is it possible to modify the curveTo, lineStyle options to draw a sweeping 3D line that rotates and scales. Cheers.

I guess lonema beat me to the punch, but I am also wondering if it is possible to tween an object along an already defined path. I.E. Tween (or even just move) an object using actionscript along a motion guide I have drawn in the movie. To be honest, I'm surprised this functionality isn't included in the basic flash functionality...

Just for clarity, I'm trying to draw a path for some objects to move along and have them move faster or slower or reverse based on where the mouse is within the movie. I've been able to achieve this effect using the Event.ENTER_FRAME and scripting the path by hand using calculations, but I'm worried that if I want to edit the path later it'll take a while for me to modify my calcs... Basically, the resusability of my code is in the gutter and I'd like to be a bit better. (;

Any ideas? (Thanks for any and all help)

Cheers,
.Jack

Senocular this is sweet, been looking for something like this for a while. It it possible to write up some AS that will take line paths that you have drawn and convert them into a Path object? For example say you drew a jagged line from left to write, would there be a way to have AS convert that into a Path object. That way you could have your MCs animate along the path using AS but not have to create your Path using AS, which is the harder part to this prototype.

How can I assign a MovieClip object to an actual path and move it along? I don't see any method for traverse in the class.
I added the method "Path.traverse" to the Path class, along with some others methods from the Path.as for AS1.0...

public function traverse(obj, t, orient){
if (t<0) t = 0;
. . . . . . .

}
return this;
}

and then, called it in another class like this:

private var myPath:Path;
private var k_mc:MovieClip = target.attachMovie("car", name, depth); //target is the name the host MovieClip
//name is the name of the newMovieClip

myPath = new Path();
myPath.moveTo(50, 50);
myPath.lineTo(100, 50);
myPath.lineTo(100, 100);
myPath.lineTo(50, 100);
myPath.lineTo(50, 50);

k_mc.onEnterFrame = function() {
i += 15/myPath._length;

if (i > 1) {

myPath.clear();
return;
}
myPath.traverse(this, i, true);
}


Please tell me a solution for my problem!

I am using your excellent Motion path class with some dynamically created objects which can be assigned different paths. The script works fine for one object but I also need it to work with more than one object simultaneously so I need to generate the instance name for paths dynamically.

_root.dynamicName = new Path(_xstartofobject, _ystartofobject);

I am unable to do this successfully. Is it possible to generate these names dynamically and store them in an array. How would I reference them again for other uses such as:

_root.dynamucName.lineTo (pointA, pointB);
or _root.dynamicName.traverse(myobject, t, true);

Please guide.

This looks like it could be a great Actionscript class if I knew how to use it. A step by step tutorial would be cats meow. Come on someone help idiots out.