Uno dei più grandi vantaggi di Flash è la possibilità di poter impostare, sia graficamente sia attraverso actionscript, specifici movimenti agli oggetti presenti nello stage. Focalizzandoci sulle possibilità di realizzazione di animazioni tramite AS, assolutamente voglio presentarvi questa fantastica classe: il tweener Caurina.

Questa è ormai una classe molto diffusa e conosciuta, ma vale la pena approfondire l’analisi per capire quali sono le potenzialità meno conosciute della classe. Per chi non ha mai avuto modo di usarla, consiglio la lettura di questo ottimo articolo su www.html.it che ne spiega l’utilizzo.

Focalizziamoci invece sulle potenzialità della classe con Actionscript 3 (esiste anche la versione il AS2 che dispone di un uguale comportamento). Vediamo il codice standard, quello che più solitamente si usa:

Tweener.addTween(mioClip, {x:100, y:100, time:1, transition:"easeInOutCubic"});

“Tweener.addTween” = indica l’aggiunta di un movimento che sfrutta la classe Caurina,

“(mioClip,” = indica l’oggetto(solitamente un MovieClip) che subisce il movimento che subito dopo imposteremo,

“{x:100, y:100, alpha: 0.5,” = indica le proprietà dell’oggetto mioClip che vanno modificate (in questo caso la posizione nell’asse x e nell’asse y e la trasparenza), viene indicato anche il valore che devono assumere alla fine del movimento (il Caurina non richiede l’indicazione di un valore iniziale della proprietà che deve essere modificata, ma solo quello finale),

“time: 1,” = indica, in secondi, il tempo dell’animazione,

“transition:”easeInOutCubic});” = indica il tipo di movimento che viene effettuato, esistono varie tipologie di movimento e sono già memorizzate nella classe, per applicare differenti movimenti basta indicare il nome esatto in questo punto. Per visualizzare tutti i possibili movimenti attivabili è utilissima questa pagina che li illustra perfettamente.

E’ meno conosciuta la possibilità, offerta dal Caurina, di poter effettuare movimenti lungo un percorso composto da curve grazie alla proprietà speciale: “CurveModifiers”, vediamo come funziona:

Innanzitutto importiamo la speciale proprietà e inizializziamola:

import caurina.transitions.properties.CurveModifiers;
CurveModifiers.init();

dopodichè dobbiamo creare un nuovo array, che indica le posizioni x e y del punto centrale della curva di Bezier, poi possiamo scrivere il codice di aggiunta del Tween, inserendo la proprietà “_bezier”, per la creazione del movimento:

var punti:Array = new Array;
punti.push( { x : 382, y : 200 } );

Tweener.addTween(mioClip, { x: 595, y:(mioClip.y+100), rotationY: 180, time:0.5, transition:”easeInOutSine”, _bezier: punti } );

Ecco un esempio di quello che potremmo realizzare, in questo caso ho creato un movimento continuo, ma ovviamente il vantaggio del Caurina è la possibilità di creare transazioni particolari per ogni oggetto inserito in un progetto Flash. Qui trovate il file sorgente (ovviamente per funzionare dovete inserire nella stessa cartella i file sorgenti di Caurina).

Tipologie di transizione

Vediamo quali sono le tipogie di “transition” già belle e pronte nella classe Caurina, basta copiare il titolo della transizione e applicarlo nel codice del Tweener: