14 maggio 2011

Le caurina transitions

di Marcello Ruta

Tool utilizzati: Flash CS5

Requisiti: Cononoscenze di Actionscript 3.0

Uno dei modi più semplici per creare animazioni via codice può essere quello dei avvalersi dei tween engine ovvero dei framework scritti da sviluppatori indipendenti. Ebbene sapere che esistono diversi tipi di tween engine, inoltre dobbiamo essere consapevoli che ognuno di essi ha un approccio differente rispetto ad un altro.

Ecco alcuni dei tween engine più diffusi e scaricati dalla rete:

  • Tweener;
  • TweenLite/TweenGroup;
  • KitchenSync;
  • gTween

In questo tutorial focalizzeremo la nostra attenzione sull’utilizzo delle caurina.transitions.Tweener sviluppate da Zeh Fernando.

Una breve storia.
Le Caurina hanno guadagnato una certa dose di popolarità nel corso degli anni. All’inizio l’engine delle Tweener era basato su Actionscript 2.0 poi in seguito è stato fatto il porting a Actionscript 3.0, entrambe le versioni sono ancora disponibili. Le Tweener sono state rilasciate nel 2003 ed erano basate su Actionscript 1.0, l’engine era chiamato MC Tween. Le Caurina originariamente erano state scritte da Zeh Fernando, ma nel corso degli anni hanno contribuito anche molti altri sviluppatori allo sviluppo di questo framework.

Perché usare questi tween engines e in particolare le Caurina?
Perché sono semplici e flessibili da usare, perché si possono combinare molteplici proprietà in una transition senza avere problemi, perché si possono creare animazioni più o meno complesse con poche righe di codice. Inoltre con l’uso di questi engine si ha un incremento delle performance rispetto alle transitions built-in di Adobe Flash.

Che cosa fanno queste Caurina?
In poche parole esse si comportano da “tramite” o ancora meglio da “intermediario”, cioè elaborano le informazioni che noi comunichiamo creando, in maniera automatica, lo script necessario per eseguire una determinata operazione. Un esempio può essere quello di muovere un oggetto dalla posizione x = 0 alla posizione finale x = 450;

Quindi con le Tweener è possibile animare tutte le proprietà di una movieclip come: la posizione x e y, la dimensione height e width o scaleX e scaleY, la trasparenza, la rotazione di un oggetto, etc; stabilendo la durata dell'animazione e il tipo di transizione (lineare, elastico, accelerato, ecc, questi ultimi sono ereditati dalle classi native di Flash), inoltre si ha la possibilità di impostare dei percorsi di animazione non lineari con i bezier e si può stabilire il ritardo di un'animazione prima di partire.

Come installarle?
Il tutto è abbastanza semplice, basta scaricare i files sorgente dal repository di Google code http://code.google.com/p/tweener/downloads/list . Una volta scaricata il file zippato contenente la cartella con le Caurina, bisogna scompattarlo e metterlo nella stessa cartella dove risiede il file FLA. Quindi si esegue l’import della classe caurina, ma questo lo vedremo più tardi con un esempio chiarificatore.

La sintassi
La sintassi delle Tweener è abbastanza semplice da usare. Diversamente dalla classe Adobe Tween, non creerai mai un’istanza della classe principale Tweener, questo perchè richiameremo dei metodi statici su Tweener.

Ecco la sintassi:

Tweener.addTween(target, { tweeningParameters })

Dopo questa rapida premessa ci mettiamo all’opera, facendo una serie di esempi esplicativi sull’uso del package.

Tips: La cartella delle caurina deve stare nella stessa directory del vostro Flash project.

Esempio 1:
Partiamo con esempio abbastanza semplice e banale, ovvero spostiamo una movieclip sui suoi assi x e y.
Creiamo un fla e lo salviamo nella stessa directory, dove c’è il package delle caurina transitions, quindi eseguiamo l’import della classe, dopodiché ci creiamo una movie clip ball_mc e con poche righe codice facciamo eseguire il movimento al nostro oggetto, ma ecco il codice:

import caurina.transitions.*;

Tweener.addTween(ball_mc, {x:390, time:1, transition:"linear"});

Dove:

  • ball_mc – è il DisplayObject;
  • il primo parametro dentro la parentesi tonda è il nome di istanza della movie clip;
  • time: rappresenta la durata della transition espressa in secondi;
  • transition – rappresenta il tipo di transition che vogliamo usare; si possono utilizzare vari altri tipi di transition, ma questo è un esperimento che potete fare voi tranquillamente. Qui trovate tutte i tipi di transition applicabili: http://hosted.zeh.com.br/tweener/docs/en-us/

Esempio 2:
In questo esempio utilizzeremo molti più attributi o proprietà applicate al nostro movieclip. Partiamo sempre dall’esempio precedente, lo salviamo attribuendo il nome example2.fla, ecco il codice dell’esempio:

import caurina.transitions.*;

// impostiamo la proprietà alpha su 0
ball_mc.alpha = 0;

Tweener.addTween(ball_mc, {x:390, y: 290, alpha: 1, time: 1, transition: "linear"});

Come potete vedere dai parametri impostati nelle graffe, la Tweener eridita la proprietà alpha, questo a suffragio di quanto detto prima.

Esempio 3:
In questo esempio applicheremo due differenti transition al nostro oggetto, salviamo il file con example3.fla, e scriviamo questo codice:

import caurina.transitions.*;
import flash.events.*;

ball_mc.x = 0;
playButton_mc.addEventListener(MouseEvent.CLICK, onPlayHandler);

function onPlayHandler(e:MouseEvent):void {
	Tweener.addTween(ball_mc, {x: 390, time: 1, transition: "easeOutElastic"});
	Tweener.addTween(ball_mc, {y: 290, time: 1, transition: "easeInBounce"});
}

In questo esempio ho aggiunto un pulsante, usando il componente button. Da come si evince dal codice, la prima Tweener esegue il movimento lungo l’asse delle x con una transition "easeOutElastic" mentre la seconda Tweener sposta il nostro oggetto alla coordinata y indicata eseguendo una transition diversa da quella precedente.

Esempio 4:
Adesso vedremo come creare una sequenza di movimenti applicando la proprietà delay. Il delay appunto serve per ritardare il movimento. Passiamo all’esempio, example4.fla, ecco il codice:

import caurina.transitions.*;

// impostiamo la proprietà alpha su 0
ball_mc.alpha = 0;

Tweener.addTween(ball_mc, {x:390, alpha: 1, time: 1, transition: "linear"});
Tweener.addTween(ball_mc, {y:290, time: 1, delay: 2, transition: "easeOutBounce"});

Eseguendo il nostro filmato noteremo che la prima un'animazione dura un secondo, con transizione lineare, successivamente ne avvieremo anche un'altra con il ritardo di 2 secondi, quest'ultima partirà non appena si è conclusa la prima.

Il parametro onComplete.
Il parametro onComplete o anche evento onComplete, permette di avere delle animazione meglio strutturate e di conseguenza è ottimo per gestire delle azioni da eseguire in sequenza in base al momento in cui si conclude una determinata azione/operazione o più animazioni. Al parametro onComplete viene fatta richiamare una funzione, ad essa è anche possibile passare eventualmente dei parametri. Quando facciamo animazioni in sequenza, a volte è meglio utilizzare questo parametro invece del delay.

Tips: Se vogliamo che la function richiamata nell’onComplete abbia dei parametri possiamo utilizzare l’onCompleteParams.

Esempio 5:
Adesso vediamo un esempio esplicativo su quanto spiegato prima, salviamo il nostro file assegnando il nome example5.fla, e scriviamo questo codice:

import caurina.transitions.*;

// impostiamo la proprietà alpha su 0
ball_mc.alpha = 0;

Tweener.addTween(ball_mc, {alpha:1, time: 1, transition: "linear", onComplete: doSomething});
Tweener.addTween(ball_mc, {y:290, time: 1, delay: 2, transition: "easeOutBounce"});

function doSomething():void {
	
	Tweener.addTween(ball_mc, {x: 390, time: 1, transition: "easeInOutElastic"});
	
}

