Creare Transizioni di immagini in ActionScript

- Letture: 5.871

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

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

16 Commenti

  1. Fabrizio

    E’ molto semplice utilizzare as per queste tipo di transizioni

    Per as3 cambia un pochetto il codice se ho capito bene

    Ora provo…

  2. non riesco a usare le classi, potresti fare un file esempio?

    grazie sempre julius!

  3. Deja_rulez

    io di solito usavo un componente MCTE per fare queste transizioni….. ottimo veramente!

    risparmia iil tempo di disegnare molte maschere e di animarle.

    una domanda funziona anche al contrario? ovvero si può nascondere un oggetto con la stessa classe?

  4. Ciao Julius,

    è molto utile questo post.

    Come faccio se voelssi applicare queste transizioni ad un loop di immagini.

    Lavoro in AS3. Ho copiato il codice, e sostituito il nome dell’immagini, però la transizione vfunziona solo sulla prima immagine mentre poi mi dà questo messaggio di errore:


    TypeError: Error #1009: Impossibile accedere a una proprietà o a un metodo di un riferimento oggetto null.
    at fl.transitions::TransitionManager$/start()
    at main_fla::MainTimeline/main_fla::frame1()

    che ne pensi?

  5. ciao julius prima di tutto ti faccio i miei complimenti … sei davvero in gamba! In secondo luogo volevo sapere anche io come feliz come fare ad applicare questi effetti ad un loop di immagini … Insomma come poter concatenare gli effetti con una sequenza di immagini …

  6. delavega84

    Patty ha scritto:

    ciao julius prima di tutto ti faccio i miei complimenti … sei davvero in gamba! In secondo luogo volevo sapere anche io come feliz come fare ad applicare questi effetti ad un loop di immagini … Insomma come poter concatenare gli effetti con una sequenza di immagini …

    ciao julius,
    Ank’io ho questo problema… cioè in pratica una volta applicato l’effetto al clip, nn è + possibile inserire altri fotogrammi, altri clip, scene, ecc…
    come mai?

  7. Per Patty e delavega84,
    anch’io avevo lo stesso problema poi ho trovato la risposta nella guida di Flash. Da spiegare è un po’ lungo cercate:
    Informazioni sulla continuazione delle animazioni mediante il metodo continueTo()

  8. complimenti, era proprio quello che cercavo. dovrei creare una gallery di immagini dando un effetto lampo, quindi dovrei utilizzare un effetto fade o c’è qualcos’altro? come posso applicare ad una serie di immagini?dovrei attaccarle allo stave in runtime? grazi

  9. Ciao Julius,
    era da un po’ che cercavo degli effetti così..
    attualmente ho la necessità di animare una serie di immagini con un formato 1360×718 e ho grandi difficoltà a trasformarle in oggetto vettoriale. si può ovviare in qualche altro modo? ho provato inserendo direttamente l’immagine nel clip filmato, ma da un errore..

  10. @Lucia: Ciao se non ricordo male devi inserire l’immagine dentro il clip filmato e associare l’effetto al nome istanza filmato.

  11. com) please review this web page – About the Author:
    . Even though you might be the seller of the goods, and shipping them to the customer, the customer mindshare is Amazons.

    One of the top wedding photographers in London, they provide photography
    solutions and services for all weddings or marriage ceremonies be it
    a Hindu wedding or a Sikh wedding, a Christian wedding or the wedding of a Muslim.

Commenti