Caurina Tweener, animazioni in Flash e AS3

L'ambito in cui si trovano più classi Actionscript personalizzate è quello delle animazioni (o Tween). Oltre alle classi presenti in Flash, infatti, esiste un'ottima varietà di pacchetti creati da sviluppatori indipendenti.

Queste classi puntano sulla leggerezza di esecuzione e sulla semplicità di utilizzo, consentendo di ottenere animazioni regolate via Actionscript, con poco codice e con la possibilità di animare molti oggetti contemporaneamente, senza incidere sulle prestazioni della CPU.

Abbiamo già parlato di TweenLite e di TweenFilterLite: in questo articolo affronteremo invece la classe Tweener (realizzata da Zeh Fernando), disponibile per AS 2 e 3.

Possiamo definire Tweener una sorta di "intermediario", a cui noi comunichiamo il movimento che vogliamo far eseguire all'oggetto (ad esempio muoverlo dalle coordinate 0,0 alle coordinate 100,400) e che automaticamente elabora gli script necessari per eseguire questa operazione.

Le feature sono molteplici; citiamo la possibilità di animare tutte le proprietà dei movieclip (quindi posizione, dimensione, trasparenza, etc) stabilendo la durata dell'animazione e il tipo di transizione (lineare, elastico, accelerato, ecc, questi sono ereditati dalle classi native di Flash e sono solitamente utilizzati in tutte le classi di Tweening), la possibilità di impostare dei percorsi di animazione non lineari e la possibilità di stabilire il ritardo di un'animazione prima di partire. La sintassi, così come le feature, è simile a quella riscontrabile in altre classi (principalmente TweenLite):

Per farsi un'idea delle potenzialità della classe è possibile scaricare alcuni esempi, disponibili con tanto di codice sorgente.

Installazione

Per prima cosa scarichiamo la versione desiderata; nel file ZIP troveremo la cartella caurina. Trattandosi di classi, sarà sufficiente estrarre il contenuto del file in una cartella a nostro piacere, poi potremo salvare il nostro FLA nella stessa directory in cui abbiamo posizionato la cartella caurina o in alternativa settare quest'ultima tra i percorsi di classe del nostro FLA.

Non sono necessari altri procedimenti. Il package completo è caurina.transitions.*, questa è quindi la stringa da utilizzare per importare l'intero package nel nostro progetto.

Spostare un movieclip

Partiamo dall'esempio più semplice: lo spostamento di un movieclip sui suoi assi x e y. Da notare che gli esempi di codice che creeremo saranno in Actionscript 3, ma per renderli utilizzabili in Actionscript 2 sarà sufficiente variare le proprietà dei movieclip (per esempio x è _x in Actionscript, scaleX è _xscale, etc.), la sintassi di Tweener rimane invariata.

Creiamo un nuovo file .fla e al suo interno disegnamo un nuovo oggetto, che andremo subito a convertire in movieclip. Diamogli nome istanza mc, quindi portiamoci nell'editor di Actionscript:

// importiamo il package
import caurina.transitions.*
// avviamo l'animazione facendola durare un secondo
Tweener.addTween(mc,{x:260,y:300,time:1}) 

Salviamo il progetto nella cartella dove abbiamo scompattato caurina, quindi esportiamo il file. Il risultato sarà come il seguente:

Notiamo come il movieclip deceleri verso la fine del movimento, possiamo cambiare questo comportamento sfruttando la già citata proprietà teansition che permette di decidere quale espressione di movimento usare. All'interno della documentazione di Tweener è disponibile un cheat sheet che mostra le varie animazioni. Quella vista nell'esempio è easeOutExpo, mentre senza decelerazione dovremo usare linear.

// importiamo il package
import caurina.transitions.*
// avviamo l'animazione facendola durare un secondo e senza accelerazioni
Tweener.addTween(mc,{x:260,y:300,time:1, transition:"linear"}) 

Potremo sperimentare le varie tipologie di movimento cambiando la proprietà transition e basandoci sul cheat sheet.

Ritardare un movimento

È possibile fare in modo che un movimento non avvenga all'avvio del filmato: con i codici precedenti, infatti, il movieclip inizia subito a spostarsi (negli esempi dell'articolo abbiamo inserito il click obbligatorio per comodità).

Per ritardare un movimento è sufficiente usare la proprietà delay, modificando il codice precedente:

weener.addTween(mc,{x:260,y:300,time:1, delay: 1 , transition:"linear"})

Il risultato è il seguente:

Sequenze di movimenti

Sfruttando la proprietà delay è possibile creare delle sequenze di movimento per uno o più movieclip. Ad esempio, sapendo che la prima animazione dura un secondo, possiamo inserirne una seconda, con delay pari a 1, che verrà quindi eseguita subito dopo la precedente. Vediamo un esempio pratico:

import caurina.transitions.*

// avviamo la prima animazione
Tweener.addTween(mc,{x:260,y:300,time:1, transition:"linear"})

// avviamo la seconda animazione con ritardo di un secondo
Tweener.addTween(mc,{x:0,y:0,time:1,delay:1}) 

