AS3的滤镜总结

在ActionScript 3.0中加入了滤镜类，使用滤镜类，可以实现改变颜色、形状、大小、旋 转或其他显示效果。本节将重点讲述滤镜类及其用法
滤镜类在ActionScript 3.0中所提供的滤镜都位于flash.filters包中，这些滤镜既可以用于在Flash中创作的显示对象，也可以用于位图对象。使用滤镜可以应用丰富的视觉效果来显示对象，实现模糊、斜角、发光和投影等效果。常用的滤镜类有9种，如下所示：
目录
  1、斜角滤镜（BevelFilter 类） ....................................................
  2、模糊滤镜（BlurFilter 类） ......................................................
  3、投影滤镜（DropShadowFilter 类） ........................................
  4、发光滤镜（GlowFilter 类） .....................................................
  5、渐变斜角滤镜（GradientBevelFilter 类） ..............................
  6、渐变发光滤镜（GradientGlowFilter 类） ...............................
  7、颜色矩阵滤镜（ColorMatrixFilter 类） ..................................
  8、卷积滤镜（ConvolutionFilter 类） ..........................................
  9、置换图滤镜（DisplacementMapFilter 类） ............................ 6 
 
 其中，前面6种是简单滤镜，后面3种是复杂滤镜。所谓简单滤镜，就是可以直接在Flash的滤镜面板上直观操作的滤镜，滤镜面板如下图所示：

我的个人习惯还是偏向于舞台操作的。所以如果只需要用到这六种滤镜，又不需要制作滤镜动画的时候，我通常都是选择直接在舞台上操作的。另外要说明的是，当你接下去学习本章的时候，最好能对比着舞台上的滤镜学习，这样对效果还有滤镜的属性都会有一个比较直观的把握。

（一）如何创建并应用滤镜

      首先，我们在舞台上绘制一个红色长方形。然后填入以下代码：

      var myDisplayObject = this.getChildAt(0); //获取舞台显示对象

      var filter:DropShadowFilter = new DropShadowFilter(); //创建滤镜

      var filtersArray:Array = new Array(filter); //建立滤镜数组

      myDisplayObject.filters = filtersArray; //应用滤镜

      大家可以看到，filters接受的是一个滤镜数组。如果对显示对象应用了多个滤镜，则会按照顺序，依次累积。

（二）如何修改和删除滤镜

      修改滤镜时，可以重新创建滤镜数组，然后赋值给filters属性。但是不可直接在filters属性上进行数组操作。比如：

      (1) 用这种方法是正确的

      filtersArray.push(new BlurFilter());

      myDisplayObject.filters = filtersArray;

      (2) 用这种方法是错误的

      myDisplayObject.filters.push(new BlurFilter());

      大家请比较一下两者的区别。

 

      删除滤镜只需要给filters属性赋值null即可，如下：

      myDisplayObject.filters = null;

 

      （三）滤镜的工作原理

      滤镜是通过把原始对象的副本缓存为透明位图来工作的。当你对显示对象启用滤镜时，不管当前显示对象的cacheAsBitmap值是多少，都会自动转换成true。当删除所有滤镜后，才会恢复原来的值。

      既然如此，使用滤镜后，那些位图缓存的优点都会保留，而缺点同样会保留。所以我们使用滤镜时，占用内存会变大。并且要尽可能的避免对显示对象做很复杂的动画，这样对性能会有比较大的影响。

      使用滤镜时，还有两点需要注意：第一点、滤镜区域是不能做重叠判断或者点击判断的。比如对一个影片剪辑做了斜角滤镜，那么在斜角部分，重叠判断和点击判断 都是无效的（影片剪辑的原始区域自然是有效的）。第二点，滤镜是不支持缩放、旋转和倾斜的。所以对滤镜的本身进行这些变化时（也要尽量避免），滤镜是不会 跟着变化的。

斜角滤镜（BevelFilter 类）
var bevel:BevelFilter = new BevelFilter();
bevel.distance = 5;//斜角的偏移距离
bevel.angle = 45;//斜角的角度
bevel.highlightColor = 0xFFFF00;//斜角加亮色
bevel.highlightAlpha = 0.8;//加亮色的透明度
bevel.shadowColor = 0x666666;//斜角阴影色
bevel.shadowAlpha = 0.8;//阴影色的透明度
bevel.blurX = 45;//水平模糊量
bevel.blurY = 45;//垂直模糊量
bevel.strength = 5;//印记或跨页的强度
bevel.quality = BitmapFilterQuality.HIGH;//应用滤镜的次数
bevel.type = BitmapFilterType.INNER;//斜角在对象上的位置
bevel.knockout = false;//应用挖空效果

模糊滤镜（BlurFilter 类）
var blur:BlurFilter = new BlurFilter();
blur.blurX = 2;
blur.blurY = 2;
blur.quality = BitmapFilterQuality.LOW;
var filtersArray:Array = new Array(blur);
tt.filters = filtersArray;
 
投影滤镜（DropShadowFilter 类）
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.blurX = 10;
shadow.blurY = 10;
shadow.strength = 1.5;
shadow.quality = BitmapFilterQuality.MEDIUM;
shadow.color = 0x000000;
shadow.alpha = 1;
shadow.angle = 45;
shadow.distance = 5;
shadow.knockout = false;
shadow.inner = false;
shadow.hideObject = false;
var filtersArray:Array = new Array(shadow);
tt.filters = filtersArray;

发光滤镜（GlowFilter 类）
var glow:GlowFilter = new GlowFilter();
glow.blurX = 20;
glow.blurY = 20;
glow.strength = 1.5;
glow.quality = BitmapFilterQuality.MEDIUM;
glow.color = 0x00ff00;
glow.alpha = 1;
glow.knockout = false;
glow.inner = true;
var filtersArray:Array = new Array(glow);
tt.filters = filtersArray;

渐变斜角滤镜（GradientBevelFilter 类）
GradientBevelFilter(distance,angle,colors,alphas,ratios,blurX,blurY,strength,quality,type,knockout) 
参数说明如下： 
distance：偏移距离。有效值为0到8。默认值为4。 
angle：偏移角度，以度为单位。有效值为0到360。默认值为45度。 
colors：渐变中使用的RGB十六进制颜色值数组。
alphas：colors数组中对应颜色的Alpha透明度值的数组。数组中每个元素的有效值为0到1。 
ratios：颜色分布比例的数组；有效值为0到255。 
blurX：水平模糊量。有效值为0到255。如果模糊量小于或等于1，则表明原始图像是按原样复制的。默认值为 4。采用2的乘方值进行优化，呈现速度比其它值更快。
blurY：垂直模糊量。。有效值为0到255。如果模糊量小于或等于1，则表明原始图像是按原样复制的。默认值为 4。采用2的乘方值进行优化，呈现速度比其它值更快。 
strength：印记或跨页的强度。该值越高，压印的颜色越深，而且斜角与背景之间的对比度也越强。 有效值为0到255。值为0表示未应用滤镜。 
quality：滤镜的品质。可以使用BitmapFilterQuality常数：BitmapFilterQuality.LOW、BitmapFilterQuality.MEDIUM和BitmapFilterQuality.HIGH。 
type：斜角效果的放置。可能的值为BitmapFilterType常数：BitmapFilterType.OUTER便是对象外缘上的斜角；BitmapFilterType.INNER表示对象内缘上的斜角；BitmapFilterType.FULL表示对象顶部的斜角。 
knockout:Boolean：指定是否应用挖空效果。值为true将使对象的填充变为透明，并显示文档的背景颜色。

渐变发光滤镜（GradientGlowFilter 类）
GradientGlowFilter(distance,angle,colorsl,alphas,ratios,blurX,blurY,strength,quality,type,knockout) 
参数说明如下： 
distance：光晕偏移距离。默认值为4。 
angle：偏移角度，以度为单位。有效值为0到360。默认值为45度。 
colors：渐变中使用的RGB十六进制颜色值数组。  alphas：colors数组中对应颜色的Alpha透明度值的数组。数组中每个元素的有效值为0到1。 
ratios：颜色分布比例的数组；有效值为0到255。 
blurX：水平模糊量。有效值为0到255。如果模糊量小于或等于1，则表明原始图像是按原样复制的。默认值为 4。采用2的乘方值进行优化，呈现速度比其它值更快。 
blurY：垂直模糊量。。有效值为0到255。如果模糊量小于或等于1，则表明原始图像是按原样复制的。默认值为 4。采用2的乘方值进行优化，呈现速度比其它值更快。 
strength：印记或跨页的强度。该值越高，压印的颜色越深，而且斜角与背景之间的对比度也越强。 有效值为0到255。值为0表示未应用滤镜。 
quality：滤镜的品质。可以使用BitmapFilterQuality常数：BitmapFilterQuality.LOW、BitmapFilterQuality.MEDIUM和BitmapFilterQuality.HIGH。 
type：斜角效果的放置。可能的值为BitmapFilterType常数：BitmapFilterType.OUTER便是对象外缘上的斜角；BitmapFilterType.INNER表示对象内缘上的斜角；BitmapFilterType.FULL表示对象顶部的斜角。 
knockout:Boolean：指定是否应用挖空效果。值为true将使对象的填充变为透明，并显示文档的背景颜色。
 
颜色矩阵滤镜（ColorMatrixFilter 类）
var matrix:Array = new Array();
matrix = matrix.concat([0.3086, 0.6094, 0.082, 0, 0]); // red
matrix = matrix.concat([0.3086, 0.6094, 0.082, 0, 0]); // green
matrix = matrix.concat([0.3086, 0.6094, 0.082, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
var gray:ColorMatrixFilter = new ColorMatrixFilter(matrix);
var filtersArray:Array = new Array(gray);
tt.filters = filtersArray;

卷积滤镜（ConvolutionFilter 类）
模糊效果：
var matrix:Array = new Array();
matrix = matrix.concat([0, 1, 0]);
matrix = matrix.concat([1, 1, 1]);
matrix = matrix.concat([0, 1, 0]);
var convolution:ConvolutionFilter = new ConvolutionFilter();
convolution.matrixX = 3;
convolution.matrixY = 3;
convolution.matrix = matrix;
convolution.divisor = 5;
var filtersArray:Array = new Array(convolution);
tt.filters = filtersArray;

锐化效果：
var matrix:Array = new Array();
matrix = matrix.concat([0, -1, 0]);
matrix = matrix.concat([-1, 5, -1]);
matrix = matrix.concat([0, -1, 0]);
var convolution:ConvolutionFilter = new ConvolutionFilter();
convolution.matrixX = 3;
convolution.matrixY = 3;
convolution.matrix = matrix;
convolution.divisor = 1;
var filtersArray:Array = new Array(convolution);
tt.filters = filtersArray;

 浮雕效果：
var matrix:Array = new Array();
matrix = matrix.concat([-2, -1, 0]);
matrix = matrix.concat([-1, 1, 1]);
matrix = matrix.concat([0, 1, 2]);
var convolution:ConvolutionFilter = new ConvolutionFilter();
convolution.matrixX = 3;
convolution.matrixY = 3;
convolution.matrix = matrix;
convolution.divisor = 1;
var filtersArray:Array = new Array(convolution);
tt.filters = filtersArray;

背反效果：
var matrix:Array = new Array();
matrix = matrix.concat([0, -1, 0]);
matrix = matrix.concat([-1, 4, -1]);
matrix = matrix.concat([0, -1, 0]);
var convolution:ConvolutionFilter = new ConvolutionFilter();
convolution.matrixX = 3;
convolution.matrixY = 3;
convolution.matrix = matrix;
convolution.divisor = 1;
var filtersArray:Array = new Array(convolution);
tt.filters = filtersArray;

光亮效果：
var matrix:Array = new Array();
matrix = matrix.concat([5, 5, 5]);
matrix = matrix.concat([5, 0, 5]);
matrix = matrix.concat([5, 5, 5]);
var convolution:ConvolutionFilter = new ConvolutionFilter();
convolution.matrixX = 3;
convolution.matrixY = 3;
convolution.matrix = matrix;
convolution.divisor = 30;
var filtersArray:Array = new Array(convolution);
tt.filters = filtersArray;

置换图滤镜（DisplacementMapFilter 类）
var mapImage:BitmapData = new BitmapData(tt.width, tt.height, false, 0xFF0000);
var displacementMap = new DisplacementMapFilter();
displacementMap.mapBitmap = mapImage;
displacementMap.mapPoint = new Point(0, 0);
displacementMap.componentX = BitmapDataChannel.RED;
displacementMap.scaleX = 250;
var filtersArray:Array = new Array(displacementMap);
tt.filters = filtersArray; 

下面做一个渐变的模糊滤镜,达到鼠标指针进入MC后图片渐变模糊，指针移出后MC复原
package
{

    import flash.display.MovieClip;
    import flash.filters.BevelFilter;
    import flash.filters.BitmapFilterQuality;
    import flash.filters.BitmapFilterType;
    import flash.filters.BlurFilter;
    import flash.events.MouseEvent;
    import flash.events.Event;

    public class Main extends MovieClip
    {


        /*var mxa:MovieClip;
        var bevel:BevelFilter;*/
        public function Main()
        {
            // constructor code
            var mc:MovieClip=new AA();
            mc.x = 100;
            mc.y = 100;
            addChild(mc);
            var blur:BlurFilter = new BlurFilter();
            blur.blurX = 0;//水平模糊
            blur.blurY = 0;//垂直模糊
            blur.quality = BitmapFilterQuality.LOW;//应用滤镜次数
            mc.filters = [blur];// 对图像应用滤镜
            var ktt:Boolean = false;
            mc.addEventListener(MouseEvent.MOUSE_OVER,onClickOver);
            function onClickOver(e:MouseEvent):void
            {
                ktt = true;
            }
            mc.addEventListener(MouseEvent.MOUSE_OUT,onClickOut);
            function onClickOut(e:MouseEvent):void
            {
                ktt = false;
            }
            mc.addEventListener(Event.ENTER_FRAME,onOver);
            function onOver(e:Event):void
            {
                if (blur.blurX <= 10 && ktt == true)
                {
                    blur.blurX +=  .5;
                    blur.blurY +=  .5;
                }
                if (blur.blurX > 0 && ktt == false)
                {
                    blur.blurX -=  .5;
                    blur.blurY -=  .5;
                }
                mc.filters = [blur];
            }
        }
    }

}