Nell'articolo precedente abbiamo visto come applicare dei filtri a degli sprite, impostando però i diversi effetti con delle proprietà fisse che non variavano durante l'animazione; in questo modo il filtro viene applicato alla clip e ne segue il movimento, ma mantiene gli stessi parametri. Supponiamo invece di voler ottenere l'effetto opposto, ovvero mantenere la clip ferma e variare le proprietà dell'effetto ad essa associato.
Prima di tutto bisogna tener presente che i filtri non possono essere animati con una semplice modificati diretta, ovvero non possiamo prendere una proprietà di un filtro già associato a una clip e cambiarne solo il valore: sarà necessario riassociare il filtro alla clip, sostituendo in pratica il filtro precentemente applicato.
È comunque possibile accedere alle singole proprietà di un filtro, questo può essere molto utile sia per usarle come riferimento per i nuovi valori oppure per modificare una proprietà del filtro stesso, tuttavia la modifica non sarà graficamente visibile finché non riassegneremo il filtro a una o più clip.
Ovviamente per avere una vera e propria animazione il "cambio" dell'effetto associato allo sprite, o al movieclip di cui vogliamo modificare i filtri, dovrà essere associato a un evento eseguito automaticamente dal filmato, che può essere un "classico" enterFrame oppure un progresso di un oggetto di tipo Tween; esistono anche delle librerie sviluppate dagli utenti che possono essere utilizzate per l'animazione di filtri, come ad esempio la TweenFilterLite.
In questo articolo vedremo come animare alcuni filtri usando questi metodi; ricordiamo che il metodo di animazione è lo stesso per tutti i filtri e prevede la creazione di un nuovo filtro e la sua associazione alla clip al posto del "vecchio" filtro.
Ricavare e modificare le proprietà di un filtro
Prima di vedere in pratica l'animazione di un filtro, facciamo un piccolo esempio su come ricavarne una o più proprietà; supponiamo di aver associato un filtro DropShadow a una clip:
Listato 1. Filtro DropShadow su una clip
import flash.filters.DropShadowFilter
var ombra:DropShadowFilter = new DropShadowFilter(4,45,0x000000,1,5,5,1,1)
clip.filters = [ombra]
A questo punto abbiamo due possibilità per ricavare una proprietà: o tramite l'array filters della clip, oppure tramite la variabile di riferimento al filtro, in questo caso ombra. Per ricavare la proprietà distance possiamo usare queste due alternative:
trace(clip.filters[0].distance)
trace(ombra.distance)
Poiché la proprietà filters di un clip è un array, per accedere al primo filtro della lista abbiamo usato l'indice 0; è comunque consigliabile utilizzare i riferimenti ai filtri fatti tramite variabili per ricavare le proprietà, in quanto più semplici da usare speciamente nel caso in cui la clip avesse più di un filtro oppure il loro ordine non fosse sempre lo stesso. Come abbiamo detto, non è sufficiente la modifica di una proprietà per vedere un cambiamento nel filtro:
ombra.distance = 45
trace(ombradistance)
In questo caso otterremmo 45 come output, ma il nostro filtro associato alla clip non subirebbe alcuna modifica, sarà quindi necessario riassociarlo alla clip:
clip.filters = [ombra]
Animazione di un filtro tramite ENTER_FRAME
Quando creiamo un'animazione di un filtro, modifichiamo una (o più) delle sue proprietà prima di riassociarlo a una clip; come abbiamo detto per avere un'animazione dovremo associare il cambio dei valori e la riassegnazione dell'array filters a un evento automatico, ad esempio l'ENTER_FRAME. Vediamo per esempio come modificare l'angolazione di un'ombra rispetto a un movieclip in maniera continua.
Listato 2. Modifica l'angolazione di un'ombra rispetto a un movieclip
// importo il filtro DropShadow
import flash.filters.DropShadowFilter
// creo una nuova istanza del filtro
var ombra:DropShadowFilter = new DropShadowFilter(10,0,0x000000,1,5,5,1,1)
// la associo al movieclip "clip"
clip.filters = [ombra]
// Imposto l'esecuzione della funzione aggiornaOmbra all'ENTER_FRAME
stage.addEventListener(Event.ENTER_FRAME,aggiornaOmbra)
// Funzione di aggiornamento dell'effetto
function aggiornaOmbra(evt:Event){
// aumento il valore della proprietà "angle"
ombra.angle += 3
// riassocio il filtro alla clip
clip.filters = [ombra]
}
Il risultato sarà simile al seguente:
Animazione di un filtro di tipo DropShadow
Ovviamente è possibile modificare più proprietà contemporaneamente, per esempio potremmo modificare anche il valore distance.
Listato 3. Modifica la distanza di un'ombra
// importo il filtro DropShadow
import flash.filters.DropShadowFilter
// creo una nuova istanza del filtro
var ombra:DropShadowFilter = new DropShadowFilter(10,0,0x000000,1,5,5,1,1)
// la associo al movieclip "clip"
clip.filters = [ombra]
// Imposto l'esecuzione della funzione aggiornaOmbra all'ENTER_FRAME
stage.addEventListener(Event.ENTER_FRAME,aggiornaOmbra)
// Funzione di aggiornamento dell'effetto
function aggiornaOmbra(evt:Event){
// aumento il valore della proprietà "angle" e "distance"
ombra.angle += 3
ombra.distance++
// riassocio il filtro alla clip
clip.filters = [ombra]
}
Animazione di un filtro di tipo DropShadow (proprietà angle e distance)
Utilizzando l'evento ENTER_FRAME abbiamo fatto in modo che l'effetto avvenga in maniera continua, la velocità varierà in base al numero di fotogrammi al secondo impostati nel filmato, per esempio con una sequenza di 25 fps il nostro filtro verrà aggiornato 25 volte ogni secondo.
Qualora volessimo applicare e aggiornare due filtri, dovremmo agire in questo modo:
Listato 4. Applica contemporaneamente due filtri
import flash.filters.DropShadowFilter
import flash.filters.BlurFilter
var ombra:DropShadowFilter = new DropShadowFilter(10,0,0x000000,1,5,5,1,1)
var sfoca:BlurFilter = new BlurFilter(3,3,1)
clip.filters = [ombra]
stage.addEventListener(Event.ENTER_FRAME,aggiornaFiltri)
function aggiornaFiltri(evt:Event){
ombra.angle += 3
ombra.distance += 3
sfoca.blurX += 2
sfoca.blurY += 2
clip.filters = [ombra,sfoca]
}
Animazione di un filtro tramite onTweenProgress
L'evento ENTER_FRAME va benissimo quando dobbiamo animare solo un filtro e non abbiamo una corrispondente animazione per la clip a cui è associato; nel caso però la clip fosse animata tramite la classe Tween, potremmo utilizzare l'evento MOTION_CHANGE.
Questo è l'evento lanciato dalla classe Tween ogni volta che il movimento viene "aggiornato", per cui utilizzandolo avremmo la certezza che le animazioni dell'oggetto, e del suo filtro, andranno di pari passo; c'è inoltre il vantaggio di poter basare su una durata in secondi anche l'animazione del filtro, ricordiamo che la classe Tween permette di specificare la durata dell'animazione in fotogrammi (e in questo caso la velocità varia in base alla frequenza di frame al secondo) oppure in secondi.
Supponiamo allora di animare la nostra clip sull'asse x.
Listato 5. Anima la clip sull'asse x
import flash.filters.DropShadowFilter;
import fl.transitions.Tween
import fl.transitions.easing.None
import fl.transitions.TweenEvent
var ombra:DropShadowFilter = new DropShadowFilter(10,0,0x000000,1,5,5,1,1)
clip.filters = [ombra]
function aggiornaOmbra(evt:Event){
ombra.angle += 3
ombra.distance++
clip.filters = [ombra]
}
// Eseguiamo l'animazione del movieclip "clip"
var Tweening:Tween = new Tween(clip, "x", None.easeNone, clip.x, clip.x+(Math.random()*100), 5, true);
// Associamo la variazione del filtro all'evento MOTION_CHANGE
Tweening.addEventListener(TweenEvent.MOTION_CHANGE,aggiornaOmbra)
Il risultato sarà simile al seguente: appena l'animazione della clip terminerà, di conseguenza si fermerà anche quella dell'ombra in quanto non verrà più eseguito l'evento MOTION_CHANGE
Animazione di un filtro in base all'evento MOTION_CHANGE di una Tween
Nota: qualora non si utilizzassero le Tween di default di Actionscript 3, ma una libreria esterna, sarà necessario impostare l'evento di progresso della libreria utilizzata, a meno che questa non preveda dei metodi dedicati all'animazione di filtri.
Per animare due o più filtri, il procedimento sarebbe analogo a quanto visto nell'esempio precedente con ENTER_FRAME:
Listato 6. Animazione di due filtri con MOTION_CHANGE
import flash.filters.DropShadowFilter;
import fl.transitions.Tween
import fl.transitions.easing.None
import fl.transitions.TweenEvent
import flash.filters.BlurFilter
var ombra:DropShadowFilter = new DropShadowFilter(10,0,0x000000,1,5,5,1,1)
var sfoca:BlurFilter = new BlurFilter(3,3,1)
clip.filters = [ombra,sfoca]
stage.addEventListener(Event.ENTER_FRAME,aggiornaFiltri)
function aggiornaFiltri(evt:Event){
ombra.angle += 3
ombra.distance += 3
sfoca.blurX += 2
sfoca.blurY += 2
clip.filters = [ombra,sfoca]
}
var Tweening:Tween = new Tween(clip, "x", None.easeNone, clip.x, clip.x+(Math.random()*100), 5, true);
Tweening.addEventListener(TweenEvent.MOTION_CHANGE,aggiornaFiltri)
Animazione di un filtro tramite TweenFilterLite
La classe TweenFilterLite, disponibile su greensock.com è in pratica un'estensione della TweenLite di cui già abbiamo accennato nell'articolo "Far esplodere un movieclip" e consente di animare non solo le classiche proprietà di una clip, ma anche eventualmente dei filtri. Questa libreria offre in pratica gli stessi vantaggi di una normale classe di tweening applicandoli però anche ai filtri, dandoci quindi la possibilità di controllare gli eventi, stabilire una durata e molto altro, senza che sia necessario animare anche un movieclip come avviene se usiamo la classica classe Tween di Actionscript 3, che non permette l'animazione dei filtri (non è infatti possibile usare, ad esempio, var Tweening:Tween = new Tween(ombra, "distance", None.easeNone, 0, 100, 5, true);
Vediamo brevemente come ottenere l'animazione delle proprietà angle e distance del filtro DropShadowFilter usando la classe TweenFilterLite; il codice è davvero semplicissimo:
Listato 7. Animazione di un filtro con TweenFilterLite
import flash.filters.DropShadowFilter;
import gs.TweenFilterLite
var ombra:DropShadowFilter = new DropShadowFilter(10,0,0x000000,1,5,5,1,1)
clip.filters = [ombra]
TweenFilterLite.to(clip, 5, {dropShadowFilter:{angle:360, distance:20}});
Come possiamo vedere basta creare il filtro, associarlo al movieclip e poi stabilire tramite TweenFilterLite la durata dell'animazione (nel nostro esempio 5 secondi) e i valori finali per il filtro.
Animazione di un filtro tramite la classe TweenFilterLite
La classe TweenFilterLite permette di animare contemporaneamente anche più filtri, mantenendo comunque una sola chiamata alla classe.
Listato 8. Animazione di più filtri con TweenFilterLite
import flash.filters.DropShadowFilter;
import flash.filters.BlurFilter;
import gs.TweenFilterLite
var ombra:DropShadowFilter = new DropShadowFilter(10,0,0x000000,1,5,5,1,1)
var sfoca:BlurFilter = new BlurFilter(3,3,1)
clip.filters = [ombra,sfoca]
TweenFilterLite.to(clip, 5, {dropShadowFilter:{angle:360, distance:20},blurFilter:{blurX:50,blurY:50} });
Animazione di due filtri tramite la classe TweenFilterLite
