Photo Gallery
Using XML and Flash
        by kirupa  |  2 September 2004

This is page nine 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.

This tutorial is about 9 pages long, and it is easy to get lost in all the technical jargon, or worse, miss the grand unifying theme of this tutorial. I'm going to try to explain the big picture in a more human-understandable way.

Let's get back to the ladder, for I have used the ladder example several times in this tutorial. The XML file, like I mentioned earlier, is the ladder. Each pic node is the rung on the ladder. If you have a lot of pictures specified in your XML file, your ladder is increasingly taller because you now have more rungs/nodes. Then, there is you - the explorer who is climbing the ladder to see a bit further than what was visible before.

Each time you press the Next Image button, you are simply climbing up the ladder - seeing more of your surrounding that you had not seen earlier. Being ever careful, you check to make sure that you haven't reached the end of the ladder, for it is tough to climb when you have nothing to climb up on. Similarly, your photo gallery code checks to make sure that it isn't the last image in the list. After all, conventional wisdom is that you can't display what does not exist.

You decide that you want to go back down. For obvious reasons, you check to make sure that you are not already at the bottom of the ladder. That is similar to how Flash checks to make sure that it is not trying to load a previous image that does not exist because it is currently on the first image itself.

Of course, when you go up and down on the ladder, you don't suddenly jolt to your new elevation. You move smoothly from one rung to another rung on your ladder. In Flash, when you switch images, you don't just display your next image. You fade your new image into view in the form of a simple transition that takes advantage of the _alpha property.

Hopefully you don't preload data while climbing a ladder, but you did tell Flash to preload your new images before loading them into view. You accomplish that by checking to make sure that the total file size of the image is the same size as the the image that is currently being loaded. If the two file size checks are not equal, you display a small progress bar that informs your visitors about the progress. If the amount loaded equals the total file size, that means the image is fully loaded and ready for display.

Phew - this tutorial went a little longer than I had expected! I have provided the source files for you to use in MX 2004 and MX format:

Download Source MX 2004
Download Source MX

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!


page 9 of 9



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