Share
Trebuie să recunoașteți că, atunci când utilizați un produs numit Flash, există o tendință de a deveni sclipitor și exagerat. Lucrul este adevărata artă a designerului Flash nu constă în producerea de copleșitoare prezentări sau efecte în fața dumneavoastră. Adevărata artă constă în apelarea înapoi a Meterului Flashiness și realizarea acestuia arta subtilitatii Este important. Nu bliț.
Ceea ce ne aduce la subiectul acestui tutorial la nivel de începător ... făcând apă.
Înainte să mergem, să fim perfect clar între ei. Există câteva duzini de moduri de a face ceea ce voi vorbi în acest tutorial. De fapt, mă aștept complet să văd caseta de comentarii la sfârșitul acestei piese devenită populată cu un număr de posturi care îmi spuneau, în esență, Nu așa am vrut să fac. Cel mai probabil nu este și nu am nici o problemă cu asta și mă aștept. De fapt, acest tutorial se bazează pe un exemplu Lee Brimelow, un evanghelist Flash Platform pentru Adobe mi-a arătat mai întâi acum câțiva ani.
Lee și cu mine împărtășim ambele perspective remarcabil de asemănătoare atunci când vine vorba de a lucra cu ActionScript. În loc să priviți la un panou Acțiuni goale, amândoi considerăm că este important ca, ca începător, să luați un eșantion de cod (la fel cum oferim aici) și să începeți să jucați cu el. În acest fel veți afla ce lucruri fac multe lucruri. Cercetătorii numesc acest proces, "schele", care este un termen fantezist pentru a învăța o abilitate de bază și pentru a-ți construi cunoștințele.
Așa cum am spus, este un tutorial de nivel începător conceput pentru a demonstra unele acțiuni foarte interesante care folosesc hărțile Displacement, filtrele și Perlin Noise pentru a crea valuri de apă. Scopul acestui exercițiu, de fapt, este de a prezenta un cod altfel complex și de a vă arăta unde vă puteți distra cu asta. Când codul începe să devină distractiv, ești pe drumul spre gloria plină de OOP. De fapt, asociatul meu de la Activetuts +, Cadin Batrack face asta cu multe dintre tehnicile prezentate aici în tutorialul său Crearea unui efect de distorsiune statică Utilizând filtrul hărții de deplasare.
Acum, când ne înțelegem, să ne lăsăm subtili și să facem niște valuri.
Imaginea pe care o vom folosi este o lovitură pe care am luat-o Fântâna Medici în Jardin du Luxembourg din Paris, Franța. Planul este de a pune bazinul de apă în mișcare folosind Flash.
De ce avem nevoie de un plan de atac? Blițul nu face valuri de apă. În această abordare specială, pur și simplu nu puteți selecta zona de apă utilizând un instrument de selecție în Flash și, folosind ActionScript, spuneți, Jiggle această selecție în jurul.
Pentru Flash la jiggle o selecție în jurul valorii trebuie să lipiți imaginea într-un obiect BitMapData, să schimbați pixelii în obiectul în cauză utilizând DisplacementMapFilter și apoi să aplicați un anumit zgomot Perlin în filtru pentru a crea valuri. Înainte de a face acest lucru trebuie să faceți o excursie la Photoshop sau la focuri de artificii.
Acest lucru se poate face fie în Fireworks, fie în Photoshop. Cheia este de a duplica imaginea și de a masca sau scoate apa din stratul de mascare. Salvați fișierul ca imagine .png sau .psd și renunțați. După cum probabil ați presupus fundul, stratul demascat, este esențial pentru succesul acestui proiect.
Creați un nou document Flash ActionScript 3. Adăugați două noi straturi numite "Mască" și "acțiuni". Redenumiți layerul 1 la "Imagine" și blocați stratul "acțiuni". În acest moment am de gând să fac un pic de o ramură, deoarece importul Photoshop și Fireworks imagini în Flash sunt două tehnici separate.
Când se deschide caseta de dialog Import, selectați stratul Fountain și selectați Creare clip video pentru acest strat. Nu vă faceți griji cu numele de instanță pe care îl vom face odată ce straturile au intrat în scenă. Când fișierele importate veți vedea că stratul de mască este un bitmap, iar stratul Fountain este acum un movieclip.
Atunci când se deschide caseta de dialog Import, asigurați-vă că nu este selectată Bitmap-ul de tip Import as Flattened.
Focurile de artificii importă un .png care nu este altceva decât un substituent. Dacă deschideți dosarul Obiecte Firework veți vedea că documentul se află în propriul dosar - de obicei, "Page One" - deoarece Fireworks vă permite să aveți mai multe pagini într-un singur document. Dacă deschideți directorul respectiv, veți vedea cele două fișiere bitmaps și un videoclip. Deschideți movieclip și configurați straturile folosind instrucțiunile de la Pasul 3. Conversia stratului Fountain într-un movieclip.
Selectați movieclip Fountain de pe cronologie și dați-i numele instanței "photo". Blocați toate cele trei straturi și salvați fișierul.
Codul pe care urmează să-l scriu este destul de simplu. Așa cum am spus mai devreme, nu puteți să-i spuneți lui Flash să facă o selecție și să-l jigglească. În cazul acestui cod vom jiggula pixelii din movieclipul fântânii. Acest lucru vă cere să:
Dacă sunteți subtil, jigglingul arată mai degrabă ca apă curgătoare decât un tsunami sau o groapă de gudron ...
Să începem:
Introduceți următorul cod:
var bmd: BitmapData = BitmapData nouă (800.535); var dmf: DisplacementMapFilter = DisplacementMapFilter nou (bmd, punct nou (0,0), 0,2,10,60);
Începem prin crearea unui obiect BitmapData care se potrivește cu dimensiunea imaginii care trebuie manipulată. Amintiți-vă, Flash nu este exact cea mai strălucitoare lumânare a copacului. Trebuie să i se spună ce să facă. În acest caz îi spui să creeze o colecție de pixeli care se potrivesc cu dimensiunile imaginii și să le lipi într-un obiect numit "bmd".
Acum că are acest lucru "bmd" trebuie să i se spună ce să facă cu pixelii din obiect. Următoarea linie face exact asta.
DisplacementMapFilter utilizează valorile în nuanțe de gri ale unui canal RGB, inclusiv alfa, și le utilizează pentru a distorsiona o imagine (în acest caz o grămadă de pixeli Bitmapdata), pe baza valorilor lansate din parametrii filtrului. Parametrii sunt după cum urmează:
Există alți trei parametri pe care îi puteți adăuga, dar nu sunt necesari aici. Sunt:
Creați variabilele care vor fi utilizate pentru crearea efectului de rupere:
var pt1: Punct = punct nou (0,0); var pt2: Punct = punct nou (0,0); var perlinOffset: Array = [pt1, pt2];
addEventListener (Event.ENTER_FRAME, loopIt);
Avem nevoie de asta pentru a face jiggle de apă. Acest lucru se întâmplă datorită filtrului Displație care modifică valorile din parametrul Point () la aceeași rată cu filmul. În cazul meu, rata cadrelor este setată la 30 fps ceea ce înseamnă că valorile se vor schimba de 30 de ori pe secundă.
Scrieți funcția loopIt:
funcția loopIt (evt: Eveniment): void perlinOffset [0] .x + = 0.5; perlinOffset [1] .y + = 0,1; bmd.perlinNoise (400,5,3,2, fals, fals, 2, adevărat, perlinOffset); photo.filters = [dmf]; ;
Primele două linii stabilesc valorile utilizate de Punct() parametru în DisplacementMapFilter, deoarece capul de joc joacă creșterile valorilor x și y. Valorile pe care le-am ales au fost rezultatul unei multitudini de teste până când am obținut efectul dorit.
A treia linie aplică metoda perlinNoise la obiectul bitmap creat în linia 1 a codului. Să trecem prin parametrii:
Primele două numere sunt BaseX și Basey valorile - 400, 5 - care determină frecvența zgomotului pe axele x și y. Cu cât este mai mic numărul, cu atât mai mult va fi zgomotul. Ca regulă generală, numărul baseX poate fi setat pentru a se potrivi cu lățimea imaginii. Am gasit 800 pentru a fi un pic mai mult, asa ca am numit pana la 400. Diferenta in detaliu a fost neglijabila.
Al treilea număr, 3, este numOctave parametru. Cu cât este mai mare numărul, cu atât mai mult va fi zgomotul aleatoriu. Dezavantajul este o lovitură a puterii de procesare și o posibilă scădere a vitezei în efect. Acest lucru nu a fost destinat pentru web, astfel încât 3 pare să funcționeze foarte bine. Folosind o valoare de 1 într-adevăr nu a muta pixelii atât de mult. Următorul număr, 2, este randomSeed parametru.
Cele două valori booleene sunt: coase și fractalNoise parametrii. O adevărată valoare pentru cusătură netezește marginile oricărei plăci care ar putea apărea - nu este necesară aici. Valoarea fractalNoise determină dacă zgomotul va fi zgomotul fractal (adevărat) sau turbulența (falsă). Valoarea falsă - turbulența - este potrivită pentru efecte de apă cum ar fi bule sau foc.
Următoarea valoare, 2, este channelOptions parametru. Această valoare determină în care dintre cele patru canale de culoare se va aplica zgomotul.
Valoarea booleană, falsă, este nuanțe de gri parametru. Dacă am folosit fals, canalul de culoare specificat în parametrul channelOptions ar fi folosit pentru a genera zgomotul. Folosind True tells Flash că vreau să folosesc tonurile de gri .
Parametrul final,perlinOffset, este matricea punctelor care urmează să fie utilizate pentru a compensa zgomotul în fiecare octavă a efectului.
Linia finală - photo.filters = [dmf]; - aplică filtrul de deplasare, cu Perlin Noise, la imaginea din instanța fotografiei.
Salvați filmul și testați-l.
În acest tutorial la nivel de începător te-am urmărit prin folosirea ActionScript pentru a crea apă risipitoare într-o fântână din Paris. După cum puteți vedea, nu a fost vorba despre atât de mult cod implicat și o mare parte din acesta a fost destul de necomplicat.
Ceea ce este cu adevărat important pentru dvs., pe măsură ce începeți să explorați ActionScript și Flash, este să înțelegeți în mod clar că majoritatea valorilor codului sunt fie numere, fie valori booleene. Ce trebuie să faceți este să nu vă temeți să jucați jocuri "Ce se întâmplă dacă ...". Acestea sunt jocurile în care vă întrebați: "Dacă am schimba acest număr, ce s-ar întâmpla?" De fapt, nu ezitați să jucați cu toate numerele din DisplacemantmapFilter și perlinNoise (). Puteți obține niște efecte destul de fascinante, variind de la oooze de la o groapă de gudron la apă, arătând ca un cutremur în curs de desfășurare.
Te distrezi!
Accentsconagua