AS2 Class.ScaleSquare HowTo
Esempio di applicazione della classe ScaleSquare
Inserito il 22-06-2006
La classe ScaleSquare genera un effetto che scopre l'immagine pezzo per pezzo, attraverso una serie di quadrati posti sopra l'immagine stessa, in maniera casuale o ordinatamente a partire dall'alto a sinistra, come potete vedere nell'esempio di applicazione.
Potete scaricare la classe direttamente da questo link
Per utilizzare la classe, per prima cosa, salvate il file ScaleSquare.as e inseritelo nella stessa cartella del .fla in cui volete applicare la classe. Ora aprite il file .fla, decidete a quale movieclip applicare l'effetto e inserite il seguente codice
import mx.transitions.easing.*; var scale:Object = new ScaleSquare(mioClip, 5, 5, mioClip._width, mioClip._height, true, Back.easeOut, 1);
Ecco qui, nulla di più semplice... ora scomponiamo lo script per comprendere l'applicazione della classe e i parametri da utilizzare
import mx.transitions.easing.*
questo è il comando che importa le easing functions, classi già pronte che gestiscono le proprietà dei MovieClip, nel tempo, con azioni fisicamente corrette, quindi grazie a queste potremo applicare alla nostra classe dei movimenti rallentati, accelerati, elastici a seconda della necessità, solo dichiarandone il tipo al richiamo della classe (nella seconda riga). La easing-function sono 5+1, ora ne faccio un elenco con la spiegazione del "+1".
Le easing sono:
- Regular - Produce un effetto di accelerazione o decelerazione regolare;
- Bounce - Produce un effetto "gravitazionale";
- Elastic - Produce un effetto elastico;
- Strong - Produce un effetto di accelerazione o decelerazione "veloce";
- Back - Produce un effetto elastico "assorbito".
E possono essere utilizzate con tre tipi di movimento
- EaseIn - Accelerazione;
- EaseOut - Decelerazione;
- EaseInOut - movimento con accelerazione iniziale e decelerazione finale.
Oltre a queste, è prevista un'ulteriore classe che non utilizza nessuno dei tre tipi di movimenti elencati ma ne ha uno dedicato, None.easeNone, credo sia facile capire in che modo agisce questa easing, semplicemente non ha movimenti particolari, è quello che viene chiamato in fisica "moto rettilineo uniforme".
Bene, dopo questa piccola digressione sulle easing, torniamo alla nostra classe e al suo utilizzo...
var scale:Object = new ScaleSquare(mioClip, 5, 5, mioClip._width, mioClip._height, true, Back.easeOut);
Creiamo un nuovo oggetto ScaleSquare e passiamogli i parametri richiesti, questi sono, in ordine:
- target:MovieClip - il clip a cui applicare la transizione;
- xSections:Number - il numero di rettangoli che copriranno orizzontalmente il clip;
- ySections:Number - il numero di rettangoli che copriranno veticalmente il clip;
- width:Number - l'estensione orizzontale della maschera;
- height:Number - l'estensione verticale della maschera;
- random:Boolean - è true o false ed inidica se l'animazione deve seguire un percorso lineare o casuale;
- ease:Function - è la prima cosa che abbiamo visto, scegliamo quale applicare e con quale movimento e la scriviamo pari pari come parametro.
- duration:Number - sarebbe la durata in secondi del movimento, è un parametro opzionale e ne sconsiglio l'utilizzo in caso che le sezioni siano più di 5x5.
Aggiungo inoltre la presenza di un evento che gestisce la possibilità di effettuare altre azioni a conclusione della transizione, onMotioniFinished(), il cui utilizzo è il seguente:
//proseguendo il codice visto in precedenza scale.onMotionFinished = function(){ // azioni da effettuarsi a conclusione dell'animazione }
Mi pare tutto, spero che l'effetto sia gradito.