Come possiamo vedere nel primo Tweener viene fatto un fadein dell’oggetto con transition “linear” e abbiamo aggiunto il parametro onComplete che richiama un’altra funzione dove eseguiamo un’altra animazione, infine, continuando il nostro mix di operazioni, con un delay di 2 secondi facciamo eseguire l’ultima animazione.

Esempio 6:
Adesso proseguendo sulla base di questo esempio vedremo come passare dei parametri alla nostra function. Salviamo il file precedente in example6.fla, e aggiungiamo un campo di testo dinamico, al campo di testo dinamico diamo alpha = 0 in modo che all’onComplete abbia un alpha = 1 e sia popolato con una stringa di testo a nostro piacere, ma vediamo il codice necessario per fare questo:

import caurina.transitions.*;
// impostiamo la proprietà alpha su 0
ball_mc.alpha = 0;
tf_txt.alpha = 0;

Tweener.addTween(ball_mc, {alpha:1, time: 1, transition: "linear"});
Tweener.addTween(ball_mc, {y:290, time: 1, delay: 2, transition: "easeOutBounce", onComplete: doSomething, onCompleteParams: ["Actionscript.it, you are welcome!!"]});

function doSomething(str:String):void {
	
	Tweener.addTween(ball_mc, {x: 390, time: 1, transition: "easeInOutElastic"});
	tf_txt.alpha = 1;
	tf_txt.text = str;
	
}

Come potete vedere il tutto è di una notevole semplicità. Infatti, al parametro onCompleteParams abbiamo passato una stringa di testo dentro le parentesi [].

Adesso con l’ausilio di altri esempi vedremo l’utilizzo di altri metodi, che ci mette a disposizione il package delle caurina.

Rimozione tweening
Dobbiamo sapere che com’è possibile applicare dei movimenti agli oggetti, è anche possibile rimuoverli, come fare? Semplice utilizzando il metodo removeTweens, tale metodo peraltro risulta abbastanza versatile in quanto ci consente di eliminare eventualmente solo l'interpolazione di alcune proprietà oppure di tutte le proprietà non specificando alcun parametro oltre al nome istanza dell'oggetto nel metodo removeTweens, adesso facciamo degli esempi esplicativi per capire meglio.

Esempio 7:
In questo esempio vedremo come rimuovere una singola proprietà all’oggetto, attraverso il metodo removeTweens, ecco il codice:

import caurina.transitions.*;
import flash.events.*;

ball_mc.x = 0;
playButton_mc.addEventListener(MouseEvent.CLICK, onClickHandler);

Tweener.addTween(ball_mc, {x:390, y: 290, time: 1, transition: "easeOutElastic", onComplete: repeating});

function repeating() {
	
	Tweener.addTween(ball_mc, {x:0, y: 50, time: 1, transition: "easeOutElastic", onComplete: onRepeat});
}

function onRepeat() {
	
	Tweener.addTween(ball_mc, {x:390, y: 290, time: 1, transition: "easeOutElastic", onComplete: repeating});
	
}

function onClickHandler(e:MouseEvent):void {
	
	Tweener.removeTweens(ball_mc, "y");
	
}

Facendo click sul pulsante "RemoveTweens", durante l’esecuzione dell’animazione sarà rimossa la proprietà "y" pertanto lo spostamento dell’oggetto avverrà in maniera orizzontale anziché verticale. Se volessimo rimuovere tutte le proprietà applicate all’oggetto è sufficiente non specificare nessun parametro oltre al nome istanza, quindi la funzione onClickHandler sarebbe cosi:

function onClickHandler(e:MouseEvent):void {
	
	Tweener.removeTweens(ball_mc);
	
}

in questo modo avremo l’effetto che saranno rimosse tutte le proprietà e quindi non sarà effettuato nessun movimento.

Rimanendo sempre in tema di rimozione dei tweening c’è da sapere che il metodo removeAllTweens ci permette di eliminare tutti i movimenti applicati a diverse movieclip presenti nel nostro filmato. Ma, vediamo anche in questo caso un esempio.

Esempio 8:
Supponiamo di avere sullo stage due movieclip animate e in un momento successivo ne vogliamo rimuovere tutti i movimenti legati a essi. Ecco il codice di esempio:

import caurina.transitions.*;
import flash.events.*;

playButton_mc.addEventListener(MouseEvent.CLICK, onClickHandler);

Tweener.addTween(ball_mc, {x:390, y: 290, time: 1, transition: "easeOutElastic", onComplete: repeating});
Tweener.addTween(ball2_mc, {x:0, y: 290, time: 1, transition: "easeOutElastic", onComplete: repeating});

function repeating() {
	
	Tweener.addTween(ball_mc, {x:0, y: 50, time: 1, transition: "easeOutElastic", onComplete: onRepeat});
	Tweener.addTween(ball2_mc, {x:477, y: 50, time: 1, transition: "easeOutElastic", onComplete: onRepeat});
}

function onRepeat() {
	
	Tweener.addTween(ball_mc, {x:390, y: 290, time: 1, transition: "easeOutElastic", onComplete: repeating});
	Tweener.addTween(ball2_mc, {x:0, y: 290, time: 1, transition: "easeOutElastic", onComplete: repeating});
}

function onClickHandler(e:MouseEvent):void {
	
	Tweener.removeAllTweens();
	
}

In questo esempio non ho fatto che duplicare la clip sullo stage ed assegnarli il nome di istanza ball2_mc e posizionarlo a destra sullo stage. Alla function "onClickHandler" ho poi dato il metodo removeAllTweens() che consente di rimuovere tutte le animazioni applicate a quegli oggetti.

Interrompere e riprendere un tweening
Anche in questo caso abbiamo dei metodi che ci consentono di interrompere e riprendere l’animazione nel momento desiderato, come abbiamo visto per la rimozione anche in questo caso, è possibile interrompere e riprendere il movimento di singole proprietà. I metodi delegati a fare tutto ciò sono pauseTweens e resumeTweens. Vediamo adesso di capire meglio il loro utilizzo con un esempio.

Esempio 9:
Partendo sempre dall’esempio precedente salviamo il nostro filmato con il nome example9.fla, ecco il codice:

import caurina.transitions.*;
import flash.events.*;

var isClicked:Boolean = false;

ball_mc.x = 0;

playButton_mc.addEventListener(MouseEvent.CLICK, onHandler);

Tweener.addTween(ball_mc, {x:390, y: 290, time: 20, transition: "linear"});


function onHandler(e:MouseEvent):void {
	
	if(isClicked == false) {
		
		//Tweener.pauseTweens(ball_mc, "x");
		Tweener.pauseTweens(ball_mc);
		playButton_mc.label = "ResumeTweens";
		isClicked = true;
		
	} else {
		
		//Tweener.resumeTweens(ball_mc, "x");
		Tweener.resumeTweens(ball_mc);
		playButton_mc.label = "PauseTweens";
		isClicked = false;
	}
	
}

In questo esempio ho introdotto una variabile booleana in modo da poter gestire con un unico handler di eventi la pausa e il riavvio del tweening. Inoltre se provate a de-commentare il codice commentato (e naturalmente a commentare il codice Tweener.resumeTweens(ball_mc)) vi accorgerete che il tweening continuerà ad eseguirsi ma solo verticalmente e non seguendo l’asse delle "x", ri-cliccando e quindi facendo il resume vi accorgerete che la movieclip riprenderà a fare il movimento seguendo le coordinate "x".

Tips: Analogamente a quanto abbiamo visto prima per la rimozione di due o più tweening applicati ha svariati oggetti posti sullo stage, anche in questo caso ci sono dei metodi che ci danno la possibilità di fermare ed eventualmente riavviare in un colpo solo tutte le animazioni, questo grazie ai metodi pauseAllTweens e resumeAllTweens.

Usiamo il tweening parameters "base" per assegnargli un template di Tweens.
Alcune animazioni o effetti visuali a volte sono utilizzate più volte nello stesso progetto, per evitare di riscrivere più volte lo stesso effetto si può creare un "template" di una tween e riutilizzarlo più volte quando serve. Vediamo un esempio pratico per carpire meglio, creiamo il file FLA example10.fla e scriviamo il seguente codice:

