Creare Transizioni di immagini in ActionScript

Oggi vedremo come sia semplice creare transizioni di immagini utilizzando ActionScript 2 e ActionScript3 in Adobe Flash

Sicuramente avrete visto sul web transizioni di immagini composte da effetti a comparsa,  dissolvenza, a quadratini, a fascie, zoom e altre

Per iniziare creiamo un oggetto vettoriale sullo stage, e trasformiamolo un clip filmato [Tasto rapido F8] e diamogli nome istanza square

Ecco la sintassi base da utilizzare per creare una transizione di immagini

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);

Il pacchetto mx.transitions contiene classi che consentono di utilizzare ActionScript per creare effetti di animazione.

• 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.

Le stesse classi Transition possono essere anche utilizzate con ActionScript 3, ecco un esempio:

import fl.transitions.*;
import fl.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeOut, startPoint:5, shape:Iris.CIRCLE});

Tween e TransitionManager sono le classi principali per la personalizzazione delle animazioni in ActionScript 3.0

• Blinds: La classe Blinds mostra l’oggetto clip filmato mediante rettangoli che scompaiono o compaiono.
• Fade: La classe Fade applica all’oggetto clip filmato una dissolvenza in entrata o in uscita.
• Fly: La classe Fly fa comparire l’oggetto clip filmato facendolo scorrere da una direzione particolare.
• Iris: La classe Iris rivela l’oggetto clip filmato utilizzando una maschera animata di forma quadrata o circolare che si ingrandisce o si riduce.
• Photo: Fa comparire o scomparire l’oggetto clip filmato con un effetto simile al flash fotografico.
• PixelDissolve: La classe PixelDissolve mostra l’oggetto clip filmato utilizzando dei rettangoli che scompaiono e compaiono in modo casuale ma secondo uno schema a scacchiera.
• Rotate: La classe Rotate ruota l’oggetto clip filmato.
• Squeeze: La classe Squeeze modifica in scala l’oggetto clip filmato in orizzontale o in verticale.
• Transition: La classe Transition è la classe di base per tutte le classi di transizione.
• TransitionManager:    La classe TransitionManager definisce effetti di animazione.
• Tween: La classe Tween consente di spostare, ridimensionare e applicare dissolvenze ai clip filmato mediante ActionScript, specificando una proprietà del clip filmato target da animare per un numero stabilito di fotogrammi o secondi.
• TweenEvent: La classe TweenEvent rappresenta gli eventi che vengono trasmessi dalla classe fl.transitions.Tween.
• Wipe: La classe Wipe mostra o nasconde l’oggetto clip filmato utilizzando la maschera animata di una forma che si sposta in senso orizzontale.
• Zoom: La classe Zoom ingrandisce o riduce l’oggetto clip filmato modificandone in scala le proporzioni.

Per approfondire l’argomento e vedere quello che si può ottenere con la classe transition, vi consiglio di leggere l’articolo di and80 e il progetto scritto da Rempox

Scarica i Sorgente
Guarda il Tutorial