embege.com - Flash Tutorial

Hello and welcome to a "short" Flash tutorial!

This tutorial explains two often used formulas to make smooth motion movements without the use of tweens - just math.
In the examples the target position is the current mousecursor, but can be whatever you want.
Note that Flash MX and FlashPlayer 6 (or higher) are required!

1 MoveTo

Ok, the first one moves a symbol to a given position and decelerates the closer it gets to the target, similar to an easing out tween.

Example:

speed = 0.2;
this.onEnterFrame = function() {
	xtarget = _xmouse;
	ytarget = _ymouse;
	mycircle._x += (xtarget - mycircle._x) * speed;
	mycircle._y += (ytarget - mycircle._y) * speed;
}

This is the complete code which goes in the first and only frame of the movie. mycircle is the instance name of the symbol you want to move.

At the beginning we specify the variable speed which can be changed to anything between 0 and 1. Reasonable values are from 0.1 to 0.5 depending also on your framerate.

The next block is inside a onEnterFrame function which will be executed once per frame.

xtarget and ytarget specify the position where the symbol should move to and can be changed to whatever you like.

The next lines are what is most important. This formula calculates a value which is the difference between the current position and the target. Here is a basic explanation:

First subtract the current position from the target to get the distance,
then multiply this with speed to decrease the distance so it does not "jump" to the new position
and finally add this to the current position value.

Download the .fla

2 Springle

This one also moves the symbol to a new position but overshoots the target, springing back and forth until coming to a stop at its final destination.

Example:

overshoot = 0.9;
speed = 0.1;
this.onEnterFrame = function() {
	xtarget = _xmouse;
	ytarget = _ymouse;
	distx = (xtarget - mycircle._x) * speed;
	disty = (ytarget - mycircle._y) * speed;
	newx *= overshoot;
	newy *= overshoot;
	newx += distx;
	newy += disty;
	mycircle._x += newx;
	mycircle._y += newy;
}

Since its very similar to the above i'll only cover the differences:

overshoot specifies how far the symbol should over shoot the target position.

newx and newy are the key-variables:

They are first multiplied with the overshoot to slightly modify the value decreasing to zero.
Next the distance from above is added to also move it towards the target position,
and finally the values are added to the current position to move the symbol.

The main trick compared to the first example is to add one variable between which calculates the value that the symbol should head over. Note that this is an implementation of Hooke's Law. ;-)

Download the .fla

Have a lot of fun!

jeff	23. September 2007
these formulas should be provided more generally not only flash

anonymous	02. September 2007
thanks for the great tutorials

anonymous	10. September 2005
tedt

millenium	29. March 2005
congratulations, great tut :)

Post a commment: