8.1. First, download the XML file that I created for this tutorial.
Before I tell you how this XML file will relate to your image galleries, the folders they are in, etc, I just want to say that I won't explain the principles of XML and its interaction with Flash here, because I already made a detailed explanation of XML in my Hangman game tutorial, and there is no sense repeating it if it's already written, right? :-)
If you're not familiar with XML, I heartily recommend that you go and read the rules of XML and how Flash loads and parses XML data, before proceeding.
So, the XML file that you have just downloaded looks something like this (I haven't displayed the whole file here for the sake of brevity and screen real estate):
<?xml version="1.0"?> <galleries>
<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">
<image>Tresnjevka. I love the atmosphere on this one.</image> <image>Motovun.</image>
<image>New York.</image> <image>Paris.</image> </gallery>
<gallery title="essays" intro="A collection of various photos which either do not fit any other category - experiments and such.">
<image>Color mayhem!</image> <image>The sleeping monster.</image> <image>Let me out!</image>
<image>A barrel on the side of the trail.</image> <image>Subterranean passage.</image>
<image>A train in snow.</image> </gallery>
</galleries>
After the XML declaration comes the root node, of course. I chose to call it galleries. Within this, root node, every other bit of data is contained.
<galleries> ...
</galleries>
Every child node of the root node is called gallery. I chose to give each of these child nodes the same name (gallery) on purpose. You will see later why (when I'll explain the
ActionScript code) — this is related to parsing the XML data.
<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">
...
</gallery>
Each gallery node has two attributes inside it: title and intro. I chose these names because I think they are logical: the first one refers to the title of each gallery and the second one tells the user what's the gallery about. Remember, you may call your attributes any way you like, as long as you stick to the rules of XML.
The title attribute is very important: its value (between the quotation marks: title="architecture") has a special functionality:
It will appear on this particular gallery's button in the gallery menu — it will become a button label.
This value is also the name of the folder inside which the images belonging to this particular gallery will be stored.
So, as you'll see a little bit later, the values of these attributes will have to be followed strictly, because the application will be made as a case-sensitive one. This means that the name of a folder must be exactly the same as the value of the title attribute for a particular gallery. If, as in the above example, the value of the title attribute for a gallery is essays, the name of the folder must be essays too. It cannot be Essays or ESSAYS.
The value of the attribute intro will be displayed inside the big dynamic text field below the thumbnails when the user clicks on any of the gallery buttons inside the menu. Once he chooses a gallery, the thumbnails will be loaded and displayed and the description text will be shown beneath them.
<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">
So, the intro text can be anything you want. And it has no relation with the naming of the folders and galleries. It just describes a particular gallery.
Now, each gallery node has many child nodes, each of which is called image. Again, I chose to give them all the same name on purpose, because this will enable Flash to parse the XML data much more efficiently, and will save you a lot of trouble.
<image>A barrel on the side of the trail.</image>
Between the opening and closing tags of each image node, there is a child node, which is in fact the description of the image. This description will appear in the big text field when the user clicks on a thumbnail and the big image starts to load.
IMPORTANT You may have as many galleries as you like, as long as each one is referenced in the XML file, and the corresponding folder exists. This is possible because in this tutorial you will see how to create a menu that can contain a basically limitless number of buttons (each button corresponds to a gallery).