Grafico6

In questo articolo spiegerò come realizzare una interpolazione in as3 attraverso la classe  Tween. Quest’ultima consente di spostare, ridimensionare e applicare

dissolvenze ai clip filmato mediante ActionScript, specificando una proprietà del clip filmato target da animare per un numero stabilito di fotogrammi o secondi.

Il codice per fare l’animazione è il seguente:

import fl.transitions.Tween;
import fl.transitions.easing.*;
var myTween:Tween = new Tween(myClip, "x", Regular.easeOut, 0, 300, 3, true);

Questo codice crea uno spostamento sull’asse delle x da 0 a 300px con una durata di 3 secondi.

Passiamo alla spiegazione del codice, per semplicità schematizziamo la classe in questo modo

var myTween:Tween = new Tween(movieClip, "proprieta", tipoMovimento, inizio, fine, durata, usareSecondi);

dove

• movieClip - E’ il nome di istanza del movieClip che deve avere l’interpolazione
• proprieta - E’ il nome della proprieta dell’animazione, questa deve essere scritta tra virgolette
• tipoMovimento - Il tipo di andamento determinerà come l’animazione fluirà. Le tipologie sono;
  1. Regular: la velocità di movimento gradualmente aumentare o diminuire la velocità come specificato dal metodo di andamento.
  2. Bounce: il movimento si riprenderà a pochi passi quando raggiunge la posizione finale prima di stabilirsi a questo.
  3. Back: il movimento andrà oltre la posizione finale prima di rimbalzare in esso.
  4. Elastic: un mix di effetti di Bounce e Back insieme.
  5. Strong: un effetto più accentuato regolare.
  6. None: nessun allentamento, il movimento non si accelera.

a questi movimenti vanno associate altre caratteristiche come;

1. easeIn: l’effetto interpolazione viene applicato all’inizio dell’animazione.
2. easeOut: l’effetto interpolazione viene applicata all’estremità dell’animazione.
3. easeInOut: l’effetto interpolazione viene applicato all’inizio e alla fine dell’animazione.
4. easeNone: nessun effetto di interpolazione viene applicato, per essere utilizzato con la funzione di interpolazione None.
• inizio – E’ la posizione iniziale del movieClip, ed è espresso in numeri.
• fine – E’ la posizione finale del movieClip, ed è espresso in numeri.
• durata – Questo è il periodo in cui l’animazione verrà eseguita, l’unità di default è il framerate, però, l’unità può essere impostata in secondi se si imposta il parametro successivo true.
• usareSecondi - impostare questo parametro su true se si desidera la durata deve essere misurato in secondi invece dei fotogrammi.

La classe Tween ha diversi metodi che consentono di comandare azioni specifiche, quali fermare l’interpolazione in qualsiasi momento, farla partire di nuovo, o farla andare in senso inverso. Ognuno dei metodi indicati devono essere applicati direttamente su un’istanza della classe Tween.

I metodi sono:

• Tween.stop() – dice l’interpolazione di fermare nella sua posizione attuale.
• Tween.resume() – indica l’interpolazione per riprendere la riproduzione dalla posizione corrente, questo metodo viene utilizzato dopo aver richiamato il metodo stop().
• Tween.start (): indica l’interpolazione per avviare la riproduzione dal punto iniziale di partenza, questo non è lo stesso di resume(). Questo metodo in realtà riavvia l’interpolazione.
• Tween.continueTo (fine, durata): indica l’interpolazione di interrompere l’animazione corrente e continuare muovendosi in un nuovo punto dalla posizione corrente.
• Tween.fforward(): indica l’interpolazione di fermare l’oggetto animato alla posizione finale dell’animazione all’istante.
• Tween.rewind(): indica l’interpolazione di tornare indietro e fermarsi al punto di partenza.
• Tween.nextFrame(): indica l’interpolazione di andare al fotogramma successivo.
• Tween.preFrame(): indica l’interpolazione di tornare al fotogramma precedente.
• Tween.yoyo(): indica l’animazione di eseguire in senso inverso.

Un esempio di come possone essere usati questi metodi è il seguente:

import fl.transitions.Tween;
import fl.transitions.easing.*;
var myTween:Tween = new Tween(myClip, "x", Regular.easeOut, 0, 300, 3, true);
myTween.stop();
//
my_but.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent){
myTween.start();
}

La classe Tween ha diversi eventi per monitorare che cosa sta accadendo, come il completamento di movimento. Questa funzione è utile quando si desidera, ad
esempio, eseguire una azione al termine dell’interpolazione.

Gli eventi sono:

• TweenEvent.MOTION_FINISH – Questo evento viene attivato quando il movimento finisce.
• TweenEvent.MOTION_STOP – Questo evento viene attivato quando il movimento viene fermato con il metodo stop().
• TweenEvent.MOTION_START – Questo evento viene attivato quando il movimento è iniziato a utilizzare il metodo start().
• TweenEvent.MOTION_RESUME – Questo evento viene attivato quando il movimento è ripreso dal metodo di resume().
• TweenEvent.MOTION_CHANGE – Questo evento viene continuamente attivato mentre il movimento è in esecuzione.
• TweenEvent.MOTION_LOOP – Questo evento dovrebbe essere attivato quando il movimento viene riavviato attraverso una ripetizione ciclica.

Un esempio di come possone essere usati questi eventi è il seguente:

import fl.transitions.Tween;
import fl.transitions.easing.*;
var myTween:Tween = new Tween(myClip, "x", Regular.easeOut, 0, 300, 3, true);
//
myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);
function onFinish(e:TweenEvent):void {
trace('fine animazione');
}