Flash Tutorial: Character Movement with Arrow Keys

This basic flash tutorial will show you how to create character movement for your games using the arrow keys. This is a simple tutorial however, this method allows greater flexibility and easier potential for expansion than the other tutorials that I have seen on the web.

Let's Begin!

Step One

First off, start by drawing a simple shape and converting it into a movieclip. Name both the movieclip and its instance 'player'. Inside the movie clip, create a new layer for our actionscript to go on.


Step Two

Our next step is to create bindings for the keys we wish to associate with movement. In this case we'll be using the arrow keys. On the keyframe inside the player movieclip, enter the following variables.

// Key bindings
keyWalkLeft = 37;
keyWalkUp = 38;
keyWalkRight = 39;
keyWalkDown = 40;

The numbers are the ASCII numbers of the arrow keys on the keyboard. By storing them as variables like this means that we can easily remember which keys are which. It also means that if we wish to, we can easily change the key bindings to something else. For example the popular A, S, W, D controls: 65, 83, 87, 68. (For a full list of ASCII codes see the Adobe documentation).


Step Three

Next we'll enter our speed variables. I often see game tutorials have a single variable for player speed, however I have chosen to use four for greater flexibility.

// Speeds
l = -6;
u = -6;
r = 6;
d = 6;

The values that you choose are completely up to you, but L and U must be negative values as they have a negative movement on the X and Y axis. Similarly, R and D have positive movement on their axis and so should be kept as positives too.


Step Four

Now for the part that requires a little more brain power. We will now put all our variables together to check key presses and update player coordinates.

// Keyboard Commands
this.onEnterFrame = function() {
if (Key.isDown(keyWalkLeft)) {
walk(l, 0);
} else if (Key.isDown(keyWalkRight)) {
walk(r, 0);
}
}

// Walk function
function walk(X, Y) {
this._x += X;
this._y += Y;
}

This code will check if the left arrow key is down. If it is, it will call the walk function, which in turn will update the players co-ordinates according to the speed value specified for that direction. If the left arrow key is not down, it will then check to see if the right arrow is down and call the walk function with the value of R.

Now, test your movie and have fun moving your player from left to right.


Final Step

You'll notice that I have omitted if statements for the up and down keys. It is very simple to add these. Simply do the same codes, but with the Y axis this time. Your final code should look like this.

// Key bindings
keyWalkLeft = 37;
keyWalkUp = 38;
keyWalkRight = 39;
keyWalkDown = 40;

// Speeds
l = -6;
u = -6;
r = 6;
d = 6;

// Walk function
function walk(X, Y) {
this._x += X;
this._y += Y;
}

this.onEnterFrame = function() {
// Keyboard Commands
if (Key.isDown(keyWalkLeft)) {
this.walk(l, 0);
} else if (Key.isDown(keyWalkRight)) {
this.walk(r, 0);
}
if (Key.isDown(keyWalkUp)) {
this.walk(0, u);
} else if (Key.isDown(keyWalkDown)) {
this.walk(0, d);
}
}

Conclusion

You should now have full movement around the stage. Thank you for reading the first of my many tutorials of which I will be posting about the Flash Fight Engine. If you have any questions, comments or suggestions, please do not hesitate to leave a comment below.