Monday, 2 November 2009

Black & white gallery part 2

This is a small update from the black and white gallery tutorial. In the previous tutorial you had to use the timeline to add key frames to adjust the saturation property of the movie clip which created the black and white effect. However, I discovered that this effect can be achieved purely using Actionscript code, so step 5 from the previous tutorial can be completely missed out. For this non-timeline effect to work, you will need to use a plugin called tweenMax which can be downloaded from You can of course use the ColorMatrixFilter and Abjustcolor classes from Actionscript 3.0 to create the same effect, but I prefer using tweenMax because you only need five additional lines of code.

Black & white gallery - part 2

Make sure you have completed Step 1 – 4 from the Black & white gallery before you attempt this tutorial as this is a continuation from Step 4. I have removed step 5 from previous tutorial and replaced it with the following step.

Step 5

On the timeline create a new layer called Actions. Then open up the Actions panel and enter the following code:

//Import the packages needed.
import gs.*;
import gs.easing.*;

//1.Array to hold all the picture instances.
var picArr:Array=new Array(pic1_mc,pic2_mc,pic3_mc,pic4_mc,pic5_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 {, 1, {colorMatrixFilter:{}});

function out(event:MouseEvent):void {, 1, {colorMatrixFilter:{colorize:0xFFFFFF}});

//3.For loop to call move images, and initally set the set images black and white
for (var i = 0; i < picArr.length; i++) {
rollBW(picArr[i]);[i], 0, {colorMatrixFilter:{colorize:0xFFFFFF}});


Step 6

Test your black and white gallery effect Ctrl + Enter. Now move your mouse over each of the images and you should notice them turning into colour images.

UPDATE: Black & white gallery - part 3


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP