Creating an Advance Flash Image Gallery - Page 7

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

The final section in our tutorial will show you what you can do to polish up the look and feel of your gallery. We will create a hover effect, use the Tween Class to create a fade in animation for all of our images, and will create a blind spot for stopping the gallery from scrolling when the mouse is at the centre of it using a conditional.

Creating a Hover Effect for Our Thumbnails

We are going to create a hover effect simply by altering the _alpha property of our thumbnails when the mouse rolls over the thumb and then set it back to its original value when the mouse roll out of the thumb. This code is to be placed within the .onLoadComplete event listener within the callThumbs() function:

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

target.onRollOver=function(){
this._alpha=50;
};

target.onRollOut=function(){
this._alpha=100;
};

}
}
}

That should do it, test your movie to see your hover effect in action.

Creating a Smooth Fade-in Animation

Our animation will be created using the cool Tween Class. This should be very simple to do if you have reviewed our Tween Class Tutorial. Start off by importing the class at the beginning of your entire code, we need to manually import the class in order to be able to use it.

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

Now go to the callThumbs() function and create a tween when the thumbs complete the loading process:

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

preloader.onLoadComplete=function(target){
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
target.my_txt.removeTextField();
target.onRelease=function(){
callFullImage(this._name);
}

target.onRollOver=function(){
this._alpha=50;
};

target.onRollOut=function(){
this._alpha=100;
};

}
}
}

The thumbs should now fade in when the thumbs complete loading. We will now do the full image. Look for the callFullImage() function and apply the same code to the .onLoadComplete event listener:

function callFullImage(myNumber) {

myURL = myImages[myNumber].attributes.full_url;
myTitle = myImages[myNumber].attributes.title;

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

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

}

You can now test your movie to see everything fades in when called, the thumbs and the full images.

Creating a Scrolling Blind Spot

We are going to create a scrolling blind spot that will prevent the gallery from scrolling when the mouse is at its centre so that the user can easily click on the thumbnail he is interested in. We can achieve this using the OR | conditional. Look for the scrolling() function and use the code below to make the gallery scroll only when the mouse is less than one third of the height of the mask or more than two thirds of its height. This means that if the mouse position is between more than one third and less than three thirds the gallery will not move.

function scrolling() {

_root.onEnterFrame = function() {
if (mask_mc._ymouse<(mask_mc._height*(1/3)) || mask_mc._ymouse>(mask_mc._height*(2/3))) {
container_mc._y += Math.cos(((mask_mc._ymouse)/mask_mc._height)*Math.PI)*15;
if (container_mc._y>mask_mc._y) {
container_mc._y = mask_mc._y;
}
if (container_mc._y<(mask_mc._y-(container_mc._height-mask_mc._height))) {
container_mc._y = mask_mc._y-(container_mc._height-mask_mc._height);
}
}
};

}

Yes! This concludes our tutorial, you can now update your gallery by editing your XML file to change the images, add more images, or reposition or resize your gallery.

I hope you have learnt something new from this tutorial. Please feel free to post any questions you have at the Oman3D Forum. You can download the source file of this gallery here.

- End of Tutorial