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 |
|
|