MoebiusMania

Librerie come jQuery e Mootools hanno permesso di realizzare animazioni Javascript con molta semplicità... e dalla parte di Flash? Molti tendono ad approcciare le animazioni esclusivamente da linea temporale, non che sia sbagliato, ma per piccole animazioni da interfaccia utente che devono ripetersi spesso non sempre è la soluzione ideale! Certo le funzioni di animazione da codice di ActionScript 3 sono un pò incasinate, motivo per il quale sono sbucate varie librerie, come TweenLite che vedremo oggi, per semplificare questo lavoro dentro Flash!

Software richiesto:

Flash Professional dalla versione CS3 in su.

Prerequisiti:

Conoscenza di base di Flash, rudimenti di ActionScript 3 (qualcosina lo trovate su Labs)

Argomenti trattati:

Librerie esterne, animazioni da codice AS3

1. Scarichiamo e installiamo

Per primissima cosa andiamo sul sito dell'autore: Greensock. Già nella home del suo sito c'è un breve video di dimostrazione di alcuni effetti ottenibili con le sue librerie (sì, TweenLite è solo una delle tante!) dalla barra di sinistra clicchiamo su TweenLite e poi sul pulsante "download AS3", dopo aver accettato le condizioni verrà scaricato il file zip sul nostro computer . Questa libreria esiste anche nel linguaggio AS2 nel caso foste costretti a doverlo usare, ma idealmente vorremmo sempre lavorare con l'ultima versione. Creiamo una nuova cartella per seguire il tutorial e dal file .zip che abbiamo scaricato estraiamo tutti i file, copieremo la sottocartella "com" presente nell'archivio di TweenLite nella nostra cartella di lavoro. Come ultima cosa apriamo Flash e creiamo un nuovo file ActionScript 3 che ovviamente salveremo subito nella cartella appena trattata. Dall'archivio di TweenLite abbiamo copiato solo la cartella "com" perché è quella che realmente contiene la libreria di codice, le altre cartelle sono esempi, licenze e alcuni file .swf di referenza, di cui parliamo dopo! E' importante che copiate interamente la cartella "com" senza spostare o rinominare niente al suo interno!

2. In movimento

Ora dentro Flash create un simbolo di tipo clip filmato e lasciate un'istanza sullo stage dandogli un nome, ricordatevi che quando si lavora con ActionScript è fondamentale dare un nome alle istanze dei simboli sullo stage, creiamo un nuovo livello che chiameremo "azioni" e blocchiamo subito, con questo livello ancora selezionato andiamo ad aprire il pannello delle azioni e iniziamo a scrivere codice: Per prima cosa dobbiamo importare dentro Flash la libreria TweenLite:

import com.greensock.TweenLite;

Ogni qual volta si lavorare con una libreria esterna dobbiamo sempre importarla nel nostro progetto tramite questo comando per usarla! Ora possiamo utilizzare le nuove funzioni di animazione, ipotizzando che la vostra istanza sulle stage si chiami "oggetto" ecco la sintassi per animarla:

TweenLite.to(oggetto,1,{x:300});

Dove: TweenLite ovviamente è il nome del comando, .to per dire che vogliamo eseguire un'interpolazione verso le proprietà che stiamo per indicare (l'unica alternativa è .from che funziona al contrario, si parte dalle proprietà indicate), 1 è la durata in secondi dell'interpolazione (mezzo secondo si esprime con 0.5), infine dentro una parentesi graffa indichiamo una o più proprietà con i relativi valori (se sono più di una le separiamo con la virgola). Traducendo: questa riga sposta l'oggetto verso destra in un secondo partendo dal punto in cui si trova, fate Ctrl + Invio (Cmd + Invio su Mac) e testate!

3. Molle e rimbalzi

Fin qui è abbastanza chiaro che possiamo interpolare tutte le proprietà principali dei simboli quali: x, y, scaleX, scaleY, alpha, rotationX e rotationY. Se esportate per Flash Player 10 (o superiori) che introduce la profondità potete interpolare anche le proprietà z, rotationZ, ecc. TweenLite però non si ferma qui! Finora abbiamo lavorato con animazioni lineari, ovvero dove le proprietà vengono alterate in modo direttamente proporzionale al tempo che è trascorso, ma possiamo rendere il tutto un po più divertente introducendo vari andamenti, che sono già presenti nella libreria. Prima di tutto importiamo una o più classi sugli andamenti, per ora a scopo di esempio importiamo quelli di "Bounce" che ci permette di ottenere animazioni che simulano rimbalzi:

import com.greensock.easing.Bounce;

Inseriamo questa riga sotto la precedente importazione, ora ci basta fare una lieve modifica al comando di animazione scritto poco fa:

TweenLite.to(oggetto,1,{x:300,ease:Bounce.easeOut});

Aggiungiamo la proprietà ease che ci permette di definire un andamento (in inglese si chiamano easing), Bounce è il nome specifico dell'andamento che voglio usare, .easeOut indica di applicare l'andamento sul finale dell'animazione, le varianti sono .easeIn e .easeInOut che applicano l'andamento rispettivamente all'inizio e sia all'inizio che alla fine. Per conoscere tutti gli easing presenti in TweenLite guardate la pagina di presentazione sul sito o il file basics.swf incluso nel pacchetto che avete scaricato sotto "demos"!

4. Tempistiche ed eventi

Ovviamente le righe di codice che abbiamo scritto finora possono stare all'interno di funzioni richiamate da eventi, quindi un'animazione da codice può essere lanciata in qualunque momento. Ma se non vogliamo farla partire subito? Chi è abbastanza esperto di ActionScript sa che abbiamo a disposizione le funzioni di Timer per gestire le tempistiche, ma in questo caso grazie a TweenLite troviamo una proprietà di nome "delay" (ritardo) che ci permette di indicare in millisecondi il ritardo con il quale deve partire l'animazione:

TweenLite.to(oggetto,1,{delay:1000, x:300,ease:Bounce.easeOut});

Ho tenuto l'animazione di prima per far capire dove va indicata questa proprietà, così facendo l'animazione partirà dopo un secondo esatto. E se invece vogliamo far succedere qualcosa alla fine dell'animazione? o durante? o appena all'inizio? Grazie a questa fantastica libreria abbiamo a disposizione alcuni nuovi eventi che ci permettono di chiamare varie funzioni in diversi momenti dell'animazione, vediamo per esempio come fare a lanciare una funzione proprio alla fine di un tween da codice:

TweenLite.to(oggetto,1,{delay:1000, x:300, ease:Bounce.easeOut, onComplete:avviaFunzione});

dove "avviaFunzione" è un funzione già creata o da creare che faccia qualcosa. Alcune alternative a "onComplete" sono: "onStart" per chiamare una funzione appena dopo che inizia l'animazione e "onUpdate" per chiamarla ogni volta che l'animazione si aggiorna.

5. Per chiudere

Come titola il post questa è solo la punta dell'iceberg di questa libreria, con un pò di pratica ci si può rendere conto di quanto sia pratica per la realizzazione di animazioni di interfaccia utente, brevi intro o intermezzi animati e per ogni qual volta si vuole dare quel tocco di "cool" alle proprie applicazioni o siti creati in Flash. Se preferite sviluppare in Flash Builder potete tranquillamente importare TweenLite nei vostri progetti allo stesso modo, ma ricordatevi che il framework Flex (già incluso nel IDE). Potete liberamente scaricare un pacchetto zip con i sorgenti degli esempi di questo tutorial [download id="10" format="1"] (è necessario almeno Flash CS4!).