Utilizzo della classe Tweener
Alternativa alla classe Tween
Inserito il 23-05-2010
Alcuni anni fa riportai un post di Nep036, che trattava l'uso della classe Tween e delle transizioni con Flash e Actionscript.
Ebbene per diverso tempo ho utilizzato tale classe per sviluppare siti e applicazioni cercando di aggirare alcuni problemi di gestione della classe stessa con il flash player.
Già all'epoca giravano per la rete alcune librerie complete che sostituivano la Tween, con prestazioni e semplicità di utilizzo incomparabili con la stessa.
Una libreria in particolare, rispetto alle altre, aveva attrato la mia attenzione per facilità e molteplicità di utilizzo, la libreria "caurina.transitions".
La libreria "caurina.transitions" contiene all'interno una serie di classi tra le quali spicca quella da utilizzare per generare le transizioni, la classe Tweener.
La libreria è gratuitamente scaricabile dal link http://code.google.com/p/tweener/ in versione AS2 o AS3 a seconda della versione che si vuole usare. Per utilizzarla è necessario copiare la cartella "caurina" nella stessa posizione del FLA dove si intende sfruttarla.
Lungi da questo articolo stare a spiegare tutte le possibilità di utilizzo della classe e dei molteplici metodi, basti sapere che attraverso il metodo statico addTween della classe Tweener è possibile creare un nuovo movimento e comandarlo a piacere definendo azioni e funzioni che verranno eseguite dall'avvio della transizione fino al suo termine.
Analizzeremo un breve script per il cambio dell'alpha unito allo spostamento di un clip nella posizione cliccata con il mouse sullo stage.
Lo script è per AS3, ma praticamente la scrittura del codice è identica anche in AS2, cambia giusto qualche proprietà (alpha e non _alpha o x e y e non _x e _y) e l'aggiunta dell'evento allo stage.
// importo la classe Tweener nel filmato import caurina.transitions.Tweener; // aggiungo allo stage il click con la funzione di spostamento del clip stage.addEventListener(MouseEvent.CLICK, clickHandler); // scrivo la funzione di spostamento che ho chiamato nell'evento "clickHandler" function clickHandler (evt:MouseEvent):void { // richiamo il metodo statico "addTween" con i parametri che mi occorrono (sotto al codice la lista completa dei parametri utilizzabili) // la funzione addTween ha due parametri fissi, uno è il target, che può essere di tipo "object" o "array" // nel caso di un array, applica le transizioni ad ogni elemento contenuto nell'array // il secondo parametro è invece un object nel quale vanno scritte tutte le opzioni valide per gestire la transizione Tweener.addTween(palla, {alpha:Math.random(), x:mouseX, y:mouseY, time:1, transition:"linear"}); }
E' già probabilmente chiaro come attraverso una sola riga sia possibile creare una transizione che comprende più parametri e come all'interno dello stesso object che contiene i parametri vengano scritti sia quelli dell'oggetto da modificare che quelli di "funzionamento" della classe.
Di seguito la lista completa degli attributi da inserire nell'oggetto:
- time: tempo in secondi o in frame per effetturare la transizione.
- delay: ritardo nell'avvio della transizione (default 0).
- useFrames: parametro booleano true/false per decidere se usare i frame o i secondi nel calcolo del tempo di transizione (default false).
- transition: stringa che specifica il tipo di transizione da effettuare (default "easeoutexpo").
- onStart: funzione da eseguire quando inizia la transizione.
- onUpdate: funzione da eseguire ad ogni aggiornamento di stato della transizione.
- onComplete: funzione da eseguire quando termina la transizione.
- onOverwrite: funzione da eseguire se la transizione viene sovrascritta.
- onStartParams: qualora la funzione rappresentata dall'evento onStart avesse dei parametri, vanno impostati qui sotto forma di Array.
- onUpdateParams: qualora la funzione rappresentata dall'evento onUpdate avesse dei parametri, vanno impostati qui sotto forma di Array.
- onCompleteParams: qualora la funzione rappresentata dall'evento onComplete avesse dei parametri, vanno impostati qui sotto forma di Array.
- onOverwriteParams: qualora la funzione rappresentata dall'evento onOverwrite avesse dei parametri, vanno impostati qui sotto forma di Array.
- rounded: parametro booleano true/false per decidere se i valori di aggiornamento vanno arrotondati.
- skipUpdates: valore numerico che determina quanti passaggi di aggiornamento della transizione saltare per velocizzarla (default 0, 1 equivale a saltarne uno ogni due (update-skip-update-skip...)).
I tipi di transizione coincidono pressappoco con le easing proposte dalla libreria di Flash, ne riporto una lista veloce senza stare a spiegarla, vista l'univocità dei nomi:
"easenone" "linear" // mx.transitions.easing.None.easeNone "easeinquad" // mx.transitions.easing.Regular.easeIn "easeoutquad" // mx.transitions.easing.Regular.easeOut "easeinoutquad" // mx.transitions.easing.Regular.easeInOut "easeoutinquad" "easeincubic" "easeoutcubic" "easeinoutcubic" "easeoutincubic" "easeinquart" "easeoutquart" "easeinoutquart" "easeoutinquart" "easeinquint" "easeoutquint" "easeinoutquint" "easeoutinquint" "easeinsine" "easeoutsine" "easeinoutsine" "easeoutinsine" "easeincirc" "easeoutcirc" "easeinoutcirc" "easeoutincirc" "easeinexpo" // mx.transitions.easing.Strong.easeIn "easeoutexpo" // mx.transitions.easing.Strong.easeOut "easeinoutexpo" // mx.transitions.easing.Strong.easeInOut "easeoutinexpo" "easeinelastic" // mx.transitions.easing.Elastic.easeIn "easeoutelastic" // mx.transitions.easing.Elastic.easeOut "easeinoutelastic" // mx.transitions.easing.Elastic.easeInOut "easeoutinelastic" "easeinback" // mx.transitions.easing.Back.easeIn "easeoutback" // mx.transitions.easing.Back.easeOut "easeinoutback" // mx.transitions.easing.Back.easeInOut "easeoutinback" "easeinbounce" // mx.transitions.easing.Bounce.easeIn "easeoutbounce" // mx.transitions.easing.Bounce.easeOut "easeinoutbounce" // mx.transitions.easing.Bounce.easeInOut "easeoutinbounce"
Per il momento è tutto, seguirà a breve un articolo con alcuni esempi scaricabili, tra i quali una galleria fotografica AS3+XML e un campo di testo con scorrimento "rallentato".
