Example: Final Result Flash Photo Gallery
By the end of this tutorial you will have created a bare-bones flash photo gallery which will look something like this. The thumbnails, images and titles are loaded and setup dynamically with data provided by a xml file.
Just in case you get lost the source files are provided at the end of page 2 of the simple flash xml photogallery tutorial.
Setup the XML
The XML file needs to be laid out and setup before we load it into flash. A basic image gallery would need to be three bits of information for every picture
- Title
- Location of the thumbnails, to create a menu
- Location of the image
As only three bits of information are needed the xml structure can be kept very simple.
<gallery> <image title="Title 1" main="locationof/image-1.jpg" thmb="locationof/thumbnail-1.jpg"/> <image title="Title 2" main="locationof/image-2.jpg" thmb="locationof/thumbnail-2.jpg"/> <image title="Title 3" main="locationof/image-2.jpg" thmb="locationof/thumbnail-3.jpg"/> </gallery>
The function of the XML should be clear from the markup above (yay for the human readability of XML). To setup the XML replace the title, location of the main image and of the thumbnails with your title, main image and thumbnail image locations respectively
Setup the Flash
In flash you will need to create two movie clips and place them on the stage, and a dynamic text field
- Give one movie clip the instance name loader, this will be used to load the main images into flash
- Give second movie clip the name thumbnails, this where the menu of thumbnails will located when its created dynamically via actionscript.
- Also create a dynamic text field for the title and give it an instance name title_txt
Actionscript Part1
Instead of throwing a mountain of code at you I will try to build it up bit by bit. To start off
myPhoto = new XML();
//create a new xml object
myPhoto.ignoreWhite = true;
// ignore any whitespace without this the xml file loading may fail due to small spacing errors
myPhoto.load("xmlphoto.xml");
//actually load the file
myPhoto.onLoad = function(success) {
//function performed once the loading is complete.
// bulk of the scripting will be added here later
}
XML loading in flash is an asynchronous event which means that XML doesn't load when the frame does. But rather begins loading when the playhead reaches the frame, to make sure that the actionscript is only executed only once the XML has loaded it must be contained in the myPhoto.onLoad function.
