Creating Interaction with ActionScript > Creating complex interactivity > Capturing keypresses

 

Capturing keypresses

You can use the methods of the built-in Key object to detect the last key the user pressed. The Key object does not require a constructor function; to use its methods, you simply call the object itself, as in the following example:

Key.getCode();

You can obtain either virtual key codes or ASCII values of keypresses:

To obtain the virtual key code of the last key pressed, use the getCode method.

To obtain the ASCII value of the last key pressed, use the getAscii method.

A virtual key code is assigned to every physical key on a keyboard. For example, the Left Arrow key has the virtual key code 37. By using a virtual key code, you ensure that your movie's controls are the same on every keyboard, regardless of language or platform.

ASCII (American Standard Code for Information Interchange) values are assigned to the first 127 characters in every character set. ASCII values provide information about a character on the screen. For example, the letter "A" and the letter "a" have different ASCII values.

To decide which keys to use and determine their virtual key codes, use one of these approaches:

See the list of key codes in Keyboard Keys and Key Code Values.

Use a Key object constant. (In the Actions toolbox, click the Objects category, click Movie, click Key, and click Constants.)

Assign the following clip action, then choose Control > Test Movie and press the desired key:

onClipEvent(keyDown) {
	trace(Key.getCode());
}

The key code of the desired key displays in the Output window.

A common place to use Key object methods is within an event handler. In the following movie, you move the car using the arrow keys. The Key.isDown method indicates whether the key being pressed is the right, left, up, or down arrow. The event handler, onEnterFrame, determines the Key.isDown(keyCode) value from the if statements. Depending on the value, the handler instructs the Flash Player to update the position of the car and to display the direction.

The following procedure shows how to capture keypresses using a car example.

 
To create a keyboard-activated movie clip:

1

On the Stage, create a movie clip that will move in response to keyboard arrow activity.

In this example, the movie clip instance name is car.

2

On the Stage, create a dynamic text box that will be updated with the direction of the car. Using the Property inspector, give it a variable name of display.

Note: Don't confuse variable names with instance names.

3

Select frame 1 in the Timeline; then choose Window > Actions to open the Actions panel if it is not already visible.

4

To set how quickly the car moves across the screen with each keypress, in the Actions toolbox, click the Actions category, click Variables, double-click set variable, and name the variable speed. Then select the Expression option for Value and enter a value of 10.

5

To create the event handler that processes the event and subsequent behavior, in the Actions toolbox, click the Objects category, then click Movie, Movie Clip, and Events, and double-click onEnterFrame. Enter car as the object name.

6

Click in the Parameters text box to place the insertion point. Then click the Actions category, click the Variables category, and double-click with. Enter car as the object name.

Your code should look like this:

speed = 10;
car.onEnterFrame = function() {
    with (car) {
    }
};

7

To add the conditions to the event handler, in the Actions toolbox, click the Actions category, click Conditions/Loops, and double-click if.

8

Click in the Condition text box to place the insertion point. Click the Objects category, click Movie, Key, and Methods, and double-click isDown. Then click the Objects category, click Movie, Key, and Constants, and double-click RIGHT for the key code.

speed = 10;
car.onEnterFrame = function() {
    with (car) {
        if (Key.isDown(Key.RIGHT)) {
        }
    }
};

Next, the if statement needs parameters to carry in case Key.isDown(Key.RIGHT) evaluates to true. In other words, if the Right Arrow key is down, the car should move to the right—the _x property should increase. Also, the word Right should be displayed in the movie, so the dynamic text box needs to be updated.

9

To enter the conditional statements, in the Actions Toolbox, click the Operators category; then click Assignment, and drag += onto line 5 in the Script pane (between the if statement brackets). Enter the following code in the Expression text box:

_x += speed

10

To limit the car to the right edge of the movie, add a nested if statement. In the Actions toolbox, click the Actions category, then click Conditions/Loops and drag if to line 6 in the Script pane. Enter the following code in the Condition text box:

_x > 339

11

Click the Actions category, click Variables, and double-click set variable. Enter _x = 339 in the Expression text box.

12

To update the dynamic text box, in the Actions toolbox, click the Actions category, click Variables, and drag set variable to line 9 in the Script pane. Enter _root.display in the Variable text box and Right in the Value text box.

Your code should look like this:

speed = 10;
car.onEnterFrame = function() {
	with (car) {
		if (Key.isDown(Key.RIGHT)) {
			_x += speed;
			if (_x >= 339) {
				_x = 339;
			}
			_root.display = "Right";
		}
	}
};

You can take the time now to test the movie (Control > Test Movie), but the car will only move to the right.

13

To add the left, up, and down movement, in the Actions Toolbox, click the Actions category, click Conditions/Loops, and drag else if to line 10 in the Script pane. Then repeat steps 8 through 11, changing the parameter details as in the following code:

} else if (Key.isDown(Key.LEFT)) {
	_x -= speed;
	if (_x < 60) {
		_x = 60;
	}
	_root.display = "Left";
} else if (Key.isDown(Key.UP)) {
	_y -= speed;
	if (_y < 114) {
		_y = 114;
	}
	_root.display = "Up";
} else if (Key.isDown(Key.DOWN)) {
	_y += speed;
	if (_y > 244) {
		_y = 244;
	}
	_root.display = "Down";
}

Make sure to place your code on the correct lines (lines 10 through 28). The bracket that closes the outer if statement and the bracket that closes the event handler should follow on lines 29 and 30.

14

Choose Control > Test Movie to test the movie.

For more information about the methods of the Key object, see Key (object) in the ActionScript Dictionary.