Le Classi Transitions
Miniguida alle animazioni preimpostate di Flash
Inserito il 18-05-2006
Qualche giorno fà mentre "spulciavo" le easing functions di Flash MX 2004 mi sono imbattuto in una serie di classi che creano degli effetti di maschera e movimenti applicabili alla classi MovieClip. Questi effetti sono gli stessi che si possono applicare attraverso apposito pannello di controllo, quando si crea un nuovo documento "Presentazione diapositive Flash".
In pratica gli effetti sono simili a quelli proposti da PowerPoint, solo un minimo più accattivanti, grazie all'utilizzo delle easing functions che sono il vero motore del "movimento".
Per saperne di più ho fatto una piccola ricerca su internet e ho trovato questo interessante articolo in inglese --> Using the Tween and Transition Classes in Flash MX 2004.
Così ho applicato le classi in un esempio e trovato le proprietà di ognuna.
E' facile capire che, grazie ad una serie di parametri opzionali e a tutte le easing functions, le applicazioni possibili sono veramente parecchie, in un limite solo di fantasia, a voi scoprirne il miglior utilizzo in un'applicazione reale. A seguire il codice commentato, completo di tutte le informazioni necessarie per applicare questi simpatici effetti.
// creo al centro dello stage un quadrato, lo trasformo in clip e gli dò nome istanza "square", poi scrivo il codice sul frame della timeline principale // importo le classi che mi interessano import mx.transitions.*; import mx.transitions.easing.*; // creo un oggetto che conterrà al suo interno le caratteristiche della transizione, riportate di seguito var obj:Object = new Object(); // // type: tipo di transizione (Iris, Wipe, PixelDissolve, Blinds, Fade, Fly, Zoom, Squeeze, Rotate, Photo) /* Iris: Rivela la schermata attraverso la maschera animata di una forma con movimento a zoomare. Wipe: Rivela la schermata attraverso la maschera animata di una forma con movimento orizzontale. PixelDissolve: Rivela lo schermo attraverso l'apparizione/sparizione di una serie di rettangoli posti a reticolo sull'immagine. Blinds: Rivela la schermata usando una mascherina animata da rettangoli che si comprimono. Fade: Produce un semplice fade-in/fade-out. Fly: Muove la schermata da/verso un particolare punto. Zoom: Ingrandisce/rimpicciolisce la schermata. Squeeze: Scala la schermata corrente orizzontalmente o verticalmente. Rotate: Ruota la schermata secondo un determinato angolo. Photo: Fa comparire la schermata come un flash fotografico. */ obj.type = Iris; // // direction: valore booleano che decide la "direzione" dell'animazione (true:fadeOut/false:fadeIn) obj.direction = false; // // duration: durata in secondi dell'animazione obj.duration = 5; // // easing: tipo di Tween (Back, Bounce, Elastic, None, Regular, Strong) e andamento (easeIn, easeOut, easeInOut, [easeNone solo per None]) obj.easing = Bounce.easeOut; // // parametri opzionali, vedere l'elenco sotto obj.startPoint = 5; obj.shape = "CIRCLE"; // // uso la classe TransitionManager e il metodo start per attivare la transizione // start prende due parametri, il target (il MovieClip a cui applicare la transizione) // e l'Object che contiene le specifiche del movimento, che abbiamo già visto sopra TransitionManager.start(square, obj); //---------------------------------------------------------------// // // Elenco parametri per i tipi di transizioni disponibili: // /* Iris --> startPoint, shape - startPoint: punto di ancoraggio della maschera al clip Target (1:top left, 2:top center, 3:top right, 4:left, 5:center, 6:right, 7:bottom left, 8:bottom center, 9:bottom right) - shape: tipo di maschera ("SQUARE", "CIRCLE");*/ // /* Wipe --> startPoint: punto di ancoraggio della maschera al clip Target (1:top left, 2:top center, 3:top right, 4:left, 5:center, 6:right, 7:bottom left, 8:bottom center, 9:bottom right) */ // /* PixelDissolve --> xSections, ySections - xSections: numero di quadrati della maschera in orizzontale - ySections: numero di quadrati della maschera in verticale */ // /* Blinds --> dimension, numStrips - dimension: valore Booleano [true:verticale, false: orizzontale] - numStrips: numero di striscie della maschera */ // //* Fade --> nessun parametro // /* Fly --> startPoint: punto di partenza/arrivo del "volo" del clip Target (1:top left, 2:top center, 3:top right, 4:left, 5:center, 6:right, 7:bottom left, 8:bottom center, 9:bottom right) */ // //* Zoom --> nessun parametro // /* Squeeze --> dimension: valore Booleano [true:verticale, false: orizzontale] */ // /* Rotate --> degrees: gradi centigradi di rotazione in partenza/arrivo [Attenzione, come "direction" viene accettato solo false] */ // //* Photo --> nessun parametro
Il codice "pulito" dai commenti è riproponibile in quattro semplici righe.
import mx.transitions.*;
import mx.transitions.easing.*;
var obj:Object = new Object({type:Iris, direction:false, duration:5, easing:Bounce.easeOut, startPoint:5, shape: "CIRCLE"});
TransitionManager.start(square, obj);Ecco un ottimo esempio di quello che si può ottenere con le transitions, realizzato da Rempox, amico di forum e grande flasher --> mx_transitions.
