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 )

Flash Game Development :: Lesson 1 - C

Lesson 1 - C :: Properties


After having completed Lesson 1 - B, you should now be able to make use of Variables, and call functions without a hitch. Continuing on the 'Hello World' example, we will proceed to modify our code.


Let us start by creating a private class variable named txt_Field of type TextField, then proceed to the constructor in order to initialize it and set it's text property to the value of the msg String variable. If we compile and run the movie, we will get the same result obtained in Lesson 1 - B. [Figure 001]

[Figure 001]

Next we will set some properties of the txt_Field object. We will set the values of the following properties: Height = 50, Width = 100, Border = true, X = 10 and Y = 10. Once the properties are set, if we compile, and run the movie we'll get a TextField who's border is visible, and height and width defined. [Figure 002]

[Figure 002]

As you can see, the TextField text is pretty plain using the default Font and Color. Next we will create a TextFormat object which we will then apply to the TextField. Create a new private class variable named txt_Format of type TextFormat, and make sure that you have the required import command set up top. [Figure 003]

[Figure 003]

Proceed to initialize the variable and set the following properties as follows:
Font = Verdana, Size = 14, Color = Green (0x00FF00), align = CENTER (TextFormatAlign.CENTER). [Figure 004]

[Figure 004]

Once the properties are set, assign the TextFormat Object to the TextField variable txt_Field, by setting the defaultTextFormat property of txt_Field.

Please note that it is of upmost importance to define this property, i.e. defaultTextFormat, BEFORE setting the Text value of the TextField, otherwise the written Text will not be Styled.

[Figure 005]

If we save, compile and run our Movie now, we should get the original TextField, containing the same text as before, but this time, it is formatted in a different manner. [Figure 006]

[Figure 006]

For those of you who are curious, there is another method that can be used to set the Text Format of the said TextField. The method in question is setTextFormat.


The primary difference between defaultTextFormat and setTextFormat is that the prior is a property while the latter is a function.

This means that we set the defaultTextFormat by assigning a value to it while we call setTextFormat by passing it values for the parameters it requires. [Figure 007]*

[Figure 007]

The second and most influential difference between the two is that, the defaultTextFormat method sets the TextFormat to be used to all sub sequent text contained within the TextField variable.

While the setTextFormat method sets and defines the text format for the text which is currently present within the TextField variable. Once the value changes, the text format is lost.


Click here to download the source code for this example.


*1 Note the difference between Lines 36 & 37 and 40 & 41. Remember that the '//' are keywords used to define the start of commenting.

Flash Game Development :: Lesson 1 - B

Lesson 1 - B :: Hello World.


Make sure to have followed the steps mentioned in Lesson1 - A before proceeding forward. Open up the Flash Movie file (.fla), and the Action Script file (.as).


We will start off by storing the message that we want to display on screen in a Class Variable named msg. This class variable will be a variable of type String, and for now we will assign it the 'private' access modifier(*1) keyword. [Figure 001]

Make sure to place the variable within the Step_01 class but not within the Constructor function.

[Figure 001]

Now take a step back, and review the code. Till now, we have declared the variable named msg, however it is not yet initialized, since we did not specify a value for it. Hence, the next step will be that of supplying a value to the msg. We shall initialize the variable within the Constructor method by assigning it the value 'Hello World'. [Figure 002]

When setting up String values, always remember to place the Text you wish to enter within the Quotes (').

[Figure 002]

So, till now, we should have managed to declare a variable object of type String, named msg and initialize it by assigning it a String value. Let us now proceed to trace the value of the variable so that we make sure that we have implemented the above code correctly.

The inbuilt trace command is a function which takes the value passed as a parameter and displays it in the Output window.


In order to call a function in Action Script 3, just like other programming languages, we need to write the code in the following format:

NAME_OF_FUNCTION ( PARAMETER_VALUES );

In the case of the trace command, we need to replace the NAME_OF_FUNCTION section with trace, and the PARAMETER_VALUES with the object we wish to display, i.e. the msg variable. [Figure 003]

[Figure 003]

Next, save then, hit CTRL + ENTER, to compile the Flash movie, and run it. Once the flash movie loads, you should be presented with a blank white screen, and in the Output window, you should be able to see the value contained within the msg variable. [Figure 004] Unless you have inputted a different text value in the msg variable, you should see 'Hello World'.

[Figure 004]

Now that we have confirmed that the msg variable contains the value which we specified, we can proceed to display the value within a TextField object. Go in the Constructor function, and below the trace command which we created earlier, declare a new variable named txt of type TextField. Proceed to initialize this variable by setting its value as 'new TextField();' [Figure 005]

The TextField class is used to display text within Flash Movie. It can be found in the 'flash.text' package. When using the TextField class, always make sure that its import line is present in the class file. (See Fig. 5 - Line 4)

[Figure 005]

If we save, compile and execute the Movie now, we will not be able to view the TextField object on the Movie. The reason being, is that we still need to execute two important steps. [Figure 006]


- Step 1 -

Currently, we have an initialized TextField object contained within the txt variable. However, it does not contain any data which can be displayed on screen. Thus, we need to provide it with text data that it will contain and display. To do so, we need to set the value of its text property to the value contained within the msg variable. (Fig.6 - Line 19).


- Step 2 -

After having given the text property a specific value, if we save, compile and run the movie, we would still be unable to see the TextField on screen. The reason being, is that even though we have an instance of the TextField object in the txt variable, we have not yet added it to the 'visual' part of the Flash Movie, i.e. the stage.

In order to do so, we need to make use of the addChild *2 function, which takes one parameter. Just like before, we'll call the addChild function by using the above mentioned format:

NAME_OF_FUNCTION ( PARAMETER_VALUES );

This time, we will replace the NAME_OF_FUNCTION section with addChild, and PARAMETER_VALUES with the TextField variable txt (Fig.6 - Line 21).

[Figure 006]

Finally, we can save, compile and execute the movie (press CTRL + ENTER) and the TextField variable should be displayed on screen. [Figure 007]

[Figure 007]

Click here to download the source code for this example.



*1 There are four different access modifier values available to Flash Action Script which are private, public, protected, and internal. A Blog entry on Action Script 3 Access Modifiers should be coming soon, however feel free to research on the subject on your own and consult with me any of your findings.

*2 The addChild function is present in classes like MovieClip or Sprite which contain within them the logic needed to display controls on the screen.

Flash Game Development :: Lesson 1 - A

Lesson 1 - A :: Preparing for Hello World.


Begin by opening Flash, and create a new movie by clicking on the 'Flash File (Action Script 3.0)' [Figure 001] button.

[Figure 001]

Once the Movie loads up, proceed to save your project immediately by pressing CTRL + S.


Make sure to save the project in a blank folder, and name the project file (.fla) 'Lesson1_A'. Double check your selected directory and make sure that you have an FLA file named 'Lesson1_A'. [Figure 002]

[Figure 002]

Next, proceed to the Movie Properties and enter 'Step_01' in the 'Class Name' property text-box. [Figure 003]

[Figure 003]

Click on OK for the Information Box which pops up as soon as you deselect the 'Class Name' property text-box. [Figure 004]

This information box is informing you that the Class 'Step_01' does not yet exist and so, Flash will create a dummy class of type MovieClip should you not provide it with the Class Specifications yourself.

[Figure 004]

Once the Information box is closed, proceed to Click on the Pencil button, next to the 'Class Name' property text-box.

If you are using Flash CS4, you will need to create a blank AS3 file (.as) and save it using the name you specified in the property, making sure it is in the same folder of the .fla file. Once that is done, proceed to click on the Pencil icon to make sure that the fla and the as files are ‘linked’. [Figure 005]

[Figure 005]

Another message box should pop up, and choose the first option, so that you will now edit the new Class in Flash CS5. You should now be on the code editor screen and should have the basic Step_01 Class defined. [Figure 006] *

[Figure 006]

Now Save the newly created class by pressing CTRL + S. Make sure to place the file in the same directory as the initial FLA file named 'Lesson1_A'. Also, you need to make sure that the Action Script file is named exactly like the name we have previously specified in the 'Class Name' property text-box as seen in Fig. 4.

If you switch back to the directory in which you are storing the project, you should have two files now; the initial 'Lesson1_A.fla' and the freshly created 'Step_01.as' file. [Figure 007]

[Figure 007]

Good. Now we have the basic structure with which to work on. The above mentioned steps should be followed whenever we want to create a new Flash Movie, and create it's initial Movie Class.

Finally, if you wish to download the Source Files created in the above steps, click here.

* Please note that the screen-shots were taken from Adobe Flash CS4, and thus some of the code might not be exactly the same, but the Class Definition, and Constructor should be similar.