The Best Structure for your Flash Site - Page 4

This is a good time to revisit our navigation XML file.

<nav>

<button>

<image>button1.png</image>

<text>Articles</text>

<link>articles.swf</link>

</button>

<button>

<image>button1.png</image>

<text>Books</text>

<link>books.swf</link>

</button>

<button>

<image>button1.png</image>

<text>Blog</text>

<link>blog.swf</link>

</button>

<button>

<image>button1.png</image>

<text>Contact 'company name' today for a free estimate</text>

<link>forum.swf</link>

</button>

</nav>

In order to retrieve values from an XML file, we step through the family tree until you find the desired value. So in our code, xnRootNode.firstChild.childNodes.length;, the first child, is <nav> and it has 4 child nodes -- you guessed it, they're our 4 <button> nodes. So nTotalButtons is now equal to 4.

Next we use a 'for loop' to gather all the data from each of our buttons and add it to our arrays.

astrImages.push(xnRootNode.firstChild.childNodes[i].childNodes[0]
z.firstChild.nodeValue);

astrImages is our array for images; the push method adds our XML value to this array.

xnRootNode.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue;

This may look scary at first, but let's break it down.

xnRootNode.firstChild is <nav> its first child is the first occurrence of <button> and <button>'s first child is <image>. So far, so good, but what is <image>'s first child? If you said, "button1.png" then pat yourself on the back: that's correct. Even the text value within the node is considered a child node in Flash. Lastly, we use the nodeValue property to retrieve the node value of the XML object, in this case "button1.png." Have a look at the following table, as it may help:

We continue to fill in all our arrays, then move on. Only after our XML data has completed loading and has been pushed into our arrays are we ready to move the playhead onward. Now, we move to our next frame.

Frame 3
Frame 3 is used to load our CSS file. Have a look at our navigation.css file:

.buttonStyle {

font-family: tahoma, verdana, arial, helvetica;

font-size: 16px;

color: #000000;

text-align: center;

}

It looks like any other CSS file. We use CSS to set the formatting on our buttons, which just keeps with our paradigm of keeping everything external and dynamic.

Now that our CSS has loaded successfully, let's move on to frame 4.

1 | 2 | 3 | 4 | 5 | 6 | 7