Initializing the Game

Before examining the code structure used by the game, you learn about a few of the variables that are vital to structure of the game.

Main Timeline Overview

Open the hangman.fla file in the ch31 folder you copied earlier in this chapter. Amazingly, the major elements of this game fit into four layers on the Main Timeline. We'll talk about each of these layers in this section.

Actions

The actions layer has eight primary actions (not including the blank lines or code comments, which are excluded in the following code):

 var cgv:GameView = GameView(attachMovie("GameView", "cgv", 1, {_x: -7,     _y: -7})); var cgc:GameController = GameController(attachMovie("GameController",     "cgc", 2, {_x: 6, _y: 230})); var gm:GameModel = new GameModel(); gm.url = "words.txt"; cgc.model = gm; cgc.view = cgv; cgv.model = gm; stop(); 

The first two lines of code create an instance of the GameView and GameController clips, cgv and cgc, respectively. Note that you can cast the returned object of the attachMovie() method by using the GameView() and GameController() syntax around the method. Casting the object lets us tell the ActionScript compiler that the objects are indeed the data type we're assigning the variables. Once you type a variable, the ActionScript compiler can more thoroughly check your code for errors, letting you know if you're trying to set a nonexistent property or set a property to an invalid value. We'll discuss these instances a bit later in this chapter.

Tip 

The GameController and GameView instances placed on the cgc and cgv layers of the Main Timeline are there as placeholders, to determine where each instance should be placed, in terms of X and Y position, for the attachMovie() actions. These layers are turned into Guide layers to prevent them from exporting in the published (or tested) .swf file.

The third line of code creates the model for the game. The model is the central "brain" of the game. The model keeps track of the game state, and determines if the user has correctly selected a letter contained in the challenge phrase. The model is not a MovieClip object like our GameView and GameController instances on the stage. An instance of the GameModel needs to be created at the beginning of the movie in ActionScript code. Once an instance is created, there's only one thing to do with the model: supply it with the URL (or path) to the data provider for the game.

Note 

When the new instance of GameModel is created, all of the actions in the init() function of the GameModel class are executed. The actions in the init() function set up all of the game's status messages displayed to the user during game play. These messages are stored in the labels property of the GameModel class.

In our game, the data provider is a simple text document named words.txt. If you open the words.txt file in a text editor, you can see that the structure is simple: Each TV show title is on its own line in the document.

The url property of the GameModel class is known as a getter/setter property, which enables you to process further actions when a new value is set to the property. Once a URL is supplied to the GameModel, a chain of events is automatically put into motion within the class:

1. The loadWords() function is invoked. This function creates a new LoadVars instance, and loads the text file into the model.

2. The onWordsLoaded() function is called when the text finishes loading, which converts each line into a separate element in the wordList array property of the GameModel class.

3. The wordList property of the GameModel class is an array containing the words (or more appropriately, challenge phrases) to guess. For our game, the user must guess the names of popular TV shows.

   Note 

   Some of the challenge phrases contain a space; if a challenge phrase comprises several words, each word is placed on a separate line in the GameView class as defined by the displayWord() function of that class. This additional feature makes the challenge phrase easier to guess as well as creates a more attractive layout.

4. After the wordList property is set, the checkLocalData() function within the GameModel class is invoked. Here, a SharedObject instance named so, which was created in the init() function of the GameModel class, is checked to see if the user previously played the game. If the user's name, win score, or loss score is found in the SharedObject's data storage, the game's state (controlled by the gameState property) is set to "showstats". The gameState getter/setter property then broadcasts a new event to any listener of the model. If the user is playing the game for the first time, the gameState property is set to "init" and the model broadcasts the change to any listener as well.

Going back out to the actions layer on the first frame of the Main Timeline, the remaining lines of code set up the GameController and GameView instances as listeners of the GameModel instance, gm:

 cgc.model = gm; cgc.view = cgv; cgv.model = gm; 

