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

Articoli simili in , , , ,

Autore: Giuliano Ambrosio

Giuliano Ambrosio è un Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.