Photo Gallery
Using XML and Flash
by
kirupa |
2 September 2004
This is page three 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.
Editing the Photo Gallery
Like I mentioned in the first page,
editing your photo gallery is fairly simple. All you have to do
is modify your XML file. I have provided a brief guide outlining
what you will need to do in order to edit/add/remove images and
related data from your XML file.
Editing Existing Images
I am fairly certain that you would like to populate your
photo gallery with your own pictures. In order to do that,
open your images.xml file in a text editor.
You should see rows of text
something similar to the following:
<pic>
<image>Path to
Image</image>
<caption>Image
Caption</caption>
</pic>
<pic>
<image>Path to
Image</image>
<caption>Image
Caption</caption>
</pic>
You can replace the path for
my images to that of yours. Your path can be an absolute
path or a relative path. You should be aware that the
relative path is relative to where your SWF file is. It is
not relative to where your XML file is.
You can also change the text
in the <caption> element to something more representative of
your image. If you want to write more than a few words
of text, you should consider altering the dynamic text field
in your Flash file.
Removing Images
If you want to remove an image, simply delete the entire
<pic> node that corresponds to your image. For example,
let's say you wanted to remove Image1 from the following
list:
<images>
<pic>
<image>Image1</image>
<caption>The
first image!</caption>
</pic>
<pic>
<image>Image2</image>
<caption>The
second image</caption>
</pic>
</images>
You would delete the <pic>
node corresponding to displaying Image1. Your XML file
will look like the following after your deleting operation:
<images>
<pic>
<image>Image2</image>
<caption>The
second image</caption>
</pic>
</images>
Note that all that now
remains is just the <pic> node for Image2. I even removed
the actual <pic> and </pic> text along with the
<image> and <caption> text that corresponds to Image1.
Adding Images
If you want to add new images to your photo gallery, simply
add the following text inside your <images> node:
<pic>
<image>Path to
Image</image>
<caption>Image
Caption</caption>
</pic>
You can place the above text
anywhere inside your <images> node, but do not
accidentally place it inside a <pic> node. <pic> is a
child of the <images> node, but the Flash code is not
setup in its current form to read a <pic> node that is a
child of another <pic> node.
A quick way to check is to
see if your XML file content's spacing is consistent. As
long as you don't see any odd gaps or spacing miscues, you
should be fine!
As you saw above, most of the
routine changes you would likely apply to your photo gallery can
be done by modifying your XML file itself. You don't even need
to bother with the FLA file. With that said, some of the changes
you will make to your FLA file. You cannot control the font
size, font color, location your images are placed in, and more
only within the FLA file.
In the
next page, I will start to
explain the code that makes the photo gallery work. The most
immediate portion of the tutorial required to get the photo
gallery working is over, but I really do hope you stick around
for the code explanation.
If you don't feel like sticking
around, here are the source files:
It is my
strong belief that after you understand the coding aspect of the
photo gallery, you will be better able to create and modify my
basic photo gallery implementation into newer, more creative
ways.
Onwards to the
next page!
 |
page 3 of
9 |
 |
|
