使用著色器做為濾鏡

使用著色器做為濾鏡就像在 ActionScript 中使用其它任何濾鏡一樣。當您使用著色器做為濾鏡時，已套用濾鏡的影像 (顯示物件或 BitmapData 物件) 會傳遞至著色器。著色器會使用輸入影像建立濾鏡輸出，這個輸出通常是原始影像的修改版本。如果已套用濾鏡的物件是顯示物件，著色器的輸出就會顯示在螢幕上，取代已套用濾鏡的顯示物件。如果已套用濾鏡的物件是 BitmapData 物件，著色器的輸出就會是已呼叫其 applyFilter() 方法之 BitmapData 物件的內容。

若要使用著色器做為濾鏡，您必須先建立 Shader 物件，如 載入或嵌入著色器 所述。然後，再建立連結至 Shader 物件的 ShaderFilter 物件。ShaderFilter 物件是套用至已套用濾鏡之物件的濾鏡。如同套用任何濾鏡一般，您能以相同方式將這個濾鏡套用至物件。接著，再將這個物件傳遞至顯示物件的 filters 屬性，或者對 BitmapData 物件呼叫 applyFilter() 方法。例如，下列程式碼會建立 ShaderFilter 物件，並對名為 homeButton 的顯示物件套用濾鏡。

var myFilter:ShaderFilter = new ShaderFilter(myShader); 
homeButton.filters = [myFilter];

當您使用著色器做為濾鏡時，必須使用至少一個輸入來定義著色器。如上述範例所示，您不需在程式碼中設定輸入值，程式碼會將已套用濾鏡的顯示物件或 BitmapData 物件設定做為輸入影像。如果您將使用一個以上的輸入來定義著色器，則必須為第一個輸入之後的任何輸入提供值。

在某些情況下，濾鏡會變更原始影像的尺寸。例如，典型的陰影特效會加入額外的像素，其中包含已加入至影像的陰影。當您使用會變更影像尺寸的著色器時，請設定 leftExtension 、 rightExtension 、 topExtension 和 bottomExtension 屬性，指出希望的影像大小變更量。

在下列範例中，會示範如何使用著色器做為濾鏡。在這個範例中，濾鏡會將影像的紅色、綠色和藍色色版值變成相反值，以產生具有「負片」特效的影像。

這個重要的 ActionScript 程式碼是以下列兩個方法為基礎所撰寫：

• init() ：載入應用程式時，會呼叫 init() 方法。在這個方法中，程式碼會載入著色器位元組碼檔案。

• onLoadComplete() ：在 onLoadComplete() 方法中，程式碼會建立名為 shader 的 Shader 物件，再建立及繪製名為 target 之物件的內容。 target 物件是以線性漸層顏色填滿的矩形，漸層顏色在左邊為紅色，中間為黃綠色，右邊為淡藍色。未套用濾鏡的物件看起來如下：

  

  套用濾鏡之後，矩形會呈現相反的顏色，看起來如下：

  

這個範例使用的著色器是隨附於 Pixel Bender Toolkit 的「invertRGB.pbk」樣本 Pixel Bender 核心。您可以在 Pixel Bender Toolkit 安裝目錄的「invertRGB.pbk」檔案中找到原始碼。請編譯這個原始碼，並將位元組碼檔案 (命名為「invertRGB.pbj」) 儲存在與 ActionScript 原始碼相同的目錄中。

下面列出這個範例的 ActionScript 程式碼。範例中會使用這個類別做為主應用程式類別，供 Flash Builder 中的 ActionScript 專案使用，或者做為文件類別以供 Flash Professional 中的 FLA 檔使用：

package 
{ 
    import flash.display.GradientType; 
    import flash.display.Graphics; 
    import flash.display.Shader; 
    import flash.display.Shape; 
    import flash.display.Sprite; 
    import flash.filters.ShaderFilter; 
    import flash.events.Event; 
    import flash.geom.Matrix; 
    import flash.net.URLLoader; 
    import flash.net.URLLoaderDataFormat; 
    import flash.net.URLRequest; 
     
    public class InvertRGB extends Sprite 
    { 
        private var shader:Shader; 
        private var loader:URLLoader; 
         
        public function InvertRGB() 
        { 
            init(); 
        } 
         
        private function init():void 
        { 
            loader = new URLLoader(); 
            loader.dataFormat = URLLoaderDataFormat.BINARY; 
            loader.addEventListener(Event.COMPLETE, onLoadComplete); 
            loader.load(new URLRequest("invertRGB.pbj")); 
        } 
         
         
        private function onLoadComplete(event:Event):void 
        { 
            shader = new Shader(loader.data); 
             
            var target:Shape = new Shape(); 
            addChild(target); 
             
            var g:Graphics = target.graphics; 
            var c:Array = [0x990000, 0x445500, 0x007799]; 
            var a:Array = [255, 255, 255]; 
            var r:Array = [0, 127, 255]; 
            var m:Matrix = new Matrix(); 
            m.createGradientBox(w, h); 
            g.beginGradientFill(GradientType.LINEAR, c, a, r, m); 
            g.drawRect(10, 10, w, h); 
            g.endFill(); 
             
            var invertFilter:ShaderFilter = new ShaderFilter(shader); 
            target.filters = [invertFilter]; 
        } 
    } 
}

如需有關套用濾鏡的詳細資訊，請參閱 建立與套用濾鏡 。

Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。