Creating an XML Scrollbar Gallery in Flash

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

This tutorial will teach you how to create a smooth gallery that features a horizontal scrollbar that can be used to navigate the gallery. All of our images will be loaded externally, these images are specified in an XML file that also controls the dimensions and position of our gallery and its scrollbar.

This is an advanced Flash ActionScript tutorial that will make use of the XML Class, the MovieClipLoader Class, the Tween Class, the Drawing API, and general ActionScript methods and tools such as the setInterval method, masking methods, loops, functions, 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 XML image gallery tutorial to learn how to create another type of advanced image gallery.

Use the red scroller to browse the gallery. Photography © 2008 - Riyadh Al Balushi

The backend concept of our gallery is as follows: Our SWF will load the XML file and then process the details of the galleries such as its width, the scrollbar details, and the URLs of all of our images. Once this information is successfully loaded and processed, the gallery will start and images will be showing up as soon as they finish loading. The SWF itself will not have any content in it other than ActionScript because the images and their details will be stored externally. The graphical aspects such as the scroller and the scrollbar will be drawn using the Drawing API.

Scrollbar Gallery Diagram

Our tutorial will be divided into the following sections:

  1. Preparing external assets and the FLA.
  2. Processing the XML file.
  3. Creating the gallery movie clip container.
  4. Loading all external images.
  5. Applying a mask to our images container.
  6. Creating the scrollbar and the scroller using the Drawing API.
  7. Making our scroller move.
  8. Create the mover() function to make our gallery move according to the position of the scroller.
  9. Creating preloaders for each of our thumbnails.

Preparing External Assets and the FLA

All of our assets will be loaded externally, so we will have to prepare these before we start working with our FLA. The purpose of loading everything dynamically is to make it possible to update our content without having to go back to the FLA to generate a new SWF file and upload it each time we decide to change the images.

The images to be used in this tutorial can be found in this zip file here. You may want to use your own images instead, but our gallery will only work properly with image sets of the same size.

Start off by creating a main project folder for our gallery. Inside this folder create a sub folder named images that will host our images. Unzip the file we have given you and put all your images inside it. Our XML file will be placed next to the images folder.

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 your notepad and save an empty file as gallery.xml. You should end up now with a folder named images and an xml file both located in your project folder.

Scrollbar Gallery

Preparing the XML File

We are going to edit our XML file with the information that we need to run our gallery. Our XML gallery will have two types of information:

  1. Gallery and scrollbar specific details such as the dimensions of the gallery viewport and the thickness of the scrollbar.
  2. Image specific details, namely the URL of each image.

It is worth noting at this stage that our gallery will only work for groups of images with the same width. Of course, the gallery can be edited to work with images with different dimensions, but that goes beyond the scope of this tutorial.

The general structure of our XML code is shown in the code below, one <gallery> element will enclose several <image /> elements within it. The gallery and scrollbar 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. The gallery width
  2. The gallery height
  3. The vertical position of the gallery (our gallery will be automatically centered horizontally)
  4. The width of the images within our gallery
  5. The spacing between the gallery viewport and the scrollbar
  6. The thickness of the scrollbar

Each of our <image /> elements will have one parameter only:

  1. Image URL

The values of all these parameters will be retrieved in Flash using the .attribute property of an 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.

<?xml version="1.0" encoding="utf-8"?>
<gallery width="800" height="250" y="30" image_width="250" vertical_spacing="10" bar_thickness="10">
<image url="images/image1.jpg" />
<image url="images/image2.jpg" />
<image url="images/image3.jpg" />
<image url="images/image4.jpg" />
<image url="images/image5.jpg" />
<image url="images/image6.jpg" />
<image url="images/image7.jpg" />
<image url="images/image8.jpg" />
<image url="images/image9.jpg" />
<image url="images/image10.jpg" />
<image url="images/image11.jpg" />
<image url="images/image12.jpg" />

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.

Preparing the FLA

Our external assets are now ready, it is time to create the FLA. Create a new file in Flash, save it as My Gallery in the same folder as your XML file and your image folder. Set the ActionScript version to 2.0, the dimensions to 900x330, and the frame rate to 50 fps.

Properties Inspector - Flash CS3

Our FLA is now set, our images are in their appropriate folder, 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. Put the images in their specified folder.
  2. Created the XML file.
  3. Created the FLA file.

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