Così eseguiremo prima un'animazione di un secondo, con transizione lineare, ma ne avviamo anche un'altra con ritardo di 1 secondo, transizione di default e durata di un secondo: avendo la prima animazione durata di 1 secondo e la seconda ritardo di un secondo, quest'ultima partirà appena conclusa la prima.

L'evento OnComplete

Benché sia possibile organizzare sequenze di animazioni basandosi sui parametri time e delay, c'è però un modo molto più corretto e versatile, ovvero l'utilizzo dell'evento onComplete. Questo viene lanciato da ogni tween quando la sua animazione è conclusa, di conseguenza è ottimo per regolare delle azioni da eseguire in base al momento in cui si concluda una o più animazioni; può essere inserito come proprietà e può richiamare una funzione, passandole eventualmente anche dei parametri:

import caurina.transitions.*

Tweener.addTween(mc,{x:260,y:300,time:1, transition:"linear", onComplete:prossimo}

function prossimo():void
{
  Tweener.addTween(mc,{x:0,y:0,time:1, onComplete:riparti})
}

function riparti():void
{
  Tweener.addTween(mc,{x:260,y:300,time:1, transition:"linear", onComplete:prossimo})
} 

Inizialmente viene eseguito il primo movimento, al termine dell'animazione viene chiamata la funzione prossimo che sposta il movieclip al punto 0,0, al termine di questo spostamento chiama riparti, che a sua volta esegue lo stesso movimento iniziale e ha per il parametro onComplete il richiamo a prossimo: ne consegue che avremo un continuo passaggio tra le due funzioni, con conseguente ripetizione dell'animazione.

Rimozione di un'interpolazione

Finora abbiamo visto come aggiungere dei movimenti a un movieclip, supponiamo però di voler eliminare un movimento, per esempio dopo un certo numero di esecuzioni: per questo scopo è possibile usare il metodo removeTweens, che risulta peraltro molto versatile poiché ci consente di eliminare eventualmente solo l'interpolazione di alcune proprietà. Prendiamo ad esempio il seguente codice:

Cliccando sullo stage rimuoveremo la proprietà x, quindi lo spostamento orizzontale, e il movieclip si muoverà soltanto in verticale.

Poichè la funzione riparti verrà comunque chiamata, dopo il movimento verticale la clip ripartirà dal movimento completo (orizzontale e verticale), questo perché gli eventi come l'onComplete continuano a essere eseguiti, a meno che non vengano eliminate tutte le proprietà dell'interpolazione.

Per rimuovere tutte le proprietà del movimento è sufficiente non specificare parametri oltre al nome istanza dell'oggetto nel metodo removeTween, in questo modo:

Qualora nel nostro filmato fossero presenti più movieclip animati con Tweener, e volessimo eliminare tutti i loro movimenti, possiamo sfruttare il metodo removeAllTweens che ferma tutte le interpolazioni create tramite Tweener su qualsiasi movieclip. Supponiamo di avere sul nostro stage due movieclip (nomi istanza mc e mc2) e di avere questo codice:

Il risultato sarà come nell'esempio seguente:

Interrompere e riprendere un'interpolazione

Se la nostra necessità fosse quella di interrompere un'interpolazione in modo da poterla riprendere in seguito, i metodi removeTweens e removeAllTweens sarebbero probabilmente "eccessivi": per quanto, infatti, potremmo rimuovere una tween e poi eventualmente ricrearla tramite addTween, Tweener mette a disposizione diversi metodi per interrompere e riavviare in seguito, una o più interpolazioni. Il funzionamento e i parametri di tali metodi sono comunque analoghi a quelli appena visti per la rimozione; iniziamo dal metodo pauseTweens.

Questo metodo consente di mettere in pausa il movimento di un'oggetto, oppure solo alcune proprietà, anche se quest'ultima situazione ha un utilizzo pratico probabilmente minore. Vediamo un breve esempio: teniamo sullo stage il solito movieclip con nome istanza mc e scriviamo questo codice:

In pratica avviamo l'interpolazione e facciamo sì che, al click con il mouse, venga messo in pausa il movimento sull'asse x (proseguirà quindi quello sull'asse y); qualora ricliccassimo sullo stage, il movimento sull'asse x verrà ripreso dal momento in cui è stato interrotto.

L'effetto è un po' "particolare" dato che viene interrotta e ripresa solo una parte del movimento. Sicuramente più comune è l'interruzione e ripresa dell'intero movimento, che possiamo ottenere semplicemente specificando il nome istanza del movieclip da fermare e da riavviare nei comandi pauseTweens e resumeTweens.

Analogamente a quanto visto per la rimozione di tween, è anche possibile fermare ed eventualmente riavviare in un colpo solo tutte le animazioni di Tweener grazie ai comandi pauseAllTweens e resumeAllTweens.

Movimenti su percorsi

Negli esempi che abbiamo visto finora, il movimento avveniva sempre in linea retta; ma è possibile anche impostare percorsi curvi. Per questo è necessario importare un'ulteriore package e inizializzare il modificatore CurveModifiers. Dopodiché basterà utilizzare la proprietà _bezier all'interno dell'interpolazione istanziata tramite Tweener, proprietà che richiede come valore un array di punti che costituiranno il percorso seguito dall'oggetto: