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 )