+ -
当前位置:首页 → 问答吧 → AS类:颜色属性ColorProperty(饱和度对比度等)

AS类:颜色属性ColorProperty(饱和度对比度等)

时间:2007-04-16

来源:互联网

2007-6-1更新:以前发布的AS2类中的色调_color在应用中效果并不好,现在改为色相_hue。这个和在flash8中使用滤镜面板上的调整颜色中的“色相(hue)”效果是完全一致的,在实际应用中,可以用来动态调整MC的色调,这在更换皮肤色调上还是很好用的。

用AS来调整图片的色调、亮度、灰度、饱和度、对比度、反相虽然不难,但因为涉及到ColorMatrixFilter的颜色矩阵的应用,使用起来有点麻烦,因此写了这个类ColorProperty。
这个类是对MovieClip类扩展,为MovieClip增加了这些属性:色相:_hue,亮度:_brightness,灰度:_grayscale,饱和度:_saturation,对比度:_contrast,反相:_invert。
当然,你也可以改写这个类,使之成为一个新类,而不是扩展MovieClip类。

用法(与_width,_height用法一样):
import ColorProperty;
ColorProperty.init();
//色相,取值范围为:-180~180
img._hue=100;
//trace(img._hue);
//亮度,取值范围为:-255~255
//img._brightness = 100;
//trace(img._brightness)
//灰度,布尔值,true为灰度,false则反之。
//img._grayscale = true;
//trace(img._grayscale);
//饱和度,一般范围为:0~3为宜
//img._saturation = 3;
//trace(img._saturation);
//对比度,取值范围为:0~1
//img._contrast = 0.15;
//反相,布尔值,true为反相,false则反之。
//trace(img._contrast);
//img._invert=true;