import caurina.transitions.*;
import flash.events.*;

ball_mc.x = 0;
ball_mc.y = 0;

var scaleAndFadeOut: Object = {
		
		scaleX: 0,
		scaleY: 0,
		alpha: 0,
		time: 5,
		delay: 2,
		transition: "easeOutBounce"
		
	}

Tweener.addTween(ball_mc, {x:(stage.stageWidth - ball_mc.width) / 2, y: (stage.stageHeight - ball_mc.height) / 2, time: 5, 
				 scaleX: 2, scaleY: 2, 
				 transition: "linear", onComplete: disappear});

function disappear() {
	
	Tweener.addTween(ball_mc, {base: scaleAndFadeOut})
	
}

Come possiamo vedere in questo script ci siamo creati un Object che funge da template, a quest’Object abbiamo poi assegnato una serie di proprietà (scaleX, alpha, etc) e alcuni parametri (time, delay e transition). L’object scaleAndFadeOut poi è assegnato al parametro base quando è richiamata la funzione di callback disappear() nel parametro onComplete.

Special Properties – ColorShortcuts
Questa classe ci aiuta ad applicare in maniera semplice, le trasformazioni di colore sui nostri oggetti.

Ecco il link alla documentazione completa: http://hosted.zeh.com.br/tweener/docs/en-us/

Ma per capire meglio facciamo qualche esempio pratico.

Creiamo un nuovo fla, e lo salviamo con il nome example11_ColorShortcuts.fla, rinominiamo il Livello 1 o Layer 1 in action e scriviamo il seguente codice:

import caurina.transitions.*;
 
// import ColorShortcuts properties
import caurina.transitions.properties.ColorShortcuts;
// istanziare il ColorShortcuts
ColorShortcuts.init();
 
// define un oggetto su cui applicare la proprietà ColorShortcuts
var sprite:Sprite = new Sprite();
sprite.x = 50;
sprite.y = 50;
sprite.graphics.lineStyle();
sprite.graphics.beginFill(0xff00ff);
sprite.graphics.drawRect(0,0,100,100);
addChild(sprite);
 
// aggiungiamo dei listener di eventi
sprite.buttonMode = true;
sprite.addEventListener(MouseEvent.MOUSE_OVER, onHoverHandler);
sprite.addEventListener(MouseEvent.MOUSE_OUT, onOutHandler);
 
// applichiamo il cambio di colore al nostro DisplayObject
function onHoverHandler(e:MouseEvent):void {
	Tweener.addTween(sprite, {_color:0x0000ff, alpha: .5, time:1, transition:"easeOutQuart"});
}
function onOutHandler(e:MouseEvent):void {
	Tweener.addTween(sprite, {_color:null, alpha: 1, time:1, transition:"easeOutQuart"});
}

Come vedete è abbastanza semplice effettuare i cambiamenti di colore.

Adesso adduciamo un altro esempio (partendo da quello precedente) applicando una delle molteplici proprietà che sono a nostra disposizione nella Classe ColorShortcuts.

Ecco il codice:

import caurina.transitions.*;
import flash.net.*;
import flash.display.*;
import flash.events.*;
import flash.display.*;
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

sprite.graphics.drawRect(0,0,100,30); dal precedente codice modificate solo questa riga di codice
///////////////////////
var pathFile:String = "images/Sky_Clouds.jpg";
var url_request:URLRequest;
var loader:Loader;

sprite.addEventListener(MouseEvent.CLICK, onLoadImage);

function onLoadImage(e:MouseEvent):void {

	url_request = new URLRequest(pathFile);
	loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
	loader.load(url_request);
}

function onCompleteHandler(e:Event):void {
	
	var bmp:Bitmap = new Bitmap();
	bmp = e.target.content;
	bmp.y = 50;
	
	// proprietà _contrast -1 grigio, 0 aspetto normale dell'immagine, 1 alto contrasto
	//Tweener.addTween(bmp, {_contrast: 1, time:3});
	
	// proprietà _brightness -1 colore scuro, 0 aspetto normale dell'immagine, 1 effetto bright
	// il valore 2.55 mette l'immagine totalmente esposta.
	Tweener.addTween(bmp, {_brightness: 1, time:3});
	addChild(bmp);
}

