• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Keyboard Input

The keyboard is just as important an interface device as the mouse, and Flash lets you detect events occurring from single key presses. This opens up 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's entered by the viewer into empty fields in a movie; however, these text fields are not usually associated with events and merit a separate discussion in Chapter 10. Here we will focus on single keystrokes that trigger things to happen using the Key Press event and the Key object.

Key Events

The Key Press event is an option in the Parameters area of the on action (Figure 4.36). To use the Key Press event, you need to create a button symbol and place an instance of that button in the Timeline. The button instance acts just as a container for the event and associated actions, so you should either make the button invisible or place the instance just off the Stage so you can't see it in the final exported SWF.

Figure 4.36. The Parameters area of the on action contains the Key Press event.


To create a Key Press event:

1.
Create an invisible button symbol as demonstrated earlier in this Chapter.

2.
Place an instance of the button on the Stage or just off the Stage in the first keyframe (Figure 4.37).

Figure 4.37. Placement of the button instance for a Key Press event, just off the Stage.


3.
Select the instance, and open the Actions panel.

4.
Choose Actions > on.

The on (release) event handler appears in the Script window.

5.
In the Parameters area, deselect Release and select Key Press.

6.
Choose a specific keyboard character or symbol by simply typing it into the empty field next to the Key Press checkbox (Figure 4.38).

Figure 4.38. The Key Press field lets you enter a single character—in this case, the right arrow.


7.
Select an action that will be executed upon detection of the key press (Figure 4.39).

Figure 4.39. The Go To action is selected with the Type set to Next Frame.


8.
From the Control menu, choose Test Movie to see how the Key Press event responds (Figure 4.40).

Figure 4.40. This movie has four successive images on the Stage. The on (keyPress "<right>") event with the response set to nextFrame allows you to advance to the next image by simply pressing the right arrow key.


To create multiple Key Press events:

1.
Select the button instance that contains the first Key Press event.

2.
Open the Actions panel.

3.
Add a separate on action (Figure 4.41).

Figure 4.41. A new on action is added after the end curly brace of the first on action.


4.
In the Parameters area of the second on action, change the event to Key Press and select another key.

5.
Add a different action to be executed upon detection of the second key press (Figure 4.42).

Figure 4.42. Another Key Press event requires two separate on action statements.


Although multiple keystrokes can be handled with one button instance, each one of them requires a separate on statement.

To combine a Key Press event and a Mouse event:

1.
Create a button symbol that has its Up, Over, Down, and Hit states defined.

2.
Place an instance of the button on the Stage.

3.
Select the instance and open the Actions panel.

4.
Choose Actions > on.

5.
In the Parameters area of the on action, keep the Release checkbox selected and also select the Key Press checkbox.

6.
Select an action for the event handler, and test your movie (Figure 4.43).

Figure 4.43. The right arrow button is assigned two events, an on (release) and an on (keyPress "<right>") event. Either event will advance the movie to the next frame.


Either clicking the button on the Stage or pressing the key on the keyboard will make your movie perform the action you selected.

Tip

When your Flash movie plays inside a browser, you must first click on the movie before any Key Press events can be detected. This is an issue of window "focus."


Tip

The Escape key and function keys are not valid keystrokes.


Tip

The Key Press event does not recognize combination keystrokes. However, Flash does distinguish between upper- and lowercase letters.


The Key Object

The Key object is an ActionScript class that handles the detection of keystrokes on the keyboard (Figure 4.44). In Chapter 3, you learned that you must instantiate a class before you can use it. However, the Key object is one of a few top-level objects that don't require a constructor function to create an instance before you can use it.

Figure 4.44. The Toolkit window in the Actions panel contains the methods and properties of the Key object.


The Key object has methods that allow you to retrieve the exact key that was last pressed or to test whether a certain key was pressed. The most common method is isDown, whose argument is a specific key on the keyboard. This method checks if that key has been pressed, and if it has, returns a value of true.

