2.2 Keyboard

In this exercise we will practice the use of the keyboard for generating interaction. We will create 2 shapes, and we will control their opacity with the keyboard.

1. First, some information on how to retrieve data from the keyboard. Keyboard keys have a code associated with them, which allow us to use them in AS3. The list of key codes used by Flash can be found in this link: http://www.adobe.com/livedocs/flash/9.0/main/00001136.html We can also use properties from the Keyboard class for the most important keys, such as Keyboard.SPACE, Keyboard.RIGHT and Keyboard.ENTER.

The logic behind keyboard interaction is otherwise similar to mouse interaction, using event listeners.

2. Let’s start our exercise by creating 2 shapes – a rounded rectangle and a circle, and putting them on the stage:

var shapeLeft:Shape = new Shape();
stage.addChild(shapeLeft);
shapeLeft.graphics.beginFill(0xFF00FF);
shapeLeft.graphics.drawRoundRect(100, 175, 100, 100, 50);

var shapeRight:Shape = new Shape();
stage.addChild(shapeRight);
shapeRight.graphics.beginFill(0x00FFFF);
shapeRight.graphics.drawCircle(375, 225, 50);

Note that the drawRoundRect method uses one more parameter than drawRect, which is the width (in this case also height, the distinction is optional) of the rounded corner.

3. We will now create a caption with the instructions for the keyboard interaction. The shapes will be transparent to begin with, and become opaque only when users press the left or right keys. So let’s put the caption on the stage:

var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.x=175;
myTextField.y=100;
myTextField.autos = 450;
myTextField.text = "Press or cursor keys";

4. So far, nothing much is new. Now we will set the default transparency of the shapes to 30% opaque, by using the alpha property, which accepts percent type of values from 0 to 1 (so 30% will be 0.3):

shapeLeft.alpha=0.3;
shapeRight.alpha=0.3;

5. Let’s now add an event listener for checking if a key was pressed. We don’t have listeners for specific keys, so we need to first set up a generic “key down” listener, and then check which key was press in a conditional.

The listener will check for an event called KEY_DOWN of the KeyboardEvent class. We will associate the listener with the stage, as it will be generic, and useful for both the shapes. The listener will trigger a function we will create later called showShape. The listener should be something like this:

stage.addEventListener(KeyboardEvent.KEY_DOWN, showShape);

The function showShape receives a parameter from the listener, which contains the key code of the key pressed (let’s call this parameter “e”). Then we can check if that key code corresponds to Keyboard.LEFT or Keyboard.RIGHT. If it does, let’s set the alpha of the correspondent shape (left or right) to 1:

function showShape(e:KeyboardEvent):void {
if (e.keyCode==Keyboard.LEFT) {
shapeLeft.alpha=1;
}
if (e.keyCode==Keyboard.RIGHT) {
shapeRight.alpha=1;
}
}

Please note that the operator for testing equality in AS3 is “==” (“=” is used for assignment).

6. Now we should create a listener and a function to revert the opacity back to its default value (0.3) when the user releases the key. The code is very similar to the previous one:

stage.addEventListener(KeyboardEvent.KEY_UP, hideShape);
function hideShape(e:KeyboardEvent):void {
if (e.keyCode==Keyboard.LEFT) {
shapeLeft.alpha=0.3;
}
if (e.keyCode==Keyboard.RIGHT) {
shapeRight.alpha=0.3;
}
}

Maybe showShape and hideShape are not the most accurate names for the functions (the shapes do not disappear entirely), but they convey close enough what is happening.

7. This is the entire code:

var shapeLeft:Shape = new Shape();
stage.addChild(shapeLeft);
shapeLeft.graphics.beginFill(0xFF00FF);
shapeLeft.graphics.drawRoundRect(100, 175, 100, 100, 50);
var shapeRight:Shape = new Shape();
stage.addChild(shapeRight);
shapeRight.graphics.beginFill(0x00FFFF);
shapeRight.graphics.drawCircle(375, 225, 50);
var myTextField:TextField = new TextField();
stage.addChild(myTextField);
myTextField.x=175;
myTextField.y=100;
myTextField.width = 450;
myTextField.text = "Press or cursor keys";

shapeLeft.alpha=0.3;
shapeRight.alpha=0.3;
stage.addEventListener(KeyboardEvent.KEY_DOWN, showShape);
function showShape(e:KeyboardEvent):void {
if (e.keyCode==Keyboard.LEFT) {
shapeLeft.alpha=1;
}
if (e.keyCode==Keyboard.RIGHT) {
shapeRight.alpha=1;
}
}
stage.addEventListener(KeyboardEvent.KEY_UP, hideShape);
function hideShape(e:KeyboardEvent):void {
if (e.keyCode==Keyboard.LEFT) {
shapeLeft.alpha=0.3;
}
if (e.keyCode==Keyboard.RIGHT) {
shapeRight.alpha=0.3;
}
}

And the result should look like this:

Download files: ex8-keyboard.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 2. Controlling Audiovisual Objects and tagged . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s