Share
Devi ammettere che quando usi un prodotto chiamato Flash c'è una tendenza a diventare appariscente e esagerare. Il fatto è che la vera arte del designer di Flash non sta nella produzione di presentazioni o effetti travolgenti. La vera arte sta nel comporre il Flashiness Meter indietro e rendersi conto che è il arte di sottigliezza questo è importante. Non il Veloce.
Il che ci porta all'argomento di questo tutorial a livello principiante ... fare acqua.
Prima di andare, siamo perfettamente chiari l'uno con l'altro. Ci sono diverse dozzine di modi per fare ciò di cui parlerò in questo tutorial. In effetti, mi aspetto di vedere la casella dei commenti alla fine di questo pezzo popolata da una serie di post che mi dicono, in sostanza, Non è il modo in cui lo farei. Molto probabilmente non lo è e non ho alcun problema con quello e lo aspetto. In realtà questo tutorial si basa su un esempio di Lee Brimelow, un Evangelista di piattaforme Flash per Adobe mi ha mostrato per la prima volta un paio di anni fa.
Sia io che Lee condividiamo una prospettiva molto simile quando si tratta di lavorare con ActionScript. Invece di fissare un pannello Azioni vuoto, entrambi pensiamo che sia importante che tu, come principiante, prendi un esempio di codice (molto simile a quello che offriamo qui) e inizi a giocare con esso. In questo modo impari cosa fanno molte cose. Gli accademici chiamano questo processo, "impalcatura", che è un termine di fantasia per imparare un'abilità di base e costruire le tue conoscenze da esso.
Come ho detto, però, questo tutorial di livello principianti è stato progettato per dimostrare un ActionScript molto interessante che utilizza mappe di spostamento, filtri e Perlin Noise per creare increspature dell'acqua. Il punto centrale di questo esercizio, infatti, è presentare un codice altrimenti complesso e mostrarti dove puoi divertirti un po '. Quando il codice inizia a diventare divertente, sei sulla buona strada per la gloria completa dell'OOP. In effetti, il mio associato qui ad Activetuts +, Cadin Batrack fa proprio questo con molte delle tecniche presentate qui nel suo tutorial Creare un effetto di distorsione statica usando il filtro Mappa di spostamento.
Ora che ci capiamo, diventiamo sottili e facciamo qualche increspatura.
L'immagine che useremo è uno scatto che ho fatto della Fontana dei Medici nel Jardin du Luxembourg a Parigi, in Francia. Il piano è mettere in movimento quella pozza d'acqua usando Flash.
Perché abbiamo bisogno di un piano d'attacco? Il flash non fa increspature dell'acqua. In questo particolare approccio, non è possibile selezionare l'area dell'acqua utilizzando uno strumento di selezione in Flash e, utilizzando ActionScript, pronunciare Jiggle questa selezione.
Per Flash a jiggle una selezione in giro è necessario incollare l'immagine in un oggetto BitMapData, spostare i pixel in quell'oggetto usando il DisplacementMapFilter e quindi applicare del disturbo Perlin al filtro per creare le increspature. Prima di farlo devi fare un viaggio su Photoshop o Fireworks.
Questo può essere fatto in Fireworks o Photoshop. La chiave è duplicare l'immagine e mascherare o rimuovere l'acqua nello strato di mascheratura. Salva il file come immagine .png o .psd e chiudi. Come potresti aver ipotizzato il fondo, smascherato, il livello è fondamentale per il successo di questo progetto.
Crea un nuovo documento Flash ActionScript 3. Aggiungi due nuovi livelli denominati "Maschera" e "azioni". Rinomina il livello 1 in "Immagine" e blocca il livello "azioni". A questo punto ho intenzione di fare un po 'di un ramo perché l'importazione di immagini di Photoshop e Fireworks in Flash sono due tecniche separate.
Quando si apre la finestra di dialogo Importa, selezionare il livello Font e selezionare Crea clip filmato per questo livello. Non preoccuparti del nome dell'istanza, lo faremo una volta che i livelli raggiungeranno il palco. Quando il file viene importato, vedrai che il livello Mask è un bitmap e il livello Fountain è ora un Movie Clip.
Quando si apre la finestra di dialogo Importa, assicurarsi che Importa come bitmap appiattito non sia selezionato.
Fireworks importa un file .png che non è altro che un segnaposto. Se apri la cartella Oggetti di fuochi d'artificio vedrai che il documento si trova nella sua cartella, solitamente "Pagina uno", perché Fireworks ti consente di avere più pagine in un unico documento. Se apri quella cartella vedrai i due bitmap e un Movie Clip. Apri il Movie Clip e imposta i livelli usando le istruzioni del Passaggio 3. Converti il livello Fontana in un Movie Clip.
Seleziona il Movie Clip della Fontana sulla timeline e assegnagli il nome di istanza di "foto". Blocca tutti e tre i livelli e salva il file.
Il codice che stai per scrivere è abbastanza semplice. Come ho detto prima, non puoi dire a Flash di fare una selezione e farla sobbalzare. Nel caso di questo codice, i pixel verranno spostati nel Movie Clip della fontana. Questo richiede di:
Se sei sottile, il jiggling sembra acqua corrente piuttosto che uno tsunami o un pozzo di catrame ...
Iniziamo:
Inserisci il seguente codice:
var bmd: BitmapData = new BitmapData (800,535); var dmf: DisplacementMapFilter = new DisplacementMapFilter (bmd, new Point (0,0), 0,2,10,60);
Iniziamo creando un oggetto BitmapData che corrisponda alla dimensione dell'immagine da manipolare. Ricorda, Flash non è esattamente la candela più brillante sull'albero. Ha bisogno di sentirsi dire cosa fare. In questo caso stai dicendo di creare una raccolta di pixel che corrispondono alle dimensioni dell'immagine e incollarli in un oggetto chiamato "bmd".
Ora che ha questa "cosa bmd" bisogna sapere cosa fare con i pixel nell'oggetto. La prossima linea fa proprio questo.
DisplacementMapFilter utilizza i valori di scala di grigi di un canale RGB, compreso alpha, e li usa per distorcere un'immagine (in questo caso un mucchio di pixel Bitmapdata) in base ai valori espulsi dai parametri del filtro. I parametri sono i seguenti:
Ci sono altri tre parametri che puoi aggiungere ma non sono necessari qui. Loro sono:
Crea le variabili da utilizzare per creare l'effetto a catena:
var pt1: Point = new Point (0,0); var pt2: Point = new Point (0,0); var perlinOffset: Array = [pt1, pt2];
addEventListener (Event.ENTER_FRAME, loopIt);
Abbiamo bisogno di questo per far tremare l'acqua. Ciò si verifica grazie al filtro Displacment che modifica i valori nel suo parametro Point () alla stessa velocità del tuo filmato. Nel mio caso il frame rate è impostato su 30 fps, il che significa che i valori cambieranno 30 volte al secondo.
Scrivi la funzione loopIt:
function loopIt (evt: Event): void perlinOffset [0] .x + = 0.5; perlinOffset [1] .y + = 0.1; bmd.perlinNoise (400,5,3,2, falso, falso, 2, vera, perlinOffset); photo.filters = [dmf]; ;
Le prime due righe impostano i valori utilizzati da Punto() parametro in DisplacementMapFilter, poiché l'indicatore di riproduzione scorre gli incrementi dei valori xey. I valori che ho scelto sono il risultato di molti test fino a quando non ho raggiunto l'effetto che volevo.
La terza riga applica il metodo perlinNoise all'oggetto bitmap creato nella riga 1 del codice. Passiamo attraverso i parametri:
I primi due numeri sono i baseX e baseY valori - 400, 5 - che determinano la frequenza del rumore sugli assi xey. Più basso è il numero, più dettagliato sarà il rumore. Come regola generale, il numero baseX può essere impostato in modo che corrisponda alla larghezza dell'immagine. Ho trovato 800 un po 'troppo, quindi l'ho composto fino a 400. La differenza nei dettagli era trascurabile.
Il terzo numero, 3, è il numOctave parametro. Più alto è il numero più dettagliato sarà il rumore casuale. Il rovescio della medaglia è un colpo alla potenza di elaborazione e una potenziale diminuzione della velocità nell'effetto. Questo non era destinato al web, quindi 3 sembra funzionare bene. L'utilizzo del valore 1 non ha spostato molto i pixel. Il prossimo numero, 2, è il randomSeed parametro.
I due valori booleani sono i punto e fractalNoise parametri. Un valore reale per punto smussa i bordi di qualsiasi piastrellatura che può verificarsi - non necessario qui. Il valore di rumore frattale determina se il rumore sarà il rumore frattale (vero) o turbolenza (falso). Il valore falso - turbolenza - è adatto per gli effetti dell'acqua come increspature o fuoco.
Il prossimo valore, 2, è il channelOptions parametro. Questo valore determina in quale dei quattro canali di colore verrà applicato il disturbo.
Il valore booleano, falso, è il in scala di grigi parametro. Se avessi usato false, il canale di colore specificato nel parametro channelOptions sarebbe stato usato per generare il rumore. Usare true dice a Flash che voglio usare la scala di grigi .
Il parametro finale,perlinOffset, è la matrice di punti da utilizzare per compensare il rumore in ogni ottava dell'effetto.
La linea finale - photo.filters = [dmf]; - applica il filtro del dislocamento, con il rumore Perlin, all'immagine nell'istanza fotografica.
Salva il film e testalo.
In questo tutorial per principianti ti ho illustrato l'uso di ActionScript per creare l'acqua increspata in una fontana a Parigi. Come puoi vedere, non c'era molto di quel codice e gran parte di esso era abbastanza semplice.
Ciò che è veramente importante per te, quando inizi ad esplorare ActionScript e Flash, è capire chiaramente che la maggior parte dei valori di codice sono numeri o valori booleani. Quello che devi fare è non aver paura di giocare ai giochi "What if ...". Questi sono i giochi in cui ti chiedi "E se avessi cambiato questo numero, cosa sarebbe successo?" In effetti, sentiti libero di giocare con tutti i numeri in DisplacemantmapFilter e perlinNoise (). È possibile ottenere alcuni affascinanti affascinanti che vanno dall'oooze di un pozzo di catrame all'acqua, come se ci fosse un terremoto in corso.
Divertirsi un po!
Accentsconagua