代码如下:
复制内容到剪贴板
代码:
/**
* @Name:ColorProperty(MovieClip颜色属性)
* 色相:_hue,亮度:_brightness,灰度:_grayscale,饱和度:_saturation,对比度:_contrast,反相:_invert
* @author:Flashlizi
* @version:1.1
*/
import flash.filters.ColorMatrixFilter;
class ColorProperty
{
    //_matrix是ColorMatrixFilter类的默认恒等矩阵
    //_nRed,_nGreen,_nBlue是计算机图形颜色亮度的常量
    //private static var _matrix : Array = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
    private static var _nRed : Number = 0.3086;
    private static var _nGreen : Number = 0.6094;
    private static var _nBlue : Number = 0.0820;
    function ColorProperty ()
    {
    }
    public static function init ()
    {
        setColorProperty ();
        //色相hue(取值范围为:-180~180)
        MovieClip.prototype.addProperty ("_hue", MovieClip.prototype.getHue, MovieClip.prototype.setHue);
        //亮度Brightness(取值范围为:-255~255)
        MovieClip.prototype.addProperty ("_brightness", MovieClip.prototype.getBrightness, MovieClip.prototype.setBrightness);
        //灰度Grayscale
        MovieClip.prototype.addProperty ("_grayscale", MovieClip.prototype.getGrayscale, MovieClip.prototype.setGrayscale);
        //饱和度Saturation(饱和度级别一般范围为:0~3)
        MovieClip.prototype.addProperty ("_saturation", MovieClip.prototype.getSaturation, MovieClip.prototype.setSaturation);
        //对比度Contrast(取值范围为:0~1)
        MovieClip.prototype.addProperty ("_contrast", MovieClip.prototype.getContrast, MovieClip.prototype.setContrast);
        //反相Invert
        MovieClip.prototype.addProperty ("_invert", MovieClip.prototype.getInvert, MovieClip.prototype.setInvert);
    }
    private static function setColorProperty ()
    {
        //色相Hue,getter&setter
        MovieClip.prototype.setHue=function(hue:Number) {
        if (hue == 0 || isNaN(hue)) {
         return;
         }
         hue = Math.min(180,Math.max(-180,hue))/180*Math.PI;
         var cosVal:Number = Math.cos(hue);
        var sinVal:Number = Math.sin(hue);
         var lumR:Number = 0.213;
        var lumG:Number = 0.715;
         var lumB:Number = 0.072;
        var HueMatrix: Array=[
         lumR+cosVal*(1-lumR)+sinVal*(-lumR),lumG+cosVal*(-lumG)+sinVal*(-lumG),lumB+cosVal*(-lumB)+sinVal*(1-lumB),0,0,
          lumR+cosVal*(-lumR)+sinVal*(0.143),lumG+cosVal*(1-lumG)+sinVal*(0.140),lumB+cosVal*(-lumB)+sinVal*(-0.283),0,0,
          lumR+cosVal*(-lumR)+sinVal*(-(1-lumR)),lumG+cosVal*(-lumG)+sinVal*(lumG),lumB+cosVal*(1-lumB)+sinVal*(lumB),0,0,
          0,0,0,1,0
             ];
          this.filters = [new ColorMatrixFilter (HueMatrix)];
          MovieClip.prototype._hue = hue;
          };
         MovieClip.prototype.getHue=function():Number{
          return MovieClip.prototype._hue;
         };
        //亮度Brightness,getter&setter
        MovieClip.prototype.getBrightness = function () : Number
        {
            return MovieClip.prototype._brightness;
        }
        MovieClip.prototype.setBrightness = function (offset : Number) : Void
        {
            var Brightness_Matrix : Array = [1, 0, 0, 0, offset, 0, 1, 0, 0, offset, 0, 0, 1, 0, offset, 0, 0, 0, 1, 0];
            this.filters = [new ColorMatrixFilter (Brightness_Matrix)];
            MovieClip.prototype._brightness = offset;
        }
        //灰度Grayscale,getter&setter
        MovieClip.prototype.getGrayscale = function () : Boolean
        {
            return MovieClip.prototype._grayscale;
        }
        MovieClip.prototype.setGrayscale = function (yes : Boolean) : Void
        {
            if (yes)
            {
                var Grayscale_Matrix : Array = [_nRed, _nGreen, _nBlue, 0, 0, _nRed, _nGreen, _nBlue, 0, 0, _nRed, _nGreen, _nBlue, 0, 0, 0, 0, 0, 1, 0];
                this.filters = [new ColorMatrixFilter (Grayscale_Matrix)];
                MovieClip.prototype._grayscale = true;
            } else
            {
                MovieClip.prototype._grayscale = false;
            }
        }
        //饱和度Saturation,getter&setter
        MovieClip.prototype.getSaturation = function () : Number
        {
            return MovieClip.prototype._saturation;
        }
        MovieClip.prototype.setSaturation = function (nLevel : Number) : Void
        {
            var srcRa : Number = (1 - nLevel) * _nRed + nLevel;
            var srcGa : Number = (1 - nLevel) * _nGreen;
            var srcBa : Number = (1 - nLevel) * _nBlue;
            var srcRb : Number = (1 - nLevel) * _nRed;
            var srcGb : Number = (1 - nLevel) * _nGreen + nLevel;
            var srcBb : Number = (1 - nLevel) * _nBlue;
            var srcRc : Number = (1 - nLevel) * _nRed;
            var srcGc : Number = (1 - nLevel) * _nGreen;
            var srcBc : Number = (1 - nLevel) * _nBlue + nLevel;
            var Saturation_Matrix : Array = [srcRa, srcGa, srcBa, 0, 0, srcRb, srcGb, srcBb, 0, 0, srcRc, srcGc, srcBc, 0, 0, 0, 0, 0, 1, 0];
            this.filters = [new ColorMatrixFilter (Saturation_Matrix)];
            MovieClip.prototype._saturation = nLevel;
        }
        //对比度Contrast,getter&setter
        MovieClip.prototype.getContrast = function () : Number
        {
            return MovieClip.prototype._contrast;
        }
        MovieClip.prototype.setContrast = function (nLevel : Number) : Void
        {
            var Scale : Number = nLevel * 11;
            var Offset : Number = 63.5 - (nLevel * 698.5);
            var Contrast_Matrix : Array = [Scale, 0, 0, 0, Offset, 0, Scale, 0, 0, Offset, 0, 0, Scale, 0, Offset, 0, 0, 0, 1, 0];
            this.filters = [new ColorMatrixFilter (Contrast_Matrix)];
            MovieClip.prototype._contrast = nLevel;
        }
        //反相Invert,getter&setter
        MovieClip.prototype.getInvert = function () : Boolean
        {
            return MovieClip.prototype._invert;
        }
        MovieClip.prototype.setInvert = function (yes : Boolean) : Void
        {
            if (yes)
            {
                var Invert_Matrix : Array = [ - 1, 0, 0, 0, 255, 0, - 1, 0, 0, 255, 0, 0, - 1, 0, 255, 0, 0, 0, 1, 0];
                this.filters = [new ColorMatrixFilter (Invert_Matrix)];
                MovieClip.prototype._invert = true;
            } else
            {
                MovieClip.prototype._invert = false;
            }
        }
    }
}
[ 本帖最后由 flashlizi 于 2007-6-1 19:27 编辑 ]

