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

Flash Game Development :: Lesson 1 - D

Lesson 1 - D :: Handling User Input


After having completed Lesson 1 - C, you should now be able to alter the values of Variable Properties, and making use of 'external' variables to modify the original variables. Continuing on the previous lesson's example, we will proceed to modify our code to handle User Input.


We will start by cutting the previous code that we had in the Constructor, and pasting it in a new private function named InitTextField. This function will not accept any parameters. *1 Finally, make sure to call the InitTextField function from the Constructor. [Figure 001]

[Figure 001]

Next, we'll create a new private class variable named txt_Input of type TextField. Once the variable is declared, proceed to create a new function named InitInputField, which will accept no parameters as well, and then proceed to initialize the txt_Input variable in it.


Once initialized, set the following properties: Height: 20, Width = 100, Border = true, X = 10, Y = 70. In order for this TextField to be able to accept user input, we need to set its type property to TextFieldType.INPUT. *2 [Figure 002]

[Figure 002]

Save, Compile and Run the Movie, and you should be able to see two Text Fields, both having their Border drawn. The second TextField should also accept User Input as seen in the following Figure. [Figure 003]

[Figure 003]

The next step is that of creating a button which will take the text which the user has inputted and display it in the TextField above. In order to do this, we will make use of the Sprite object, draw a Rectangle on it and paint it Green.


To do this we'll create a private class variable named btn_ReadInput of type Sprite. *2 Then we'll create a new function named InitReadButton, which will initialize the button and set the following Properties: Width = 50, Height = 20, Border = true, Colour = Green, X = 60, Y = 100. [Figure 004]

[Figure 004]

As you can see from the code above, we are drawing in the rectangular shape that we want by making use of the Graphics property of the Sprite Object. Save, Compile and run the Movie in order to make sure that the Green Button is being displayed exactly where we want it. [Figure 005]

[Figure 005]

Finally, we shall be registering the Mouse Click event on the Button variable btn_ReadInput in order to have it read the user input, and add it to the text above. We will do so by registering an Event Handler to the MouseEvent.CLICK *2 event as seen in Line 40 and name it HandleMouseClick.


Then we'll proceed to create the Event Handler function named HandleMouseClick, which will accept one parameter of type MouseEvent. In the HandleMouseClick function, we'll add the value of the text property of the txt_Input field to the msg String variable, and then clear out the text in txt_Input. Finally, we'll set the text value of the txt_Field variable to the value contained in msg. [Figure 006]

[Figure 006]

In the end just save, compile and run the Movie and you should be able to 'read' the user input from the txt_Input TextField, and append it to the text found in the txt_Field TextField. [Figure 007]

[Figure 007]

Click here to download the source code for this example.


*1 Note that the code where we made use of the setTextFormat function has been omitted, since we will be using the defaultTextFormat method. Also, the Center Alignment line has been commented out.

*2 Make sure to have the appropriate Import commands setup ( TextFieldType, Sprite, MouseEvent )