Tweener! Una classe per creare movimento in Flash

Quando si inizia a studiare Actionscript una delle cose di cui si sente maggiormente la necessità è di una funzione di tween. Cioè di qualcosa che ci permetta di ordinare ad un qualsiasi parametro una certa progressione temporale, basta che sia basata su numeri.

Per quelli che sono sempre stati abituati a far muovere gli oggetti tramite l’editor di movimenti nell’ide di Flash questo non è un problema. Ma per chi invece crea contenuti Flash come me esclusivamente tramite AS3 allora imparare ad usare le classi adibite al tween è indispensabile.

Quello di cui voglio parlarvi oggi però non è la classe incorporata in Flash (la classe Tween), bensì di un’api che ho sempre utilizzato e che ho sempre trovato semplice ed immediata da usare: sto parlando di Tweener.

Questa è la pagina ufficiale di Tweener in Google Code ed è il posto dove potrete scaricare l’ultima versione dell’api e dove potrete tenervi aggiornati sulle ultime novità.

• versione stabile di Tweener per AS3

Cosa aspettate allora?! Scaricate l’ultima versione ed andiamo a vedere come utilizzarla!

1- INSTALLAZIONE

Come tutte le altre api potrete semplicemente copiare la cartella com con tutto il suo contenuto all’interno della cartella dove avete salvato il vostro progetto, oppure se avete una cartella predefinita, dove caricate ogni vostra api, mettetela lì dentro.

2- CREARE IL PROGETTO

Create il vostro nuovo file AS3 e salvatelo in una apposita cartella da voi creata. Create anche un nuovo file AS e salvatelo con il nome di DocumentClass all’interno della stessa cartella. Inserite il nome DocumentClass nell’apposito campo all’interno dell’ide Flash e verificate che sia corretto cliccando sul simbolo della matita lì affianco.

3- IMPOSTAZIONE DOCUMENT CLASS

Impostate come al solito la document class ed importate la classe MovieClip necessaria all’esecuzione del progetto, più l’import della classe di Tweener.

package {
 
	import flash.display.MovieClip;
	import caurina.transitions.Tweener;//import della classe Tweener
 
	public class DocumentClass extends MovieClip {
 
		public function DocumentClass() {
 
		}
	}
}

4- CREARE IL MOVIECLIP DI PROVA

Ora tornate all’ide Flash e create qualsiasi simbolo MovieClip e dategli nome d’istanza prova_mc. Posizionatelo all’estremo sinistro dello stage.

5- UTILIZZO DI TWEENER

Ora tornate alla document class e scrivete all’interno del costruttore:

package {
 
	import flash.display.MovieClip;
	import caurina.transitions.Tweener;
 
	public class DocumentClass extends MovieClip {
 
		public function DocumentClass() { //costruttore
			Tweener.addTween(prova_mc, {x:stage.stageWidth, time:1});//utilizzo base del metodo addTween
		}
	}
}

Che cosa ho fatto? Ho ordinato al nostro movie clip di muoversi lungo l’asse X, dalla posizione in cui si trova all’estremo destro dello stage. Semplice no?

Come vedete la classe Tweener non necessita di essere istanziata perchè è statica. Si utilizza il metodo addTween per aggiungere un movimentoo ad una certa proprietà, al quale si passa come argomenti l’oggetto del quale dobbiamo modificare la/le proprietà, e poi le varie proprietà dentro parentesi grafa.

E’ necessario specificare il tempo di durata della transizione e naturalmente il parametro che dovrà essere modificato, con il suo valore finale.

NON SOLO MOVIMENTO

Le api di tween non devono essere utilizzate solo per il movimento in se, ma possono essere impiegate anche nella transizione di molte altre proprietà come ad esempio la proprietà alpha; potremo così utilizzarla nei fadein e fadeout degli oggetti che compongono la nostra applicazione Flash. Ecco un esempio:

package {
 
	import flash.display.MovieClip;
	import caurina.transitions.Tweener;
 
	public class DocumentClass extends MovieClip {
 
		public function DocumentClass() {
			Tweener.addTween(prova_mc, {alpha:0, time:1});//utilizzo base del metodo addTween con la proprietà alpha
		}
	}
}

Con questa riga di codice abbiamo imposto al nostro movieclip di sparire con un effetto dissolvenza in un tempo pari ad un secondo.

TIPI DI TRANSIZIONI

Altro discorso va fatto per i tipi di transizioni. Come è facile immaginare non c’è un unico modo per andare da un punto ad un altro, da un valore ad un altro. Potrebbe essere necessario muoversi linearmente o con andamento iperbolico. Tweener da questo punto di vista è dotato di una serie di transizioni che accontentano tutti. Ce ne sono di tutti i tipi.

Ecco dove troverete tutte le transizioni concepite per Tweener.

Di default Tweener utilizza la transizione “easeOutExpo”. Questo vuol dire che se non specificherete la transizione che volete utilizzare, tweener userà automaticamente la succitata transizione.

Per usare altri tipi di transizione le istruzioni saranno:

Tweener.addTween(prova-mc, {alpha:0, time:1, transition:”linear”});

Se fate come ho fatto io otterrete una transizione in maniera retta e quindi senza accelerazioni o decelerazioni dei valori.

conclusioni

Abbiamo visto allora come utilizzare a livello base questa api. In verità esistono molte altre funzioni più avanzate. Se volete leggere le documetazioni complete seguite il seguente link:

• Documentazione Ufficiale Tweener.

Alla prossima!

Autore:

Roberto Cinetto - Web & Graphic Designer

Giovane designer di Padova Roberto è sempre stato appassionato del mondo informatico e come tale è sempre alla ricerca di nuove ispirazioni e di nuove tecnologie da esplorare. Da molti anni è anche chitarrista e amante della musica in generale. Il suo sogno è di riuscire un giorno a creare una agenzia multimediale competente in web, grafica/video e recording/mixing, naturalmente tramite la collaborazione con svariati professionisti.