Creating an Advance Flash Image Gallery - Page 6

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

We are going to add in this section preloaders to all of our thumbnails and full images. Having a preloaders is important for galleries that load dynamic content on the internet because of the amount of time it could take to download the files. The trick for creating preloaders is discussed in detail in our previous MovieClipLoader Class tutorial. This section of our tutorial will have the following outline:

Create a preloader for the thumbnails by doing the following:
1. Use the existing listener to create a text field when the file starts loading.
2. Display the percentage of how many bytes have loaded in this text field during the loading process.
3. Remove this text field when the file completes loading.
Create a preloader for the full image by doing the following:
1. Create a listener.
2. Create a text field when the file starts loading.
3. Display the percentage of how many bytes have loaded in this text field during the loading process
4. Display the image name in the text field when the file completes loading.

We will do each of these preloaders on their own, we will start off with the thumbnails one:

Creating a Thumbnail Preloader

We already have a listener for the thumbnails which we have used to assign the .onRelease code when the thumbnail completes loading. We are going to make additional usage of this listener to (1) detect when the loading process starts and (2) update us with loading progress.

We have to go back to the callThumbs function and add the .onLoadStart event listener. We are going to create a text field named my_text which we will use later to display what is happening. We will make this text unselectable to avoid the funny cursor when its highlighted look nicer.

function callThumbs() {
_root.createEmptyMovieClip("container_mc",_root.getNextHighestDepth());
container_mc._x = _root.gallery_x;
container_mc._y = _root.gallery_y;

var clipLoader = new MovieClipLoader();
var preloader = new Object();
clipLoader.addListener(preloader);

for (i=0; i<_root.myImagesTotal; i++) {
thumbURL = myImages[i].attributes.thumb_url;

myThumb_mc = container_mc.createEmptyMovieClip(i, container_mc.getNextHighestDepth() );
myThumb_mc._y = _root.thumb_height*i;
clipLoader.loadClip("thumbs/"+thumbURL,myThumb_mc);

preloader.onLoadStart = function(target) {
target.createTextField("my_txt",target.getNextHighestDepth(),0,0,100,20);
target.my_txt.selectable = false;
};

preloader.onLoadComplete=function(target){
target.onRelease=function(){
callFullImage(this._name);
}
}
}
}

We will now update this text field throughout the loading progress by using the .onLoadProgress event listener.

preloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
};

preloader.onLoadComplete=function(target){
target.onRelease=function(){
callFullImage(this._name);
}
}
}
}

Finally, we will remove this text field when the loading progress has completed:

preloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
};

preloader.onLoadComplete=function(target){
target.my_txt.removeTextField();
target.onRelease=function(){
callFullImage(this._name);
}
}
}
}

This completes our thumbnail preloader, you can test the preloader on your local machine by testing your movie and then pressing Ctrl+Enter again to Simulate Download.

Creating a Full Image Preloader

Adding a preloader to our full images requires the same procedure, but because we do not have a listener created for it we will have to create one before we start. So go to your callFullImage() function and create one:

function callFullImage(myNumber) {

myURL = myImages[myNumber].attributes.full_url;