Keyboard Interaction in AS3
By Blue_Chi | Flash CS4 | ActionScript 3.0 | Beginner | Page 1, 2This tutorial will teach you how to use the keyboard to interact with your Flash movie using ActionScript 3.0. Using the keyboard to initiate or react to actions on the screen is a feature that is commonly used for projects such as games. You do not need any special AS3 knowledge to be able to use keyboard events other than the basics of AS3 Event Handling.
By the end of this tutorial will create a movie similar to the one shown below. Use the arrows on your keyboard to move the object around the screen:
Our tutorial is divided into two sections:
- Listening to Keyboard Events - You will learn the basics on how to use keyboard actions.
- Practical Example - A step by step guide on how to create the example shown above.
Listening to Keyboard Events
Using keyboard commands requires listening to keyboard events. This process is identical to the process for listening to any other event in AS3. You need to use the addEventListener() method to register with a KeyboardEvent. However, unlike other objects, due to the fact that the keyboard is not necessary attached to any specific object in the project, the Keyboard Event is usually registered with the stage. In the example below, the stage object registers for a keyboard event to be triggered each time a keyboard key is pressed down.
The code above will trigger the listener function myKeyDown each time a keyboard key is pressed down. The code below defines this function and tells the Flash movie to display the message "Key Pressed" in the output window when this function is triggered.
function myKeyDown(e:KeyboardEvent):void{
trace("Key Pressed");
}
You can test the movie above (Go through Control>Test Movie) to see that hitting any keyboard key will trigger that function.
The earlier example show how to register a general keyboard event, but it is not helpful much in reality because you do not know which key is being pressed. In order to learn the used key you can use two properties that belong the the Keyboard Event Class:
- keyCode - The key code is a numeric value representing the position of the key of the keyboard.
- charCode - The character code is a numeric value representing the character associated with the key.
The difference between these two becomes apparent when you realize that small and capital "A" letters have the same keyCode but different character codes.
These properties can be retrieved from the event listener function by retrieving the it from the KeyboardEvent reference this way:
function myKeyDown(e:KeyboardEvent):void{
trace(e.keyCode);
trace(e.charCode);
}
Test your movie to see the details of the keys pressed in the output window.
Though this might a good indicative way to inform you that the keyboard is being used, you are more likely need to associate code with a press of a certain key only and not the whole of the keyboard. In order to do this you need to use a conditional to compare the value of the keyCode with a constant representing the key you need to use. The Keyboard Class has a number of constants for all the keys you are likely to need to use.
For example, if you want to pass a specific command to be triggered when the space bar is pressed you can use a conditional to trigger than command this way:
function myKeyDown(e:KeyboardEvent):void{
if (e.keyCode == Keyboard.SPACE){
trace("Success!");
}
}
The same concept can be used to trigger any code using another key. Simply use the specified Keyboard Class constant to do the trick.
In the next page of this tutorial we will learn how to create the example shown above in which a square object is manipulated by the arrows keys.