Uso di uno shader come filtro

L'uso di uno shader come filtro è analogo all'uso di tutti gli altri filtri in ActionScript. Quando utilizzate uno shader come filtro, l'immagine filtrata (un oggetto di visualizzazione o un oggetto BitmapData) viene passata allo shader. Lo shader utilizza l'immagine di input per creare l'output del filtro che in genere è una versione modificata dell'immagine originale. Se l'oggetto filtrato è un oggetto di visualizzazione, l'output dello shader viene visualizzato sullo schermo al posto dell'oggetto di visualizzazione filtrato. Se l'oggetto filtrato è un oggetto BitmapData, l'output dello shader diventa il contenuto dell'oggetto BitmapData di cui viene chiamato il metodo applyFilter() .

Per usare uno shader come filtro, dovete in primo luogo creare l'oggetto Shader come descritto in Caricamento o incorporamento di uno shader . In seguito, create un oggetto ShaderFilter collegato all'oggetto Shader. L'oggetto ShaderFilter è il filtro che viene applicato all'oggetto filtrato. Lo applicate a un oggetto analogamente a quanto avviene con i filtri, passandolo alla proprietà filters di un oggetto di visualizzazione o chiamando il metodo applyFilter() su un oggetto BitmapData. Il codice seguente ad esempio crea un oggetto ShaderFilter e applica il filtro per visualizzare un oggetto denominato homeButton .

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

Quando utilizzate uno shader come filtro, lo shader deve essere definito con almeno un input. Come mostra l'esempio, non dovete impostare il valore di input nel codice, ma come immagine di input viene impostato l'oggetto di visualizzazione filtrato o l'oggetto BitmapData. Se usate uno shader che prevede più di un input, dovete fornire il valore degli input successivi al primo.

In alcuni casi, un filtro cambia le dimensioni dell'immagine originale. Un tipico effetto ombra esterna, ad esempio, aggiunge pixel extra contenenti l'ombra che viene aggiunta all'immagine. Quando utilizzate uno shader che cambia le dimensioni dell'immagine, impostate le proprietà leftExtension , rightExtension , topExtension e bottomExtension per indicare di quanto desiderate che vengano modificate le dimensioni dell'immagine.

L'esempio seguente dimostra l'uso di uno shader come filtro. Il filtro in questo esempio inverte i valori dei canali rosso, verde e blu di un'immagine. Il risultato è la versione “negativa” dell'immagine.

Il codice ActionScript importante è presente in questi due metodi:

• init() : il metodo init() viene chiamato quando viene caricata l'applicazione. In questo metodo il codice carica il file di codice byte dello shader.

• onLoadComplete() : nel metodo onLoadComplete() il codice crea l'oggetto Shader denominato shader e crea e disegna il contenuto di un oggetto denominato target . L'oggetto target è un rettangolo con un riempimento a gradiente lineare rosso a sinistra, giallo/verde al centro e azzurro a destra. L'oggetto non filtrato ha il seguente aspetto:

  

  Applicando il filtro, i colori vengono invertiti e il rettangolo ha il seguente aspetto:

  

Lo shader utilizzato in questo esempio è il kernel Pixel Bender invertRGB.pbk, incluso in Pixel Bender Toolkit. Il codice sorgente è disponibile nel file invertRGB.pbk nella directory di installazione di Pixel Bender Toolkit. Compilate il codice sorgente e salvate il file del codice byte denominato invertRGB.pbj nella stessa directory del codice sorgente ActionScript.

Viene di seguito riportato il codice ActionScript per questo esempio. Utilizzate questa classe come classe di applicazione principale per un progetto costituito solo da ActionScript in Flash Builder o come classe di documento per il file FLA 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]; 
        } 
    } 
}

Per ulteriori informazioni su come applicare filtri, vedete Creazione e applicazione di filtri .

I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.