Share
Il camouflage attivo è un concetto di fantascienza, solitamente visto sotto forma di abito che consente a chi lo indossa di diventare quasi invisibile. Può essere visto in film come Predator e Die Another Day e giochi come Halo e Crysis.
Questo tutorial mostra come ottenere un simile effetto in Flash animando un filtro di spostamento usando una sequenza di bitmap. Non solo l'effetto è interessante, ma questa tecnica è raramente presente nei tutorial online.
Diamo un'occhiata al risultato finale su cui lavoreremo:
La mappatura dello spostamento è una mappa della trama che viene utilizzata per modulare la forza di spostamento. Spostamento significa letteralmente spostare i pixel di una superficie fuori posto. Nella maggior parte delle applicazioni 3D, i pixel sono spostati lungo la superficie normale. In Adobe Flash, lo spostamento avviene nello spazio 2D, lungo le coordinate X e Y di un'immagine.
I filtri di spostamento in Flash sono generalmente animati cambiando dinamicamente la loro intensità (i parametri scaleX e scaleY), cambiando la posizione della bitmap di spostamento (il parametro mapPoint) o manipolando i canali di colore. Questo tutorial spiegherà ulteriormente queste tecniche, ma ne studieremo anche una diversa, che usa una sequenza bitmap per disegnare una nuova mappa di spostamento su ogni frame.
Esempio di spostamento lungo la superficie normale.
Esempio di mappatura di spostamento in flash, lungo gli assi X e Y..
Apri un nuovo documento in Flash e imposta la dimensione a 550x368 in modo che corrisponda alla nostra immagine di sfondo. Imposta la frequenza fotogrammi su 48 fps. Il filtro di spostamento verrà effettivamente eseguito a 12 fps, ma nel caso in cui desideri un'animazione aggiuntiva in un secondo momento, sembrerebbe più agevole a 48 fps.
Fai clic su File> Impostazioni pubblicazione> Impostazioni di ActionScript 3.0 e disattiva "istanze di fase di auto-dichiarazione".
Importa rainforest.jpg sul palco.
Premi Ctrl + K per allineare e abbinare le dimensioni della tela. Questa sarà la nostra immagine di sfondo.
Ora con l'immagine selezionata, premere F8 per convertirla in un simbolo. Seleziona "Movie Clip" nel menu Tipo.
Se la finestra delle proprietà è chiusa, premere Ctrl + F3 per aprirla. Daremo il nome al filmato appena creato. Nel campo del nome dell'istanza, digita "bkgd_mc".
Ora premi Ctrl + F8 per creare un nuovo clip filmato. Non lo chiamiamo ancora. Per prima cosa importeremo la sequenza bitmap all'interno di questo clip filmato. Vai a File> Importa> Importa nello stage. Seleziona la prima immagine della sequenza, che si chiama "pred0001.jpg". Flash chiederà se si desidera importare tutte le immagini in questa sequenza. Clicca Sì.
Noterai che ogni bitmap è posizionata su un fotogramma chiave lungo la linea del tempo dei clip filmato. A partire dal fotogramma 1, selezionare l'immagine e premere F8 per coprirlo sul clip filmato. Fallo su ogni fotogramma fino alla fine della sequenza. Fallo in ordine, dal primo all'ultimo e assicurati di non saltare nessun fotogramma, altrimenti rovinerà l'animazione.
Una volta terminato, ogni fotogramma chiave dovrebbe avere un clip filmato contenente una cornice del volto del personaggio. Seleziona nuovamente il frame uno e premi Invio per vedere l'animazione.
Seleziona il filmato sul fotogramma 1. Fai clic con il pulsante destro del mouse e distribuisci ai livelli. Ancora una volta, fallo su tutti i filmati su tutti i fotogrammi. Quando hai finito non sarai più in grado di vedere l'animazione, solo l'immagine sul livello superiore.
Premi Ctrl + L per aprire la libreria e trascina "Symbol 2" sullo stage. Nella scheda proprietà, chiama questa istanza "displ_mc". Questo clip filmato verrà utilizzato nel nostro filtro di spostamento.
Stiamo andando a scrivere il codice per il nostro filtro mappa di spostamento all'interno di un file di classe del documento. Crea un nuovo file Actionscript e chiamalo "pred_as3". Ora incolla questo codice:
package import flash.display.MovieClip; import flash.display.BitmapData; import flash.display.IBitmapDrawable; import flash.display.BitmapDataChannel; import flash.filters.DisplacementMapFilter; import flash.filters.DisplacementMapFilterMode; import flash.geom.Point; import flash.events.Event; la classe pubblica pred_as3 estende MovieClip
Torna al documento flash e assegna un nome alla classe pred_as3.
Come puoi vedere, abbiamo già importato tutte le classi di cui avremo bisogno in questo tutorial, ora continuiamo a scrivere la classe del documento. Aggiungi questo codice ad esso:
private var clipcont = new Array (); // tutti i fotogrammi animati verranno archiviati in questo array numero var privato: Number; // parte del ciclo enterframe; indica quale fotogramma dell'animazione verrà mostrato private var timer: uint = 0; // imposta la velocità dell'animazione pubblica var displ_mc: MovieClip; public var bkgd_mc: MovieClip;
Stiamo affermando alcune variabili che verranno utilizzate in seguito. Devono essere dichiarati prima del costruttore della classe se devono essere usati da più di una funzione nella classe del documento.
Subito sotto l'ultima riga, iniziamo a scrivere i parametri e il costruttore del filtro della mappa di spostamento.
private var strength1: int = 120; // il valore di scaleX e scaleY - imposta l'intensità del filtro di spostamento private var mapBitmap: BitmapData = new BitmapData (320,240); // la dimensione della mappa di spostamento in pixel private var mapPoint: Point = new Point (0,0 // la posizione della bitmap di spostamento private var componentX = BitmapDataChannel.GREEN; // quale canale di colore viene utilizzato; non importa perché è in tonalità di grigio; private var componentY = BitmapDataChannel.GREEN; private var spe: int = 1; // cambia la forza del filtro di spostamento // tutte le variabili vengono quindi applicate a un nuovo filtro private var filter: DisplacementMapFilter = new DisplacementMapFilter (mapBitmap, mapPoint, componentX, componentY, scaleX, scaleY); private var filterList = new Array (); // una lista di filtri array.
Quindi abbiamo impostato i parametri per forza, dimensione, posizione e canale RBG. Diamo uno sguardo più da vicino a ciascuno di questi parametri ...
Come accennato in precedenza, lo spostamento in flash è possibile solo lungo gli assi X e Y. I parametri che impostano la forza di spostamento per X e Y sono scaleX e scaleY rispettivamente. In questo tutorial useremo la stessa forza su entrambi gli assi X e Y, quindi utilizzeremo la stessa forza variabile1 per entrambi i parametri. Di seguito è riportato un esempio di spostamento lungo l'asse orizzontale, con scaleY impostato su zero (immagine a sinistra) e l'asse verticale, con scaleX impostato su zero (a destra).
Si noti come la dimensione sia impostata su 320x240. Sappiamo già la dimensione dei bitmap nell'animazione e il costruttore deve avere le stesse dimensioni di essi. Se il valore nel costruttore è maggiore di quello delle bitmap, ci sarà lo spostamento nelle aree in cui non dovrebbe accadere. Il grigio 808080 attorno alla testa del personaggio è di colore neutro, d'altra parte qualsiasi area vuota, o una bitmap trasparente sposterebbe effettivamente l'immagine di sfondo.
Esempio del valore impostato nel costruttore più grande della mappa di spostamento effettiva: le aree vuote spostano lo sfondo.
Il filtro di spostamento utilizza solo uno dei 3 canali RGB su una bitmap per ciascun asse. Quando si utilizza una bitmap colorata come mappa di spostamento, ciascun canale fornirà risultati molto diversi, come mostrato nell'esempio seguente. In questo tutorial utilizziamo un'immagine con sfumature di grigio, quindi il canale è irrilevante. ComponentX e componentY sono impostati su verde, ma lo stesso effetto sarebbe ottenuto usando i canali rosso o blu.
I diversi risultati ottenuti utilizzando il canale verde, il canale rosso o il canale blu.
Il parametro mapPoint imposta la posizione della mappa di spostamento. La posizione è relativa all'oggetto a cui è applicata e non allo stadio. Impostando la posizione su (0,0), la mappa di spostamento viene visualizzata nell'angolo in alto a sinistra della nostra immagine di sfondo, che non coincide sempre con l'angolo in alto a sinistra dello stage, come mostrato di seguito.
Il parametro mapPoint è relativo all'oggetto, non allo stage.
Ora applichiamo il filtro di spostamento alla nostra immagine di sfondo "displ_mc". Il filtro di spostamento viene inserito in una serie di filtri e lo facciamo all'interno del costruttore della classe. Aggiungiamo anche i nostri due filmati principali sul palco con il metodo addchild. In AS3 il costruttore di classi è la prima funzione da eseguire in una classe di documenti e viene chiamata automaticamente, quindi è meglio che tutte le funzioni o metodi che devono essere eseguiti al caricamento vengano richiamati da un costruttore di classi.
funzione pubblica pred_as3 () addChild (displ_mc); addChild (bkgd_mc); // aggiunge entrambe le istanze di Movie Clip allo stage filterList.push (filtro); // aggiunge il filtro della mappa di spostamento all'array. bkgd_mc.filters = filterList; // applica la serie di filtri al clip filmato di destinazione. storeClips ();
L'ultima riga di codice chiama una funzione che non è stata ancora scritta. Come suggerisce il nome questa funzione memorizzerà tutti i clip filmato animati in un array. Quindi andiamo avanti e scrivilo adesso.
Abbiamo quindi creato un filtro mappa di spostamento e applicato al clip filmato, ma non abbiamo ancora aggiunto alcun bitmap al filtro. Lo faremo in due passaggi: prima memorizzeremo l'animazione in un array, poi aggiungeremo questa animazione al filtro.
funzione privata storeClips (): void // memorizza l'animazione in una matrice count = displ_mc.numChildren; // il numero totale di movieclips all'interno di displ_mc per (var i: int = 0; i < displ_mc.numChildren; i++)//finds all movieclips inside displ_mc clipcont.push(displ_mc.getChildAt(i));// frames are pushed inside the clipcont array
Questa funzione utilizza a per loop per scansionare tutti i filmati all'interno di displ_mc. Vogliamo i fotogrammi di animazione che sono stati convertiti in filmati in precedenza in questo tutorial. Ricordi quando ho detto di convertirli fotogramma per fotogramma? Lo abbiamo fatto in modo che i fotogrammi potessero essere ordinati correttamente e in seguito accedessi usando il metodo getChildAt (). Dal momento che non abbiamo nominato nessuno di questi casi, Flash li ordina internamente per ordine di creazione. Se le bitmap sono state convertite casualmente in clip filmato, l'animazione non verrà mai riprodotta correttamente. Ora i frame possono essere inseriti nell'array clipcont, uno per uno.
Il codice finora dovrebbe apparire come questo:
package import flash.display.MovieClip; import flash.display.BitmapData; import flash.display.IBitmapDrawable; import flash.display.BitmapDataChannel; import flash.filters.DisplacementMapFilter; import flash.filters.DisplacementMapFilterMode; import flash.geom.Point; import flash.events.Event; public class pred_as3 estende MovieClip private var clipcont = new Array (); // tutti i frame animati sono memorizzati in questo array numero var privato: Number; // parte del ciclo enterframe; indica quale fotogramma dell'animazione viene mostrato private var timer: uint = 0; public var displ_mc: MovieClip; public var bkgd_mc: MovieClip; private var strength1: int = 120; // imposta l'intensità del filtro di spostamento private var mapBitmap: BitmapData = new BitmapData (320,240); // la dimensione della mappa di spostamento in pixel private var mapPoint: Point = new Point (0,0); // la posizione di la bitmap di spostamento private var componentX = BitmapDataChannel.GREEN; // quale canale di colore viene utilizzato; non importa perché è in tonalità di grigio; private var componentY = BitmapDataChannel.GREEN; private var spe: int = 1; // tutte le variabili vengono quindi applicate a un nuovo filtro private var filter: DisplacementMapFilter = new DisplacementMapFilter (mapBitmap, mapPoint, componentX, componentY, scaleX, scaleY); private var filterList = new Array (); // una lista di filtri array. // CLASS CONSTRUCTOR public function pred_as3 () addChild (displ_mc); addChild (bkgd_mc); // aggiunge entrambe le istanze di Movie Clip allo stage storeClips (); filterList.push (filtro); // aggiungi il filtro di spostamento all'array. bkgd_mc.filters = filterList; // applica il set di filtri al clip filmato di destinazione. private function storeClips (): void // memorizza l'animazione in una matrice count = displ_mc.numChildren; // il numero totale di movieclips all'interno di displ_mc per (var i: int = 0; i < displ_mc.numChildren; i++)//finds all movieclips inside displ_mc clipcont.push(displ_mc.getChildAt(i));// frames are pushed inside the clipcont array
Ora che abbiamo l'animazione pronta per l'uso, inseritela nel filtro del dislocamento. Accederemo all'array clipcont con un ciclo "time release" utilizzando il Event.ENTER_FRAME classe. Ogni 4 fotogrammi, si accede a una nuova bitmap nell'array e quindi applicata al filtro utilizzando il metodo draw (). Dopo aver disegnato l'ultimo frame in ClipCont, il ciclo ricomincia e viene disegnato il primo fotogramma in clipcont. È un ciclo infinito.
funzione privata animate (e: Event) filter.scaleX = strength1; // imposta il valore di scaleY e scaleX filter.scaleY = strength1; if (timer> 3) // viene disegnato un nuovo frame ogni 4 frame if (count <= 0) count = clipcont.length;// setting an infinite loop count--; timer = 0; if (clipcont[count]) filter.mapBitmap.draw(clipcont[count]);// a new frame of animation is drawn bkgd_mc.filters = filterList;//updates the filter
Copia le righe precedenti nel tuo file actionscript. Ora eseguiamo questa operazione aggiungendo un listener di eventi al costruttore della classe.
funzione pubblica pred_as3 () addChild (displ_mc); addChild (bkgd_mc); // aggiunge entrambe le istanze di Movie Clip allo stage filterList.push (filtro); // aggiunge il filtro della mappa di spostamento all'array. bkgd_mc.filters = filterList; // applica il set di filtri al clip filmato di destinazione. storeClips (); addEventListener (Event.ENTER_FRAME, animato); // chiama la funzione animate su enter frame
Aggiorna il costruttore della classe con il addEventListener metodo. Ora la funzione animata è stata aggiunta allo stage e viene richiamata su ogni frame. Prova l'effetto premendo Ctrl + Invio. Dovresti vedere la faccia animata nell'angolo in alto a sinistra del tuo film.
Abbiamo un ciclo di animazione in esecuzione nell'angolo del film. Facciamo seguire la mappa di spostamento seguendo il mouse, in questo modo sarai in grado di vedere come l'effetto del camuffamento attivo appare su diverse parti dello sfondo. Incolla questa linea all'interno della funzione di animazione:
funzione privata animate (e: Event) filter.scaleY = strength1; // imposta il valore di scaleY e scaleX filter.scaleX = strength1; timer ++; if (timer> 3) // viene disegnato un nuovo frame ogni 4 frame if (count <= 0) count = clipcont.length;// setting an infinite loop count--; timer = 0; if (clipcont[count]) filter.mapBitmap.draw(clipcont[count]);// a new frame of animation is drawn filter.mapPoint = new Point(mouseX-160, mouseY-240); // displacement map follows the mouse bkgd_mc.filters = filterList;
In questo modo aggiorniamo la posizione della mappa di spostamento su una base di inserimento frame usando le proprietà mouseX e mouseY. Premi Ctrl + Invio per testarlo. La testa dovrebbe ora seguire il mouse.
Nell'ultima fase di questo tutorial giocheremo un po 'con la forza del nostro filtro, aumentando il valore dei parametri scaleX e scaleY per un periodo di tempo, per poi ridiscendere al valore iniziale. Ciò che stiamo cercando di ottenere con questo è rendere l'effetto più dinamico e ... visibile. Mentre l'intero punto di un camuffamento nella vita reale dovrebbe essere quello di rendere le cose meno visibili, quello che stiamo cercando di fare qui è di farlo sembrare bello. Congeliamo l'animazione in modo da poter capire di cosa sto parlando. Nella funzione di animazione, sostituire la linea
filter.mapBitmap.draw (clipcont [count]);
con questa riga invece:
filter.mapBitmap.draw (clipcont [20]);
Invece di disegnare l'animazione, stiamo dicendo al flash di disegnare lo stesso fotogramma più e più volte. Premi Ctrl + Invio per testarlo.
L'effetto sembra completamente statico e noioso. Diamo un po 'di movimento. Incolla il codice qui sotto all'interno della funzione di animazione:
funzione privata animate (e: Event) filter.scaleY = strength1; // aggiorna il valore di scaleY e scaleX filter.scaleX = strength1; timer ++; if (timer> 3) // viene disegnato un nuovo frame ogni 4 frame if (count <= 0) count = clipcont.length;// setting an infinite loop count--; timer = 0; if (clipcont[count]) filter.mapBitmap.draw(clipcont[20]);// a new frame of animation is drawn filter.mapPoint = new Point(mouseX-160, mouseY-240); // displacement map follows the mouse if (filter.scaleX > 220 || filter.scaleX < 120) // filter keeps changing it's intensity, making the effect more dynamic spe *= -1; strength1 += spe; bkgd_mc.filters = filterList;
Ora provalo con Ctrl + Invio.
Vedi quanto è bello? Ok, ora puoi ripristinare l'animazione, correggere la linea che è stata modificata:
filter.mapBitmap.draw (clipcont [count]);
Questo effetto è anche utile nel caso in cui si desideri allegare un corpo statico all'animazione facciale in seguito. Sembrerebbe più attivo accanto all'animazione bitmap.
Il file potrebbe essere un po 'pesante se si utilizza la qualità jpeg 100, che è ciò che raccomando. In una qualità inferiore l'effetto perde un po 'del suo fascino. Se vuoi un film più piccolo puoi comprimere le immagini ancora di più in Photoshop, ma assicurati di mantenere lo schema dei colori corretto. Il colore attorno alla testa del personaggio dovrebbe sempre essere # 808080 o vedrai un riquadro attorno ad esso.
Quindi questo è tutto. Il primo tutorial che abbia mai scritto è stato divertente farlo e spero che ti sia divertito a leggere e farne buon uso. Apprezzerei molto il tuo feedback. Grazie per aver letto!
Accentsconagua