Crea il tuo effetto Pixel Explosion ActionScript 3.0

In questo tutorial imparerai come creare un effetto che ha sicuramente attirato la tua attenzione (ad esempio in file come questo), Pixel Explosion. Durante il processo di creazione impareremo come estrarre BitmapData da MovieClip, come utilizzare un motore di interpolazione e come utilizzare i listener di eventi.

Iniziamo quindi!

Passaggio 1: impostazione dello stage

La prima cosa che faremo è creare un file flash AS3. Quindi imposteremo il nostro stage su 400 x 400 px e 30 fps. Saremo codificati sulla timeline per semplificare le cose, ma coloro che sanno programmare in OOP sono invitati a scrivere questo codice nelle classi. Avrai bisogno di una conoscenza di base di AS3 per comprendere tutti i processi che questo tutorial comporta; tuttavia, cercherò di mantenerlo molto semplice. I pulsanti al passaggio del mouse blu sono quelli che dovrai premere nel tuo IDE. All'inizio può sembrare un sacco di lavoro, ma è davvero molto semplice ...

Passaggio 2: disegno della nostra immagine principale

Ora disegneremo un'immagine vettoriale di ciò di cui abbiamo bisogno. Puoi davvero impostare qualsiasi immagine con questo effetto (.jpg, .png), ma i vettori sono più freddi. Come noterai, non sono un grande designer. Tutto quello che devi fare è disegnare la tua immagine (o importare un jpg dal tuo computer), selezionarlo e convertirlo in MovieClip (premi F8 su Windows).

Passaggio 3: Preparazione per il codice

Una volta che hai trasformato la tua immagine in un Movieclip, puoi prepararla per il codice che la sceglierà come bersaglio. Creeremo un nuovo livello per le azioni (1.) e poi gli diamo un nome di istanza di mcLogo (2.). Quindi importeremo le classi per l'uso nel nostro livello di azioni. Per questo effetto avremo bisogno di un buon motore di tweening. Il migliore che ho trovato che gestisce sia la velocità che la stabilità è TweenMax. Puoi scaricarlo da http://blog.greensock.com/tweenmaxas3/ (dona se ti piace). Ricorda di copiare la directory classes nella stessa directory di .fla (come puoi vedere nella casella blu). Infine, importa la classe TweenMax nella timeline (3.).

Passaggio 4: Preparazione per l'azione

Ora imposteremo il palco e le nostre variabili principali. Allineeremo lo stage all'angolo TOP_LEFT e lo imposteremo in modo che non riduca il contenuto. Dal lato delle variabili, creeremo un contenitore per contenere tutti i pixel che esploderanno. Creeremo anche un GlowFilter, ovviamente è facoltativo, ma migliorerà la bellezza dell'effetto. "Animazione" è un interruttore che diventa vero quando si verifica l'effetto e "pixelBMP" è i dati bitmap della tua immagine.

 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = new MovieClip (); var glow: GlowFilter = new GlowFilter (0xFFFF00, 1, 10, 10,5,2); var animation: Boolean = false; var pixelBMP: BitmapData;

Successivamente, creeremo variabili ripetute e assegneremo la posizione del contenitore di pixel alla stessa immagine.

 var i: int = 0; var j: int = 0;

Passaggio 5: creare i titolari Pixel

Ora estrarremo i dati bitmap (colori dei pixel) dall'immagine che hai impostato (1.). Ricorda queste due righe, ti aiuterà anche in altri progetti. Creeremo un nuovo simbolo dalla libreria (2.) e fare clic sul pulsante Avanzate. Una volta cliccato, selezionare Esporta per Actionscript (3.). Cerca il campo di testo Class e digita "myPixel".

Passaggio 6: impostare la classe MyPixel

Ora imposteremo il contenitore dei pixel. Inseriremo il nostro effetto pixel appena creato e creeremo un livello denominato "azione".

Passaggio 7: impostazione dei pixel per ricevere i colori

Sul livello delle azioni imposteremo la bitmap. Questo piccolo pezzo di codice ti aiuterà ogni volta che vuoi manipolare i bitmapData di un oggetto (ad esempio con altri effetti utili come la desaturazione e la sfocatura).

pixelBMP = new BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo)

Ho creato un cerchio che contiene il colore di ogni pixel, ma puoi personalizzarlo in base a ciò che desideri; quadrato, triangolo o anche un semplice pixel. Aggiungiamo l'effetto bagliore dei pixel dal parametro funzione:

var orgX: int = 0; var orgY: int = 0; var bmpImg: Bitmap; function setUpPixel (bdData: BitmapData, glow: GlowFilter) var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (bdData.getPixel (0,0)); mc.graphics.drawCircle (0,0,2) mc.graphics.endFill (); mc.filters = [glow]; addChild (mc);

Passaggio 8: attraversamento di tutti i pixel

Creeremo due istruzioni "for" per coprire tutti i pixel della nostra immagine. Il primo per (i) è per verticale e il secondo (j) per orizzontale. Il metodo getPixel restituisce un'unità che rappresenta il colore del pixel in quella posizione. Se non è nullo, avvierà le operazioni presentate al passaggio 9. Incroceremo i pixel a due a due a causa della gestione della memoria.

 per (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2)

Passaggio 9: dare colore ai pixel

Inizieremo assegnando il colore del pixel al filtro glow. Quindi creeremo un nuovo myPixel che chiameremo "pixel_mc". Chiameremo la funzione "setUpPixel" che abbiamo definito durante il passaggio 7. Questo passa il bitmapData - 2 pixel di larghezza, 2 pixel di altezza, il colore del pixel corrente, originalX, originalY e il filtro glow. Infine, aggiungiamo questo pixel al contenitore di pixel (riga 12)

per (i = 0; i < mcLogo.height; i+=2) for(j = 0; j < mcLogo.width; j+=2)  if(pixelBMP.getPixel(j, i)>0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (nuovo BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), glow) pixel_mc.y = i; pixel_mc.x = j; pixelContainer.addChild (pixel_mc); pixelContainer.visible = false;

Passo 10: testare ciò che abbiamo fatto finora.

Piccoli errori sono molto comuni nella programmazione, questo è il motivo per cui abbiamo bisogno di testare il nostro Movie Clip di volta in volta. Questo ci dà la nostra immagine, ma anche un po 'di sfocatura. La sfocatura è dovuta al filtro glow, quindi non preoccuparti. Come forse già saprai, non abbiamo bisogno che questi pixel siano visibili, tranne quando vengono applicati i nostri effetti. Fino ad allora abbiamo la nostra bella immagine. Quindi tutto ciò che devi fare in questa fase è la linea 13 di uncomment - pixelContainer.visible = false; e otterrai la tua immagine originale.

Passaggio 11: impostazione dell'effetto di esplosione

Abbiamo i pixel in posizione, ora tutto ciò che dobbiamo fare è animarli. Questo è stato TweenMax entra in scena. Iniziamo la funzione rendendo l'immagine originale invisibile e i pixel visibili. Quindi imposteremo l'immagine originale e il pulsante che creeremo in seguito (per abilitare la funzione) nella parte superiore dell'indice. Ricorda questa funzione - setChildIndex (yourmc, numChildren-1) ti aiuterà in altri progetti.

 function explode () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true;

Passaggio 12

