Creating an Advance Flash Image Gallery

By Blue_Chi | Flash CS3 | ActionScript | Advanced | Page 1, 2, 3, 4, 5, 6, 7

This tutorial will teach you how to create an advanced image gallery in Flash that can be easily updated using XML. This gallery loads all of its thumbnails and full images externally. Our XML file does not only control what images are loaded onto our gallery, but it can also be configured to alter the position and size of the scrolling image gallery.

This is an advanced level tutorial that makes use of ActionScript Masking, the MovieClipLoader Class, the XML Class, the Tween Class, and other ActionScript features such as functions, loops, and conditionals. Make sure you read all of our relevant tutorials on those topics before attempting this tutorial. You may also want to check our previous image gallery to learn how to create another type of image gallery.

The back-end concept of our gallery is that all the data of the gallery is stored within an XML file that is loaded when the movie starts. The full version of all thumbnails is only loaded when a thumbnail is clicked. Because our images are all stored externally, and all of our image details are stored in the XML file, there is really nothing left in the SWF other than ActionScript.

Oman3D Advanced Flash Image Gallery

Our gallery project could be broken down into the following sections:

  1. Preparing External Assets (XML, thumbs, and full images) and the FLA
  2. Loading and Processing the XML file
  3. Loading the Thumbnails
  4. Loading a Full Image when a Thumb is clicked
  5. Defining the Size of the Image Gallery (Masking) and Setting up the Scrolling Motion
  6. Adding Thumbnail and Large Image Preloader
  7. Polishing the Look and Feel of the Gallery

Preparing All External Assets and the FLA

As shown in the earlier diagram, all of our assets will be loaded externally. This is done to make the updating process easier so that you do have to go back to the FLA each time you want to change something in your gallery and it also makes the download period shorter as the user will only have to download the full images which he wishes to view and only when he clicks on a thumbnail to view a full image.

All the images to be used in this tutorial can be downloaded from here.

Our assets will be organized in separate folders. Create a project folder, and once you have downloaded the assets zip file, extract your files and place all thumbnails in a folder inside your project folder named thumbs and place all the other images in another folder named full_images.

Place Your Images in their Appropriate Folders

The details of the images inside these folders will be stored in an XML file. An XML file is essentially a text file with user-defined structured coding. You can use any simple text editor to create your XML file, open the notepad and save a blank file as gallery.xml in your project folder along with your two image folders.

XML File Added

We will now edit our XML file. The file will have two sets of details:

  1. Gallery specific details such as its dimensions, position, and dimensions of the thumbs within it.
  2. Image specific details such as the thumb URL, the full image URL and the title of the image.

The general structure of our XML code is as shown in the code below, one <gallery> element will enclose several <image /> elements within it. The gallery specific details will be set in parameters held within the <gallery> element while the image specific details will be set in parameters held within each of the <image /> elements.

<gallery para1="value" para2="value" ... >
<image para1="value" ... />
<image para1="value" ... />
<image para1="value" ... />

Our actual code will have the following parameters specified in the <gallery> element.

  1. gallery width (we mean by gallery the scrolling thumbs section)
  2. gallery height
  3. gallery horizontal position
  4. gallery vertical position
  5. thumbnail width
  6. thumbnail height
  7. full image horizontal position
  8. full image vertical position

Each of our <image /> will have the following parameters:

  1. Thumb URL
  2. Full Image URL
  3. Image Title

The values of all these parameters will be retrieved in Flash using the .attribute property of a XML element. The value of these parameters is specified in the code below, you can copy and paste it into your XML file. You may change any of these values as you please later on to configure your own gallery.

<gallery thumb_width="120" thumb_height="120" gallery_width="120" gallery_height="400" gallery_x="50" gallery_y="50" full_x="220" full_y="50">
<image thumb_url="thumb1.jpg" full_url="image1.jpg" title="Mango Juice" />
<image thumb_url="thumb2.jpg" full_url="image2.jpg" title="Cherry Seven Up" />
<image thumb_url="thumb3.jpg" full_url="image3.jpg" title="Strawberry Juice" />
<image thumb_url="thumb4.jpg" full_url="image4.jpg" title="Rice and Chicken" />
<image thumb_url="thumb5.jpg" full_url="image5.jpg" title="Mixed Capsicum" />
<image thumb_url="thumb6.jpg" full_url="image6.jpg" title="Roma at Barbera Cafe" />
<image thumb_url="thumb7.jpg" full_url="image7.jpg" title="Orange Juice" />
<image thumb_url="thumb8.jpg" full_url="image8.jpg" title="Fries in Salalah" />
<image thumb_url="thumb9.jpg" full_url="image9.jpg" title="Chicken Tacos" />
<image thumb_url="thumb10.jpg" full_url="image10.jpg" title="Club Sandwiches" />
<image thumb_url="thumb11.jpg" full_url="image11.jpg" title="Samosa" />
<image thumb_url="thumb12.jpg" full_url="image12.jpg" title="Mountain Dew" />
<image thumb_url="thumb13.jpg" full_url="image13.jpg" title="Water - Grill House" />
<image thumb_url="thumb14.jpg" full_url="image14.jpg" title="Ice Tea" />

You might have noted that we did not specify the number of images in our gallery, that is because the ActionScript XML Class can detect the number of child nodes within an element, and that in our case is the number of <image /> elements within our <gallery> element, i.e. the number of images in our gallery.

Our XML file is now ready, save your file and move to Flash. Create a new file and save it as My Gallery in your project directory, set the ActionScript version to 1.0/2.0, the dimensions to 670x500px and the frame rate to 30 fps.

Flash Document Settings - AS2.0, 670x500, and 30FPS

Our FLA is now set, our images are all in appropriate folders, and we have our XML file ready as well. The rest of our gallery project will be coded in ActionScript. In Flash, Right-Click the only frame you have on your timeline and select Action to open up the Action panel.

Summary of this Page

  1. Placed thumbnails and full images in their appropriate folders.
  2. Created XML file.
  3. Created FLA.

In the next page of our tutorial we will load and process the XML file in order to retrieve the data required to load our gallery.

Next page