Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Creare riflessi in stile Web 2.0 con Flash e Actionscript

Realizzare riflessi 2.0 con Flash, sia manualmente che tramite Actionscript, creando un'apposita classe che potremo riutilizzare in tutti i progetti.
Realizzare riflessi 2.0 con Flash, sia manualmente che tramite Actionscript, creando un'apposita classe che potremo riutilizzare in tutti i progetti.
Link copiato negli appunti

Uno degli effetti grafici più diffusi nel design di siti web, attualmente, è quello di immagini e icone riflesse.

Figura 1. Un logo con un effetto di riflessione
Logo di esempio

Creare un effetto di riflessione "manualmente"

Per prima cosa importiamo un'immagine sullo stage, la selezioniamo, la copiamo e la incolliamo in modo da ottenere una copia dell'immagine principale. Ruotiamo la copia di 180 gradi e posizioniamola sotto la foto originale.

Figura 2. L'immagine copiata e posta sotto all'originale
Screenshot dello stage

Ora non ci resta che creare l'effetto di riflessione sull'immagine ruotata. Per prima cosa creiamo un nuovo livello sulla linea temporale, quindi disegniamoci sopra un rettangolo bianco che occupi indicativamente la stessa area dell'immagine riflessa.

Figura 3. Il rettangolo posizionato sopra all'immagine di copia
Immagine dello stage con il rettangolo selezionato

Dobbiamo fare in modo che sotto questo rettangolo appaia l'immagine riflessa, in maniera sfumata: utilizziamo quindi un riempimento di tipo gradiente. Selezioniamo il rettangolo, apriamo il pannello Colors ed impostiamo come tipo di riempimento un gradiente lineare. Settiamo quindi il colore iniziale come bianco con una trasparenza dello 0% e quello finale bianco con trasparenza 100%.

Se avessimo impostato un colore di sfondo per lo stage, invece di utilizzare il bianco scegliamo il colore corrispondente allo sfondo.

Figura 4. Il riempimento gradiente e i due colori usati
Pannello colori e dettaglio dei due colori usati

Di default il riempimento gradiente andrà da sinistra a destra.

Figura 5. Il gradiente inserito di default
Screenshot dello stage

Per ruotare il riempimento secondo le nostre esigenze selezioniamo lo strumento trasformazione gradiente, accessibile dalla barra degli strumenti (si trova nella stessa casella dello strumento trasformazione libera), oppure premiamo il tasto F. Con questo strumento possiamo variare la rotazione e l'ampiezza del riempimento gradiente, così da poter regolare la sfumatura: ruotiamo il riempimento fino ad ottenere un risultato di nostro gradimento.

Figura 6. Il gradiente ruotato nella direzione appropriata
Screenshot dello stage

Con pochi semplici passaggi abbiamo realizzato un effetto di riflessione per un'immagine, tuttavia questa soluzione è poco personalizzabile e soprattutto, se dovessimo applicare lo stesso effetto a più immagini, il procedimento andrebbe ripetuto ogni volta.

Creare un effetto di riflessione con Actionscript

Vediamo allora come far eseguire automaticamente al filmato il procedimento di copia, rotazione e posizionamento dell'immagine e la creazione della forma con riempimento gradiente, il tutto grazie ad Actionscript 3.

Creiamo un nuovo file Actionscript, all'interno del quale scriveremo la nostra classe. È necessario importare i package che utilizzeremo nel nostro codice.

In Actionscript dobbiamo avere dei movieclip come riferimento per poter effettuare delle operazioni di copia e di creazione, per cui andremo ad importare il package flash.display.MovieClip; per copiare l'immagine ci serviranno le classi BitmapData e Bitmap, quindi importeremo anche flash.display.BitmapData e flash.display.Bitmap; per creare il riempimento gradiente alla clip che crea l'effetto dovremo invece sfruttare i package flash.display.GradientType, flash.geom.Matrix e flash.display.SpreadMethod.

Quindi la prima parte di codice della nostra classe sarà la seguente:

Listato 1. Prima parte del codice

package{

  import flash.display.MovieClip;
  import flash.display.DisplayObject;
  import flash.display.BitmapData;
  import flash.display.Bitmap;
  import flash.display.GradientType;
  import flash.display.SpreadMethod;
  import flash.geom.Matrix;
  
  public class rifletti extends MovieClip{
  
  }
}

