矩阵颜色滤镜：ColorMatrixFilter
使用这个滤镜可以将一个4x5的矩阵应到MC（或位图）上，从面改变MC的色相，透明度及亮度等。我想这个滤镜的难点应该是对这个矩阵的理解上。RGB 颜色由红绿蓝三种色组成，矩阵将各像素颜色拆分成红绿蓝三种色另加一个透明度。共四个通道。每个通道由5组值组成这就形成了一个4x5的矩阵。看看下图，来理解一下：
红 绿 蓝 透明度 结果
红色 1 0 0 0 0
绿色 0 1 0 0 0
蓝色 0 0 1 0 0
透明度 0 0 0 N 0（N为0.1-1）
从上面的矩阵中可看出，每个通道在其相应的位置设置了值，最小是0，{zd0}为1，改变这些值就可改变图象的色相及透明度。结果的数值改变可改变图象的亮度。比如将矩阵中红色通道的值由1改为0.5，那么图象中的红色元素将会降低。
在实际应用中，将这个矩阵赋值给一个数组，再将这个数组作为ColorMatrixFilter类构造函数的参数，{zh1}将MC的filters属性设为ColorMatrixFilter类的实例。这同使用其它滤镜一样。
先来做一个增加图片亮度的练习：
效果：
将代码改为：
import flash.filters.*;
var matrix:Array = new Array();
matrix = matrix.concat([1, 0, 0, 0, 100]); // red
matrix = matrix.concat([0, 1, 0, 0, 100]); // green
matrix = matrix.concat([0, 0, 1, 0, 100]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
my_mc.filters = [filter]; |
测试影片，可以片到图片亮度被增大了很多。这是将矩阵中红绿蓝通道的结果值都改为了100得到的结果。
下面一个练习是动态改变红绿蓝三种色的值，从而改变色相。通过鼠标在屏幕上的位置来确定各颜色的值，当鼠标移动时动态改变。
效果：
代码：
import flash.filters.*;
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:ColorMatrixFilter = new ColorMatrixFilter(matrix);
my_mc.filters = [filter];
} |
