Wednesday, 3 February 2010

Detect key press in Actionscript 3

I have previously created a tutorial called Keyboard controls in AS3 where you learn how to move an object around the stage using the keyboard arrow keys. In this tutorial you will learn how to detect the other keyboard keys such as the letters, spacebar, enter key, shift key etc. You will also learn how to detect multiple key presses on the keyboard. Every character on the keyboard has a unique key code number which has been mapped specifically to a location on the keyboard. For example, the letter ‘a’ is the key code number 65.


Detect key press in Actionscript 3

Step 1

Open a new Flash AS3 file.
On the timeline select the first frame then open up the Actions panel and enter the following code.

//Adds event listener to the stage.
stage.addEventListener(KeyboardEvent.KEY_DOWN, detectKey);

//Traces the keycode, keylocation, shiftkey and altkey.
function detectKey(event:KeyboardEvent):void {
trace("The keypress code is: " + event.keyCode);
trace("The keyLocation is: " + event.keyLocation);
trace("The shiftKey is: " + event.shiftKey);
trace("The altKey is: " + event.altKey);
}

Step 2

Test your move clip Ctrl + Enter. Now if you don’t see any numbers being traced out, you need to disable the keyboard shortcuts. On the SWF menu bar click on Control > Disable Keyboard Shortcuts and then you should see the key code numbers being traced out. You will notice that the uppercase and lowercase characters produce the same key code.



You can also trace a message when certain characters on the keyboard have been pressed. In the example below only the ‘enter key’ and the ‘j’ key will display a message, the other key will display nothing.
if (event.keyCode==13) {
trace("The enter key has been pressed");
}

if (event.keyCode==74) {
trace("The j has been pressed");
}

The following example will display a message when the alt, control and shift key have been pressed.
if (event.shiftKey == true) {
trace("The Shift key has been pressed");
}

if (event.altKey== true) {
trace("The Alt key has been pressed");
}

if (event.ctrlKey == true) {
trace("The Ctrl key has been pressed");
}

You can also detect multiple key presses. This example will trace a message when the shift and ‘a’ keys have been pressed.
if (event.shiftKey== true && event.keyCode==65 ) {
trace("The Shift key and a key has been pressed");
}

12 comments:

Dan 30 May 2010 at 00:56  

Hi, thanks for your post. But it giving errors below:

'{' expected

Unexpected '}' encountered

Hope you can help!

iliketo 31 May 2010 at 11:05  

@Dan

Make sure you have not left out any '{' or '}'.

Archie Ceasar 19 August 2010 at 04:37  

Hi, If i would like to code "spacebar" should be pressed only once. what will be the code look like? Thanks for your help in advance.

Archie Ceasar 19 August 2010 at 04:58  

figured it out.. thanks!

Nicholas 5 April 2011 at 10:21  

Great, but I couldn't get certain keyboard combinations to work together. Any letter plus any number doesn't work (at least not on the version of cs3 I'm using).

iliketo 16 April 2011 at 10:56  

@Nicholas

Which keys don't work?

Shant Younki 25 January 2012 at 03:06  

Hey is there a way to have certain keys do one thing on one page and then different on another, as i use

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

if (e.keyCode == Keyboard.SPACE)
{
gotoAndPlay("welcome");
}

}


But then on next frame i cant use space bar again to do another task?
Any help would be appreciated

iliketo 2 February 2012 at 01:17  

@Shant

If you are coding on the main timeline then you can’t access code from another frame. You would have to place the contents into movie clip.

Daniel 2 April 2012 at 16:43  

I couldn't get certain keyboard combinations to work together either. Like for example: left and right arrows. Any help? Thnks!

iliketo 3 April 2012 at 12:17  

@Daniel,

Can you post up your code?

codrut mendea 8 May 2013 at 08:47  

Hello, please help me with something.;
I have this code:

var canvas:Sprite = new Sprite();
addChild(canvas);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUpHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN, stop_drawing);
function onKeyUpHandler(event : KeyboardEvent) : void
{
canvas.graphics.moveTo(mouseX, mouseY);
stage.addEventListener(MouseEvent.MOUSE_MOVE, draw_line);
}
function stop_drawing(e:KeyboardEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, draw_line);
}

function draw_line(e:MouseEvent):void
{ canvas.graphics.lineStyle(2, 0x00FF66);
canvas.graphics.lineTo(mouseX, mouseY);
e.updateAfterEvent();
}
and i want to assign a key for drawing with red colour, and another key for drawing with blue. Can you help me with this?
Thank you!
Codrut

iliketo 8 May 2013 at 13:21  

@Codrut,

Store the line color in a member variable. Then you can set the color on a different key press.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP