Creating an Image Gallery in Flash - Page 4

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

The optional section of our tutorial is going to add some extra little touches that will make our gallery look nicer and function in a better way. The highlights of this section are:

  1. - Creating a hover effect for the thumbnails.
  2. - Create a fade-in and fade-out effect for the larger image.
  3. - Stop the gallery from scrolling when a larger image is displayed and disable the thumbnails.

Creating a Hover Effect for the Thumbnails

The hover effect that we will apply is pretty simple, our buttons will have a transparency of 50% when they are created and will be fully opaque when the user rolls the mouse over it. We also have to add a code to set the transparency to 50% again when the mouse rolls out of the thumbnail. This code is pretty simple all you have to do is update the thumbnail creation loop with the following code in bold:

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._alpha=50;
myThumb_mc.largerImage = i;
myThumb_mc.onRollOver = function(){
this._alpha=100;
}

myThumb_mc.onRollOut = function(){
this._alpha=50;
}

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;
large_mc.onRelease = function() {
this.removeMovieClip();
};
};
}

Creating a Fade-In Fade-Out Animation

We are going to use the Tween Class to animate the transparency of the images, we are going to use a very basic tween for the _alpha property from zero to 100, this should be easy to understand if you have read our Tween Class Tutorial. We are going to use the event handler .onMotionFinished to delete the movie at that instance of the movie clip upon the completion of the fade out tween. Update the the creation loop in accordance with the code in bold:

//Paste this code at the top of your existing code to be able to use the Tween Class

import mx.transitions.Tween;
import mx.transitions.easing.*;
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._alpha=50;
myThumb_mc.largerImage = i;
myThumb_mc.onRollOver = function(){
this._alpha=100;
}
myThumb_mc.onRollOut = function(){
this._alpha=50;
}
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;
new Tween(large_mc,"_alpha",Strong.easeOut,0,100,0.5,true);
large_mc.onRelease = function() {
var myFadeOut = new Tween (large_mc,"_alpha",Strong.easeOut, 100,0,0.5,true);
myFadeOut.onMotionFinished=function(){

large_mc.removeMovieClip();
}
};
};
}

An easy combo that we can do along with this is to fade out the existing thumbnails at the same as the time to clear the stage for the main image.

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._alpha=50;
myThumb_mc.largerImage = i;
myThumb_mc.onRollOver = function(){
this._alpha=100;
}
myThumb_mc.onRollOut = function(){
this._alpha=50;
}
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;
new Tween(large_mc,"_alpha",Strong.easeOut,0,100,0.5,true);
new Tween(container,"_alpha",Strong.easeOut,100,50,0.5,true);
large_mc.onRelease = function() {
var myFadeOut = new Tween (large_mc,"_alpha",Strong.easeOut, 100,0,0.5,true);
new Tween(container,"_alpha",Strong.easeOut,50,100,0.5,true);
myFadeOut.onMotionFinished=function(){
large_mc.removeMovieClip();
}
};
};
}

Stopping the Gallery from Scrolling and Disabling the buttons while the large image is displayed

If you test your gallery before applying this optional section you should be able to notice that the gallery still scrolls around when the image is displayed, it is even possible to click on the visible thumbs through the margins on the sides of the stage. To stop this we can use a conditional and the enable property of the button class.

To stop the scrolling, we will create a variable that is checked before moving the gallery, when a button is clicked, the value of this variable changes to false and when the image is remove its value is changed back to true. This will require applying changes to four sets of the code: (1) we have to create our variable at the beginning of the code, (2) we will have to change the value of the value when the button is clicked, (3) we have to change the value of the variable when the image is removed, and (4) then we will have to check for the variable each time the gallery needs to scroll. Here is the update code of our entire gallery:

import mx.transitions.Tween;
import mx.transitions.easing.*;

this.createEmptyMovieClip("container",1);
var imagesNumber:Number = 9;
var scrolling:Boolean = true;

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._alpha = 50;
myThumb_mc.largerImage = i;
myThumb_mc.onRollOver = function() {
this._alpha = 100;
};
myThumb_mc.onRollOut = function() {
this._alpha = 50;
};
myThumb_mc.onRelease = function() {
scrolling = false;
_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;
new Tween(large_mc, "_alpha", Strong.easeOut, 0, 100, 0.5, true);
new Tween(container,"_alpha",Strong.easeOut,100,50,0.5,true);
large_mc.onRelease = function() {
scrolling = true;
var myFadeOut = new Tween(large_mc, "_alpha", Strong.easeOut, 100, 0, 0.5, true);
new Tween(container,"_alpha",Strong.easeOut,50,100,0.5,true);
myFadeOut.onMotionFinished = function() {
large_mc.removeMovieClip();
};
};
};
}

container.onEnterFrame = function() {
if (scrolling){
this._x += Math.cos((-_root._xmouse/Stage.width)*Math.PI)*15;
if (this._x>0) {
this._x = 0;
}
if (-this._x>(this._width-Stage.width)) {
this._x = -(this._width-Stage.width);
}
}
};

The very last addition that we can use to polish up our gallery is to disable the buttons that could be clicked through the margins around the large image. Doing this will require using another loop to cycle through all the thumbs and change their enabled property. This property should be changed when a button is clicked, and when the fade-out motion of the large image finishes. We will also have to add the code to set the transparency back to 50% because the RollOut action will no longer work for the button clicked as it will no longer be enabled. Here is our new updated code for the whole thing.

import mx.transitions.Tween;
import mx.transitions.easing.*;

this.createEmptyMovieClip("container",1);
var imagesNumber:Number = 9;
var scrolling:Boolean = true;

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._alpha = 50;
myThumb_mc.largerImage = i;
myThumb_mc.onRollOver = function() {
this._alpha = 100;
};
myThumb_mc.onRollOut = function() {
this._alpha = 50;
};
myThumb_mc.onRelease = function() {
this._alpha=50;
for (i=1; i<=imagesNumber; i++) {
var myClip = container["thumb"+i+"_mc"];
myClip.enabled = false;
}

scrolling = false;
_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;
new Tween(large_mc, "_alpha", Strong.easeOut, 0, 100, 0.5, true);
new Tween(container,"_alpha",Strong.easeOut,100,50,0.5,true);
large_mc.onRelease = function() {
scrolling = true;
var myFadeOut = new Tween(large_mc, "_alpha", Strong.easeOut, 100, 0, 0.5, true);
new Tween(container,"_alpha",Strong.easeOut,50,100,0.5,true);
myFadeOut.onMotionFinished = function() {
for (i=1; i<=imagesNumber; i++) {
var myClip = container["thumb"+i+"_mc"];
myClip.enabled = true;
}

large_mc.removeMovieClip();
};
};
};
}

container.onEnterFrame = function() {
if (scrolling){
this._x += Math.cos((-_root._xmouse/Stage.width)*Math.PI)*15;
if (this._x>0) {
this._x = 0;
}
if (-this._x>(this._width-Stage.width)) {
this._x = -(this._width-Stage.width);
}
}
};

You should get something very similar to the movie below if you test your movie now.

This concludes our tutorial, I hope that you found it helpful and learnt something new from it. You can download the source file of the movie here. Please feel free to post at the Oman3D Forum if you have any questions.

- End of Tutorial.