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

We are going to load all of our images in this section with the help of the MovieClipLoader Class and a loop. We need to create another container just for the images of our gallery. All of our code will be put inside a function that will be later called from our XML instance .onLoad event handler when the XML file is loaded. The outline of this section is as follows:

  1. Create a movie clip container for our gallery.
  2. Create an instance of the MovieClipLoader to manage the loading process of our images.
  3. Create a loop to all the images in one go.

Loading images

All of our code for loading the images will be placed within a function to be defined at the bottom of our existing code. We will name this function callImages().

function callImages(){

}

The first task of our function is to create another movie clip container for our gallery, we will call it container_mc, this container will hold all the images of our gallery. It is necessary to have this container to be able to move all the images together and to also be able to mask the gallery to define its shape. We also have to create an instance of the MovieClipLoader class, we will call it myMCL, we can use one instance of the MovieClipLoader to load all the images.

function callImages() {

_root.myImages_mc = _root.myGallery_mc.createEmptyMovieClip("myImages_mc", _root.myGallery_mc.getNextHighestDepth());


var myMCL:MovieClipLoader = new MovieClipLoader();

}

The command to load our images will be passed from within a loop. We need this loop because we need to execute the same command multiple times for each and every image. The repeated code will involve (1) creating a movie clip container for each image, (2) positioning this container, (3) retrieving the URL of the image, and (4) loading that image URL reference using the MovieClipLoader.

function callImages() {

_root.myImages_mc = _root.myGallery_mc.createEmptyMovieClip("myImages_mc", _root.myGallery_mc.getNextHighestDepth());

var myMCL:MovieClipLoader = new MovieClipLoader();

for (i=0; i<_root.myImagesTotal; i++) {
imageURL = _root.myImages[i].attributes.url;
image_mc = _root.myImages_mc.createEmptyMovieClip(i, _root.myImages_mc.getNextHighestDepth());
image_mc._x = _root.image_width*i;

myMCL.loadClip(imageURL,image_mc);
}

}

We will explain this code in more detail now. First of all, our loop cycles as long as the counter i, does not exceed the total number of <image /> elements we have in our XML file, we determined this value earlier and stored it as _root.myImagesTotal.

for (i=0; i<_root.myImagesTotal; i++) {

i is then used to cycle through our array of the <image /> elements to retrieve the URL of the image. The elements are cycled through one by one to retrieve the value of the url parameter and store it in a temporary variable called imageURL.

imageURL = _root.myImages[i].attributes.url;

We then have to create a movie clip container to host our image when it is loaded as required by the MovieClipLoader Class. We are setting i as the instance name of this movie clip so that we have a different name for each of our image containers..

image_mc = _root.myImages_mc.createEmptyMovieClip(i, _root.myImages_mc.getNextHighestDepth());

The horizontal position of our image is then determined by finding the total height of all previous images. We use this very simple formula to do this:

Positioning Diagram

This works because i starts from zero and not one. No matter what image we are at, i will always be one number less than the image number, so we can multiply the height by i to get the right position for the current image:

image_mc._x = _root.image_width*i;

This code works because i starts from zero, so _y for the first movie clip equals zero, and the second equals 1 times the height of the images, the third equals 2 times the height of the images.

The final task of our loop is to simply use the .loadClip() method of our instance of the MovieClipLoader to load each imageURL onto the current image container movie clip. The prefix to our imageURL variable is the folder name of our images folder.

myMCL.loadClip(imageURL,image_mc);

This completes the loop and our callImages() function, we need now to 'call' this function when our XML file is successfully loaded. We will have to go back to the earlier section of our ActionScript code and call our function from there. Type your function name at the end of the statements within the .onLoad event handler property.

myGalleryXML.onLoad = function() {

_root.gallery_width = myGalleryXML.firstChild.attributes.width;
_root.gallery_height = myGalleryXML.firstChild.attributes.height;
_root.gallery_y = myGalleryXML.firstChild.attributes.y;

_root.spacing = myGalleryXML.firstChild.attributes.vertical_spacing;
_root.bar_y = Number(_root.gallery_height)+Number(_root.spacing);
_root.bar_thickness = myGalleryXML.firstChild.attributes.bar_thickness;
_root.scroller_width = _root.bar_thickness*2

_root.image_width = myGalleryXML.firstChild.attributes.image_width;

_root.myImages = myGalleryXML.firstChild.childNodes;
_root.myImagesTotal = _root.myImages.length;

createContainer();
callImages();

};

This competes this section, you can now test your movie for the very first time to see all of your images loaded. You will not be able to see all of them because they go beyond the stage limits. We will work on that later. We will make our gallery have a defined shape by applying a mask to it next.

Summary of this Page

  1. Create a callImages() function.
  2. Created a movie clip container for our thumbs.
  3. Create an instance of the MovieClipLoader Class.
  4. Used a loop to load all the thumbs using the MovieClipLoader.

The next section of our tutorial will teach you how to apply a mask to this container to define the shape of the gallery.

Next Page