Displaying

In the previous page you adding the ActionScript and learned a little (ok - a lot!) about your XML file. On this page, we will shift gears and learn about the ActionScript that works to display the XML file.

The Script of Action - ActionScript!
This is the same code you copied and pasted in the previous page in your Flash file:

function loadXML(loaded) {

if (loaded) {

_root.inventor = this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;

_root.comments = this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;

name_txt.text = _root.inventor;

comment_txt.text = _root.comments;

} else {

trace("file not loaded!");;

}

}

xmlData = new XML();

xmlData.ignoreWhite = true;

xmlData.onLoad = loadXML;

xmlData.load("inventors.xml");

The following sections will explain each line of code:

xmlData = new XML();

Here you assign a variable to the new XML object. The XML object in Flash contains all of the nifty XML features and properties that greatly simplify displaying and modifying XML data in your Flash animation. I am calling my XML object xmlData.

xmlData.ignoreWhite = true;

When Flash reads an XML file, it reads all the spacing contained in the XML file also. You should almost always use this line to tell Flash to ignore the white spaces such as empty text nodes. Note that the .ignoreWhite property is a part of the xmlData object you declared in the previous line.

If you are using Flash MX or higher, which you really should for better XML support, you do not need to have this line here. Thanks to mdipi for pointing that out.

xmlData.onLoad = loadXML;

When you are dealing with XML data in Flash, a common mistake is to assume that the XML file is loaded almost immediately. For large XML files, or even smaller XML files over a slow connection, that is hardly the case. Therefore, it is good to create your own event handler to ensure that your XML file is loaded.

In this line, I am telling xmlData to invoke the loadXML function when loaded - hence the onLoad. I will explain in greater detail about the loadXML function a few lines down from here.

xmlData.load("inventors.xml");

In this line I specify the path to the XML file that I am interested in loading. Since we saved our FLA file into the same directory as our inventors.xml file, I simply specify the name of the file. You can add relative paths if your XML file happens to be in a different location.

function loadXML(loaded) {

if (loaded) {

_root.inventor = this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;

_root.comments = this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;

name_txt.text = _root.inventor;

comment_txt.text = _root.comments;

} else {

trace("file not loaded!");

}

}

This is the code for the loadXML function. This function ensures that nothing XML related is done without first making sure the XML file is loaded.

if (loaded) {

_root.inventor = this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;

_root.comments = this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;

name_txt.text = _root.inventor;

comment_txt.text = _root.comments;

} else {

trace("file not loaded!");

}

This if statement checks to see if the file is loaded. If the file is not loaded, the code under the "else" section is activated. I have it set to display "file not loaded!" in the output.

If the XML file is loaded, I have set it to execute the following code:

_root.inventor = this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;

_root.comments = this.firstChild.childNodes[0].childNodes[1].firstChild.nodeValue;

name_txt.text = _root.inventor;

comment_txt.text = _root.comments;

The first line of code (broken off into two lines) displays the data about the inventor's name from the XML file into the variable inventor. The second line of code (also broken into two lines) displays the comment about the inventor by storing the data into the comments variable. That data is also taken from the XML file.

The final two lines simply display the data from the inventor and comments variable into the text fields you created in the first page.

I have not explained in detail the stuff such as firstChild, childNodes, and nodeValue that appear in the line for _root.inventor and _root.comments. In order for you to understand the explanation, I think we will need to go back and look at the XML file again. I will provide a detailed explanation about that on the next page.

Let's continue on to the next page!

---

page 3 of 5

---