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.

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 .

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.

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