附件

ColorProperty.rar (146.05 KB)

2007-6-1 19:27, 下载次数: 530

AS类及演示

作者: flashlizi   发布时间: 2007-04-16

不错,顶一个

作者: Anubiss   发布时间: 2007-04-16

之前就想做这个,方便了很多人啊!
好东西!

作者: comicfish   发布时间: 2007-05-10

相见恨晚啊!!谢谢楼主!!!!!!!!!

作者: nang   发布时间: 2007-06-18

这个没办法同时使用两种属性!!!????

作者: yy1213   发布时间: 2007-08-26

强人,仰慕!

作者: dakular   发布时间: 2007-09-24

学习,UP!

作者: winhero_charles   发布时间: 2007-09-24

还没仔细看
但我敢肯定 这是好东西

作者: boenlee   发布时间: 2007-10-03

做个标记。谢谢楼主!

作者: zero09   发布时间: 2007-10-06

不错,留个位置

作者: wnosidw   发布时间: 2007-10-07

能操作NetStream流吗?
就是片子能用这个类去调整反相之类吗?

作者: qdxr   发布时间: 2007-10-12

怎么样同时应用两个或两个以上的属性?

作者: poppyvivi   发布时间: 2007-10-18

我也来留个位置,希望能同时设置多个属性。

作者: pyfxl   发布时间: 2008-01-11

下载,学习,使用之,顶起

作者: xbstu2006   发布时间: 2008-03-28

啥都不说了,眼泪汪汪的。。楼主人才一个。找这个找的好苦啊。我
谢谢

作者: supergmy   发布时间: 2008-04-03

啥都不说了,眼泪汪汪的。。楼主人才一个。找这个找的好苦啊。我
谢谢

作者: cyx006   发布时间: 2008-05-16

有个致命的缺点啊 !?
import ColorProperty;
ColorProperty.init();
my_mc.onRollOver=function(){
              this._grayscale=true
}
my_mc.onRollOut=function(){
              this._grayscale=false
}

不能反复修改属性值?

作者: fantasysin   发布时间: 2008-07-15

可以反复修改属性
不过FALSE是不好使!我用undefined进行给值,一样的!
this._grayscale=undefined;

作者: supergmy   发布时间: 2008-07-16

最近在研究这个东西,这贴果然不错.有几点想提出来的.
这是灰度和饱和度用到的几个常量:
    private static var _nRed : Number = 0.3086;
    private static var _nGreen : Number = 0.6094;
    private static var _nBlue : Number = 0.0820;
据我查找到的灰度心理学公式来看,这三个常量最原始是0.299,0.587和0.114,运算时取不同精度可能会有不同结果,但是我看从2位到30位精度似乎都不跟这里的数字匹配,不过还算接近,但是我还是想知道这三个数字楼主是如何得出的.
可以说,灰度就是饱和度等于零的一种特殊状态.饱和度在你的注释里说范围一般是0~3,从楼主的公式来看,饱和度等于零的时候,就恰好是灰度的变化,饱和度为1的时候,则恰好没有颜色变化,这么看来,1应该是个中间状态,0为一个极端状态,似乎另一个极端是2会合适点,不过我看饱和度的上限似乎是无限的,所以取到3应该还是可以的,测试中,取到3还可以得到不错的效果.
至于这里的一些关于不能重复设置灰度的错误,我想只是作者一时忽略了,要调整过来也很容易.
MovieClip.prototype.setGrayscale = function (yes : Boolean) : Void
        {
            if (yes)
            {
                var Grayscale_Matrix : Array = [_nRed, _nGreen, _nBlue, 0, 0, _nRed, _nGreen, _nBlue, 0, 0, _nRed, _nGreen, _nBlue, 0, 0, 0, 0, 0, 1, 0];
                this.filters = [new ColorMatrixFilter (Grayscale_Matrix)];
                MovieClip.prototype._grayscale = true;
            } else
            {
                var Grayscale_Matrix : Array = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
                this.filters = [new ColorMatrixFilter (Grayscale_Matrix)];

                MovieClip.prototype._grayscale = false;
            }
        }
关于色调:
        var lumR:Number = 0.213;
        var lumG:Number = 0.715;
         var lumB:Number = 0.072;
这三个变量是怎么来的,我没有找到公式,是不是也是心理学上的公式?
var HueMatrix: Array=[
         lumR+cosVal*(1-lumR)+sinVal*(-lumR),lumG+cosVal*(-lumG)+sinVal*(-lumG),lumB+cosVal*(-lumB)+sinVal*(1-lumB),0,0,
          lumR+cosVal*(-lumR)+sinVal*(0.143),lumG+cosVal*(1-lumG)+sinVal*(0.140),lumB+cosVal*(-lumB)+sinVal*(-0.283),0,0,
          lumR+cosVal*(-lumR)+sinVal*(-(1-lumR)),lumG+cosVal*(-lumG)+sinVal*(lumG),lumB+cosVal*(1-lumB)+sinVal*(lumB),0,0,
          0,0,0,1,0
             ];
不知道中间的那个绿色变换,0.143,0.140,-0.283是怎么来的,还望指教一下,谢谢.
对比度那里,我看公式还是正确的,但是有一点跟网上介绍的公式不太一样.网上那条对比度公式,变换的时候,总经过(127,127),而你的则是(63.5,63.5),而且Flash里面的也是这个数值,就不知道为何Flash不跟其他的程序在这里统一起来.
我没有看过楼主之前发的用color类实现的颜色变换,不过可以肯定的是,亮度,对比度和反色可以用color类代替,就没有测试过哪一个运行效率高一些.
另外,不知道楼主知不知道一点,就是这个亮度和色调调整是基于HSB模式还是HSL模式,我看这两个模式的变换都跟你的滤镜变换不匹配,不过却跟Flash里那个调整颜色的滤镜效果一致.这点我有兴趣知道,不过如果太深奥,就算了,先留着,以后再说.
如果想多个滤镜一起应用,我觉得是可以的,就对多个滤镜进行叠加就可以了,当然,这个运算量会大很多,我看什么时候研究完这东西了,把这类完善一下再发上来.

[ 本帖最后由 HBrO 于 2008-7-17 01:25 编辑 ]

作者: HBrO   发布时间: 2008-07-17

太好了,终于找到想要的了

作者: minepace   发布时间: 2008-10-14

虽然不是很能看懂,还是定下。

作者: kin1987   发布时间: 2008-10-14

太感谢楼主了~~感谢你的慷慨行为

作者: amazonite   发布时间: 2008-10-14

非常感谢,这是个好东西

作者: kuzi1314   发布时间: 2009-03-16

好东西啊,只是AS2目前只能收藏起来备用了。

作者: raycg   发布时间: 2010-03-11

好东西,正弄个饱和度的效果变化弄到瓶颈

感谢LZ的慷慨!!!

作者: noresite   发布时间: 2010-03-29

太长了.一般代码长度超过10行的我就跳过不看了.我发现我好懒啊. 不愿意动脑子.

作者: hglgsxy   发布时间: 2010-03-29

不错
收下了
谢谢

作者: dangerousfjq   发布时间: 2010-05-12

好东西啊,只是AS2目前只能收藏起来备用了。

作者: raycg   发布时间: 2010-12-16