Questo è dove i pixel prenderanno vita. Il "for" incrocia ogni bambino del pixelContainer. Il pixel viene estratto attraverso il getChildAt (i) metodo. Il xdest e il ydest sono alcune destinazioni casuali in cui i nostri pixel voleranno (poiché Math.random () restituisce un numero compreso tra 0 e 1 è necessario moltiplicarlo). Infine, aggiungiamo la transizione e un tipo di facilità tramite TweenMax.

 function explode () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; per (var i: int = 0; i Step 13: Implosion
 Per l'implosione, ovviamente, abbiamo bisogno di memorizzare i nostri valori iniziali da qualche parte. Creeremo (1) 2 array - xArray e yArray che memorizzano questi valori. Dopo questo (2.) inseriremo nel per (j = 0; j il codice per spingere i valori nel prossimo indice.
  var xArray: Array = new Array (); var yArray: Array = new Array (); for (i = 0; i0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (nuovo BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), glow) pixel_mc.y = i; pixel_mc.x = j; xArray.push (j); yArray.push (i); pixelContainer.addChild (pixel_mc); pixelContainer.visible = false; 
 Passaggio 14
 Ora aggiungeremo anche un effetto di ritiro. È quasi uguale all'effetto esplosione, ma userà solo i valori memorizzati nell'array creato in precedenza.
  Step 15: Il pulsante
 Creiamo il nostro pulsante. Inizia disegnando (1). Rendendolo un Movie Clip (come hai imparato nel passaggio 2. Crea un nuovo livello di azioni e digita stop (); (2.). Questo impedisce al nostro mc di eseguire il ciclo. Ora inseriremo un fotogramma chiave per quando il pulsante è stato premuto ( 3.). Ciò cambierà il testo e mostrerà che ora, quando lo fai clic, invertirà il processo.
  Passaggio 16: Esportazione del nostro pulsante per ActionScript
 Dovremo fare la stessa cosa che abbiamo fatto alla nostra immagine, dando al pulsante un nome di istanza.
  Passaggio 17: impostazione del pulsante
 La proprietà buttonMode imposta il cursore normale da modificare nell'azione 1. 
 La proprietà mouseChildren quando è impostata su false vieta ai pulsanti figli di rubare mouseEvents.
 Il metodo addEventListener consente al pulsante di avviare la funzione clickHandler quando si fa clic (MouseEvent.CLICK).
  function initbutton () btn_mc.buttonMode = true; btn_mc.mouseChildren = falso; btn_mc.addEventListener (MouseEvent.CLICK, clickHandler);  initbutton ();
 Step 18: The Detonator
 Ora imposteremo la funzione che imposta l'esplosione. "animare" è il valore che indica se i pixel devono esplodere o implodere.
  function clickHandler (e: MouseEvent) if (animating == false) explode (); animating = true; btn_mc.gotoAndStop (2);  else implode () btn_mc.gotoAndStop (1); 
 Step 19: Personalizzazione
 L'aggiunta di filtri, la modifica dei valori dei filtri e la modifica dei tipi di andamento delle transizioni sono ottimi giochi. Per modificare i tipi di andamento è necessario importare le classi di andamento. È possibile visualizzare l'anteprima dei tipi di interpolazione qui.
  import gs.easing. *;
 Step 20: Smoothing the Transition
 Se hai testato il film come abbiamo fatto, potresti aver notato che la transizione tra i pixel e l'immagine reale è piuttosto dura. Possiamo aggiungere un parametro onComplete all'interpolazione implode per chiamare una funzione che attenua tale transizione:
 onComplete: smoothit function smoothit () mcLogo.visible = true; TweenMax.to (pixelContainer, 1, alpha: 0, onComplete: function () pixelContainer.visible = false; mcLogo.visible = true; animating = false;
 Passaggio 21: revisione
 Quindi, cosa abbiamo coperto oggi?
  Importare le nostre classi principali.
 Allineare il palco.
 Dichiarare le variabili principali.
 Aggiunta di un contenitore di pixel sul palco.
 Estrazione dei dati bitmap dalla nostra immagine.
 Creazione di una classe MyPixel e invio del colore di ciascuno dei pixel dell'immagine a quei pixel.
 Crea una funzione che seleziona tutti i pixel, quindi li interpola in una posizione casuale.
 Realizzare una funzione che ritorti i pixel alla posizione originale.
 Fare un pulsante che chiama quelle funzioni.
 
 Codice finale
  import gs.TweenMax; import gs.easing. *; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var pixelContainer: MovieClip = new MovieClip (); var glow: GlowFilter = new GlowFilter (0xFFFF00, 1, 10, 10,5,2); var animation: Boolean = false; var pixelBMP: BitmapData; var i: int = 0; var j: int = 0; var xArray: Array = new Array (); var yArray: Array = new Array (); addChild (pixelContainer) pixelContainer.x = mcLogo.x; pixelContainer.y = mcLogo.y; pixelBMP = new BitmapData (mcLogo.width, mcLogo.height, true, 0x000000) pixelBMP.draw (mcLogo) per (i = 0; i0) glow.color = pixelBMP.getPixel (j, i); var pixel_mc: myPixel = new myPixel () pixel_mc.setUpPixel (nuovo BitmapData (2, 2, false, pixelBMP.getPixel (j, i)), glow) pixel_mc.y = i; pixel_mc.x = j; xArray.push (j); yArray.push (i); pixelContainer.addChild (pixel_mc); pixelContainer.visible = false;  function initbutton () btn_mc.buttonMode = true; btn_mc.mouseChildren = falso; btn_mc.addEventListener (MouseEvent.CLICK, clickHandler); function clickHandler (e: MouseEvent) if (animating == false) explode (); animating = true; btn_mc.gotoAndStop (2);  else implode () btn_mc.gotoAndStop (1);  initbutton (); function explode () pixelContainer.alpha = 1; mcLogo.visible = false; setChildIndex (mcLogo, numChildren - 1) setChildIndex (btn_mc, numChildren-1) pixelContainer.visible = true; per (var i: int = 0; i Spero che questo tutorial ti sia piaciuto. Grazie per aver letto!



		
			
	   
	




Codice