How to make a dynamic hangman game in Flash 8 with XML and ActionScript — part 4

How Flash parses the XML data

58. Add this ActionScript code after all the existing one:

function parseWords():Void {
if (wordsLoader.firstChild.nodeName == "gamedata") {
var rootNode:XMLNode = wordsLoader.firstChild;
for (i=0; i<rootNode.childNodes.length; i++) {
if (rootNode.childNodes[i].nodeName == "word") {
var currentWord:String = rootNode.childNodes[i].firstChild.nodeValue.toString();
words.push(currentWord);
}
}
}
}

As I mentioned before, the parseWords function will be called upon once the XML data has been successfully loaded. The first line inside this function is a conditional if statement:

if (wordsLoader.firstChild.nodeName == "gamedata") {

...which checks to see if the first child of the wordsLoader XML object is named (nodeName) "gamedata". The first child of the wordsLoader XML object is indeed named "gamedata". On the previous page, I have shown you that an XML file can contain only one root node. The root node is the first child (the first element in the XML file's hierarchy) of the XML object. In this case, the root node is <gamedata>.

So, there is no need for an if/else conditional statement — an if condition will do, because Flash will read it and see that it evaluates as true. So, it will perform all the code within the conditional statement's curly brackets:

var rootNode:XMLNode = wordsLoader.firstChild;
for (i=0; i<rootNode.childNodes.length; i++) {
if (rootNode.childNodes[i].nodeName == "word") {
var currentWord:String = rootNode.childNodes[i].firstChild.nodeValue.toString();
words.push(currentWord);
}
}

The first line creates the variable rootNode, which is of the XMLNode type. This variable is created just so that you don't have to write wordsLoader.firstChild each time (remember, firstChild is the gamedata root node in this lesson's example). It is merely a shorthand name.

And then the for loop begins, which is used to read all the words that will be used in the game and store them in an array:

for (i=0; i<rootNode.childNodes.length; i++) {
if (rootNode.childNodes[i].nodeName == "word") {
var currentWord:String = rootNode.childNodes[i].firstChild.nodeValue.toString();
words.push(currentWord);
}
}

This loop starts with the variable i set to 0 (zero). The loop will make iterations (i.e. it will repeat itself) as long as its condition evaluates as true. And it will increase the value of i with each loop (i++). The condition is that i must be lesser than the number of the child nodes of the root node. The number of the child nodes of root node is retrieved by calling upon childNodes' length property:

i < rootNode.childNodes.length

In this particular example, this means that i must be lesser than 14. Why? Because there are 14 child nodes inside the gamedata node:

<?xml version="1.0"?>
<gamedata>
<word>dog</word>
<word>elephant</word>
<word>cat</word>
<word>lion</word>
<word>giraffe</word>
<word>wolf</word>
<word>ostrich</word>
<word>penguin</word>
<word>whale</word>
<word>raccoon</word>
<word>tiger</word>
<word>camel</word>
<word>snake</word>
<word>lizard</word>
</gamedata>

As you can see, each child node of the root node has the name word. This is used by the if conditional statement contained within the loop:

if (rootNode.childNodes[i].nodeName == "word") {
var currentWord:String = rootNode.childNodes[i].firstChild.nodeValue.toString();
words.push(currentWord);
}

If the name of the current child node equals "word", the actions inside the if condition will be performed. Of course, Flash replaces the construct [i] with the current loop iteration number (0, 1, 2, 3 etc), so that it can check each child node: the first one, second... until the last one (which is the fourteenth in this case). Since each child node inside the root one really is named "word", the following two lines will be executed:

var currentWord:String = rootNode.childNodes[i].firstChild.nodeValue.toString();
words.push(currentWord);

A new variable called currentWord is created and it is of the String type (meaning it holds a text value). Inside it, the name of the current child node node will be stored:

rootNode.childNodes[i].firstChild.nodeValue.toString();

As you can see in the ActionScript line above, the toString() method is used to convert the value of the child element of each root node's child node to a piece of text. Because this is XML data (nodeValue), and not text data, it has to be converted to a String so that you can use it later in the game. If this XML order puzzles you, here's a nice graph explaining the hierarchy inside the XML object:

Once this value is retrieved and converted to text, it is stored inside the words array (which you created in the first lines of your code):

words.push(currentWord);

The push method inserts an element to the end of an array. Since the array is completely empty at the beginning, the first element will be placed on the first place, the second one after that, etc. So, with each iteration of the loop, a word pulled out from the words.xml file will be placed inside the words array. Nice! And easy, as you can see. All you have to learn to be able to make Flash read data from an XML file is write some conditional statements and a loop and that's it.

Ok, after Flash has executed this chunk of code, you will have all the words from your XML file at your disposal, neatly stuffed into an array. Let me show you now how you can pull a word at random from this array so that the player has a different word to guess each time she plays the game.

Top of page

Making a randomizing function with ActionScript

59. Paste this code after the one from the previous section:

function randomize(playAgain):Void {
var randomNumber:Number = random(words.length);
chosenWord = words[randomNumber];
if (playAgain) {
guessWord_txt.text = "";
}
for (var i:Number = 0; i<chosenWord.length; i++) {
guessWord_txt.text = guessWord_txt.text+".";
}
displayedText = _root.guessWord_txt.text;
}

As is obvious from the first line, this function has a parameter passed to it, playAgain. When you created this variable earlier, you defined it as a Boolean type of variable, with its initial value set to false:

var playAgain:Boolean = false;

This is to make possible for different actions to execute, depending whether the player is playing for the first time, or a subsequent one. Let's see how this actually works: the function randomize is called only when the player has clicked the "Play!" button (you will add the code for this button at the very end of this tutorial). So, suppose the player is playing the game for the first time. The button is clicked, and the randomize function is called, with the playAgain parameter passed to it with its value set to false.

The first line inside the function creates the randomNumber variable, of the Number type. Its value is a random value, chosen between zero (the zero itself included) and the number between the parenthesis (words.length). So, in this example, you have 14 elements inside the words array. And Flash knows this thanks to the array's length property which can retrieve it. So, Flash would pick the value like this:

var randomNumber:Number = random(words.length);
randomNumber = random(14);

So a random value is chosen between 0 and 13. Next, from this same array (words), the word corresponding to this random number is chosen:

chosenWord = words[randomNumber];

Flash reads the randomNumber variable's value and searches for the element with that position inside the words array, and stores it inside the chosenWord variable. Elements of an array have numbered positions, starting from zero, like this:

Next, Flash checks if the value of the playAgain variable is set to true:

if (playAgain) {
guessWord_txt.text = "";
}

And if it is, the text field which displays the letters the player has guessed is emptied from any text. Why? Because if playAgain equals true, it means the player has pressed the "Play!" button again and the game is started again. And it is logical that if it is going to be played again, that the text field has to be empty again.

After that, the following code is executed, no matter if the playAgain variable equals true or false:

for (var i:Number = 0; i<chosenWord.length; i++) {
guessWord_txt.text = guessWord_txt.text+".";
}
displayedText = _root.guessWord_txt.text;

This is a familiar for loop. The condition for the loop to exit is that i must be lesser than the number of characters of the word stored inside the chosenWord String variable. Let's say for example that the word "lion" was the one randomly picked from the words array. It has 4 characters (letters) inside it: lion. So, the loop will go from 0 to 3. Once it reaches 4, it will break and stop executing the code inside itself. And this code says the following:

guessWord_txt.text = guessWord_txt.text+".";

The text shown inside the guessWord_txt text field equals the text already found in it, with a dot (.) added to its end. So, in the case the word "lion" was picked, the for loop will make 4 iterations, and the following would be seen by the player in the text field: ....

Four dots, that's right. If you don't like the dots (which represent the letters of the hidden word), you can put a question mark (?) or any character that you deem appropriate. The loop goes like this: the first time, there is nothing displayed in the text field, so:

guessWord_txt.text = guessWord_txt.text+".";
guessWord_txt.text = "" + ".";
guessWord_txt.text = ".";

During the second loop, it goes like this:

guessWord_txt.text = guessWord_txt.text+".";
guessWord_txt.text = "." + ".";
guessWord_txt.text = "..";
etc.

And so on, until you get 4 dots displayed. Next comes the line of ActionScript code that comes after the loop:

displayedText = _root.guessWord_txt.text;

The text that is displayed inside the guessWord_txt field on the stage (i.e. the dots representing the hidden word) is stored inside the displayedText variable which you defined earlier. This variable will be used to store the letters guessed by the player along with the dots, so that the proper thing can be displayed and compared to the complete hidden word (you will see how this comparison is done later).

Fiiine! Go over to the next page to see how to create the biggest function in this project, which will place the letter buttons on the stage, define their clickability and much, much more. Onwards!