Flash中的颜色矩阵详细说明

转自:http://conoon.blogbus.com/logs/7965865.html

ColorMatrixFilter 类使您可以将 4 x 5 矩阵转换应用于输入图像上的每个像素的 RGBA 颜色和 Alpha 值,以产生具有一组新的 RGBA 颜色和 Alpha 值的结果。该类允许饱和度

更改、色相旋转、亮度为 Alpha 以及各种其它效果。可以将此滤镜应用于位图和 MovieClip 实例。

滤镜的具体使用取决于要应用滤镜的对象:

要在运行时对影片剪辑应用滤镜,请使用 filters 属性。设置对象的 filters 属性不会修改对象,清除 filters 属性即可撤消设置操作。  
要对 BitmapData 实例应用滤镜,请使用 BitmapData.applyFilter() 方法。对 BitmapData 对象调用 applyFilter() 会获得源 BitmapData 对象和滤镜对象,并最终生成一个过

滤图像。  
您也可以在创作时对图像和视频应用滤镜效果。有关更多信息,请参见创作文档。

如果对影片剪辑或按钮应用滤镜,影片剪辑或按钮的 cacheAsBitmap 属性将设置为 true。如果清除所有滤镜,将恢复 cacheAsBitmap 的原始值。

将使用下列公式,其中 a[0] 到 a[19] 对应于 20 个元素的数组属性矩阵中的条目 0 到 19。

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]

此滤镜将每个源像素分离成它的红色、绿色、蓝色和 Alpha 成分,分别以 srcR、srcG、src 和 srcA 表示。最后一步,将各颜色成分重新组合为一个像素,并写出结果。

计算是对非相乘的颜色值执行的。如果输入图形由预先相乘的颜色值组成,这些值会自动转换为非相乘的颜色值以执行此操作。

可以使用下面两种经过优化的模式。

仅 Alpha。当向滤镜传递仅调整 Alpha 成分的矩阵时,滤镜将优化其性能,如下所示:

 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)

更快的版本。仅可用于启用 SSE/Altivec 加速器的处理器,如 Pentium 3 及更高版本、Apple G4 及更高版本。当乘数项在 -15.99 到 15.99 之间,并且加数项 a[4]、a[9]、a

[14] 和 a[19] 在 -8000 到 8000 之间时,将使用加速器。

如果结果图像的宽度或高度将超过 2880 像素,则不应用滤镜。例如,如果您在放大某大型影片剪辑时使用了滤镜,则在结果图像超过 2880 像素的限制时,该滤镜将关闭。

可用性:ActionScript 1.0;Flash Player 8

示例
下面的示例使用 BitmapFilter 来根据鼠标指针的位置操作图像的颜色饱和度。如果将鼠标指针置于左上角 (0,0),图像应保持不变。随着鼠标指针的右移,绿色通道和蓝色通道

一起从图像中删除。随着鼠标指针的下移,红色通道被删除。如果将鼠标指针置于舞台的右下方,图像应完全变黑。此示例假设您的库中具有链接标识符设置

为"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();

flash中提供的颜色矩阵可以让我们很容易的动态修改颜色的色相、透明度、饱和度、阴影等,正在慢慢研究中,这里留个地址先
http://www.adobe.com/devnet/flash/articles/matrix_transformations/ColorMatrixDemo.swf

一个翻译文章
在flash中可以用矩阵方便的操作颜色。在flash8以前的版本,操作颜色的唯一途径就是通过修改颜色对象中红,绿,蓝三个通道的值,在 Flash8,"颜色矩阵滤镜"

ColorMatrixFilter (flash.filters.ColorMatrixFilter) 在颗粒等级上提供给你更好的控制方法。"颜色矩阵滤镜"为 4行5列的多维矩阵(20个元素的数组)。图 4 是 与"颜色矩

阵滤镜"等同的矩阵。

Flash中的颜色矩阵

    R   G   B   A   Off
R   1   0   0   0   0
G   0   1   0   0   0
B   0   0   1   0   0
A   0   0   0   1   0

图4. 与"颜色矩阵滤镜"等同的矩阵

红,绿,蓝通道的值由如下所示计算方法所决定:

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]


可以看出,第一行的值决定了红色值,第二行决定绿色,第三行蓝色,第四行是透明(Alpha)通道值。同样可以看出首四栏值是与红,绿,蓝,alpha通道值的乘积,而第五栏的值

分别是和(偏移量)。注意每行的源值和结果值都是在0到255的区间内。因此即使各个通道的值小于0或大于255都会被强制到该区间内。我来举些例子说明它的原理。

果你想在红色通道加100(偏移量),将a[4]设置为100,如(图5) 。

Flash中的颜色矩阵

    R   G   B   A   Off
R   1   0   0   0   100
G   0   1   0   0   0
B   0   0   1   0   0
A   0   0   0   1   0

图5. 红色值增加100

如果想使绿色通道加倍,将a[6]设为2,如(图6)

Flash中的颜色矩阵

    R   G   B   A   Off
R   1   0   0   0   0
G   0   2   0   0   0
B   0   0   1   0   0
A   0   0   0   1   0

图6. 绿色加倍

如果你要使结果图像中的蓝色与原图的红色数量相等,将a[10]设为1, a[12]设为0 ,如(图7)

Flash中的颜色矩阵

    R   G   B   A   Off
R   1   0   0   0   0
G   0   1   0   0   0
B   1   0   0   0   0
A   0   0   0   1   0

图7. 红色决定蓝色值

改变图像的亮度,你需要在每个颜色通道的值改变同样的数量。最简单的途径是在每个通道都设置相同的偏移量。偏移量为正时可以增加亮度为负时可以减小亮度。(图8) 是一

个增加亮度的例子。

Flash中的颜色矩阵

    R   G   B   A   Off
R   1   0   0   0   50
G   0   1   0   0   50
B   0   0   1   0   50
A   0   0   0   1   0

图8. 增加亮度

你也可以通过将每个颜色通道与一个值相乘按比例的改变亮度,大于1的增加亮度小于1减小亮度。
按照原理,将图像转换为灰度图,你需要将每个通道的部分设为等值。因为有三个通道,你可以将每个通道乘以0.33并将它们相加得到结果值。如(图9)

Flash中的颜色矩阵

    R     G     B     A   Off
R   .33   .33   .33   0   0
G   .33   .33   .33   0   0
B   .33   .33   .33   0   0
A   0     0     0     1   0

图9.灰度图矩阵

由于不同颜色通道的相对屏幕发光度,但是 确实有特殊的提供更加真实的灰度图的"亮度系数"值 。例如在PS里创建一个纯绿色块然后把它放在一个纯蓝色块 ,然后将图像灰度化

,你会看到原来绿色的地方的灰色会比原来蓝色的区域要亮。

在Flash里使用这些矩阵,创建一个"颜色矩阵滤镜"的实例然后将它加入到一个影片剪辑(MovieClip)实例上。下面是一个使绿色加倍的例子:

import flash.filters.ColorMatrixFilter;
var mat:Array = [ 1,0,0,0,0,
      0,2,0,0,0,
      0,0,1,0,0,
      0,0,0,1,0 ];
var colorMat:ColorMatrixFilter = new ColorMatrixFilter(mat);
clip.filters = [colorMat];

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值