Photo Gallery
Using XML and Flash
by
kirupa |
2 September 2004
It is time for another photo gallery tutorial!
This one is a little more advanced than the other
photo gallery tutorial on this
site. So, now, what would make me write another tutorial on a
topic that has already been covered? The answer is easier
maintenance! In the earlier photo gallery tutorial, if
you wanted to add an extra image, you had to manually edit the
FLA file and add the image's name to the array. That usually
requires a few more steps such as uploading a new SWF and a
possible renaming the file and embed paths to avoid browser
caching.
In this version, if you want to add another image
to your photo gallery,
all you have to do is edit an XML file. Your photo gallery
automatically incorporates your addition without you having to
even touch the FLA. In the long run, you may find that the time
you save in adding or editing existing images is worth more than
your time in going through this tutorial. Plus, this version of
the tutorial accommodates captions for your images. Everybody
loves captions!
The following animation is an example of a
photo gallery that you will create towards the end of this
tutorial:
[ use your arrow keys or press
the Next and Previous buttons ]
 |
NOTE |
|
|
The XML file for the above photo gallery that
contains the image and caption data can be found
here.
While I will explain the coding behind the
photo gallery, you should familiarize yourself with some of
the basics of XML and XML in Flash. If you are new to XML
and XML's use in Flash, the following links should help you:
Let's get Started
Let's first create the XML file. I will cover the basics of
an XML file later on in this tutorial.
Creating the XML File
The following steps will explain how to create the XML
file for this tutorial:
-
Launch a program capable of editing
plain-text, ASCII formatted text such as Notepad.
-
In Notepad (or equivalent program) copy and
paste the following code:
[ copy and paste
the above code in Notepad ]
-
The stuff you pasted may look a little odd,
but don't worry about it right now. Just make sure you copy
and paste the above into your text editor (Notepad, etc.)
-
Save this file as images.xml. Don't forget where you saved this
file, for you will need to save your Flash file in this
location also.
The Flash File
Normally, I would have you create your own Flash file. I am
going to make an exception in this case and have you
download the partial FLA with all of the interface elements
created for you.
Click on the following link to download the
file:
Once you have downloaded the FLA
from the above link, make sure you unzip it to the same location
as your newly created images.xml file.
|
|
Inside the Mind of Kirupa |
|
There is a reason
behind why I am making you download the partial
FLA as opposed to giving you directions to
create the animation on your own. No, it's not
because I am lazy...not entirely! The reason is
that most of the actual Flash work that I would
have you do would involve simply creating the
interface.
Instead of spending time on having you create
the interface, I would rather have you
understand the important coding elements behind
the animation. If you take a look at the FLA,
you will see that none of the REAL work has been
done for you.
I will explain in the
following pages how to convert the skeleton of
your photo gallery into a fully functional,
beastly creature capable of dishing out photos
at your request. |
|
On the next page, I will explain
the code you will need to add, and I will also explain the
modifications you will need to make to your Flash animation.
Onwards to the
next page!
| |
page 1 of 9 |
 |
|
