Flash Game Development :: Lesson 2 - A

Lesson 2 - A :: Drawing in Sprites

Now that we have covered most of the Basics of User Input and basic Text handling in Lesson 1, we can proceed to start working and drawing on Sprites.


Let's begin by creating a Controller class. This class will not contain any drawing logic or any User Interface (UI) related code, however it will be used to control the objects that exist in the movie. Make sure to link the Movie to it, and save both the '.fla' and the '.as' file.


Next create a new AS3 class named 'Face' and make sure it extends the Sprite class. Create it's Constructor and leave it blank for now. Save the Face class, and switch back to the Constructor of the Controller Class. Create an instance of the Face class and add it to the Controller class. [Figure 001]

[Figure 001]

Switch to the Face class, and create the following four private variables, of type Sprite, named eyeLeft, eyeRight, nose, and mouth.


Once the variables are declared, create four private functions which require no parameters named InitLeftEye, InitRightEye, InitNose, and InitMouth. Once the functions are created, add a call to them to the Constructor. [Figure 002]

[Figure 002]

Next we'll proceed to initialize the Eyes. In order to draw the eyes, we'll just make use of the graphics property of the eyeLeft and eyeRight variables, and draw a circle on them. The centre point of the circle will be the coordinates 0, 0 (X,Y) of the Sprite. We'll set the radius of the eye to 20, and make sure to colour them black.


We must make sure that we initialize the proper variables in the respective functions, i.e. the Left Eye should be initialized in the InitLeftEye function and the Right Eye should be initialized in the InitRightEye function. [Figure 003]

[Figure 003]

Now, let's initialize and draw in the Nose. We'll do so by making use of the drawLine function available to us through the Graphics object. the point of origin of the nose will be the coordinates 0, 0 (X,Y) of the Sprite. From there we'll draw a Line straight down at an angle to X = 30 and Y = 45, and then draw another Line to the coordinate X = 0 and Y = 45.


Before we draw the Lines, though, we need to make sure that we set the LineStyle property, otherwise the drawLine function will attempt to paint with 'invisible ink'. So let us set the LineStyle to a Tickness of 1 and the Colour 0x000000. [Figure 004]

[Figure 004]

Now for the tricky part, lets make the face smile.


Drawing curves is a little tricky. We'll make sure that the mouth is centered on the X = 0, Y = 0 coordinates. In order to do so, we first move our point of origin from where the curve will begin to X = -40, Y = 0. Then we make use of the curveTo function to draw a curve to the X = 40, Y = 0 position, bending using the Coordinates X = 0, Y = 30.


Curves in Flash are drawn using Bezier Curves *1. Just as before, remember to set the Line Style before drawing anything on the Sprite. [Figure 005]

[Figure 005]

Now, if you review our code, although we have initialized our Sprite variables, and drawn on them, we have not yet placed them in our movie. In order to do so, let us create a new private function named PlaceSprites which takes no parameters. In this function we will add the Sprites to the Face object, and move them to their proper coordinates.


Again, we will make sure that the centre point of our face is the middle of the face, and not the Top Left corner, thus we will set the following coordinates to the Sprites.

• The Left Eye will have an X and Y position of -35, and -30.
• The Right Eye will have the X and Y position of 35, and -30.
• The Nose shall be positioned at an X value of -5, and a Y value of -10.
• The Mouth shall be place at an X value of 0, and a Y value of 60.

Finally, make sure that you call the PlaceSprites function in the Constructor of the Face Class. [Figure 006]

[Figure 006]

Once all the above work is ready, just make sure to update the Face object's location in the Controller object to be centred on X = 100, and Y = 100, and that should be it. If we Save, Compile and Run our movie we should have managed to get a decently formed face on our screen. [Figure 007]

[Figure 007]

Click here to download the source code for this example.


*1 For more information on Bezier Curves visit here

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.