If you go inside of the GameController and GameView class files and search for the model getter/setter properties, you'll see that the classes register themselves as listeners for specific events from the GameModel class. For example, in the GameController class, the model setter property contains the following code:

 public function set model(gm:GameModel):Void {    _model = gm;    gm.addEventListener("letterPicked", Delegate.create(this, onLetterPicked));    gm.addEventListener("gameState", Delegate.create(this, onGameState)); } 

Here, there are two events that the GameController class needs to listen for: "letterPicked" and "gameState". When the user picks a letter, the GameModel class broadcasts a "letterPicked" event. When the GameController class hears this event, the onLetterPicked() function within the GameController class is invoked.

The GameController class also has a view property, which designates which MovieClip instance is responsible for displaying the game state to the user. On frame 1 of the actions layer of the Main Timeline, you set the view property to the cgv instance (an instance of the GameView class). Finally, we also assign the GameModel instance, gm, to the GameView instance, cgv. If you open the GameView class file (GameView.as) and find the model setter property, you see which events the GameView class listens for:

 public function set model(gm:GameModel):Void {    _model = gm;    gm.addEventListener("wordUpdate", Delegate.create(this, onWordUpdate));    gm.addEventListener("hangManUpdate", Delegate.create(this, onHangManUpdate));    gm.addEventListener("gameStatus", Delegate.create(this, onGameStatus));    gm.addEventListener("hitStatus", Delegate.create(this, onHitStatus));    gm.addEventListener("gameState", Delegate.create(this, onGameState));    gm.addEventListener("scoreUpdate", Delegate.create(this, onScoreUpdate)); } 

A Quick Overview of Events and the EventDispatcher Class

If you write your ActionScript 2.0 class files according to Macromedia's specifications, you should add Event metadata at the top of each class file. If you open the class files associated with this game, you find the events each class broadcasts at the top of the script, just below the import declarations. The syntax for declaring an event is:

 Event[("eventName")] 

where eventName is the String value used in the dispatchEvent() function calls you make in the class. In order to use the event listener framework, you need to include the following action in your class constructor or in a function that is called within the class:

 mx.events.EventDispatcher.initialize(this); 

When you add this code to your class, you should also add the following variable declarations to the class file. You can find these variables in most of the class files used for the game:

 private var dispatchEvent:Function; public var addEventListener:Function; public var removeEventListener:Function; 

You don't need to define anything other than the function names, because the EventDispatcher class automatically creates this methods for your class when you use the EventDispatcher.initialize() method within your class.

The GameModel class broadcasts several events that the GameView listens to. Each event is assigned to a unique handler within the GameView class using the Delegate class.

The Shared Font Layer

This layer contains a Static text block that uses the labelFont symbol in the Library panel. This Font symbol imports the Futura font face from the shared_fonts.swf file also located in the ch31 folder. The shared_fonts.swf file must accompany the hangman.swf file on the Web server or other runtime location. The Futura font face is specified as "labelFont" in the TextFormat objects initialized in the createStyles() function of the GameView class. All of the TextField instances created by the GameView class use the shared Futura font.

The cgc Instance

This instance is a MovieClip object, but it belongs to the GameController class. To see how the GameController.as class file is linked to the GameController symbol, open the Library panel (Ctrl+L or z+L), right-click (or Ctrl+click on Mac) the GameController symbol, and choose Linkage in the contextual menu. In the Linkage Properties dialog box (shown in Figure 31-3), the GameController class name is specified in the AS 2.0 Class field.

Figure 31-3: The Linkage Properties dialog box

Note 

You don't need to include the .as file extension when you specify a class file. Also, if you nest a class file within another folder relative to the Flash document file (.fla), you can specify the folder path in dot syntax. For example, if you put the GameClass.as file in a folder named games, then your AS 2.0 Class value in the Linkage Properties dialog box would be games.GameController.

The cgv Instance

This instance is created from the GameView symbol. The instance is named cgv, and is created in the frame 1 script we discussed earlier in this chapter. If you look at the linkage properties for the GameView symbol, you can see that the symbol is linked to the GameView.as class file.