Flash Game Development :: Lesson 1 - E

Lesson 1 - E :: Handling User Input 2 - Keyboard Input


Once Lesson 1 - D is completed, you should now be able to append user inputted text to the Display TextField by having the user click on the Button. Now, we'll proceed to handle user input from Keyboard Key presses.


We'll begin by creating two new private functions. The first function will be named RegisterKeyUp and it will not accept any parameters. The second function will be named HandleKeyUp and it will require a parameter of type KeyboardEvent. *1 Once the new functions are created, add the 'call' to the RegisterKeyUp function from the Constructor. [Figure 001]

[Figure 001]

In the RegisterKeyUp function we will add an event listener to the stage, using the addEventListener function used in Lesson 1 - D, that will handle events of type KeyboardEvent.KEY_UP and call the HandleKeyUp function. When registering event listeners, we do not specify the value of the parameters required, since they are passed on automatically by the system.


When registering Keyboard Events, it is very important to register the listener to the STAGE and not any other variable available, other wise the Movie will not be able to handle the key presses. [Figure 002]

[Figure 002]

Next, we'll code the required logic into the HandleKeyUp function.


We need to identify what key is being pressed, and determine what is the 'KeyCode' value of the ENTER key. We will do so by tracing the value of the variable e, or more specifically the value of the keyCode property of the variable e. [Figure 003]

[Figure 003]

By using the trace command we can manage to identify the key code of the ENTER Key, which is 13. The next step, is that of commenting out the trace command, and then inserting a conditional statement to check if the key which was pressed was the ENTER Key. We will make use of an IF Statement which follows the follwing syntax:


if ( CONDITION HERE )
{
//Code to Execute if Condition is TRUE
}//if


Should the User press the ENTER Key, than we want to execute the logic found within the existing HandleMouseClick function. Although it is possible to call the said function, it would not make sense, since the HandleMouseClick function is the Event Handler for Mouse Clicks which occur on the 'Button available.

Hence, we should cut the code out from the HandleMouseClick function, create a new private function named ReadUserInput which will take no parameters, and paste in the code. Finally, we'll call the new ReadUserInput function from HandleMouseClick function. [Figure 004]

[Figure 004]

Now back to the HandleKeyUp function, we'll code in the IF Statement, which will check if the keyCode property of the e variable is 13 (as per above's described logic) and call the ReadUserInput function, should condition be true. [Figure 005]

[Figure 005]

Save, Build and Run the Movie in order to make sure that the above logic works. Now, you should be able to append the inputted text from the txt_Input TextField to the txt_Field TextField by either clicking on the Sprite Button, or else by pressing the ENTER Key on the keyboard.


Now, we'll conclude our application by adding the Clear Text logic to it. We will add a new button, register some Mouse Click events to it, and update the logic found within the existing HandleKeyUp function.


Since we will now have two buttons, each with its own Click Handler, it does not make sense to make use of such a generic name for a function with a specific task (Triggering Read User Input logic). For the sake of clarity, it is better if we rename the existing HandleMouseClick function to HandleMouseClick_Read, and create the new. This way we can clearly identify which function handles the Reading of User Input and the Clearing of User Input.


So, let us begin the last set of modifications by creating a new private function named ClearUserInput which will take no parameters. This function will simply set the value of the text property of txt_Field and txt_Input and the variable msg to that of an empty string *2. Next create a new private function named HandleMouseClick_Clear which will take a parameter of type MouseEvent. This function will call the previously created ClearUserInput function.

Once the ClearUserInput function and HandleMouseClick_Clear function are ready, create a new private variable named btn_ClearInput of type Sprite, and proceed to create a new private function named InitClearButton which takes no parameters, in which we will initialize the newly delcared btn_ClearInput button. *3


The btn_ClearInput button shall be simliar to the current btn_ReadInput Button, but it will be coloured Blue, and placed beneath the Green one. This new Button will have a Mouse Click event listener registered to it, by making use of the addEventListener function, and have it listen to MouseEvent.CLICK and then call the HandleMouseClick_Clear function.


Remember to add the call to the InitClearButton function to the Constructor otherwise the button will not be initialized and added to the Movie. [Figure 006]

[Figure 006]

Finally, we'll update the logic which listens for the ENTER Key and update it to listen also for the key combination of SHIFT + ENTER Keys. Should it register this new combination, it will call the ClearUserInput function, thus behaving just as though the new Blue button was clicked. In order to implement two different possible checks we will update the existing IF statement to an IF / ELSE IF statement. *4 [Figure 007]

[Figure 007]

Click here to download the source code for this example.



*1 Make sure to have the appropriate Import commands setup ( KeyboardEvent )

*2 In order to set the value of a String Variable or Property to empty just set it to ''.

*3 Should you get stuck while implementing the new button, refer to the previous examples and adapt your code to handle the new functionality.

*4 For more information on IF Statements and their possible Operators, refer to :: http://www.kirupa.com/developer/actionscript/ifelse.htm