Photo Gallery Using XML and Flash
         by kirupa  |  2 September 2004This is page four of this tutorial, so if you stumbled here without having completed the previous page, click here to catch up on all the exciting stuff that you missed in the previous page. If you  haven't even started this tutorial, then head on over to the first page. I'll be waiting here until you finish.

Understanding the Code
I will break the code down into sections so you can get a better understanding of how each section of code contributes to the whole photo gallery.

Loading the XML File
Let's start at the top and move down. The code for loading your XML file is the following:

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
trace("file not loaded!");
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");

The above colored text is what we will be focusing on right now. I'm going to borrowing a lot of the following information from the Displaying XML in Flash tutorial I wrote earlier:

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("images.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 images.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) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
}
firstImage();
} 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 window when previewed in Flash.

The XML File
Before explaining what the grayed out code does, I think now is a good time for me to explain the XML file and how it is structured. Your XML data closely follows the sample XML data written below:

<images>
  <pic>
    <image>Image1</image>
    <caption>The first image!</caption>
  </pic>
  <pic>
    <image>Image2</image>
    <caption>The second image</caption>
  </pic>
</images>

What you need to understand is the parent-element/node relationships from the above example. I provide, in my view, a good read about that topic here under the section labeled "The XML File", so I will only briefly summarize.

In our XML file, the most fundamental level is the images node. Contained within the images node are the childNodes called pic. The childNodes pic contain the nodes image and caption which actually contain the data.

In this page we learned how to load the XML file into Flash, and we also got a brief glimpse at the structure of the XML file. There is more coding that has been uncharted, but thankfully, there is a next page!

Onwards to the next page!

page 4 of 9

 


SUPPORTERS:
kirupa.com's fast and reliable hosting provided by Media Temple.