Verwenden eines Shaders als Filter

Die Verwendung eines Shaders als Filters unterscheidet sich nicht von der Verwendung anderer Filter in ActionScript. Wenn Sie einen Shader als Filter verwenden, wird das gefilterte Bild (ein Anzeigeobjekt oder BitmapData-Objekt) an den Shader übergeben. Der Shader verwendet das Eingabebild zur Erstellung der Filterausgabe, die gewöhnlich eine veränderte Version des Originalbildes ist. Handelt es sich bei dem gefilterten Objekt um ein Anzeigeobjekt, wird die Ausgabe des Shaders anstelle des gefilterten Anzeigeobjekts auf dem Bildschirm angezeigt. Handelt es sich bei dem gefilterten Objekt um ein BitmapData-Objekt, wird die Ausgabe des Shaders zum Inhalt des BitmapData-Objekts, dessen applyFilter() -Methode aufgerufen wird.

Um einen Shader als Filter zu verwenden, müssen Sie zunächst wie unter Laden oder Einbetten eines Shaders beschrieben ein Shader-Objekt erstellen. Dann erstellen Sie ein mit dem Shader-Objekt verknüpftes ShaderFilter-Objekt. Das ShaderFilter-Objekt ist der Filter, der auf das gefilterte Objekt angewendet wird. Sie wenden das Objekt wie andere Filter auch auf Objekte an. Sie übergeben es an die filters -Eigenschaft eines Anzeigeobjekts oder Sie rufen die applyFilter() -Methode für ein BitmapData-Objekt auf. Mit dem folgenden Code wird zum Beispiel ein ShaderFilter-Objekt erstellt und der Filter auf ein Anzeigeobjekt mit dem Namen homeButton angewendet.

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

Wenn Sie einen Shader als Filter verwenden, muss der Shader mit mindestens einer Eingabe definiert werden. Wie im Beispiel dargestellt, setzen Sie den Eingabewert nicht in Ihrem Code. Stattdessen wird das gefilterte Objekt oder BitmapData-Objekt als Eingabebild gesetzt. Wenn Sie einen Shader verwenden, der mehr als eine Eingabe erwartet, geben Sie einen Wert für die Eingaben an, die über die erste hinausgehen.

In einigen Fällen verändert ein Filter die Maße eines Originalbilds. Ein typischer Schlagschatteneffekt fügt zum Beispiel zusätzliche Pixel hinzu, die den Schatten enthalten, der zum Bild hinzugefügt wird. Wenn Sie einen Shader verwenden, der die Bildmaße ändert, setzen Sie die Eigenschaften leftExtension , rightExtension , topExtension und bottomExtension , um anzugeben, um wie viel die Bildmaße geändert werden sollen.

Im folgenden Beispiel wird gezeigt, wie ein Shader als Filter verwendet wird. Der Filter in diesem Beispiel kehrt die roten, grünen und blauen Kanalwerte eines Bildes um. Das Ergebnis ist ein „Negativ“ des Bildes.

Der wichtige ActionScript-Code befindet sich in diesen beiden Methoden:

• init() : Die init() -Methode wird beim Laden der Anwendung aufgerufen. In dieser Methode lädt der Code die Shader-Bytecodedatei.

• onLoadComplete() : In der onLoadComplete() -Methode erstellt der Code das Shader-Objekt mit dem Namen shader . Er erstellt und zeichnet dann den Inhalt eines Objekts mit dem Namen target . Das target -Objekt ist ein mit einer linear verlaufenden Farbe gefülltes Rechteck, links beginnend mit Rot über Grün und abschließend mit Hellblau. Das ungefilterte Objekt sieht wie folgt aus:

  

  Nach Anwendung des Filters sind die Farben umgekehrt und das Rechteck sieht wie folgt aus:

  

Der Shader in diesem Beispiel verwendet den invertRGB.pbk-Pixel Bender-Kernel, der im Pixel Bender Toolkit enthalten ist. Der Quellcode steht in der Datei „invertRGB.pbk“ im Installationsverzeichnis des Pixel Bender Toolkits zur Verfügung. Kompilieren Sie den Quellcode und speichern Sie die Bytecodedatei unter dem Namen „invertRGB.pbj“ in dasselbe Verzeichnis wie den ActionScript-Quellcode.

Im Folgenden wird der ActionScript-Code für dieses Beispiel angezeigt. Verwenden Sie diese Klasse als Hauptanwendungsklasse für ausschließlich in ActionScript erstellte Projekte in Flash Builder oder als Dokumentklasse für die FLA-Datei in Flash Professional:

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]; 
        } 
    } 
}

Weitere Informationen zur Anwendung von Filtern finden Sie unter Erstellen und Anwenden von Filtern .

Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.