Displaying

In the previous page you created the XML file and the interface for the Flash animation. Let's now add the code to display some XML in your Flash text fields!

Adding the Code
We don't have a mechanism for displaying data from our XML file and displaying it in Flash. Let's add the code to enable just that.

Select the first (and only) frame in your Flash timeline - any layer will work - and press F9. Copy and paste the following code into the Actions Panel:

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");

Now, preview your animation. If you followed the steps properly, you should see the name of an inventor and the associated comment in the appropriate text fields.

Why Everything Worked
Now that you have a working example, it is time for you to learn why the animation worked. It's important for you to understand the theory behind what I explained, because once you understand the behind-the-scenes work, you will be better prepared to create your own XML/Flash implementations.

The XML File
Let's first start by dissecting the XML file. If you were to look at the XML file, you will see a lot of text. I have pasted a "similar" version of the XML file that you used in the next paragraph.

<?xml version="1.0"?>

<inventors>

   <person>

      <name>Thomas Edison</name>

      <comment>Inventor of cool stuff.</comment>

   </person>

   <person>

      <name>Doug Engelbart</name>

      <comment>Invented the Mouse</comment>

   </person>

</inventors>

The above XML file is "similar" because I removed a lot of the words from my comment text. Having the extra text made some of the lines break off into two lines. Not having the extra comment text will in no way detract from your learning. I promise!

<?xml version="1.0"?>

This is the header text that appears on most XML documents. There are expanded forms of this line that add newer features, specify how the file should be treated, etc. Flash doesn't care about this line, so it's inclusion is entirely optional.

<inventors>

This is the root element/node of your XML document. This is the most over-reaching generalization you can make about any content that will be placed inside. In our case, the data it contains must be related to inventors, hence our element's name of inventors.

</inventors>

This is the closing tag for our root element. In the future, I will not emphasize the closing tag, for all elements/nodes will have a closing tag.

Think of writing data in XML as packaging a gift to send to someone (hint!). First you open the box, put your gift inside, and then you close the box. XML elements work similarly.

	Quick Note
The words element and node refer to the same item. You will see it used differently from different sources. I use both terms interchangeably because the Flash AS refers to nodes while a lot of the XML documentation refers to elements as well as nodes.

Let's say that in our example, the box is the element/node. You open up the box, called inventors by writing it as <inventors>. You place all of your data inside, and then close the box by writing </inventors>.

Here is a graphical example:

We just dealt with the root element. In XML, you can deviate beyond the root element and subcategorize more elements called child elements. In our example, the root element is inventors. The child element would be the two instances of person. Both of those elements are nested inside the inventors element.

Being the rebel that I am, I further divided the child elements person to contain the elements name and comment. When read backwards (inside to out), name and comment are child elements of person because both person elements contain the child elements name and comment. Person is a child element of the root element inventor. That's a lot of bold worded text.

Hopefully the following should help you to visualize the child/parent relationships in our XML document:

<inventors>

   <person>

      <name>Thomas Edison</name>

      <comment>Inventor of cool stuff.</comment>

   </person>

   <person>

      <name>Doug Engelbart</name>

      <comment>Invented the Mouse</comment>

   <person>

</inventors>

The text in pink is the child element of the text in green. All of the items in green and pink are child elements of the text in blue.

The pieces of data contained within the child elements are known as attributes. In our example, the text "Thomas Edison" is an attribute of the element name. Your attributes as well as element names have to be strings.

Note how each element (child or root) was closed with a complementary closing tag. Also, I have been using the word element to refer to the category names for your data. You can also call an element a node. Several Flash and XML books (especially if you learn XML for use with .NET) make use of the term node as opposed to element. I am reiterating this in case you missed the Quick Note further up on the page.

Ok, it's time to leave XML for a bit and learn about the code used in the Flash file. On the next page, I will explain the code used for displaying the XML in Flash. Don't forget all of the XML stuff you learned though. I will be referencing and adding on to what you learned about XML on the next page also.

Let's continue on to the next page!

---

page 2 of 5

---