Convert an Image to Black and White with AS3
October 28th, 2009 in Flash | 18 CommentsIn the following actionscript 3 lesson learn how to convert an image to black and white. We are going to create an image effect that when the user hovers the image, the image turns into black and white and when the mouse is out of the image, it is back to normal.
1. With Flash CS4 create a new flash file (Actionscript 3.0) and save it as image_effect.fla.
2. Rename “layer 1″ to “image”. Import the image of your choice. Convert it to a movie clip and give it an instance name of “image_mc”.
3. Create an “actions” layer and with the first frame selected open the actions panel. To create our desired effect, we will use the ColorMatrixFilter class and the AdjustColor class that is available in Flash CS4.
Read its documentation for more infos.
The AdjustColor class allows you to modify brightness, hue, saturation, and contrast.
4. First write the following statements to import the classes :
import flash.filters.ColorMatrixFilter; import fl.motion.AdjustColor;
5. Next declare the following variables :
var color : AdjustColor; var colorMatrix : ColorMatrixFilter; var matrix : Array; var filterBW : Array;
6.Then create a new AdjustColor and set its color properties in order to create a black an white effect. The idea is to desaturate the image. Play along with the values to suit your taste.
color = new AdjustColor(); color.brightness = 20; color.contrast = 20; color.hue = 0; color.saturation = -100;
7. Generate the flat array of values for all 4 color properties by calling the CalculateFinalFlatArray() method. Use this generated array to create a ColorMatrixFilter and set the filterBW to an array containing this ColorMatrixFilter.
matrix = color.CalculateFinalFlatArray(); colorMatrix = new ColorMatrixFilter(matrix); filterBW = [colorMatrix];
8. Finally add MOUSE_OVER and MOUSE_OUT event listeners to the image. The over function sets the image_mc’s filters property to the filter that we’ve just created and the out function sets this property to an empty array.
image_mc.addEventListener(MouseEvent.MOUSE_OVER,over);
image_mc.addEventListener(MouseEvent.MOUSE_OUT,out);
function over(e:MouseEvent):void{
image_mc.filters = filter;
}
function out(e:MouseEvent):void{
image_mc.filters = [];
}
9. Here’s the final code, test your movie to see it in action.
import flash.filters.ColorMatrixFilter;
import fl.motion.AdjustColor;
var color : AdjustColor;
var colorMatrix : ColorMatrixFilter;
var matrix : Array;
var filterBW : Array;
color = new AdjustColor();
color.brightness = 20;
color.contrast = 20;
color.hue = 0;
color.saturation = -100;
matrix = color.CalculateFinalFlatArray();
colorMatrix = new ColorMatrixFilter(matrix);
filterBW = [colorMatrix];
image_mc.addEventListener(MouseEvent.MOUSE_OVER,over);
image_mc.addEventListener(MouseEvent.MOUSE_OUT,out);
function over(e:MouseEvent):void{
image_mc.filters = filterBW;
}
function out(e:MouseEvent):void{
image_mc.filters = [];
}
Nov 15th, 2009
Thx a lot.
i use it with Tween class like this
import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import flash.filters.ColorMatrixFilter;
import fl.motion.AdjustColor;
var color:AdjustColor;
var colorMatrix:ColorMatrixFilter;
var matrix:Array;
var filterBW:Array;
var saturation = 0;
var brightness = 0;
var contrast = 0;
image_mc.addEventListener(MouseEvent.MOUSE_OVER,over);
image_mc.addEventListener(MouseEvent.MOUSE_OUT,out);
function over(e:MouseEvent):void {
var t:Number = 2;
var tw_over:Tween = new Tween(image_mc,”x”,Strong.easeIn,image_mc.x, image_mc.x, t,true);
tw_over.addEventListener(TweenEvent.MOTION_CHANGE, function(e){
if(saturation>-100){
saturation = -e.currentTarget.time*100/t;
color = new AdjustColor();
color.brightness=0;
color.contrast=0;
color.hue=0;
color.saturation=saturation;
matrix=color.CalculateFinalFlatArray();
colorMatrix=new ColorMatrixFilter(matrix);
filterBW=[colorMatrix];
image_mc.filters=filterBW;
}
});
}
function out(e:MouseEvent):void {
var t:Number = 2;
var tw_out:Tween = new Tween(image_mc,”x”,Strong.easeIn,image_mc.x, image_mc.x, t,true);
tw_out.addEventListener(TweenEvent.MOTION_CHANGE, function(e){
if(saturation<0){
saturation = (e.currentTarget.time*100/t) – 100;
color = new AdjustColor();
color.brightness=0;
color.contrast=0;
color.hue=0;
color.saturation=saturation;
matrix=color.CalculateFinalFlatArray();
colorMatrix=new ColorMatrixFilter(matrix);
filterBW=[colorMatrix];
image_mc.filters=filterBW;
}
});
tw_out.addEventListener(TweenEvent.MOTION_FINISH, function(){
image_mc.filters=[];
saturation = 0;
});
}
Dec 29th, 2009
my god, I can’t find a fl.motion.AdjustColor class, because i still use CS3.
so , what can I do?
Dec 30th, 2009
[...] Convert an Image to Black and White link [...]
Feb 5th, 2010
Social comments and analytics for this post…
This post was mentioned on Twitter by ActiveDen: Convert an Image to Black and White with AS3 http://bit.ly/3xchpD...
Feb 5th, 2010
thanks! i tried dat, works perfect for me!
Feb 11th, 2010
@ Kelly i had the same problem, I copied the AS scripts from CS 4
…
Mar 15th, 2010
[...] TUTORIAL Cargando … [...]
Apr 19th, 2010
[...] Convert an Image to Black and White with AS3 [...]
Jan 22nd, 2011
works very well.
Jan 30th, 2011
You have no idea how long i have been loking for this code
Apr 5th, 2011
Great ………….this solve my problem which i am looking for days.Actually i have to develop a application in flex with image manipulation …….and you just solve my problem
Apr 14th, 2011
[...] Convert an Image to Black and White with AS3 [...]
Apr 22nd, 2011
Dear
How to this effect create on as2?
Jul 12th, 2011
This is very useful. Thank you!
Aug 29th, 2011
Man this is brillant
i’ve never heard about this class : import fl.motion.AdjustColor;
thx a lot
Sep 6th, 2011
awesome! works great!
i decided to leave brightness and contrast zero and I just changed saturation. i preferred it a bit darker. thanks a lot!
Sep 8th, 2011
You don’t know how long I was looking for examples of adjustColor because I wanted to change the hue property in a mc. Thanks a lot, you really helped me out!
Mar 9th, 2012
How would you tween this?