ActionScript: Move an object to coordinates with smoothing

[:en]There is a simple formula to move an object to coordinates with smoothing.
The speed will decrease with smooth during the time.

speed = distance_between_objects / smoothing

The distance will decrease because the distance will decrease too.

If I set values I got:

object.x = 50
targetX = 100

speedX = (targetX – object.x) / 5

On the first frame: speed = 10
object.x += (100 – 50) /5 > 50/5 > 10
> object.x = 50+10 = 60

On the second frame: speed = 8
object.x += (100 – 60) /5 > 40/5 = 8
> object.x = 60 + 8 = 68

On the third frame: speed = 6,4
object.x += (100 – 68) / 5 > 32/5 = 6,4
> object.x = 68 + 6,4 = 74,4

etc.

On the 100th frame: speed = 0
object.x += (100 – 100) / 5 > 0 /5 = 0
> object.x = 100 + 0 = 100

Source:

// Add a mouse event on the stage
stage.addEventListener(MouseEvent.CLICK, click);
function click(pEvent) {
	// On click set the new x and y coordinates
	myBall.targetX = stage.mouseX;
	myBall.targetY = stage.mouseY;
}

// Set default coordinates
myBall.targetX = 200;
myBall.targetY = 200;

// Add an enter frame event on the ball
myBall.addEventListener(Event.ENTER_FRAME, ballEnterFrame);
function ballEnterFrame(pEvent) {
	// On enter frame move the ball to the target coordinates
	var b = pEvent.currentTarget;
	b.x += (b.targetX - b.x) / 8;
	b.y += (b.targetY - b.y) / 8;
}

Exemple:

[swf:/wp-content/uploads/2011/01/www.benoitfreslon.com-Move-an-object-to-coordinates-with-smoothing.swf 550 400]

Download source: www.benoitfreslon.com Move an object to coordinates with smoothing.zip[:fr]Il existe une formule très simple pour déplacer un objet vers des coordonnées données avec un effet de ralentissement.

Cette formule fait diminuer la vitesse petit à petit suivant le temps.

vitesse = distance_entre_les_objets / coefficiant_de_ralentissement

La distance va décroître car la distance va décroître également.

Si je donne des valeurs :

object.x = 50

targetX = 100

speedX = (targetX – object.x)  / 5

Sur la première image : speed = 10

object.x += (100 – 50) /5 > 50/5 > 10

> object.x = 50+10 = 60

Sur la seconde image : speed = 8

object.x += (100 – 60) /5 > 40/5 = 8

> object.x = 60 + 8 = 68

Sur la troisième image: speed = 6,4

object.x += (100 – 68) / 5 > 32/5 = 6,4

> object.x = 68 + 6,4 = 74,4

etc.

Sur la 100ème image : speed = 0

object.x += (100 – 100) / 5 > 0 /5 = 0

> object.x = 100 + 0 = 100

Code source :

// Ajouter un écouteur d'événément au clic de souris sur la scène
stage.addEventListener(MouseEvent.CLICK, click);

function click(pEvent) {
	// Lorsqu'on clic on donne de les nouvelles coordonnées de la souris à l'objet myBall
	myBall.targetX = stage.mouseX;
	myBall.targetY = stage.mouseY;
}

// Mettre les coordonnées par défaut
myBall.targetX = 200;
myBall.targetY = 200;

// Ajouter un écouteur d'évévement entre chaque frame
myBall.addEventListener(Event.ENTER_FRAME, ballEnterFrame);

function ballEnterFrame(pEvent) {
	// Entre chaque frame on déplace l'objet vers ses coordonnées cibles
	var b = pEvent.currentTarget;
	b.x += (b.targetX - b.x) / 8;
	b.y += (b.targetY - b.y) / 8;
}

Exemple:

[swf:/wp-content/uploads/2011/01/www.benoitfreslon.com-Move-an-object-to-coordinates-with-smoothing.swf 550 400]

Télécharger la source : www.benoitfreslon.com Move an object to coordinates with smoothing.zip[:]