Creating an Advance Flash Image Gallery - Page 4

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

This section will complete the basic functionality of the gallery by which a full image of a thumbnail is displayed when a thumbnail is clicked. We are again going to use the MovieClipLoader Class to load the full image. We will need to create and use a listener to detect the completion of the loading process of the thumbnail so that we can attach a function to a thumbnail to execute the command to load the full image. The outline of this section of the tutorial is as follows:

  1. Create a callFullImage() function to load the full image.
  2. Create a listener to detect the completion of the loading of the thumbnails.
  3. Attach a .onRelease event handler property when the thumbnail is fully loaded to execute the callFullImage() function.

Displaying the Full Image when a Thumb is Clicked

We are going to create a function called callFullImage() that will load the external image. The specific image to be loaded will be passed as a number argument to the function when the function is executed. The number passed to the function will be used to retrieve the actual URL from our myImages array of XML elements using the attribute property the same way we retrieved our thumbURL.

We will then have to create a movie clip container for our full image and then reposition it using the _root.full_x and _root.full_y variables. When that is done, we can use a new instance of the MovieClipLoader class to load our full image. Here is the code (Must be typed at the bottom of our existing code):

function callFullImage(myNumber) {

myURL = myImages[myNumber].attributes.full_url;

_root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
fullImage_mc._x = _root.full_x;
fullImage_mc._y = _root.full_y;

var fullClipLoader = new MovieClipLoader();

fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);

}

Before we can attach the function we created above to our thumbs .onRelease event handler property, we have to create a listener to detect when the thumbnail has fully loaded so that we can apply code to it, applying the property before that time will not work. We will have to go back to our callThumbs() function and add the following code to it. This code simply creates a preloader and then adds it to our MovieClipLoader instance.

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

We can now add the .onRelease event handler property using the .onLoadComplete event listener. That part of the code is easy, our preloader will be applied to all of our thumbnails, but it will be able to apply code to the specific object that has completely loaded by passing a target argument to function and then using this target reference to control the object.

Our target will be told to execute the callFullImage() function for the .onRelease event handler property. Our callFullImage() function needs to know the number of the thumbnail, and that number has been assigned earlier as the instance _name of the thumbnail container movie clip, so we simply use that and it will work.

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.onLoadComplete=function(target){
target.onRelease=function(){
callFullImage(this._name);
}
}
}
}

Using the object's _name is the only way for passing a unique variable to a listener tracking more than one object because all dynamic variables attached to that object are deleted when an external asset is loaded onto it. The only place to hold custom data that can't be deleted is the object's _name parameter.

That should do it, simply test your movie and click on any of the visible thumbs to load an external image.

Summary of this Page

  1. Created a callFullImage() function to load the full image.
  2. Created and attached a listener to detect when our thumbnails finish loading.
  3. Attached the callFullImage() function to an .onRelease event handler of each thumbnail when that thumbnail has finished loading.
  4. Passed the thumbnails _name property to the callFullImage() to load the required full image.

We have completed all the functional aspects of our gallery, we will now mask our gallery to define its size in the next section and then apply the code to make it scroll.

Next Page.