Utilizzeremo in totale 4 elementi: la clip originale, la clip duplicata, la copia dell'immagine contenuta nella clip originale ed infine la clip colorata con il riempimento gradiente. Possiamo quindi dichiarare inizialmente 4 variabili, inoltre impostiamo la funzione in modo che la clip da "riflettere" sia passata come parametro:

Listato 2. Dichiarazione delle variabili

public class rifletti extends MovieClip{

  private var sorgente:MovieClip
  private var duplicato:BitmapData
  private var riflesso:Bitmap
  private var maschera:DisplayObject
  
  public function rifletti(mc){
  
  }
}

Con questo codice abbiamo impostato le basi della nostra classe e possiamo ora concentrarci sul codice interno alla funzione rifletti, che rappresenterà la trasposizione in Actionscript 3 dei passaggi compiuti manualmente.

Procedendo con ordine, il primo passaggio è creare e disporre la copia della clip originale.

Listato 3. Crea e dispone la copia della clip

public function rifletti(mc){
  
  // Memorizzo il riferimento alla clip originale
  sorgente = mc
  
  // Ricavo altezza e larghezza della clip
  var altezza:Number = sorgente.height
  var larghezza:Number = sorgente.width
  trace(altezza,larghezza)
  
  // Preparo un oggetto bitmapData con la copia dell'immagine
  duplicato = new BitmapData(larghezza, altezza, true,0xFFFFFF);
  duplicato.draw(sorgente);
  
  // Creo la copia dell'immagine originale
  riflesso = new Bitmap(duplicato);
  
  // La inverto (corrisponde alla rotazione di 180 gradi)
  riflesso.scaleY = -1
  
  // e la posiziono al di sotto del movieclip originale
  riflesso.y = sorgente.height*2 + 10
  
  // Quindi la aggiungo all'interno della clip originale
  sorgente.addChild(riflesso)

I commenti al codice dovrebbero essere abbastanza esaustivi; teniamo presente che la copia dell'immagine verrà inserita dentro alla clip originale ruotata di 180 gradi, per questo è necessario moltiplicare per 2 l'altezza del clip sorgente per posizionare correttamente la copia.

Tramite l'oggetto BitmapData prepariamo i dati per la creazione della copia dell'immagine originale, copia che viene creata con l'oggetto riflesso che è poi di fatto quello che inseriamo nello stage.

Testiamo questa prima parte di codice: apriamo un nuovo progetto Actionscript 3, importiamo un'immagine e convertiamola in movieclip: diamo a questo movieclip nome istanza mc, quindi sul primo fotogramma della linea temporale inseriamo il seguente codice

import rifletti
var rifl:rifletti = new rifletti(mc)

Testando il filmato avremo questo risultato:

Figura 7. L'immagine copiata, ruotata e posizionata tramite Actionscript
Finesta di test del filmato

Non ci resta che aggiungere nel codice i passaggi per creare il clip con riempimento gradente sfumato.

Listato 4. Crea il clip con riempimento gradente sfumato

// Creo la clip da utilizzare con riempimento gradiente
maschera = new MovieClip()

// Imposto lo riempimento gradiente lineare di colore bianco, con alpha da 0 ad 1 e che influenzi
// circa metà clip
var riempimento:String = GradientType.LINEAR;
var colori:Array = [0xFFFFFF, 0xFFFFFF];
var trasparenza:Array = [0, 1];
var influenza:Array = [0, 150];

// Imposto lo stile del gradiente
var spreadMethod:String = SpreadMethod.PAD;

// Creo la matrice per il riempimento
var matr:Matrix = new Matrix();

// Creo lo riempimento gradiente
matr.createGradientBox(larghezza, altezza,(90/180)*Math.PI, 0, 0);
maschera.graphics.beginGradientFill(riempimento, colori,trasparenza, influenza, matr, spreadMethod);

// Disegno la clip, con dimensioni pari a quelle del clip sorgente
maschera.graphics.drawRect(0,0,larghezza,altezza);

// Posiziono la clip gradiente sopra alla clip riflessa
maschera.y = sorgente.getChildByName("riflesso").y- sorgente.getChildByName("riflesso").height;
sorgente.addChild(maschera)

La creazione di un riempimento gradiente tramite Actionscript è abbastanza elaborata poiché ricca di parametri: in questo caso abbiamo usato due colori (infatti i vari array hanno solo due elementi), uno è un bianco con alpha 0 e l'altro è un bianco con alpha 1, con l'effetto influenzato per agire fino a circa metà immagine (influenza da 0 a 150, su un range massimo da 0 a 255).

Lo spreadMethod corrisponde ai settaggi per la ripetizione del riempimento nel pannello Colori, precisamente PAD corrisponde al metodo di default.

Utilizzando questi valori abbinati ad una matrice è possibile creare praticamente qualsiasi tipo di riempimento gradiente; nel nostro caso ne abbiamo creato uno pressoché identico a quello realizzato manualmente.

Figura 8. L'effetto applicato tramite Actionscript
Finesta di test del filmato

Applicare l'effetto a più clip

Lo svantaggio principale della soluzione manuale era la necessità di ripetere ogni volta il procedimento per applicare l'effetto a diverse clip: con la classe che abbiamo creato basterà invece aggiungere delle righe di codice, ad esempio, per applicare l'effetto a 4 clip utilizziamo:

Listato 5. Applica l'effetto a 4 clip

import rifletti
var r1:rifletti = new rifletti(mc)
var r2:rifletti = new rifletti(mc2)
var r3:rifletti = new rifletti(mc3)
var r4:rifletti = new rifletti(mc4)

Rendere personalizzabile l'effetto

Altro vantaggio, derivato dall'utilizzo di Actionscript, è la possibilità di rendere versatile e personalizzabile l'effetto; supponiamo di lasciare la possibilità di scegliere il colore, la distanza tra la clip originale e il riflesso e l'area di influenza del riflesso.

Listato 6. Rende personalizzabile l'effetto

package{

  import flash.display.MovieClip;
  import flash.display.DisplayObject;
  import flash.display.BitmapData;
  import flash.display.Bitmap;
  import flash.geom.Matrix;
  import flash.display.GradientType;
  import flash.display.SpreadMethod;
  
  public class rifletti extends MovieClip{
  
    private var sorgente:MovieClip
    private var duplicato:BitmapData
    private var riflesso:Bitmap
    private var maschera:MovieClip
    
    public function rifletti(mc,distanza,colore,influ){
    
      // Memorizzo il riferimento alla clip originale
      sorgente = mc
      
      // Ricavo altezza e larghezza della clip
      var altezza:Number = sorgente.height
      var larghezza:Number = sorgente.width
      
      // Preparo un oggetto bitmapData con la copia dell'immagine
      duplicato = new BitmapData(larghezza, altezza, true,0xFFFFFF);
      duplicato.draw(sorgente);
      
      // Creo la copia dell'immagine originale
      riflesso = new Bitmap(duplicato);
      
      // La inverto (corrisponde alla rotazione di 180 gradi)
      riflesso.scaleY = -1
      
      // e la posiziono al di sotto del movieclip originale
      riflesso.y = sorgente.height*2 + distanza
      riflesso.name = "riflesso"
      
      // Quindi la aggiungo all'interno della clip originale
      sorgente.addChild(riflesso)
      
      // Creo la clip da utilizzare con riempimento gradiente
      maschera = new MovieClip()
      
      // Imposto uno riempimento gradiente lineare di colore bianco, con alpha da 0 ad 1 e che influenzi
      // circa metà clip

      var riempimento:String = GradientType.LINEAR;
      var colori:Array = [colore,colore];
      var trasparenza:Array = [0, 1];
      var influenza:Array = [0, influ];
      
      // Imposto lo stile del gradiente
      var spreadMethod:String = SpreadMethod.PAD;
      
      // Creo la matrice per il riempimento
      var matr:Matrix = new Matrix();
      
      // Creo il riempimento gradiente
      matr.createGradientBox(larghezza, altezza,(90/180)*Math.PI, 0, 0);
      maschera.graphics.beginGradientFill(riempimento, colori,trasparenza, influenza, matr, spreadMethod);
      
      // Disegno la clip, con dimensioni pari a quelle del clip sorgente
      maschera.graphics.drawRect(0,0,larghezza,altezza);
      
      // Posiziono la clip gradiente sopra alla clip riflessa
      maschera.y = sorgente.getChildByName("riflesso").y- sorgente.getChildByName("riflesso").height;
      sorgente.addChild(maschera)
    }
  
  }

}

Mentre il codice per il richiamo diventerà:

import rifletti
var rifl:rifletti = new rifletti(mc,10,0xFFFFFF,150)


Ti consigliamo anche