Friday, 12 June 2009

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

19 comments:

wilde 25 September 2009 at 13:03  

Nice!! This is exactly what I'm looking for! But by any chance could you email me the code for actionscript 2?? It would be muchly appreciated!!

iliketo 25 September 2009 at 14:15  

@wilde

Yes.

S 4 October 2009 at 20:25  

really like the tut. wondering if you could explain how to then enlarge the thumbnails on click? let me know thanks!

iliketo 5 October 2009 at 02:37  

@s

Sure, you could adapt the Zoom in/out effect, so you click instead of mousing over

Huy 28 October 2009 at 09:47  

I got 3 errors from your source code. Here they are:

Line 6: A type identifier is expected after the ":"

Line 11: The class or interface "MouseEvent" could not be loaded.

Line 15: - same like line 11 -

Please help.

I'm using Adobe Flash CS3.

iliketo 28 October 2009 at 17:15  

@Huy

Are you using Actionscript 3.0.

Huy 28 October 2009 at 21:33  

I chose Action Script 2.0 at the beginning.

iliketo 29 October 2009 at 03:46  

@Huy

This tutorial use Actionscript 3.0 code, so using Actionscript 2.0 will not work.

Huy 29 October 2009 at 10:28  

Hi,

Thank you very much for the tutorial. I did it. But now come a small problem. When I move the mouse to each picture, I want it to zoom in and zoom out when the mouse is away.

Can I embed these codes from another tutorial of yours (http://www.ilike2flash.com/2009/10/zoom-inout-effect-in-actionscript-3.html) into the codes already exist?? Or anyway else?

Best Regards,

Huy

iliketo 30 October 2009 at 04:02  

@Huy

Yes, it will work.

Huy 2 November 2009 at 07:45  

hi iliketo,

I didnt work. Can you take a look at this error? Here I have the file .fla that im working on and a screen shot of the error.

screen-shot: http://chauhuy.googlepages.com/Error..png

file: http://chauhuy.googlepages.com/Pic_BW.fla

BRs,
HUY

iliketo 2 November 2009 at 13:52  

@Huy

Common sense is needed when you use my code! You have basically copied and pasted my code without even modifying it. This is why you are receiving errors. You also have some typing mistakes.

Huy 2 November 2009 at 20:50  

Hi,

I found a typing mistake "l" and "L" from "import gs.TweenLite;". I already fixed it. Also I modified your code of course into some of my pic1_mc, pic2_mc, ... but still it says "defition gs:TweenLite could not be found". Can you point out my mistakes ?

iliketo 3 November 2009 at 02:45  

@Huy

You need to download the tweenLite plug-in, and then place it in the same folder as your fla file.

Huy 3 November 2009 at 09:43  

Hi,

I know that you feel very annoying about me right now but please help me to finish what Im doing to the end.

Im using Flash CS4 and already downloaded TweenLite plug-in folder. I also put that folder in the same folder of .fla file. But error appeared "could not find TweenLite package". Then I copied the file TweenLite.as and pasted it to the same folder as .fla file. This time, all the previous errors are gone but one new error message --> "5001: The name of package 'com.greensock' does not reflect the location of this file. Please change the package definition's name inside this file, or move the file. D:\EVTEK 2008-2009\FlashLite in HTML\TweenLite.as"

What should I do now?

BRs,

Huy

iliketo 3 November 2009 at 10:47  

@Huy

You need to place the whole 'gs' folder into the same folder as your fla file. Take a look at this tutorial.

Margarita 11 April 2010 at 10:29  

Hi iliketo,

first of all: great tutorial!

I am working on a project where a user can upload their own images and I would like to provide a gallery that just looks like yours from the tutorial however with their own pictures.
I am using php for uploading the pictures but I would like to know if it is possible to get images from the specific folders, rather than uploading images to the library. Do I make sense?
Does anyone know a solution? Any help will be appreciated!

Margarita

iliketo 16 May 2010 at 14:51  

Yes, you can. It's called 'loading external images'. You nred to use the URLRequest() and Loader().

Margarita 16 May 2010 at 14:59  

Hi iliketo,

thank you for your reply. After googling I have finally figured it out.
If anyone is interested I am happy to post it on here.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP