Flash development Archives - Page 2 of 3 - Benoît Freslon

Big Ali is PacMan – Sony Music (2011)

Flash game on Facebook. Gameplay of the original PacMan with a 3D isometric view.
Game design, level design, Flash development, ActionScript 3.

Garden Rush – MesmoGames (2011)

Flash game on Facebook. Time management game.
Développement Flash, ActionScript 3.

ActionScript: Move an object with keyboard with camera relative control

In this tip I will show you how to move an object with keyboard with camera relative control.

What is a camera relative control?

The direction of your object will be calculated depending the camera position. (Mario 64, Uncharted, GTA 3, etc.).
Eg: If press the right button the character will go on the right.

How to make a camera relative control?

Get the arrow key status (key is up/key is down)
Set the direction vector
Move the object on enter frame with the direction vector

// Assign 4 booleans for the 4 arrow keys
var keyUp = false;
var keyDown = false;
var keyLeft = false;
var keyRight = false;

// Add the keyboard event (KEY_DOWN) on the stage
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);
function pressKey(pEvent) {
	// If an arrow key is down, switch the value to true to the assigned variable
	if (pEvent.keyCode == 38) {
		keyUp = true;
	} else if (pEvent.keyCode == 40) {
		keyDown = true;
	} else if (pEvent.keyCode == 37) {
		keyLeft = true;
	} else if (pEvent.keyCode == 39) {
		keyRight = true;
	}
}
// Add the keyboard event (KEY_UP) on the stage
stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey);
function releaseKey(pEvent) {
	// If the arrow key is up, switch the value to false to the assigned variable
	if (pEvent.keyCode == 38) {
		keyUp = false;
	} else if (pEvent.keyCode == 40) {
		keyDown = false;
	} else if (pEvent.keyCode == 37) {
		keyLeft = false;
	} else if (pEvent.keyCode == 39) {
		keyRight = false;
	}
}

// Set the velocity of the object
var speed = 6;

