Creating an Image Gallery in Flash - Page 3

By Blue Chi (Riyadh Al Balushi) | Intermediate | Flash CS3 | Page 1, 2, 3, 4

We will create in this section the commands to make our thumbnails show a larger version of themselves when they are clicked. Here is the outline of what we will do now:

- Assign a variable to each thumb to hold a reference to its larger image.
- Attach this larger image to the main movie when a thumb is clicked
- Remove the larger image from the main movie when the image is clicked.

Assigning a Variable to Each Thumb

We will first assign a reference to each of the thumbnails to hold the number of image it should load, this is necessary because each button has to load a different image from the others. To do this, we have to add to the loop that we created earlier the code in bold below.

i in the previous code segment is a reference to the counter of the loop, which should be identical to the number of image being referred to at that instance.

Making the Buttons Clickable

Now to make our thumbs actually clickable, we have to assign a onRelease event handler property to each thumb within that same loop at as well, this property will tell the main timeline to attach the thumbnail we need. We have used attachMovie before, so it should be understandable now.

The larger version of each thumbnail should now be displayed when the thumbnail is clicked, you can test the movie to see it in acton. However, you might want to position this movie at the center of the stage, the same way we did for the thumbnails vertically earlier. We will do it this time for both the _x and the _y properties.

for (i=1; i<=imagesNumber; i++) {
container.attachMovie("thumb"+i,"thumb"+i+"_mc",i);
myThumb_mc = container["thumb"+i+"_mc"];
myThumb_mc._x = (i-1)*myThumb_mc._width;
myThumb_mc._y = (Stage.height-myThumb_mc._height)/2
myThumb_mc.largerImage = i;
myThumb_mc.onRelease = function(){
_root.attachMovie("image"+this.largerImage,"large_mc",2);
large_mc._x = (Stage.width - large_mc._width)/2;
large_mc._y = (Stage.height - large_mc._height)/2;
}
}

To make our larger image delete itself when clicked, we simple add another event handler property that does exactly that.

You can now test your movie to see a fully functional scrolling gallery! It is not as polished as the example we showed in the first page, but it works fine.

Summary of this page:

Created a variable to hold a reference to the larger image of each thumbnail.
Made the large image appear when the thumb is clicked using the attachMovie method.
Made the image disappear when the button is clicked.

The final section of our tutorial is optional. In it we will learn how to create a hover effect for our thumbs, make the larger image fade in and fade out, and do some minor other polishing touches.

Next page.