Classe Tween

Spesso ho avuto l’esigenza di utilizzare la classe Tween che permette di muovere oggetti ad “effetto molla“.

In programmazione è possibile ricreare la maggior parte di ciò che realizziamo “in progettazione” creando le interpolazioni, disegnando forme, creando clip, ecc…

Con poche righe di codice vedremo come sia semplice creare un’animazione comprensiva di “EaseIn” o “EaseOut” - i due parametri che permettono di aumentare o diminuire la velocità d’esecuzione di un’animazione all’inizio o alla fine di essa stessa.

Nel primo fotogramma:

import mx.transitions.Tween;
import mx.transitions.easing.*;

In questo modo importano direttamente nel progetto la classe Tween (riga 00), nonchè tutte le classi del pacchetto “easing” (riga 01 - easing.*;).

Creiamo ora una forma da muovere tramite codice:

this.createEmptyMovieClip("quadro_mc", 1);

In seguito attraverso l’uso delle Drawing API, disegniamo il nostro quadrato:

with(quadro_mc){
beginFill(0xFF0000, 100);
moveTo(0, 0);
lineTo(100, 0);
lineTo(100, 100);
lineTo(0, 100);
lineTo(0, 0);
endFill();
}

Con questo cliclo “with” abbiamo disegnato un quadrato rosso di 100 pixel di lato.
Avendo importato le classi direttamente nel docuemtno, non dobbiamo far altro che creare un’istanza della classe Tween che sfrutterà una del pacchetto “easing” per gestire il movimento.

var controllo:Object=new Object();
controllo=new Tween(quadro_mc, "_x", Elastic.easeOut, 200, 50, 10, true);

Sopra abbiamo creato un oggetto per il Tween, questa permetterà di muovere sull’asse delle x il quadrato, sfruttando il moviemnto “elastico” con “easeOut” (di rallentamento in fase conclusiva dell’animazione), partendo da 200px fino a 50px (sempre sull’asse delle x, ovviamente), in 10 secondi.

Il valore booleano finale si riferisce all’interpretazione in secondi del valore precedente (10).
In caso di false di questo parametro, 10 sarebbero stati invece il numero dei fotogrammi.
Se proviamo il tutto possiamo già vedere la nostra animazione.
Tuttavia se aggiungiamo quanto segue, possiamo fare in modo che l’animazione sia ciclica, sfruttando un simpatico metodo della classe Tween, lo “yoyo();“, un metodo che fa riparitre la nostra animazione ciclicamente!

Aggiungiamo nel punto in cui siamo rimasti il seguente codice:

controllo.onMotionFinished=function(){
controllo.yoyo();
}

Il metodo viene richiamato “onMotionFinished“, ovvero a fine animazione esegui un azione, in questo caso lo yoyo

Scarica il sorgente
Guarda il Tutorial

ABC, Design, Flash, Tutorial