Keyboard Interaction in AS3

By Blue_Chi | Flash CS4 | ActionScript 3.0 | Beginner | Page 1, 2

In this section we will use the skills taught in the previous page to create a practical example in which an object is moved on the screen by using the keyboard. This will require preparing the FLA and then writing the code.

Preparing the FLA

Start off by creating a new FLA in AS3 format.

AS3 - Format

Draw a square on the stage, then select it and go through Modify>Convert to Symbol, pick any name for your Symbol and make sure you set the Type to Movie Clip. Once done, click OK.

AS3 - Keyboard  - New Symbol

Select the square again, then access the Properties Inspector and set the instance name my_mc to it. An instance name makes it easy for us to refer to an object using ActionScript.

AS3 - Keyboard - Instance Name

Our object is now ready, right-click the only frame you have on the timeline and select Actions to open up the Actions panel.

Writing the Code

The purpose of our example is to use the keyboard to move the object around the stage. The first step in achieving this is by registering for the Keyboard Event using the .addEventListener() method. Remember that you can use the stage instance to register for this event even if you plan on applying the result of the event to another object.

stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);

Our next step would be to create the myKeyDown listener function. This is a simple task to do:

stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);
function myKeyDown (e:KeyboardEvent):void{

}

Our function will take care of moving our object around. Moving the object will involve increase or decreasing the values of the x and y properties. The first action to take is to move the object to the left by pressing the the left arrow. To do this we need to use a conditional to check that the left arrow is pressed and then decrease the value of the x property by 5 to move the object a bit to the left.

stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);
function myKeyDown (e:KeyboardEvent):void{

if (e.keyCode == Keyboard.LEFT){
my_mc.x -=5;
}


}

This code will be triggered only if the key pressed is the left key on the keyboard. You can test your movie now (Go through Control>Test) and press the left arrow key to move your object to the left!

In order to move the object to the right we need to increase the value of the x property by 5 when the right arrow is pressed. This is written using another conditional:

stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);
function myKeyDown (e:KeyboardEvent):void{

if (e.keyCode == Keyboard.LEFT){
my_mc.x -=5;
}

if (e.keyCode == Keyboard.RIGHT){
my_mc.x +=5;
}


}

Again, you can test your movie now to see that you can use the right arrow to move your object to the right.

The code for the up and down keys is identical, but it involves using the y property instead of the x, and the up and down keys instead of the left and right. Here is how it is to be done:

stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);
function myKeyDown (e:KeyboardEvent):void{

if (e.keyCode == Keyboard.LEFT){
my_mc.x -=5;
}

if (e.keyCode == Keyboard.RIGHT){
my_mc.x +=5;
}

if (e.keyCode == Keyboard.UP){
my_mc.y -=5;
}

if (e.keyCode == Keyboard.DOWN){
my_mc.y +=5;
}


}

Your current code should be able to get the job done. Test your movie again to see the square object move in all directions by using the arrow keys. Though properly working, the way we have written our code is unwieldy, we are using way too many conditionals and the code could be shortened down by using a simple switch statement. The code below carries exactly the same function as the code above, however, it is written in a more logical structure that utilizes the case format of a the switch statement:

stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown);
function myKeyDown(e:KeyboardEvent):void {

switch (e.keyCode) {
case Keyboard.LEFT :
my_mc.x-=5;
break;

case Keyboard.RIGHT :
my_mc.x+=5;
break;

case Keyboard.UP :
my_mc.y-=5;
break;

case Keyboard.DOWN :
my_mc.y+=5;
break;
}

}

You can learn more about AS3 Switch Statement by reviewing our tutorial on this topic.

This concludes our tutorial, you can download the end source file from this link. I hope that you learnt something new from it. If you have any questions or comments feel free to post them at the Republic of Code Forum.

- End of Tutorial