// Add an enter frame event on the moving object
myCircle.addEventListener(Event.ENTER_FRAME, circleEnterFrame);
function circleEnterFrame(pEvent) {
	// Create a 2D vector in order to get the object direction according the arrow keys
	var vector = new Point(0,0);
	if (keyUp) {
		// If keyUp is true add the -1 value on the y axis
		vector.y +=  -1;
	}
	if (keyDown) {
		// If keyDown is true add the 1 value on the y axis
		vector.y +=  1;
	}
	if (keyLeft) {
		// If keyLeft is true add the -1 value on the x axis
		vector.x +=  -1;
	}
	if (keyRight) {
		// If keyRight is true add the 1 value on the x axis
		vector.x +=  1;
	}

	// Get the radian angle of the direction
	var angle = Math.atan2(vector.y,vector.x);

	// If vector lenght is not null
	if (vector.length &gt; 0) {
		// Move the object with the angle and the object speed
		pEvent.currentTarget.x +=  Math.cos(angle) * speed;
		pEvent.currentTarget.y +=  Math.sin(angle) * speed;
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

// Assign 4 booleans for the 4 arrow keys

var keyUp = false;

var keyDown = false;

var keyLeft = false;

var keyRight = false;

// Add the keyboard event (KEY_DOWN) on the stage

stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);

function pressKey(pEvent) {

// If an arrow key is down, switch the value to true to the assigned variable

if (pEvent.keyCode == 38) {

keyUp = true;

} else if (pEvent.keyCode == 40) {

keyDown = true;

} else if (pEvent.keyCode == 37) {

keyLeft = true;

} else if (pEvent.keyCode == 39) {

keyRight = true;

}

// Add the keyboard event (KEY_UP) on the stage

stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey);

function releaseKey(pEvent) {

// If the arrow key is up, switch the value to false to the assigned variable

if (pEvent.keyCode == 38) {

keyUp = false;

} else if (pEvent.keyCode == 40) {

keyDown = false;

} else if (pEvent.keyCode == 37) {

keyLeft = false;

} else if (pEvent.keyCode == 39) {

keyRight = false;

}

// Set the velocity of the object

var speed = 6;

// Add an enter frame event on the moving object

myCircle.addEventListener(Event.ENTER_FRAME, circleEnterFrame);

function circleEnterFrame(pEvent) {

// Create a 2D vector in order to get the object direction according the arrow keys

var vector = new Point(0,0);

if (keyUp) {

// If keyUp is true add the -1 value on the y axis

vector.y += -1;

}

if (keyDown) {

// If keyDown is true add the 1 value on the y axis

vector.y += 1;

}

if (keyLeft) {

// If keyLeft is true add the -1 value on the x axis

vector.x += -1;

}

if (keyRight) {

// If keyRight is true add the 1 value on the x axis

vector.x += 1;

}

// Get the radian angle of the direction

var angle = Math.atan2(vector.y,vector.x);

// If vector lenght is not null

if (vector.length > 0) {

// Move the object with the angle and the object speed

pEvent.currentTarget.x += Math.cos(angle) * speed;

pEvent.currentTarget.y += Math.sin(angle) * speed;

}

Donwload source: www.benoitfreslon.com-Move-an-objet-with-keyboard-with-camera-relative-control.zip

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

ActionScript: Launch a function after a delay with setTimeout

There are different ways to launch a function after a delay:

With the enter frame event;
With the Timer class;
With a motion tween;
With the enter frame event and the getTimer() method;
And with the setTimeout function (See setTimeout help on Adobe);

How to master the setTimeout ?

First of all you must create a variable assigned to the setTimeout identifier;

var intervalIndentifier

1	var intervalIndentifier

The setTimeout function returns an identifier (uint) when you call this function. Save this identifier into the assigned variable;

// The hello function will be launched in 2000 ms
intervalIdentifier = setTimeout(hello, 2000)
function hello() {
    trace("function launched")
}

1

2

3

4

5

// The hello function will be launched in 2000 ms

intervalIdentifier = setTimeout(hello, 2000)

function hello() {

trace("function launched")

}

This identifier must be clear with the clearTimeout function in order to stop the setTimeout;

clearTimeout(intervalIdentifier)

1	clearTimeout(intervalIdentifier)

NB:

If you want to launch a setInterval already launched don’t forget to clear the previous setInterval. In witch case the previous setInterval won’t be stopped;
The setTimeout function can’t be paused or resumed;
Assign one variable by one setTimout;
The setTimeout function is based on clock time not on frames time;
When you clear the setTimeout the closure function is not launched;
You don’t have to clear the setTimeout when the setTimeout is already finished;

Add parameters

The setTimeout function can receive one or several arguments. Those arguments are passed to the closure function.
To add arguments just add your arguments after the second parameter into the setTimeout function:
Obviously your closure function must have the same number of arguments.

intervalIdentifier = setTimeout(hello, 2000, "world", "www.benoitfreslon.com")
function hello(arg1, arg2) {
    trace(arg1, arg2)
}

1

2

3

4

intervalIdentifier = setTimeout(hello, 2000, "world", "www.benoitfreslon.com")

function hello(arg1, arg2) {

trace(arg1, arg2)

}

Exemple:

Download source: www.benoitfreslon.com Launch a function after a delay with setTimeout.zip

GeekIsArt – ISART Digital (2010)

Play on Kongregate

Puzzle game made with Flash, developed for the ISART DIGITAL School.
Game design, level design, Flash development, ActionScript 3, sound design.

Take Something Literally 2 (2010)

Play on Kongregate

Flash game, compilation of creative puzzles. Play with all your devices and your browser.
Game design, level design, Flash development, ActionScript 3, sound design.

Awards: 15M plays.

Décroche la lune – HR-Path (2010)

Flash game developed for the HR-Path website.
Game design, level design, Flash development, ActionScript 3, sound design.

La main de Thierry Henry le jeu (2009)

Play on Kongregate

Newsgame developed with Flash in 10h during the “Hand of the Thierry Henry” crisis in 2010.
Game design, level design, Flash development, ActionScript 3.

Take Something Literally (2009)

Play on Kongregate

Flash game, creative puzzle compilation games.
Game design, level design, sound design, Flash development, ActionScript 3.

Awards: 75M plays.