Photo Gallery
Using XML and Flash
by
kirupa |
2 September 2004
This is page five 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.
Now, let's get back to our code.
Last time, we took a breather at this large section of code. The
colored code is what is displayed when the XML file is loaded as
per the conditions set forth by the if statement.
- 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
{
-
content
=
"file not loaded!";
- }
- }
In the first line, I set the
variable xmlNode equal to this.firstChild. The reason I am doing
this is that I will be using this.firstChild frequently, so
assigning that chunk of text to xmlNode simplifies accessing it
by mere humans.
In the next two lines I declare
the variables image and description as
arrays. You will see why in a few seconds.
- total
= xmlNode.childNodes.length;
In this line, I set the value of
the variable total equal to the total length of the
number of childNodes our XML file contains. That helps Flash to
keep a digital track of how many images there will be.
Imagine each instance of the
childNode in the XML file to be one rung on a ladder. If you are
climbing, once you reach the final rung, you can't go beyond
that. The above piece of code simply counts the number of
"rungs" and gives you an accurate outlook on how far you will
have to travel. In Flash terms, the above code counts the number
of childNodes, and thus gives you a nice number of how many
items you may have to process.
Here is a graphical example using
fictitious XML data:
Using the
xmlNode.childNodes.length code for the above XML data will
provide you with the number 3 because there are 3 nodes in your
XML file. But, the problem is that Flash starts numbering at 0,
while the childNodes.length code starts counting at one.
Our task is to come up with a
piece of code that will cycle through each node, extract the
attribute data (image and caption) from each node, move to the
next node, repeat the extraction process, and stop after
reaching the "final rung" of the XML ladder.
The code I used is as follows:
- for (i=0;
i<total;
i++)
{
- image[i]
=
xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
- description[i]
=
xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
- }
In these lines, I use a for
loop to cycle through each childNode in the
XML file, and I assign each node's image and caption attributes
into the image
and description arrays. Storing the image and caption
data in an array greatly simplifies accessing the data later
because everything is contained in two variables with an index
position.
How does Flash know that it
should stop as it reaches the end of the XML file? That is
answered by the xmlNode.childNodes.length code you set equal to
the variable total. The loop cycles through and
increments the index position of the image and description
arrays until the variable i reaches the end of the XML
file denoted by the data in the variable total. I use a <
operator as opposed to an <= operator because, remember,
childNodes.length starts counting from 1 while the XML data
is read from 0.
If you want to view all of the
data now contained in your image array, simply add a
trace(image) code in an appropriate location after the
conclusion of the for loop. You will see that, when you preview
in Flash, that all of the image paths from your XML file are
displayed. You can also use trace(image[0]) to display
your first image, and increase the 0 to a number less than the
total length of the array to get the exact file. Of course,
while I only focused on the image array, the description array
works similarly. The only difference is that the description
array stores the caption data from the XML file.
In my view, the complicated part
is getting the XML data from an external XML file and
transporting the data to a variable in Flash. You have just
finished that! The rest of the
coding is just simple manipulations and calculated luck to get the
photo gallery working. I'm joking about the luck part...kinda!
All of this page was spent on
explaining how you can take data from an XML file and store it
in Flash as an array. There is more coding that needs exploring,
and explore it we shall....on the
next page.
Onwards to the
next page!
 |
page 5 of
9 |
 |
|
