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 ]

If you cannot see any images above, make sure, in your URL, you have www preceding The full URL for this tutorial should be:

The reason is, I believe, due to XML's security features that think is a different domain from

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:

  1. Launch a program capable of editing plain-text, ASCII formatted text such as Notepad.

  2. In Notepad (or equivalent program) copy and paste the following code:

[ copy and paste the above code in Notepad ]

  1. 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.)

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


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