View comments | RSS feed

ColorMatrixFilter (flash.filters.ColorMatrixFilter)


Object
    |
    +-flash.filters.BitmapFilter
        |
        +-flash.filters.ColorMatrixFilter

public class ColorMatrixFilter
extends BitmapFilter

The ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the RGBA color and alpha values of every pixel on the input image to produce a result with a new set of RGBA color and alpha values. It allows saturation changes, hue rotation, luminance to alpha and various other effects. You can apply this filter to bitmaps and MovieClip instances.

The use of filters depends on the object to which you apply the filter:

You can also apply filter effects to images and video at authoring time. For more information, see your authoring documentation.

If you apply a filter to a movie clip or button, the cacheAsBitmap property of the movie clip or button is set to true. If you clear all filters, the original value of cacheAsBitmap is restored.

The following formulas are used, where a[0] through a[19] correspond to entries 0 through 19 in the 20-element array property matrix:


 redResult = a[0] * srcR + a[1] * srcG + a[2] * srcB + a[3] * srcA + a[4]
 greenResult = a[5] * srcR + a[6] * srcG + a[7] * srcB + a[8] * srcA + a[9]
 blueResult = a[10] * srcR + a[11] * srcG + a[12] * srcB + a[13] * srcA + a[14]
 alphaResult = a[15] * srcR + a[16] * srcG + a[17] * srcB + a[18] * srcA + a[19]

This filter separates each source pixel into its red, green, blue, and alpha components as srcR, srcG, srcB, srcA. As a final step, it combines each color component back into a single pixel and writes out the result.

The calculations are performed on unmultiplied color values. If the input graphic consists of premultiplied color values, those values are automatically converted into unmultiplied color values for this operation.

The following two optimized modes are available.

Alpha only. When you pass to the filter a matrix that adjusts only the alpha component, as shown here, the filter optimizes its performance:

 1 0 0 0 0
 0 1 0 0 0 
 0 0 1 0 0 
 0 0 0 N 0 (where N is between 0.0 and 1.0)

Faster version. Available only with SSE/Altivec accelerator-enabled processors such as Pentium 3 and later, and Apple G4 and later). The accelerator is used when the multiplier terms are in the range -15.99 to 15.99 and the adder terms a[4], a[9], a[14], and a[19] are in the range -8000 to 8000.

A filter is not applied if the resulting image would exceed 2880 pixels in width or height. For example, if you zoom in on a large movie clip with a filter applied, the filter is turned off if the resulting image reaches the 2880-pixel limit.

Availability: ActionScript 1.0; Flash Player 8

Example

The following example uses BitmapFilter to manipulate the color saturation of an image based on the location of the mouse pointer. If you position the pointer in the upper-left corner (0,0), the image should be unmodified. As you move the pointer to the right, the green and blue channels together are removed from the image. As you move the pointer down, the red channel is removed. If the pointer is positioned at the lower right of the Stage, the image should be completely black. This example assumes that you have an image in your library with its Linkage Identifier set to "YourImageLinkage".

import flash.filters.BitmapFilter;
import flash.filters.ColorMatrixFilter;

var image:MovieClip = this.attachMovie("YourImageLinkage", "YourImage", this.getNextHighestDepth());
image.cacheAsBitmap = true;

var listener:Object = new Object();
listener.image = image;
listener.onMouseMove = function() {
    var xPercent:Number = 1 - (_xmouse/Stage.width);
    var yPercent:Number = 1 - (_ymouse/Stage.height);
    var matrix:Array = new Array();
    matrix = matrix.concat([yPercent, 0, 0, 0, 0]); // red
    matrix = matrix.concat([0, xPercent, 0, 0, 0]); // green
    matrix = matrix.concat([0, 0, xPercent, 0, 0]); // blue
    matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha

    var filter:BitmapFilter = new ColorMatrixFilter(matrix);
    image.filters = new Array(filter);
}

Mouse.addListener(listener);
listener.onMouseMove();

See also

getPixel (BitmapData.getPixel method), applyFilter (BitmapData.applyFilter method), filters (MovieClip.filters property), cacheAsBitmap (MovieClip.cacheAsBitmap property)

