Creating an Advance Flash Image Gallery - Page 3

In this section of the tutorial we will load all of our thumbnails with the help of the MovieClipLoader Class and a loop. We also have to create a movie clip container for 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 thumbnails.
3. Create a loop to cycle through our XML elements.

Loading Thumbnails

All of our code for loading the thumbnails will be placed within a function to be defined at the bottom of our existing code. We will name this function callThumbs(). We are using function to organize our code into logical segments that can be easily debugged and updated.

The first task of our function is to create a movie clip container for our gallery, we will call it container_mc, this container will hold all the thumbnails and is necessary for positions and setting up the mask for the gallery. We will set the _x and _y positions of our container in accordance with the _root.gallery_x and _root.gallery_y values we retrieved from our XML file.

We also have to create an instance of the MovieClipLoader class, we will call it clipLoader, we can use one instance of the MovieClipLoader to load all the thumbnails.

The command to load our thumbnails 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 thumbnail. The repeated code will involve (1) creating a movie clip container for each thumbnail, (2) positioning this container, (3) retrieving the URL of the thumbnail, and (4) loading that thumbnail URL reference using the MovieClipLoader.

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.

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

We then have to create a movie clip container to host our thumbnail when it is loaded. We have to set i as the instance name of this movie clip, because it is the only way for detecting which thumbnail is which when passing the specific command to load the thumbnails full image.

The vertical position of our thumbnail can be determined by finding the total height of all previous thumbnails. We use this very simple formula to do this:

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

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 a thumbnails, the third equals 2 times the height of the thumbnails.

The final task of our loop is to simply use the .loadClip() method of our instance of the Movie Clip Loader to load each thumbURL onto the current thumbnail container movie clip. The prefix to our thumbURL variable is the folder name of our thumbnails folder.

This completes the loop and our callThumbs() 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.

This competes this section, you can now test your movie for the very first time to see all of your thumbnails loaded. You will not be able to see all of them because they go beyond the stage limits. We will fix that later on. We will make our thumbnails in our next section load the full images when each thumb is clicked.

Summary of this Page

1. Create a callThumbs() 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 load the full images by clicking any of these thumbs.

Next Page

Home | Tutorials | Features | Competitions | Forum | About Us | Contact Us | Legal | Privacy | Show Us Some Love, Donate! | Subscribe
© 2004-2009 Republic of Code - All Rights Reserved