- Flash AS3 -

Monday, August 1, 2011

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.

Labels: , , ,

0 Comments:

Post a Comment



<< Home