All keys in Flash have a specific number associated with them, known as their key code value (Appendix B). You use these codes in conjunction with the isDown method to construct a conditional statement that creates the keyboard interaction. For example, Key.isDown(32) returns a true or a false depending on whether the spacebar (whose key code value is 32) is pressed.

The Key Object vs the Key Press Event

Why would you use the Key object and its methods and properties instead of a button with a Key Press event? It's really a matter of sophistication versus ease of use and simplicity. The Key object is much more powerful than a Key event assigned to a button instance because you can construct more complex ActionScript code around the Key object. For example, you can test for key combinations by requiring two isDown methods to be true before performing certain actions as a response. Using key code values also opens up virtually the entire keyboard. The function keys and the Escape key have key code values, so they are available to the Key object.

However, Key Press events are much easier to use. If your Flash movie doesn't require much in terms of keyboard interaction, or if you simply want to have a keyboard shortcut accompany a Mouse event, then use the on (keyPress) action.


Fortunately, you don't have to use clumsy key codes all the time. The most common keys are conveniently assigned as properties of the Key object. These properties are constants that can be used in place of the key codes. For example, the statement Key.isDown(32) is the same as Key.isDown(Key.SPACE).

For the full list of Key object methods and properties, refer to Appendix A.

To use the Key object isDown method:

1.
Select the first keyframe on the Timeline, and open up the Actions panel in Normal mode.

2.
Choose Actions > if.

The incomplete if statement appears in the Actions List, with an empty Condition field in the Parameters pane (Figure 4.45).

Figure 4.45. The if statement has a condition that it tests. If that condition is true, then the actions within the curly braces will be carried out.


3.
Select the empty Condition field in the Parameters area.

4.
Choose Objects > Key > isDown, or drag the isDown method into the Condition field.

The isDown method appears in the Condition field. The argument keyCode is required for this method (Figure 4.46).

Figure 4.46. The Condition field in the Parameters area of the if statement. The method isDown expects a key code value.


5.
Choose Objects > Key > SPACE, or drag the SPACE property into the Condition field.

The property Key.SPACE appears as the argument for the isDown method (Figure 4.47).

Figure 4.47. The property key.SPACE is in place as the key Code for the method isDown.


6.
Choose a basic action as the response for this conditional statement (Figure 4.48).

Figure 4.48. The Script window shows the response if the spacebar is pressed.


7.
Insert a new keyframe after the first one, and assign the frame action gotoAndPlay(1).

This second keyframe loops back to the first so that the conditional statement is continuously checked. This is the simplest way to have the if statement tested (Figure 4.49). We'll explore more refined ways of dealing with conditionals and Action loops later. For now, you are able to test the isDown method and different Key object properties using this basic loop.

Figure 4.49. This movie loops between frames 1 and 2 until the spacebar is pressed.


To create key combinations with the Key object isDown method:

1.
Select the first keyframe of the previous task, and open the Actions panel in Normal mode.

2.
Select the if statement.

The Parameters area shows the Condition with the Key object method and property.

3.
In the Parameters area, click the Condition field and type in a space, then choose Actions > Operators > &&. Type in another space (Figure 4.50).

Figure 4.50. Add the operator && from the Toolkit window or simply enter it into the Condition field after the first Key method.


4.
In the Condition field after the && operator, choose Objects > Key > isDown.

The isDown method appears in the Condition field after the && operator. Another argument is required for this method (Figure 4.51).

Figure 4.51. The second isDown method follows the first, connected with the && operator.


5.
Choose Objects > Key > CONTROL, or drag CONTROL into the Condition field (Figure 4.52).

Figure 4.52. Both the spacebar and the Control key have to be pressed before this condition can be met.


The property key.CONTROL appears as the argument for the second isDown method. The conditional will only perform the action within the curly braces if both the spacebar and the Control key are pressed.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint