滤镜(Filter)

滤镜是一些位图的效果，可以应用于任何显示对象。在 Flash IDE 中可以通过滤镜面板或使用时间轴的 ActionScript 来使用滤镜，由于这本书是关于 ActionScript 的，所以只能简单地讨论一下应用滤镜的方法。在 AS 3 中包括以下几种滤镜：

• Drop shadow(投影滤镜)
• Blur(模糊滤镜)
• Glow(发光滤镜)
• Bevel(斜角滤镜)
• Gradient bevel(渐变斜角滤镜)
• Gradient glow(渐变发光滤镜)
• Color matrix(颜色矩阵滤镜)
• Convolution(卷积滤镜)
• Displacement map(置换图滤镜)

虽然不能一一介绍每种滤镜的使用细节，但大家可以通过帮助文档来学习。在书中还会有很多滤镜使用的例子，所以在这里只介绍一下滤镜使用的总体方法和两个具体实例。

创建滤镜

通过使用 new 关键字及滤镜名来创建滤镜，并给出所需的参数。例如，创建一个 blur filter(模糊滤镜)，最简单的一种滤镜，写法入下：

var blur:BlurFilter = new BlurFilter(5, 5, 3);

参数分别为 blurX,blurY,quality。这个例子会将对象在x和y轴上模糊5个像素，模糊的品质为中等。

另一点需要知道的是滤镜在其名为 flash.filters 的包中。所以要在文件的开始处将它们导入进来：

import flash.filters.BlurFilter;

如果希望导入包中所有的滤镜，可以使用简写：

import flash.filters.*;

现在，我们可以直接创建任何类型的滤镜了，但是一般来说，除非要使用这个包中的大部滤镜，否则最好避免使用通配符(*)，而是明确地导入所需要的类。这样做只是为了能够清楚，哪些是真正想要导入的而哪些不是。好了，现在已经创建了一个模糊滤镜，但怎么才能使它去模糊一个对象呢？

任何一个显示对象都有一个名为 filters 的属性，这是一个包括了所有滤镜的数组，因为如果一个对象要应用多个滤镜，那么只需要再将模糊滤镜放到数组中即可。乐观地看，应用滤镜应该可以像使用基本数组操作那样简单，push，就像这样 mySprite.filters.push(blur);，但是很遗憾，没有这么简单。在整个数组赋值为 filters 之前，Flash 不关心 filters 数组的变化。

如果已知对象没有应用任何的滤镜，或想要重写它们，只需要新建一个数组，将我们的滤镜粘在上面，再将这个新数组赋给 filters 属性就可以了。先来试一下，下面一个文档类 Filters.as，创建了一个 sprite 影片并且在里面绘制了一个黄色的正方形，然后，创建一个滤镜，加入数组中，最后将数组赋给 sprite 的 filters 属性：

package {
 import flash.display.Sprite;
 import flash.filters.BlurFilter;
 public class Filters extends Sprite {
  public function Filters() {
   init();
  }
  private function init():void {
   var sprite:Sprite = new Sprite();
   sprite.graphics.lineStyle(2);
   sprite.graphics.beginFill(0xffff00);
   sprite.graphics.drawRect(100, 100, 100, 100);
   sprite.graphics.endFill();
   addChild(sprite);
   var blur:BlurFilter = new BlurFilter(5, 5, 3);
   var filters:Array = new Array();
   filters.push(blur);
   sprite.filters = filters;
  }
 }
}

瞧！出现了一个模糊的黄色方块儿。重要的部分用黑体着重，我们可以简写一点：

var blur:BlurFilter = new BlurFilter(5, 5, 3);
var filters:Array = [blur];
sprite.filters = filters;

或再短一点：

sprite.filters = [new BlurFilter(5, 5, 3)];

在创建数组的同时，将滤镜放进去，并应用 filters 属性，这样一来，Flash 会很高兴。

但是如果已经有了滤镜并希望继续使用，这时，但又不确定是否有滤镜存在，那该怎么办呢？在 Flash 8 中，这是件很麻烦的事，因为一个显示对象的 filters 属性如果没有应用滤镜，那么它将是未定义(undefined)的。但在 AS 3 中， filters 数组总是保持为一个空数组，只需要给数组赋值，将滤镜 push 进去，并将其赋给对象的 filters 属性即可，方法如下：

var filters:Array = sprite.filters;
filters.push(new BlurFilter(5, 5, 3));
sprite.filters = filters;

如果使用这种方法，那么无论是否有滤镜存在都没有问题，滤镜只是被加入到数组列表中而已。因为 filters 属性是一套成熟的数组，所以可以使用不同的数组操作方法。比如，使用 concat 方法：

sprite.filters = sprite.filters.concat(new BlurFilter(5, 5, 3));

我不认为这是个“正确”的做法，大家只要知道将一个包涵有滤镜的数组赋给 filters 属性就足够了。

动态滤镜

现在我们已经基本上知道了如何在 ActionScript 中使用滤镜了。接下来，用已经学过的知识，制作一个动态滤镜。这个效果，使用文档类 AnimatedFilters.as：

package {
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.filters.DropShadowFilter;
 public class AnimatedFilters extends Sprite {
  private var filter:DropShadowFilter;
  private var sprite:Sprite;
  public function AnimatedFilters() {
   init();
  }
  private function init():void {
   sprite = new Sprite();
   sprite.graphics.lineStyle(2);
   sprite.graphics.beginFill(0xffff00);
   sprite.graphics.drawRect(-50, -50, 100, 100);
   sprite.graphics.endFill();
   sprite.x = 200;
   sprite.y = 200;
   addChild(sprite);
   filter = new DropShadowFilter(0, 0, 0, 1, 20, 20, .3);
   addEventListener(Event.ENTER_FRAME, onEnterFrame);
  }
  private function onEnterFrame(event:Event):void {
   var dx:Number = mouseX - sprite.x;
   var dy:Number = mouseY - sprite.y;
   filter.distance = -Math.sqrt(dx * dx + dy * dy) / 10;
   filter.angle = Math.atan2(dy, dx) * 180 / Math.PI;
   sprite.filters = [filter];
  }
 }
}

首先在 sprite 中画一个正方形，正方形在 sprite 的居中位置，然后将 sprite 移动到舞台中间，用一些默认属性创建投影滤镜(DropShadowFilter)。
添加一个 enterFrame 事件的侦听器及处理函数：onEnterFrame 方法，用于计算角度(angle)及使用三角函数计算 sprite 影片与鼠标的距离(distance)。使用 angle 和 distance 设置投影滤镜的 angle 和 distance 属性，最后将这个滤镜再应用到 sprite 上。请注意，我们不需要每次都创建一个新的滤镜，可以继续使用同一个滤镜，只需要改变它的属性即可。然而，只是改变这些属性也不能更新 sprite 影片的显示。因此，还需要再将变化过的滤镜效果赋值给 filters 属性。

出处：蓝色理想
责任编辑：bluehearts

上一页 渲染技术 [7] 下一页 渲染技术 [9]

◎进入论坛RIA设计与应用版块参加讨论