Classe Tween

- Letture: 2.998

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

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

11 Commenti

  1. Pingback: Menu 3D rotatorio « »JuliusDesign«

  2. Salve,

    su tutti i siti, i forum, le guide, ecc… è descritto come impostare una tween verticale o orizzontale, ma se devo farla diagonale???

    Saluti

  3. deja_rulez

    “su tutti i siti, i forum, le guide, ecc… è descritto come impostare una tween verticale o orizzontale, ma se devo farla diagonale??? ”

    basta impostare due tween con stessa velocità e stesso easing, uno per il movimento in “x” e uno per il movimento in “y”. L’oggetto in questo modo si muove in diagonale (ovviamente ammesso che le coordinate siano differenti per tutti e due gli assi)

    ciiaps

  4. ciao Julius

    ho cercato parecchio in rete, probabilmente con i presupposti sbagliati: esiste una classe per realizzare bottoni testuali che al passaggio del mouse si ingrandiscono con effetto elastico? Forse è simile al tuo bel tutorial TweenClass?

    Ho trovato il classico tutorial “Sutton_ElasticButton.fla” che immagino conosca bene, ma il sito che sto realizzando è per flash 8 e natuaralmente, il tutorial in questione non funzia con tale player, blear snort :((

    Grazie grande Jiulius, di tutto :))

    ciao

  5. StuCkCaRBoy

    E’ tutto chiaro… ma se dovessi applicare questo movimento a un _mc già esistente che già occupa una sua posizione nello stage, come faccio a dare le coordinate all’interno del codice, per farlo partire da dove è adesso e farlo arrivare a dove mi serve? Facendolo arrestare lì, con lo yoyo(); ?

    Grazie tante !!!!

  6. mi servirebbe lo stop in modo morbido e non ti “botto” come faccio?
    ecco l’esempio

    import mx.transitions.Tween;
    var myTween:Tween = new Tween(clip, “_x”, mx.transitions.easing.None.easeNone, clip._width, Stage.width, 8, true);

    myTween.onMotionFinished = function() {
    myTween.start();
    };

    a.onRollOver = function() {
    myTween. stop(clip._x);
    };

    a.onRollOut = function() {
    myTween.resume();
    };

  7. Ciao Julius,
    ti scrivo per capire come implementare questa funzione su un drag and drop. ecco il codice:

    mc.onPress = function(){
    startDrag(this, false, 0,-840, 0, 0)
    }

    mc.onRelease = mc.onReleaseOutside = function(){
    this.stopDrag()
    }

    dove mc è ovviamente il mio clip filmato che si muove sull’asse y.
    vorrei aggiungerci l’effetto molla…idee?

  8. Ciao Julius, grazie per il tutorial!
    vorrei che il quadrato rosso non partisse da coordinate 0 (supponendo un documento di 500x500px, vorrei che il quadrato fosse a 200 px sull’asse delle x e 400px sull’assse delle y).
    Mi puoi aiutare?
    graize mille, bea.

  9. grazie della risposta marchino!!!!
    mi puoi specificare il codice da sostituire, sto andando a tentativi ma non mi viene.

Commenti