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

In the final page of our tutorial we are going to add preloaders for all of our images as they load. We are going to use the MovieClipLoader Class listener events to do this trick, this part should be a breeze to follow if you have read our tutorial on this topic. We are also going to create a simple fade in animation when the images finish loading using the Tween Class to make our gallery look a little bit nicer. The outline of this tutorial is as follows:

  1. Create a text field for each of our images to show our loading status of these images when the loading starts.
  2. Update this text field as the loading progresses.
  3. Remove this text field when the loading completes.
  4. Create a tween animation to fade in the image when the loading completes.

Creating The Preloader Text Field

The loading process of our images is controlled by the callImages() function, it's current code content is as follows:

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 are going to attach a listener to our MovieClipLoader instance, a listener is a generic object that tracks what happens to another object. In our case, our listener will track what happens to our instance the MovieClipLoader and react to the various stages of the loading process. We are going to create the listener and then attach it to myMCL.

function callImages() {

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

var myMCL:MovieClipLoader = new MovieClipLoader();
var myPreloader:Object = new Object();
myMCL.addListener(myPreloader);

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 can now check for the various stages of the loading process. We are going to start by using the .onLoadStart listener event to create a simple background for our images and create an empty text field for each of these images to later show the loading progress. Our background is going to be coloured in black and our text field will have its text coloured in red.

function callImages() {

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

var myMCL:MovieClipLoader = new MovieClipLoader();
var myPreloader:Object = new Object();
myMCL.addListener(myPreloader);

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);
}

myPreloader.onLoadStart = function(target){

target.beginFill(0x000000,100);
target.lineTo(_root.image_width,0);
target.lineTo(_root.image_width,_root.gallery_height);
target.lineTo(0,_root.gallery_height);
target.lineTo(0,0);
target.endFill();

target.createTextField("myText_txt",1,0,0,100,20);
target.myText_txt.textColor = 0xFF0000;
target.myText_txt.selectable = false;

}

}
The reference target from within a listener event refers to the actual image that is being loaded. Using target makes it possible to use a single instance MovieClipLoader to preload multiple images.

We are going to use the .onLoadProgress listener event to update the text of our text field as the loading progresses.

function callImages() {

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

var myMCL:MovieClipLoader = new MovieClipLoader();
var myPreloader:Object = new Object();
myMCL.addListener(myPreloader);

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);
}

myPreloader.onLoadStart = function(target){

target.beginFill(0x000000,100);
target.lineTo(_root.image_width,0);
target.lineTo(_root.image_width,_root.gallery_height);
target.lineTo(0,_root.gallery_height);
target.lineTo(0,0);
target.endFill();

target.createTextField("myText_txt",1,0,0,100,20);
target.myText_txt.textColor = 0xFF0000;
target.myText_txt.selectable = false;

}

myPreloader.onLoadProgress = function(target, lb, tb){
target.myText_txt.text=Math.floor((lb/tb)*100)+"%";
}


}

Now in the final stage when the image finally finishes loading, we are going to clear the background, remove the text field, and fade in our image using the Tween Class:

function callImages() {

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

var myMCL:MovieClipLoader = new MovieClipLoader();
var myPreloader:Object = new Object();
myMCL.addListener(myPreloader);

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);
}

myPreloader.onLoadStart = function(target){

target.beginFill(0x000000,100);
target.lineTo(_root.image_width,0);
target.lineTo(_root.image_width,_root.gallery_height);
target.lineTo(0,_root.gallery_height);
target.lineTo(0,0);
target.endFill();

target.createTextField("myText_txt",1,0,0,100,20);
target.myText_txt.textColor = 0xFF0000;
target.myText_txt.selectable = false;

}

myPreloader.onLoadProgress = function(target, lb, tb){
target.myText_txt.text=Math.floor((lb/tb)*100)+"%";
}


myPreloader.onLoadComplete = function(target){
target.clear();
target.myText_txt.removeTextField();
new Tween (target, "_alpha", Strong.easeOut, 0, 100,1, true);
}


}

Cool. Believe it or not, we have finally finished our gallery. Test your movie now, you can press Ctrl+Test twice to test streaming your SWF locally to see how the preloader works.

This concludes our tutorial, you can download the end source file here. Feel free to post any questions you have at the Oman3D Forum. You should also check out our other gallery tutorials over at our Tutorial Archives if you are interested in learning other advanced techniques.

- End of Tutorial.