Flex | Flash | Air | AS3
Convert an Image to Black and White with AS3
October 28th, 2009 in FlashIn 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
…