Le ultime versioni di Flash hanno introdotto l'uso dei filtri, che permettono di aggiungere degli effetti (ombreggiature, bagliori, rilievi) agli sprite e ai movieclip, siano essi creati manualmente o tramite Actionscript.
I filtri possono essere applicati agli oggetti presenti sullo stage tramite l'omonimo pannello, oppure tramite Actionscript sia agli elementi disposti manualmente nel filmato sia a quelli creati dinamicamente, inoltre, in questo modo, possiamo modificare gli effetti durante l'esecuzione del nostro filmato oppure renderli più casuali; in questo articolo vedremo proprio come sfruttare i filtri più comuni usando Actionscript 3.
Come punto di partenza per l'esempio di questo articolo useremo il filmato visto nell'articolo "Far esplodere un movieclip", riproposto di seguito:
Effetto di esplosione di un movieclip tramite AS3
I file da utilizzare come base sono disponibili nel file ZIP allegato all'articolo.
Filtri disponibili
I principali filtri disponibili sono: drop shadow (ombra), blur (sfocatura), glow (bagliore) e bevel (rilievo), più due varianti ovvero grandiet glow e gradient bevel che corrispondono a bagliore e rilievo, ma con l'uso di colori gradienti. Questi effetti sono applicabili sia tramite l'apposito pannello Filtri che tramite Actionscript.
Nota: vi sono anche alcuni filtri applicabili solo tramite Actionscript quali ConvolutionFilter, ColorMatrix e DisplacementMap, ma non li tratteremo in questo articolo.
Note per l'utilizzo dei filtri tramite Actionscript
Prima di analizzare i singoli filtri vediamo alcune regole comuni.
Per essere utilizzato un filtro deve essere prima importato, per questo abbiamo il package flash.filters. È possibile importare un singolo filtro:
import flash.filters.DropShadowFilter;
Oppure importare l'intero package:
import flash.filters.*
Sprite e movieclip hanno la proprietà filters, si tratta di un array dove inserire il riferimento ai filtri da applicare alla clip. Per applicare un effetto drop shadow allo sprite "_sprite" dovremmo usare il codice:
import flash.filters.DropShadowFilter;
var ombra = new DropShadowFilter(2,45,0x000000,1,10,10,1,1)
act_sprite.filters = [ombra]
Essendo filters un array, è possibile applicare contemporaneamente più filtri a una stessa clip.
I filtri non vengono applicati ad oggetti più larghi e/o più alti di 2880 pixel.
Drop shadow
Si tratta del classico effetto "ombra". La sintassi per applicare questo effetto è
var ombra = new DropShadowFilter(distanza, angolo, colore,trasparenza, blurX, blurY, intensità, qualità, interno, knockout, nascondioggetto)
Vediamo di capirne meglio i parametri:
- distanza: stabilisce la distanza tra l'ombra e l'oggetto che la proietta;
- angolo: stabilisce l'angolazione dell'ombra rispetto all'oggetto (min. 0, max. 360);
- colore: regola il colore dell'ombra (per esempio per il nero avremo 0x000000);
- trasparenza: regola la trasparenza dell'ombra (0-1);
- blurX: regola la sfocatura dell'ombra sull'asse orizzontale (min. 0, max. 255);
- blurY: regola la sfocatura dell'ombra sull'asse verticale (min. 0, max. 255);
- intensità: stabilisce il contrato tra l'ombra e lo sfondo (min. 0, max. 255);
- qualità: imposta la qualità dell'ombra (min. 1, max. 15, consigliato 1-3) *;
- interno: stabilisce se l'ombra deve essere proiettata verso l'interno dell'oggetto (true o false);
- knockout: crea un effetto per cui l'oggetto che proietta l'ombra viene eliminato, creando una sorta di "buco" dentro l'ombra (true o false);
- nascondioggetto: stabilisce se l'oggetto che proietta l'ombra debba essere nascosto, in modo che solo l'ombra sia visibile (true o false).
* il parametro qualità stabilisce il numero di volte per cui applicare il filtro. Per la maggior parte dei casi un valore da 1 a 3 è sufficiente, inoltre valori troppo elevati possono rallentare l'esecuzione del filmato dato che per esempio con un valore di 10 andremmo ad applicare di fatto 10 volte l'effetto per ogni clip. Questo vale per tutti i filtri che prevedano questo parametro.
Vediamo come fare in modo che all'esplosione della clip i nostri tasselli abbiano un'ombreggiatura: apriamo il file eplodi.as, nelle prime righe di codice importiamo il filtro drop shadow.
import flash.filters.DropShadowFilter
quindi aggiungiamo queste righe di codice dopo la linea 25:
var ombra = new DropShadowFilter(2,45,0x000000,1,10,10,1,1)
act_sprite.filters = [ombra]
Per vedere meglio l'effetto apportarto dal filtro possiamo eventualmente commentare la riga var TweenA:Tween = new Tween(act_sprite, "alpha", None.easeNone, 1, 0, durata, true), in modo da evitare che i tasselli scompaiano dopo l'esplosione.
Filtro DropShadow applicato ad ogni tassello
Blur
Questo è il filtro più semplice e con meno parametri, si tratta dell'effetto di sfocatura. La sintassi è molto semplice:
var sfoca = new BlurFilter(blurX,blurY, qualità)
blurX e blurY stabiliscono la sfocatura (orizzontale e verticale) della clip, con valori ammessi tra 0 e 255.
Per sfocare i vari tasselli del nostro filmato dovremo importare il filtro BlurFilter nel file esplodi.as
import flash.filters.BlurFilter
Quindi usare le seguenti righe di codice
var sfoca = new BlurFilter(30,30,1)
act_sprite.filters = [sfoca]
L'effetto sarà il seguente:
Filtro Blur applicato ad ogni tassello
Qualora volessimo applicare la sfocatura e l'ombreggiatura, potremmo usare il seguente codice, impostando i riferimenti due filtri nella proprietà filters di ogni sprite.
var ombra = new DropShadowFilter(2,45,0x000000,1,10,10,1,1)
var sfoca = new BlurFilter(15,15,1)
act_sprite.filters = [ombra,sfoca]
Filtri DropShadow e Blur applicati ad ogni tassello
Glow
Il filtro Glow crea un bagliore esterno o interno all'oggetto; la sintassi per questo filtro è:
var bagliore = new GlowFilter(colore, trasparenza, blurX, blurY, intensità, qualità, interno, knockout)
In base a quanto visto per il filtro DropShadow possiamo facilmente intuire l'uso di questi parametri. L'uso del parametro interno ci permette di regolare la creazione di un baglior esterno (se interno = false) oppure interno.
Possiamo applicare il filtro glow ai tasselli del nostro filmato importando la classe.
import flash.filters.GlowFilter
e usando quindi il seguente codice (sempre dopo la linea 25)
var bagliore = new GlowFilter(0xFF0000,1,30,10,2,1,false,false)
act_sprite.filters = [bagliore]
Il colore 0xFF0000 corrisponde a un bagliore rosso, ecco il risultato:
Filtro Glow applicato ad ogni tassello
Bevel
Passiamo al filtro bevel. Con questo filtro si creano degli effetti "rilievo"; la sintassi del BevelFilter prevede un numero decisamente elevato di parametri:
var rilievo = new BevelFilter(distanza, angolo, coloreHighlight, trasparenzaHighlight, coloreOmbra, trasparenzaOmbra, blurX, blurY, intensità, qualità, tipo, knockout)
Cerchiamo di fare maggiore chiarezza:
- distanza: stabilisce la distanza tra la parte superiore (highlight) e l'ombra (shadow), in pratica serve ad impostare l'altezza dell'effetto rilievo;
- angolo: stabilisce l'angolazione dell'effetto, in pratica la direzione verso cui l'oggetto risulterà "in rilievo";
- coloreHighlight: imposta il colore della parte superiore del rilievo;
- trasparenzaHighlight: imposta la trasparenza della parte superiore del rilievo;
- coloreOmbra: imposta il colore dell'ombra del rilievo;
- trasparenzaOmbra: imposta la trasparenza dell'ombra del rilievo;
- tipo: stabilisce il tipo di rilievo, può essere "inner" (interno), "outer" (esterno) o "full" (entrambe).
Per quanto riguarda i parametri qualità, blurX, blurY e knockout vale quanto già visto per gli altri filtri.
Applichiamo allora un effetto di rilievo nel nostro ormai consueto esempio: per prima cosa importiamo il filtro
import flash.filters.BevelFilter
Quindi lo impostiamo e lo applichiamo ai vari tasselli:
var rilievo = new BevelFilter(10,45,0xFF0000,1,0x000000,1,10,10,1,1,"inner",false)
act_sprite.filters = [rilievo]
Ecco il risultato:
Filtro Bevel applicato ad ogni tassello
GradientGlowFilter e GradientBevelFilter
Come abbiamo detto, queste sono variazioni dei filtri glow e bevel che prevedono l'uso non di un solo colore, ma di più tinte con la conseguente creazione di un gradiente. Per questo cambiano leggermente i parametri di utilizzo, che per il GradientGlowFilter sono i seguenti:
var g_bagliore = new GradientGlowFilter(distanza, angolo, colori, trasparenze, ratio, blurX, blurY, intensità, qualità, interno, knockout)
Praticamente non avremo più un singolo colore e una singola trasparenza, ma degli array, oltre al parametro ratio che in pratica stabilisce la "distribuzione" di ognuno dei colori e permette quindi di impostare come dominante una tinta piuttosto che un'altra. Ovviamente le lunghezze degli array colori, trasparenze e ratio dovranno coincidere. Notiamo anche che il GradientGlow prevede in aggiunta rispetto al semplice Glow anche i parametri distanza e angolo.
Per quanto riguarda invece il GradientBevelFilter, i parametri sono i seguenti:
var g_rilievo = new BevelFilter(distanza, angolo, color, trasparenze, ratio, blurX, blurY, intensità, qualità, tipo, knockout)
Vale ovviamente quanto già detto per il GradientGlow, inoltre possiamo notare che non abbiamo una differenziazione dei colori tra la parte superiore e l'ombra del rilievo, ma un unico colore gradiente. Rimangono invece invariati gli altri parametri.
Rendere casuali i parametri di un filtro
I più attenti avranno notato che nel codice la variabile relativa al filtro utilizzato avrebbe potuto essere scritta fuori dal ciclo for dei tasselli, in quanto le proprietà applicate erano sempre le medesime, tuttavia lasciando le variabili dei filtri all'interno del for possiamo utilizzare il comando Math.random() per creare un filtro con parametri casuali, per esempio se volessimo associare un'ombra diversa per ogni tassello basterebbe usare questo codice:
var ombra = new DropShadowFilter(Math.random()*10,Math.random()*45,0x000000,1,Math.random()*10,Math.random()*10,1,1)
act_sprite.filters = [ombra]
Filtro DropShadow applicato ad ogni tassello con parametri casuali
