Building the Interface

As you've seen in earlier chapters of this book, ActionScript can create a wide variety of runtime assets, such as text fields and sounds. We take advantage of this feature to create the rest of our assets.

Creating Text Fields

The createTextField() method creates a new empty text field as a child of a MovieClip object. Note that the createTextField() method takes several parameters: the instance name, depth, x position, y position, width, and height.

One of the core functions of the game is the onGameState() function, found in the GameView class. This function controls much of the layout for each state of the game, as shown in the following code:

 private function onGameState(oEvent:Object):Void {    trace("GameView.onGameState >");    var sState:String = oEvent.target.gameState;    switch(sState){       case "init":          cleanStage();          onFirstPlay();          break;       case "showstats":          cleanStage();          onNextPlay();          break;       case "start":          cleanStage();          onFirstRound();          break;       case "newround":          onNextRound();          break;       case "lost":          onLost();    } } 

Whenever the GameModel's gameState property changes, the onGameState() function is invoked. The first thing this function does is retrieve the current state of the game, expressed in the gameState property value of the GameModel (oEvent.target). For each value of the gameState property, the switch() statement directs the appropriate course of action. For example, when the game player runs the game for the very first time, the gameState property is equal to "init". As such, the onFirstPlay() function within the GameView class is invoked, and creates two TextField instances: one to create some descriptive text and another to accept the input from the user's keyboard. In the following code, the tName field displays the text "Please Enter Your Name:" (as retrieved from the labels property in the GameView class), and the tNameEntry field is displayed as an Input text field. The mcBtn instance is a button that broadcasts a "startClicked" event. Since the GameController instance, cgc (on the Main Timeline), is listening for this event, the cgc instance will control the model, telling it to advance to the next game state.

Note 

All items created with game state changes are added to the displayedItems property of the GameView class, so that the cleanStage() function in the GameView class knows what items to remove between game states.

 private function onFirstPlay():Void {    trace("GameView.onFirstPlay >");    tName = createTextField("tName", getNextHighestDepth(), 46, 232, 200, 20);    with(tName){       autoSize = "left";       embedFonts = true;       antiAliasType = "advanced";       selectable = false;    }    tName.setNewTextFormat(tfOpening);    tName.text = labels["name"];    // add tName field to displayed items    displayedItems.push(tName);    tNameEntry = createTextField("tNameEntry", getNextHighestDepth(), 50,   Note  
The createStyles() function is invoked in the init() function of the GameView class, as soon as the cgv instance appears on the stage of the Flash movie at run time.
      
When the onFirstRound() function is invoked from the onGameState() function of the GameView class, three TextField instances are created, as shown in Figure 31-4.
  
  
 Figure 31-4: The tStatus field displays status messages initiated from the GameModel class throughout the game. The tLost and the tWon instances display the score. 
  
 
 
 Creating the Alphabet
 
Movie Clips can be created dynamically using the createEmptyMovieClip() method. This method takes two parameters: an instance name and a depth. Furthermore, with ActionScript's event framework, Movie Clips can be used as buttons as you learned in earlier chapters.
 
We use the alphabet as both visual feedback of the user selection and an input device for the user to make a selection. To take care of both aspects, we are going to create dynamic Movie Clips and then create text fields as their children.
 
Because the functionality of each letter button in the alphabet controller is identical, we created a dedicated ActionScript 2.0 class named GameLetter (as defined in the GameLetter.as file). This class is linked to the GameLetter symbol in the document's Library panel. This symbol is attached in the createAlphabet() function of the GameController class, shown in the following code:
 
 
 private function createAlphabet():Void {    mcAlphabet = this.createEmptyMovieClip("mcAlphabet", 1);    var nXPos:Number = 0;    for (var i:Number = 65; i <= 90; i++) {       var sLetter:String = String.fromCharCode(i);       var cgl:GameLetter = GameLetter(mcAlphabet.attachMovie("GameLetter",           "cgl_" + sLetter, mcAlphabet.getNextHighestDepth(), {_x: nXPos,           letter: sLetter}));       cgl.addEventListener("click", Delegate.create(this, onLetterClicked));       nXPos += 14;    } } 
  
  
The for() loop of this function cycles through the entire alphabet, creating a new instance of GameLetter for each letter. You can create ASCII characters using the String.fromCharCode() method, which uses the number corresponding to a letter and returns its corresponding string (A=65, B=66, and so forth). Each letter of the alphabet is displayed in the GameLetter instance, as shown in Figure 31-4. The GameController is registered as the event listener for the "click" event for each GameLetter instance created.
  
 GameLetter's sole purpose is to create a clickable TextField instance. When an instance of GameLetter is clicked by the user, its "click" event is broadcast to any listeners. The only listener for each GameLetter instance is the GameController class. When the GameController detects this event, the onLetterClicked() function is invoked:
 
 
 private function onLetterClicked(oEvent:Object):Void {    if (controlsEnabled) model.checkLetter(oEvent.target.letter); } 
 
  
If the game is not between rounds, the controlsEnabled property of the GameController is set to true, allowing the checkLetter() function of the GameModel class to be invoked. The letter property of the clicked GameLetter instance is retrieved, and passed to the checkLetter() function. This function determines whether or not the clicked letter occurs in any of the character positions of the current challenge phrase. If one or more occurrences is found, the GameView class resets the displayedWord property to a new value, which, in turn, fires a wordUpdate event to the GameView class. There the new displayedWord property value is retrieved and rebuilt in the mcWord instance.