|
濾鏡(Filter)
濾鏡是一些位圖的效果，可以應(yīng)用于任何顯示對(duì)象。在 Flash IDE 中可以通過濾鏡面板或使用時(shí)間軸的 ActionScript 來使用濾鏡，由于這本書是關(guān)于 ActionScript 的，所以只能簡單地討論一下應(yīng)用濾鏡的方法。在 AS 3 中包括以下幾種濾鏡：
- Drop shadow(投影濾鏡)
- Blur(模糊濾鏡)
- Glow(發(fā)光濾鏡)
- Bevel(斜角濾鏡)
- Gradient bevel(漸變斜角濾鏡)
- Gradient glow(漸變發(fā)光濾鏡)
- Color matrix(顏色矩陣濾鏡)
- Convolution(卷積濾鏡)
- Displacement map(置換圖濾鏡)
雖然不能一一介紹每種濾鏡的使用細(xì)節(jié)，但大家可以通過幫助文檔來學(xué)習(xí)。在書中還會(huì)有很多濾鏡使用的例子，所以在這里只介紹一下濾鏡使用的總體方法和兩個(gè)具體實(shí)例。
創(chuàng)建濾鏡
通過使用 new 關(guān)鍵字及濾鏡名來創(chuàng)建濾鏡，并給出所需的參數(shù)。例如，創(chuàng)建一個(gè) blur filter(模糊濾鏡)，最簡單的一種濾鏡，寫法入下：
var blur:BlurFilter = new BlurFilter(5, 5, 3);
參數(shù)分別為 blurX,blurY,quality。這個(gè)例子會(huì)將對(duì)象在x和y軸上模糊5個(gè)像素，模糊的品質(zhì)為中等。
另一點(diǎn)需要知道的是濾鏡在其名為 flash.filters 的包中。所以要在文件的開始處將它們導(dǎo)入進(jìn)來：
import flash.filters.BlurFilter;
如果希望導(dǎo)入包中所有的濾鏡，可以使用簡寫：
import flash.filters.*;
現(xiàn)在，我們可以直接創(chuàng)建任何類型的濾鏡了，但是一般來說，除非要使用這個(gè)包中的大部濾鏡，否則最好避免使用通配符(*)，而是明確地導(dǎo)入所需要的類。這樣做只是為了能夠清楚，哪些是真正想要導(dǎo)入的而哪些不是。好了，現(xiàn)在已經(jīng)創(chuàng)建了一個(gè)模糊濾鏡，但怎么才能使它去模糊一個(gè)對(duì)象呢？
任何一個(gè)顯示對(duì)象都有一個(gè)名為 filters 的屬性，這是一個(gè)包括了所有濾鏡的數(shù)組，因?yàn)槿绻粋�(gè)對(duì)象要應(yīng)用多個(gè)濾鏡，那么只需要再將模糊濾鏡放到數(shù)組中即可。樂觀地看，應(yīng)用濾鏡應(yīng)該可以像使用基本數(shù)組操作那樣簡單，push，就像這樣 mySprite.filters.push(blur);，但是很遺憾，沒有這么簡單。在整個(gè)數(shù)組賦值為 filters 之前，F(xiàn)lash 不關(guān)心 filters 數(shù)組的變化。
如果已知對(duì)象沒有應(yīng)用任何的濾鏡，或想要重寫它們，只需要新建一個(gè)數(shù)組，將我們的濾鏡粘在上面，再將這個(gè)新數(shù)組賦給 filters 屬性就可以了。先來試一下，下面一個(gè)文檔類 Filters.as，創(chuàng)建了一個(gè) sprite 影片并且在里面繪制了一個(gè)黃色的正方形，然后，創(chuàng)建一個(gè)濾鏡，加入數(shù)組中，最后將數(shù)組賦給 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;
}
}
}
瞧！出現(xiàn)了一個(gè)模糊的黃色方塊兒。重要的部分用黑體著重，我們可以簡寫一點(diǎn)：
var blur:BlurFilter = new BlurFilter(5, 5, 3);
var filters:Array = [blur];
sprite.filters = filters;
或再短一點(diǎn)：
sprite.filters = [new BlurFilter(5, 5, 3)];
在創(chuàng)建數(shù)組的同時(shí)，將濾鏡放進(jìn)去，并應(yīng)用 filters 屬性，這樣一來，F(xiàn)lash 會(huì)很高興。
但是如果已經(jīng)有了濾鏡并希望繼續(xù)使用，這時(shí)，但又不確定是否有濾鏡存在，那該怎么辦呢？在 Flash 8 中，這是件很麻煩的事，因?yàn)橐粋�(gè)顯示對(duì)象的 filters 屬性如果沒有應(yīng)用濾鏡，那么它將是未定義(undefined)的。但在 AS 3 中， filters 數(shù)組總是保持為一個(gè)空數(shù)組，只需要給數(shù)組賦值，將濾鏡 push 進(jìn)去，并將其賦給對(duì)象的 filters 屬性即可，方法如下：
var filters:Array = sprite.filters;
filters.push(new BlurFilter(5, 5, 3));
sprite.filters = filters;
如果使用這種方法，那么無論是否有濾鏡存在都沒有問題，濾鏡只是被加入到數(shù)組列表中而已。因?yàn)?filters 屬性是一套成熟的數(shù)組，所以可以使用不同的數(shù)組操作方法。比如，使用 concat 方法：
sprite.filters = sprite.filters.concat(new BlurFilter(5, 5, 3));
我不認(rèn)為這是個(gè)“正確”的做法，大家只要知道將一個(gè)包涵有濾鏡的數(shù)組賦給 filters 屬性就足夠了。
動(dòng)態(tài)濾鏡
現(xiàn)在我們已經(jīng)基本上知道了如何在 ActionScript 中使用濾鏡了。接下來，用已經(jīng)學(xué)過的知識(shí)，制作一個(gè)動(dòng)態(tài)濾鏡。這個(gè)效果，使用文檔類 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 中畫一個(gè)正方形，正方形在 sprite 的居中位置，然后將 sprite 移動(dòng)到舞臺(tái)中間，用一些默認(rèn)屬性創(chuàng)建投影濾鏡(DropShadowFilter)。
添加一個(gè) enterFrame 事件的偵聽器及處理函數(shù)：onEnterFrame 方法，用于計(jì)算角度(angle)及使用三角函數(shù)計(jì)算 sprite 影片與鼠標(biāo)的距離(distance)。使用 angle 和 distance 設(shè)置投影濾鏡的 angle 和 distance 屬性，最后將這個(gè)濾鏡再應(yīng)用到 sprite 上。請(qǐng)注意，我們不需要每次都創(chuàng)建一個(gè)新的濾鏡，可以繼續(xù)使用同一個(gè)濾鏡，只需要改變它的屬性即可。然而，只是改變這些屬性也不能更新 sprite 影片的顯示。因此，還需要再將變化過的濾鏡效果賦值給 filters 屬性。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 渲染技術(shù) [7] 下一頁 渲染技術(shù) [9]
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|
第 1 頁 
第 8 頁 渲染技術(shù) [8]
