Key Movement

In this Tutorial we are going to learn how to move an object with the arrow keys. I used AS3: Movement with Keys tutorial, and adapted slightly. Do check out these tutorials though. Basically this Blog is a collection of all these Tutorials, and then I re-explain the code as best I can, so that we learn together.

Firstly lets make another square and turn it into an MC (Movie Clip). Name this "square" and give it the same instance name. Firstly let's create another EventListener. We will use this one to check what key is being pressed. So we put:

stage.addEventListener(KeyboardEvent.KEY_DOWN ,checkKey);

As we know this will create an action however it is slightly different to our button Listeners. we put stage. at the beginning to show it isn't referring to an object, it's referring to the stage, everything we put our actions and drawings into. So aslong as the stage is there (which it always will be), we have this EventListener. Now we have a KeyboardEvent which means something happening to do with the keyboard. What we are using is KEY_DOWN which means any key being pressed. And now when a key is pressed we start a new Function called checkKey.

Now we'll start our function called "checkKey". So our first line will be:

function checkKey(event:KeyboardEvent):void {

The only difference with this function is that the event is a KeyboardEvent, not a MouseEvent. Now we carry on our function:

if (event.keyCode == 39) {
right = true;
}

Right, this is an if statement. Basically when you have an if, if the contents in the bracket after an if is true then you carry on the code in the middle part. Remember how after one of these { everything between an open and closed one in a Function would be what he function does. It's the same for the if statement. However the if statement is only done if what is in the brackets is true. It's important to understand this.

Now in our bracket we have event.keyCode == 39. This means that if the event (ours is a keyboard event) keyCode (every key has its own keyCode, which is a number) is equal to 39 (which is the keyCode or number for the right arrow key) then the if statement is true. That may seem a little confusing. Basically, every key has its own special number (you can find some for letters and numbers here) and if the right arrow key was being pressed then its keyCode would be 39. Now we have == in between the keyCode and the number. This is to check if one side is equal to another. However you only use one = when you are stating what something is, for example stating a variable which I will come across now.

Now we have:

right = true;

right is a variable. Basically a variable is something that can be changed and checked. It is essential you understand variables because they are used in nearly every Actionscript code you'll see. Variables are either Booleans, true or false, a number, or a word. You can then check the variables with an if statement. So we have stated that "right", the name of our variable (can have any name) is true. Later on you'll see an if statement asking whether right is true or false, and if it's true then it move the square to the right. Understand?

Now we have an if statement for the left, down and up keys:

if (event.keyCode == 37) {
left = true;
}
if (event.keyCode == 40) {
down = true;
}
if (event.keyCode == 38) {
up = true;
}

The left keys unique number is 37, and we make a new variable called left true. The exact same changes with the down and up keys. We also have to close off our function with another }. Now the code for this function should be:

function checkKey(event:KeyboardEvent):void {
if (event.keyCode == 39) {
right = true;
}
if (event.keyCode == 37) {
left = true;
}
if (event.keyCode == 40) {
down = true;
}
if (event.keyCode == 38) {
up = true;
}
}

However we have gone ahead of ourselves here. We've started changing our variables, but we haven't created them in the first place. Obviously they all start as false because no keys are pressed at the beginning. So to state our variables we put var (short for variable), the name of the variable (up, down left, right), a colon and then the type of variable (ours is a Boolean), and then what it is. Well, all of ours are false. So for the "right" variable we'd put:

var right:Boolean = false;

And then we'd have to do the same for the others:

var left:Boolean = false;
var up:Boolean = false;
var down:Boolean = false;

Excellent. Now, the only problem is when we press the right key "right" will be true however when we release the right key it will stay true. We need to make it so when you release the right key "right" will be false. So we have to make a new EventListener for when we release a key:

stage.addEventListener(KeyboardEvent.KEY_UP, keyUps);

Similar to our other EventListener except the event is KEY_UP and our new function is called keyUps. Now we'll start the function:

function keyUps(event:KeyboardEvent):void {

I'm you understand this by now. Now the part in between those { is:

if (event.keyCode == 39) {
right = false;
}
if (event.keyCode == 37) {
left = false;
}
if (event.keyCode == 40) {
down = false;
}
if (event.keyCode == 38) {
up = false;
}

Remember this function is only used when all keys have been released. Therefore we shall make it that all variables to move directions will be false if that key was pressed. Now that we've sorted all the keyboard presses, we shall create the function that will move the square. To start with we add a new EventListener:

stage.addEventListener(Event.ENTER_FRAME, movement);

Now you probably don't recognize this EventListener. What it does is make the function happen all the time. So it isn't done when a key or mouse is pressed or released, it happens all the time. The code will keep being run in Flash over and over. Therefore as it isn't an event for anything, we just put Event. ENTER_FRAME is when it keeps being run over and over. Now the function is movement. Let's create this function:

function movement(Event):void {
if (right == true) {

Now in this it is checking if right is true. We know it will only be true when the right key is pressed. So when it is true everything in the if statement will happen. This is our important part:

square.x+=speed;

We have called upon "square" and we are making its x go up by speed. Basically everything in Flash has an x and y position corresponding with the stage. With this we are increasing its x position. When you have += it means go up by what is after it. Now that can either be a number or a variable. We now have a variable called "speed". We do the rest of this for the other keys:

if (left == true) {
square.x-=speed;
}
if (down == true) {
square.y+=speed;
}
if (up == true) {
square.y-=speed;
}

Now when "left" is true the squares x goes down by speed. With the up and down key the y axis is affected, rather than the x axis. Now all we have to do is create our variable "speed":

var speed:Number = 5;

We have Number because it shows the variable is a number. That number is 5. So when the right key is pressed the squares x is going to go up by 5. We make this a variable so it can easily be changed. If you had a racing game then as you accelerate the speed would go up, so it will be useful in games. Now we have finished our whole code! It should look like:

var speed:Number = 5;
var right:Boolean = false;
var left:Boolean = false;
var up:Boolean = false;
var down:Boolean = false;

stage.addEventListener(KeyboardEvent.KEY_UP, keyUps);
stage.addEventListener(KeyboardEvent.KEY_DOWN ,checkKey);
stage.addEventListener(Event.ENTER_FRAME, movement);

function keyUps(event:KeyboardEvent):void {
if (event.keyCode == 39) {
right=false;
}
if (event.keyCode == 38) {
up=false;
}
if (event.keyCode == 37) {
left=false;
}
if (event.keyCode == 40) {
down=false;
}
}
function checkKey(event:KeyboardEvent):void {
if (event.keyCode == 39) {
right = true;
}
if (event.keyCode == 37) {
left = true;
}
if (event.keyCode == 40) {
down = true;
}
if (event.keyCode == 38) {
up = true;
}
}

function movement(Event):void {
if (right == true) {
square.x+=speed;
}
if (left == true) {
square.x-=speed;
}
if (down == true) {
square.y+=speed;
}
if (up == true) {
square.y-=speed;
}
}

Now if you test that the square should move up, down left and right depending on what key you press! That's the end of this post, keep coming back for more!

-souled