Tutorial on Capturing key strokes



Tutorial on Capturing key strokes

Programming to enable a player to click on keys on the keyboard is called 'capturing the keys' or 'capturing the keystrokes'. Flash provides the facilities to do this for your games and other applications. However, there are two related issues that require attention.

Flash Mechanics

You / your code can set up handling for the KeyboardEvent.KEY_UP or KeyboardEvent.KEY_DOWN. In the handler for the event, your code can reference the character code, charCode, or convert that code to a character string, which is what I do in this example. Other available properties to reference include the keyCode, the keyLocation that can be used to determine where the key is on the keyboard and so can distinguish numbers on the top from numbers on the keypad. There also are properties to indicate if the shift, alt, command (for MACs), etc. are pressed. You need to decide for your application if and how to convey to the player/user that an unexpected key was pressed.

It is important to appreciate that your Flash application is not the only application running and another application may detect the key event and prevent your code from working. Your code need to 'get the focus' so the event handling works. Using the mouse can accomplish this and it is possible for this to fit into an application in a natural way. In the jigsaw puzzle, the player presses the mouse button down on a piece to move it. The player only uses the arrow keys to rotate the piece when the mouse button is down on the piece. Each piece has its buttonMode set to true to enable this. In the shooter application, I present an initial screen (frame) with instructions and ask the player to click on a start button. In the code given below, I ask the player to click the mouse and then press on a key.

When you use Control/Test Movie within the Flash environment, certain keys represent the so-called keyboard shortcuts. You can click on Control/Disable Keyboard Shortcuts in the Window of the running program to turn these off:

[pic]

If you don't do this, clicking on p, for example, will invoke the Pen tool! An alternative approach is to test the application by publishing it.

If your Flash application is running and you do something else (such as work on this tutorial), the focus goes away and the key strokes are not detected by the Flash program. For my application, this means clicking the mouse again on the window holding the running application.

Simple demonstration of capturing key strokes.

The opening screen of my application is shown above. After clicking the mouse button, if I press the shift key and the p key, the following screen appears:

[pic]

If I click on any other character key, something like this will be shown:

[pic]

The application has 2 text fields on the Stage: a static text field holding the instructions and a dynamic text field, named result. The Actions for the first and only frame contain an import statement to get at the keyboard event features, a statement setting up the event handling, and a function to handle (receive) the event. The function has a statement that generates a string from the character code of the pressed key and then a switch statement.

import flash.events.*;

stage.addEventListener(KeyboardEvent.KEY_UP,handlekeys);

function handlekeys(event:KeyboardEvent) {

var charpressed:String=String.fromCharCode(event.charCode);

switch (charpressed) {

case "P" :

result.text="You pressed capital P.";

break;

case "Q" :

result.text="You pressed capital Q.";

break;

default :

if (event.charCode>0) {

result.text="You pressed something else: "+charpressed+".";

}

}

}

This coding assumes that you designed your application to detect capital P (shift and p), or capital Q (shift and q). You would put what you want done in the case "P" clause and in the case "Q" clause. Remember you need to put break statements in the switch case clauses if you don't want control to continue to the next case. The default clause in my application will display a message if another character key is pressed, including lower case p and lower case q. All other keys are ignored. As mentioned earlier, for your specific application, you may or may not want a default case.

The event listened for here is KEY_UP. So what happens when your player releases the shift key? This does trigger the event! My if statement checking that the event.charCode is greater than 0 prevents anything new being displayed if it is the shift key or the alt key or several other keys released. If you want to check for these keys, use the keyCode value or use the KEY_DOWN event and check if shiftKey is true.

Remember, to test the application, you need to disable the keyboard shortcuts OR do not use the Control/Test Movie and, instead, publish the application and test the html/swf combination directly in a browser. Do also read the jigsaw and shooter tutorials.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download