Property summary

Modifiers

Property

Description

 

matrix:Array

An array of 20 elements for 4 x 5 color transform.

Properties inherited from class Object

constructor, __proto__, prototype, __resolve


Constructor summary

Signature

Description

ColorMatrixFilter(matrix:Array)

Initializes a new ColorMatrixFilter instance with the specified parameters.

Method summary

Modifiers

Signature

Description

 

clone() : ColorMatrixFilter

Returns a copy of this filter object.

Methods inherited from class BitmapFilter

clone


Methods inherited from class Object

addProperty, hasOwnProperty, isPropertyEnumerable, isPrototypeOf, registerClass, toString, unwatch, valueOf, watch



Version 8

Comments


webweber@bluewin.ch said on Sep 13, 2005 at 12:50 PM :
Ever wanted to turn an image into a grayscale?

// on stage image_mc, a clip that contains e.g. an image

import flash.filters.BitmapFilter;
import flash.filters.ColorMatrixFilter;

desaturation = 0;
this.onEnterFrame = function(){

if(desaturation <= 0){
des = 0.05;
}else if(desaturation >= 1){
des = -0.05;
}
desaturation += des;

image_mc.filters = new Array(getDesaturationFilter(desaturation));
}

// Turn an image (gradually) into a grayscale
// t is a Number ranging from 0 == 100% saturation, full colors
// to 1 == fully grayscale (is default)
function getDesaturationFilter(t:Number):BitmapFilter{
t = t ? t : 1;
// luminance coefficients as by Charles A. Poynton, 1997
// see point C-9 of http://www.faqs.org/faqs/graphics/colorspace-faq/
// alternative coefficients by Paul Haeberly :http://www.sgi.com/misc/grafica/matrix/
var r = 0.212671;
var g = 0.715160;
var b = 0.072169;
return new ColorMatrixFilter(
[t*r+1-t, t*g, t*b, 0, 0,
t*r, t*g+1-t, t*b, 0, 0,
t*r, t*g, t*b+1-t, 0, 0,
0, 0, 0, 1, 0]);
}


For comprehensive color manipulations - Brightness, Contrast, Hue, Threshold etc. - don't miss Mario Klingemann's ColorTransform class:

http://www.quasimondo.com/archives/000565.php#comments

Andreas Weber
webweber@bluewin.ch said on Sep 29, 2005 at 7:36 AM :
Sorry, small glitch - can a macromedian edit above post?

In the function instead of
t = t ? t : 1;
it should be
t = t != undefined ? t : 1;
apixel said on Mar 22, 2006 at 1:09 PM :
Can anyone print the results from this function? I sure can't. It simply
prints as if the image was not affected. I've enabled printasbitmap.

I'll contribute a sepia filter to this area:

(Just ignore my class stuff)
arCanvasImage.prototype.sepia = function() {
trace("calling sepia");
if (this.imageType != "text") {
var matrix:Array = new Array();
matrix = matrix.concat([0.35, 0.35, 0.35, 0, 0]);
// red
matrix = matrix.concat([0.3, 0.3, 0.3, 0, 0]);
// green
matrix = matrix.concat([0.21, 0.21, 0.21, 0, 0]);
// blue
matrix = matrix.concat([0, 0, 0, 1, 0]);
// alpha
var filter:BitmapFilter = new ColorMatrixFilter(matrix);
// first empty the filters
this.imageHolder.filters = new Array();
this.imageHolder.filters = new Array(filter);
this.filter = "sepia";
// alsways update
this._parent.update();
}
};
No screen name said on Oct 12, 2006 at 10:30 AM :
Instead of:
t = t != undefined ? t : 1;
you could use:
t = t || 1;
AkiraSamedi said on Apr 3, 2007 at 5:11 PM :
its just an idea, but its seams, that you'v applied the filter on a MC.
try out to draw that mc in a bitmapdataobject, than attach the bitmapdataobject to an other mc, and print that out, very much like a snapshot
myBitmapData.draw(mc_2, ...

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/8/main/00002079.html