AS3 - motion guid line in coding?! possible??!

[Hadiflashkit]

Hey Kirupa people, [edit: oops! I mean flashkit people! ]



here is an interesting question I've been recently thinking about moving objects in flash applications with some more complex animations rather than just a simple tween class...

you see, when you are using the flash IDE in timeline, you can create some timeline tweens and you know how it works... you set a starting key frame and an ending key frame and the objects moves from point A to point B. all great and also you can draw a line and make it as a guild line for the moving object so if you draw a curved line, the object will actually move from point A to B but runs on the curve rather than the default straight path...



What I am trying to find an answer for is that maybe its possible to do the same trick in coding...? so maybe in coding we can draw a line and then make the target movieclip to move on that line...?!



am I making sense?

[dudeqwerty]

As long as you know the equation of the path you want to animate, or at least the key points, then it isn't too hard.

I just knocked up a quick example using the Tween class, place a small movieClip with instance name "myClip" on the stage, and put this code on the frame:

import fl.transitions.TweenEvent
import fl.transitions.Tween;
import fl.transitions.easing.None;

var tweenStack:Array = new Array();
var animPoints:Array = new Array();
var s:Shape = new Shape();
var g:Graphics = s.graphics;
var tweenSpeed:int = 100; // px/sec
var tweenTarget:MovieClip = myClip;

addChild(s);
stage.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
	g.clear();
	g.lineStyle(1);
	g.moveTo(mouseX, mouseY);
	animPoints = new Array();
	tweenStack = new Array();
	animPoints.push(new Point(mouseX, mouseY));
	stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
});

stage.addEventListener(MouseEvent.MOUSE_UP, function(e:MouseEvent):void {
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
	playTweens();
});

function mouseMove(e:MouseEvent):void {
	g.lineTo(mouseX, mouseY);
	animPoints.push(new Point(mouseX, mouseY));
	e.updateAfterEvent();
}

function playTweens():void {
		var d:int = Point.distance(animPoints[0], animPoints[1]);
		var tx:Tween = new Tween(tweenTarget, "x", None.easeNone, animPoints[0].x, animPoints[1].x, d/tweenSpeed, true);
		var ty:Tween = new Tween(tweenTarget, "y", None.easeNone, animPoints[0].y, animPoints[1].y, d/tweenSpeed, true);
		tx.addEventListener(TweenEvent.MOTION_FINISH, tweenFinished);
}

function tweenFinished(e:TweenEvent):void {
	animPoints.shift();
	if(animPoints.length > 1) {
		playTweens();
	} else {
		trace("finished");
	}
}

It lets you draw out a path, which the movieclip will then follow.

There are a few other ways you can do this, notably the animator class. You can see an example of this if you create a motion tween in the flash IDE then right click on it in the timeline and press "Copy Motion as ActionScript 3.0".

Of course you can extend my function above to work with bezier curves, but I'll leave that to you

[neznein9]

There are a lot of libraries for this stuff out there already - The Algorithmist talks about the work going into DeGrafa a good deal, both Tweener and TweenMax have support for bezier paths, and you could always tween in Flash and save out the motion to AS3.

[senocular]

Hey Kirupa people, ...

You could at least be a little less obvious in your cross-site posting :P

[5TonsOfFlax]

http://code.google.com/p/grape-as3/

Grape is a new tweening library which separates space and time components of tweening. It looks really neat and should get you on your way.

[dudeqwerty]

Lol! I didn't even think about libraries for this. I wasted my time with that code then! :P

[Hadiflashkit]

Lol! I didn't even think about libraries for this. I wasted my time with that code then! :P

Thanks a lot for referring all those classes... and dudeqwerty thanks for the time you took on that code... at least we both know about all these other libraries!