- Listening for Events
- Mouse Detection
- The SimpleButton Class
- Invisible Buttons
- Animated Buttons and the Movie Clip Symbol
- Complex Buttons
- Button-tracking Options
- Changing Button Behavior
- Creating Buttons Dynamically
- Keyboard Detection
- The Contextual Menu
- Creating Continuous Actions
- A Summary of Events
This chapter is from the book
This chapter is from the book
This chapter is from the book
Keyboard Detection
The keyboard is just as important an interface device as the mouse, and Flash lets you detect events occurring from keystrokes, both the downward keypress and the upward key release. This ability opens the possibility of having navigation based on the keyboard (using the arrow keys or the number keys, for example) or having keyboard shortcuts that duplicate mouse-based navigation schemes. Flash even lets you control live text that the viewer types in empty text fields in a movie; these text fields merit a separate discussion in Chapter 10, “Controlling Text.” This section focuses on single or combination keystrokes with modifiers (like the Ctrl or Shift key) that trigger a response.
Just as a MouseEvent object is created when the user does something with the mouse, a KeyboardEvent object (another subclass of the Event class) is created when the keyboard is used.
You can detect and respond to the KeyboardEvent object by first attaching a listener to the main Stage (or another object like a text field) using the addEventListener method as follows:
stage.addEventListener(KeyboardEvent.KEY_DOWN, detectText);
Next, create a function with a KeyboardEvent parameter:
function detectText(myevent:KeyboardEvent):void {
// do something in response
}
Table 4.2 details the specific properties that describe the events of the KeyboardEvent object.
Table 4.2. KeyboardEvent Properties
|
Property |
Description |
|
KEY_UP |
Happens when a key is released |
|
KEY_DOWN |
Happens when a key is pressed |
Key code values
The KeyboardEvent object is dispatched whenever any key on the keyboard is pressed. But to determine which particular key has been pressed, you have to use key code values. Key code values are specific numbers associated with each key (see Appendix A, “Keyboard Key Codes”). You use these codes to construct a conditional statement to determine a match. The key code for the spacebar, for example, is 32. So to see if the KeyboardEvent object’s key code matches 32, you write the following:
if (myevent.keyCode==32){
// spacebar was pressed
}
In this example, myevent is the name of the KeyboardEvent object and keyCode is a property whose value is the key code of the key that was pressed. This conditional statement checks if the key code of the key that was pressed matches the code for the spacebar.
Fortunately, you don’t have to use clumsy numeric key codes all the time. The most common keys are conveniently assigned as properties of another class, the Keyboard class. These properties are constants that you can use in place of the key codes. The statement Keyboard.SPACE, for example, is the number 32. Appendix A also lists all the matching Keyboard constants for the key codes.
Two properties of the KeyboardEvent object, shiftKey and ctrlKey, can be used to test whether the Shift or the Ctrl key is being held down. These properties are either true or false.
To detect a keypress
- Select the first keyframe in the Timeline, and open the Actions panel.
- In the Script pane, add a listener to the Stage with the addEventListener method, as follows:
stage.addEventListener(KeyboardEvent.KEY_DOWN, detectText);
When this listener detects a keypress, it triggers the function called detectText.
- On the next available line, write a function with the KeyboardEvent object as a parameter, like so:
function detectText(myevent:Keyboard Event):void { myarrow_mc.x += 5; }Between the curly braces of the function, put actions you want as a response. In this example, any keypress makes a movie clip called myarrow_mc move 5 pixels to the right.
- Choose File > Publish Preview > Default to test your movie
.
)
To detect a specific keypress
- Continue with the file you created in the previous task.
- Select the first frame of the Timeline, and open the Actions panel.
- Select the code in between the curly braces of the function and replace it with a conditional statement like this:
if (myevent.keyCode == Keyboard.RIGHT) { myarrow_mc.x += 5; }The double equals symbol (==) checks the equivalence of the items on either side. If they are equivalent, the actions within the curly braces of the if statement are executed.
- Choose File > Publish Preview > Default.
When you press a key, Flash dispatches a KeyboardEvent object and calls the function. Within the function, Flash checks to see if the key that was pressed matches the right-arrow key. If so, the actions are carried out. In this example, a movie clip called myarrow_mc is moved 5 pixels to the right
.
)
To detect keystroke combinations
- Continue with the file you created in the previous task.
- Select the first frame of the Timeline, and open the Actions panel.
- Change the code in between the parentheses of the if statement so that the statement reads
if (myevent.keyCode == Keyboard.RIGHT && myevent.shiftKey == true) { myarrow_mc.x += 5; }The logical and operator (&&) joins two statements so that both must be true for the entire statement to be true.
- Choose File > Publish Preview > Default.
The if statement will perform the action within its curly braces only if both the right-arrow key and the Shift key are pressed at the same time
.
)