Convert an Image to Black and White with AS3

Convert an Image to Black and White with AS3

In 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.

View DemoDownload Source

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 = [];
}

19 thoughts on “Convert an Image to Black and White with AS3

  1. cocey

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

  2. Pingback: The Best of 2009 in Flash Web Design - Flash Web Design and Design Photography | DesignOra

  3. Pingback: uberVU - social comments

  4. Pingback: Convertir una imagen a Blanco y Negro con AS3 (ActionScript 3) | Mailing Factory

  5. Pingback: Free I Share 分享资源 分享快乐 » Blog Archive » 45个高级Flash Actionscript应用

  6. Yash Chauhan

    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

  7. Pingback: 45+ Advanced Adobe Flash Actionscript Trainings - Flash24h.com | Thế giới Flash của bạn!

  8. Kfir

    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!

  9. nadiusk

    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! :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>