Siamo partiti dall’esempio precedente facendo una leggera modifica all’oggetto sprite, facendolo più piccolo in altezza, dopodiché abbiamo aggiunto un listener di eventi per il CLICK, al fine di caricare l’immagine. Infine nella funzione onCompleteHandler abbiamo usato le Tweener per eseguire dei cambiamenti di colore con le proprietà _brightness e _contrast, per le altre proprietà lascio a voi le altre prove.

Special Properties – FilterShortcuts
Anche questa Classe ci viene in soccorso qualora dobbiamo applicare dei filtri su MovieClip o DisplayObject. I filtri hanno delle proprietà che accettano valori numerici.

Ecco la documentazione completa sui filtri: http://hosted.zeh.com.br/tweener/docs/en-us/

Per comprenderne meglio l’uso adduciamo qualche esempio, partiamo dall’esempio precedente in cui carichiamo un’immagine, salviamo il fla con il seguente nome example13_Filters.fla.

In questo esempio resterà inalterato il codice actioscript che concerne la parte del pulsante, mentre applicheremo un effetto di blur al caricamento dell’immagine.

Ecco il codice relativo alla function onCompleteHandler:

function onCompleteHandler(e:Event):void {
	
	var mc:MovieClip = new MovieClip();
	mc.alpha = 0;
	addChild(mc);
	
	var bmp:Bitmap = new Bitmap();
	bmp = e.target.content;
	bmp.y = 50;
	
	Tweener.addTween(mc, {alpha: 1, _Blur_blurX: 50, _Blur_blurY: 50, time: 1, onComplete: resetBlur});
	mc.addChild(bmp);
	
	function resetBlur():void {
		
		Tweener.addTween(mc, {_Blur_blurX: 0, _Blur_blurY: 0, time: 3});
	}
}

Per quanto riguarda l’applicazione degli altri filtri, lascio a voi l’approfondimento perché l’uso mi sembra abbastanza semplice e immediato.

Special Properties – CurveModifiers
L’ultima Classe di cui parleremo sarà la CurveModifiers, essa permette di fare delle animazioni che seguono un determinato percorso.
Per fare queste animazioni che seguono i tracciati, basta importare il package CurveModifiers e inizializzare il modificatore. Dopodiché basterà utilizzare la proprietà _bezier all'interno dell'interpolazione istanziata tramite Tweener. La proprietà richiede come valore un array di punti che costituiranno il nostro percorso.

Ma vediamo come procedere facendo un esempio, creiamo un nuovo fla e salviamolo con il seguente nome example14_CurveModifiers.fla, quindi scriviamo il seguente codice:

import caurina.transitions.*;
import caurina.transitions.properties.CurveModifiers;
import flash.display.*;
import flash.events.MouseEvent;
CurveModifiers.init();

var pointArr:Array = [];  
var circle:MovieClip = new MovieClip() 
circle.graphics.beginFill(0xFF00FF, 1); 
circle.graphics.drawCircle(0, 0, 30); 
circle.graphics.endFill(); 
addChild(circle);  

circle.addEventListener(MouseEvent.CLICK, onClickListener);  

function onClickListener(e:MouseEvent):void {         
       pointArr.push({x:78, y:141}); 	
       pointArr.push({x:145, y:208}); 	
       pointArr.push({x:273, y:232}); 	
       pointArr.push({x:392, y:211}); 	
       pointArr.push({x:470, y:141});          

       Tweener.addTween(circle, {x: 470, y:141, time:1, transition:"easeInOutCubic", _bezier: pointArr}); 	
	
}

Come possiamo vedere alla seconda riga abbiamo fatto l’import di CurveModifiers e dopodiché lo abbiamo inizializzato con il metodo init(), quindi ci siamo creato un array vuoto dove andremo a memorizzare i punto lungo dove il nostro cerchio si deve muovere. Quindi nel Tweener utilizzeremo il parametro _bezier passandogli la variabile pointArr.

A questo punto il tutorial è concluso, alla prossima!

Risorse:

Le caurina transitions files

Vota

Comments