Black & white gallery

This Flash tutorial will teach you how to create a black and white gallery effect. The results of this effect will show a black and white image changing into a colour image when the mouse is over the image. This tutorial uses Actionscript 3.0.

I have used six images in this gallery, but you can add as many images as you wish. The images in this gallery have a solid black border around the edges, checkout this tutorial to achieve this effect.


Black & white gallery - part 1

Step 1

Open a new Flash document with 450 x 300 dimensions. You can of course use whatever stage dimensions you wish.
Set the FPS to 24 frames.
In the library create a new folder called “pictures” then import all your images into this folder by selecting File > Import > Import to library.


Step 2

Drag your images from the library onto the stage and align them like below:



Notice that my images have black borders around the edges, checkout this tutorial to create this effect. My images also have a wider profile, you can use the Transform tool (Q) to decrease the height of the image.


Step 3

Select each image in turn and convert them into a symbol by pressing F8. Give your symbol an appropriate name, check button and click ok.

Now select each button in turn and convert them into a symbol again by pressing F8. Give your symbol an appropriate name, check movie clip and click ok.


Step 4

Select each movie clip in turn and give them the following instance name: pic1_mc, pic2_mc, pic3_mc etc.




Step 5

Double click on one of your images to enter the movie clips timeline.
Select the 20th frame and insert a key frame (F6).
Right click anywhere in between the 1st and 20th and insert a motion tween. If you are using CS4 then select classic tween.
Now select the first frame, then your image on the stage, then select the adjust colour property and change saturation value to -100.



On the timeline insert a new layer called “Actions”. Insert a key frame (F6) at the 20th frame. Then right click on the 1st frame and 20th frame, select Actions and add the following code:

stop();

Your timeline should look like below:



Now return to the main timeline and repeat step 5 for all your images. You should eventually have all black and white images on the stage like below:




Step 6

On the main timeline insert a new layer called “Actions”. Then right click on the 1st frame and select Actions and add the following code:

//1.Array to hold all the picture instances.
var picArr:Array=new Array(pic1_mc,pic2_mc,pic3_mc,pic4_mc,pic5_mc,
pic6_mc,pic7_mc,pic8_mc,pic9_mc);

//2.Function to control the rollover and rollout effect
function rollBW(picture:MovieClip):void {
picture.addEventListener(MouseEvent.MOUSE_OVER, over);
picture.addEventListener(MouseEvent.MOUSE_OUT, out);

function over(event:MouseEvent):void {
picture.gotoAndPlay(2);
}

function out(event:MouseEvent):void {
picture.gotoAndStop(1);
}
}

//3.For loop to call move images.
for (var i = 0; i < picArr.length; i++) {
rollBW(picArr[i]); 
} 

Code
1. Creates an array called “picArr” to hold all the pictures instances. If you have more images in your gallery then simply add the instance names into the array.
2. This is a function to control the rollover and rollout effects of each image. The parameter “picture” is passed to the event listeners as well as the over and out functions.
3. This is a For Loop which calls all the picture instances in the array to the rollBW function.


Step 7

Test your black and white gallery Ctrl + Enter.



You should now have a black and white gallery effect. The source files can be downloaded here.
Feel free to contact me for any questions or comments and remember to subscribe.

UPDATE: Black & white gallery - part 2