Making the ultimate dynamic image gallery in Flash 8 — part 5

6. Creating a text field for gallery and image descriptions

6.1. You should be on the main scene (timeline) now. Call the current layer (the one which you used to create the image placeholders) description text.

6.2. Select the Text tool (T). This time, you will select different options than you did for the percentage preloaders inside the image placeholders. Select:

1. Dynamic text, of course.
2. Choose a font that is readable. Avoid exotic fonts.
3. Choose a size that is suitable for reading. Font sizes 11 or 12 work just fine.
4. I suggest that you select black for the color of your text, to have a good contrast with the white background and make the text easy to read.
5. Select left alignment. You may also select the Justify option. Avoid right or central alignment - this is never used in a "normal" text — that is, text that isn't a title or a link, but a standard paragraph.
6. Select Anti-alias for readability (you will have to embed the characters because of this later).
7. You can either turn on or off the Selectable option — this is entirely up to you, whether you'll enable your users to select the description text or not.
8. Make sure to choose the Multiline option, as your descriptions may be several lines long, you never know, right? Better to make sure :-).

6.3. Click on the stage and drag your mouse to create a text field. Hit Esc to exit the text field editing mode. Your text field's dimensions should be about 475x100 pixels. Also, pay attention to its position: try to align it with the image placeholder and think about how much space will take an image once it's loaded. In the screenshot below you can see the position and dimensions of the text field.

6.4. Assign an Instance name to the text field to be able to manipulate it later via ActionScript: call it desc_txt.

6.5. Click the Embed button while the text field is selected to include the necessary characters in it and have nice, readable descriptions which are going to be nicely rendered: select the Basic Latin category and click OK.

The last (yes, the last one, indeed :) thing that you need to create in this document is your logo. After that, the things that remain to be done are the external XML file, the folders with their respective photos and thumbnails and lastly, the magnificent ActionScript code that will make possible for the whole thing to work.

Top of page

7. Making the logo

7.1. Lock the description text layer and make a new layer and call it logo.

7.2. Now, this is just a suggestion fo the logo. You can make any kind of logo/header that you like, but I recommend that you follow my proposals here, just to be able to follow this tutorial more easily.

Select the Rectangle tool (R) and draw a 700 by 40 pixels rectangle. Place it above the gallery menu. I have also drawn a thin white line through the lower part of the rectangle and changed the fill color of the lower part.

7.3. Select the Text tool (T) and switch the type of the text field to Static text. Click and type anything you want over the rectangle.

7.4. Select the whole logo — both the rectangle and the text — and then choose Modify > Convert to Symbol (shortcut key: F8). Select Movie clip as type, call it logo and click OK.

NOTE I didn't make separate layers for the background rectangle and the text inside the logo movie clip, but just selected the whole thing and made a movie clip symbol out of it. It is usually recommended to make separate layers for different elements inside a symbol, but logos aren't supposed to change much, so I guess a single layer should pose no problems at all. Of course, if you are going to animate an element inside your logo or are planning to make changes later, you should place each element on its own layer.

7.5. While the newly made logo movie clip symbol is selected on the stage, go over to the Property inspector and assign it an Instance name: call it logo_mc. Also, you can set both of its coordinates to 10.

You could have left the logo as it is without having to convert it into a movie clip symbol. But having a movie clip enables you to position it via ActionScript later if needed — you won't need to do that manually, which is much more practical.

7.6. Lock the logo layer and make a new layer and call it actions.

You won't be entering any ActionScript code here right now. First you have to have an XML file where all the gallery data will be stored, some images and an exact folder hierarchy. So let me show you how to do all that before the coding part comes up. Before that, save your document!

Top of page

8. Creating the XML file with image galleries data

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>Dallas.</image>
<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).

And that would be it concerning the XML file. Continue onto the next page to see how to create a proper folder structure for the image gallery.