smooth Archives - Benoît Freslon

ActionScript: Move object with smooth acceleration and deceleration with inertia

Today a simple sample of code to create an inertia effect in ActionScript 3.0.

The character will start to move with smooth acceleration if you press an arrow key.

You can download the source code here : Flash_acceleration_benoifreslon.com.fla

// Copyrights
// Benoît Freslon
// https://www.benoitfreslon.com

import flash.events.KeyboardEvent;
import flash.events.MouseEvent;

// Constants (You can modify this values)
const acceleration:Number = 0.1;
const decceleration:Number = 0.9;
const speedMax:Number = 5;

// Variables
var speedX:Number = 0;
var speedY:Number = 0;

// Key states
var leftPressed:Boolean = false;
var rightPressed:Boolean = false;
var upPressed:Boolean = false;
var downPressed:Boolean = false;

// Keyboard events
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);
function keyDown(e:KeyboardEvent):void {
	switch (e.keyCode) {
		case 37 :
			leftPressed = true;
			break;
		case 38 :
			upPressed = true;
			break;
		case 39 :
			rightPressed = true;
			break;
		case 40 :
			downPressed = true;
			break;
	}
}
function keyUp(e:KeyboardEvent):void {
	switch (e.keyCode) {
		case 37 :
			leftPressed = false;
			break;
		case 38 :
			upPressed = false;
			break;
		case 39 :
			rightPressed = false;
			break;
		case 40 :
			downPressed = false;
			break;
	}
}

// Enter frame events
pig.addEventListener(Event.ENTER_FRAME, enterFrame);
function enterFrame(e:Event):void {

	// If a key is pressed I will increase the speed with the acceleration value

	if (upPressed) {
		speedY -=  acceleration;
	} else if (downPressed) {
		speedY +=  acceleration;
	} else {
		// If the up key and the down key are released I will decrease the speed with the decceleration value
		speedY *=  decceleration;
	}

	if (leftPressed) {
		speedX -=  acceleration;
	} else if (rightPressed) {
		speedX +=  acceleration;
	} else {
		speedX *=  decceleration;
	}

	// Limit the speed
	if (speedX &gt; speedMax) {
		speedX = speedMax;
	}
	if (speedX  &lt;-speedMax) { 		                 speedX =  -  speedMax; 	         } 	         if (speedY &gt; speedMax) {
		speedY = speedMax;
	}
	if (speedY &lt;-speedMax) {
		speedY =  -  speedMax;
	}

	// Move the pig
	pig.x +=  speedX;
	pig.y +=  speedY;

	// Display values on HUD
	tValues.text = "speedX: " + speedX + "\nspeedY: " + speedY;

}

// Reset pig
stage.addEventListener(MouseEvent.CLICK , click);
function click(e:MouseEvent):void {
	pig.x = stage.stageWidth / 2;
	pig.y = stage.stageHeight / 2;
}

100

101

102

103

104

105

106

107

// Copyrights

// Benoît Freslon

// https://www.benoitfreslon.com

import flash.events.KeyboardEvent;

import flash.events.MouseEvent;

// Constants (You can modify this values)

const acceleration:Number = 0.1;

const decceleration:Number = 0.9;

const speedMax:Number = 5;

// Variables

var speedX:Number = 0;

var speedY:Number = 0;

// Key states

var leftPressed:Boolean = false;

var rightPressed:Boolean = false;

var upPressed:Boolean = false;

var downPressed:Boolean = false;

// Keyboard events

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);

stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);

function keyDown(e:KeyboardEvent):void {

switch (e.keyCode) {

case 37 :

leftPressed = true;

break;

case 38 :

upPressed = true;

break;

case 39 :

rightPressed = true;

break;

case 40 :

downPressed = true;

break;

}

function keyUp(e:KeyboardEvent):void {

switch (e.keyCode) {

case 37 :

leftPressed = false;

break;

case 38 :

upPressed = false;

break;

case 39 :

rightPressed = false;

break;

case 40 :

downPressed = false;

break;

}

// Enter frame events

pig.addEventListener(Event.ENTER_FRAME, enterFrame);

function enterFrame(e:Event):void {

// If a key is pressed I will increase the speed with the acceleration value

if (upPressed) {

speedY -= acceleration;

} else if (downPressed) {

speedY += acceleration;

} else {

// If the up key and the down key are released I will decrease the speed with the decceleration value

speedY *= decceleration;

}

if (leftPressed) {

speedX -= acceleration;

} else if (rightPressed) {

speedX += acceleration;

} else {

speedX *= decceleration;

}

// Limit the speed

if (speedX > speedMax) {

speedX = speedMax;

}

if (speedX <-speedMax) { speedX = - speedMax; } if (speedY > speedMax) {

speedY = speedMax;

}

if (speedY <-speedMax) {

speedY = - speedMax;

}

// Move the pig

pig.x += speedX;

pig.y += speedY;

// Display values on HUD

tValues.text = "speedX: " + speedX + "\nspeedY: " + speedY;

}

// Reset pig

stage.addEventListener(MouseEvent.CLICK , click);

function click(e:MouseEvent):void {

pig.x = stage.stageWidth / 2;

pig.y = stage.stageHeight / 2;

}

ActionScript: Move an object to coordinates with smoothing

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;
}

// 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:

Download source: www.benoitfreslon.com Move an object to coordinates with smoothing.zip