Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima dată în urmă cu un an în ianuarie 2010.
În acest tutorial veți învăța cum să utilizați clasa DisplacementMapFilter a AS3 pentru a crea un efect de distorsiune statică reutilizabil pentru răsturnarea butoanelor.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
O hartă de deplasare funcționează utilizând valorile de culoare dintr-o singură imagine pentru a modifica poziția pixelilor dintr-o altă imagine. Acest efect este adesea folosit pentru a face o "înfășurare" grafică în jurul unei imagini dimensionale. O vom folosi aici pentru a distorsiona un buton, astfel încât se pare că primește interferențe statice.
Puteți citi mai multe despre cartografierea deplasării aici.
Creați un nou fișier Flash (ActionScript 3).
Setările filmului dvs. vor varia în funcție de joc. Pentru acest demo îmi înființez filmul ca 500x300, fundal negru și 30 fps.
Creați un nou simbol Buton pe scenă (Insert> New Symbol). Proiectați cele 4 stări pentru butonul dvs. Designul exact ar trebui să fie ceva care să corespundă jocului tău. Ceva strălucitor și semi-transparent funcționează bine cu acest efect.
Am folosit un font numit Genetrix Square pentru a mea, dar ar trebui să folosiți ceva care se potrivește cu aspectul jocului dvs..
Dă butonul dvs. un nume de instanță al "button1".
Dacă salvezi și testezi filmul (Control> Test Movie), acum ar trebui să vezi butonul de pe scenă răspunzând mouse-ului cu stările de răsturnare pe care le-ai proiectat. Asa:
Trebuie să adăugăm funcția personalizată butonului nostru. Vom realiza acest lucru prin crearea unei noi clase personalizate și punerea butonului nostru simplu în interiorul acestuia.
Creați un nou fișier ActionScript numit "JitteryButton.as". Salvați acest fișier în același director ca fișierul dvs. principal Flash. Adăugați acest cod pentru a crea ambalajul pentru butonul nostru:
pachet import flash.display.Sprite; import flash.display.SimpleButton; clasa publică JitteryButton extinde Sprite private var myButton: SimpleButton; // deține referința la butonul nostru simplu // CLASS CONSTRUCTOR funcția publică JitteryButton (buton: SimpleButton) myButton = buton; // introduceți butonul de pe scenă
Tot acest cod face până acum acceptarea butonului simplu și a stoca o referință la el. Vom adăuga mai multe funcții mai târziu.
Creați un nou fișier ActionScript numit "Game.as". Aceasta va fi clasa de document pentru filmul nostru. Salvați-l în același director ca fișierul principal Flash.
Acest cod va adăuga butonul nostru personalizat în jurul butonului de pe scenă:
pachet import flash.display.MovieClip; jocul public de clasă extinde MovieClip private var startButton: JitteryButton; // Funcția publică CLASS CONSTRUCTOR Joc () // crea butonul de jittery de la butonul simplu de pe scena startButton = nou JitteryButton (butonul1); // adăugați butonul nou pe scena addChild (startButton);
Acest cod creează o nouă instanță a clasei personalizate JitteryButton și o transmite prin butonul de pe scenă ('button1').
Desigur, clasa dvs. de documente va ajunge mult mai diferită, deoarece va avea codul pentru jocul dvs. în ea. Aici suntem preocupați de codul butonului nostru.
Înapoi în fișierul dvs. Flash setați clasa de documente la "Joc". Rețineți că nu includeți extensia de fișier aici.
Dacă salvați și testați din nou filmul în acest moment, ar trebui să vedeți exact același lucru ca atunci când am testat la pasul 4. Singura diferență este că acum codul nostru este setat pentru a putea adăuga comportamentul personalizat.
Acum vom crea imaginea modelului static pe care îl vom folosi pentru a denatura graficul butonului.
Deschideți Photoshop și creați o imagine nouă plină cu gri neutru (# 808080). Imaginea ar trebui să fie ușor mai mare decât butonul dvs. și aproximativ 3 sau 4 ori mai mare. Butonul meu este de 277x56, iar imaginea mea este 310x220.
Începem cu un gri neutru, deoarece nu ne va afecta imaginea.
Acum vom adăuga un pic de zgomot imaginii noastre. Acest lucru nu va fi foarte vizibil în efectul nostru static, dar îi dă un pic mai mult strălucire. Puteți sări peste acest pas dacă doriți.
Duplicați stratul de fundal și denumiți noul strat "Zgomot". Acum ar trebui să aveți 2 straturi umplute cu gri neutru. Selectați noul strat de zgomot și alegeți Filtrare> Zgomot> Adăugare zgomot. A stabilit Cantitate la 120% și distribuire la uniformă. Verifica monocromatic.
Apăsați OK.
Setați stratul "Zgomot" la 10% opacitate.
Creați un nou strat numit "Linii". Acum folosiți o perie de creion 1px pentru a adăuga câteva linii orizontale negre și gri la imagine.
Amintiți-vă cum aceste linii vor influența imaginea noastră: ceva mai întunecat decât neutrul va schimba imaginea noastră într-o singură direcție și orice lucru mai ușor îl va schimba într-o altă direcție.
Alegeți Fișier> Salvare pentru Web și dispozitive și salvați imaginea ca un gif de 8 culori numit 'staticMap.gif'.
Înapoi în Flash, importați "staticMap.gif" în bibliotecă (File> Import> Import to Library?). Deschideți proprietățile de legare, verificați Exportați pentru ActionScript, și setați numele clasei la "StaticMap".
Acum putem face referire la această imagine în codul nostru folosind numele de clasă StaticMap.
Adăugați această funcție la clasa JitteryButton:
// a crea filtrul hărții deplasării funcția privată createDMFilter (): DisplacementMapFilter var mapBitmap: BitmapData = StaticMap nou (0,0); // utilizați datele bitmap din imaginea StaticMap var mapPoint: Point = new Point (0, 0); // poziția imaginii StaticMap în legătură cu butonul nostru var canale: uint = BitmapDataChannel.RED; // ce culoare trebuie folosită pentru deplasare var componentX: uint = canale; var componentY: uint = canale; var scaleX: număr = 5; // cantitatea de schimbare orizontală var scaleY: Number = 1; // cantitatea de variație verticală a modului var: String = DisplacementMapFilterMode.COLOR; var culoare: uint = 0; var alfa: Număr = 0; returnează noul DisplacementMapFilter (mapBitmap, mapPoint, componentX, componentY, scaleX, scaleY, mode, color, alpha);
Această funcție creează pur și simplu Filtrul hărții de deplasare folosind BitmapData din imaginea noastră StaticMap. Acest lucru nu trebuie să fie în propria sa funcție, ci doar pentru claritate.
Pentru ca aceasta să funcționeze, va trebui să importăm aceste clase în partea de sus a clasei noastre JitteryButton:
import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.filters.DisplacementMapFilter; import flash.filters.DisplacementMapFilterMode; import flash.geom.Point;
(Puteți afla mai multe despre clasa DisplacementMapFilter în documentația AS3)
Acum vom crea o variabilă pentru a ține filtrul. Aplicăm acest buton setând proprietatea "filtre" a butonului într-o matrice care conține filtrul nostru.
Iată clasa JitteryButton până acum (liniile 18 și 25 sunt noi):
pachet import flash.display.Sprite; import flash.display.SimpleButton; import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.filters.DisplacementMapFilter; import flash.filters.DisplacementMapFilterMode; import flash.geom.Point; import caurina.transitions.Tweener; clasa publică JitteryButton extinde Sprite private var myButton: SimpleButton; // crea o variabilă care să țină filtrul hărții de deplasare privat var dmFilter: DisplacementMapFilter = createDMFilter (); // CLASS CONSTRUCTOR funcția publică JitteryButton (buton: SimpleButton) myButton = buton; // aplicați filtrul pe butonul myButton.filters = array nou (dmFilter); // a crea filtrul hărții de deplasare funcția privată createDMFilter (): DisplacementMapFilter var mapBitmap: BitmapData = nou StaticMap (0,0); // utilizați datele bitmap din imaginea StaticMap var mapPoint: Point = new Point (0, 0); // aceasta este poziția imaginii StaticMap în legătură cu butonul nostru var canale: uint = BitmapDataChannel.RED; // ce culoare trebuie folosită pentru deplasare var componentX: uint = canale; var componentY: uint = canale; var scaleX: număr = 5; // cantitatea de schimbare orizontală var scaleY: Number = 1; // cantitatea de variație verticală a modului var: String = DisplacementMapFilterMode.COLOR; var culoare: uint = 0; var alfa: Număr = 0; returnează noul DisplacementMapFilter (mapBitmap, mapPoint, componentX, componentY, scaleX, scaleY, mode, color, alpha);
Dacă salvăm și testează fișierul acum, putem vedea filtrul hărții de deplasare aplicat butonului nostru:
Puteți vedea modul în care liniile orizontale pe care le-am atras în StaticMap schimbă pixelii în butonul din stânga și din dreapta. Cantitatea de schimbare depinde de întunericul liniilor din imagine și de setarea scaleX din filtrul Cartă de Deplasare.
Din nefericire, staticul nu este animat, așa că arată destul de lame. Să rezolvăm asta acum?
Aceasta este o funcție simplă care returnează un întreg aleator într-un interval specificat:
// returnează un număr aleator între intervalul specificat (inclusiv) funcția privată randRange (min: int, max: int): int var randomNum: int = Math.floor (Math.random () ) + min; return randomNum;
Consider că este ușor să generăm valori aleatorii. Vom randomiza câteva valori diferite pentru efectul nostru static, astfel încât acesta va fi util.
Adăugați-o la clasa dvs. JitteryButton.
Există câteva moduri în care putem anima efectul static. Primul va fi acela de a modifica valoarea deplasării orizontale aplicată butonului nostru. Aceasta se face prin proprietatea scaleX a DisplacementMapFilter.
De asemenea, putem anima poziția imaginii StaticMap în legătură cu butonul nostru. Acest lucru va asigura că aceleași zone ale butonului nu sunt întotdeauna schimbate.
Pentru a anima efectul vom adăuga o funcție numită "displayStatic" care se numește fiecare cadru pentru a actualiza aceste două proprietăți ale filtrului. Adăugați această funcție la clasa JitteryButton:
// a apelat la funcția privată ENTER_FRAME displayStatic (e: Event): void dmFilter.scaleX = randRange (fuzzMin, fuzzMax); dmFilter.mapPoint = punct nou (0, randRange (0, -160)); myButton.filters = Array nou (dmFilter);
Prima linie a acestei funcții aleatoare amortizează valoarea deplasării orizontale la o valoare între variabilele fuzzMin și fuzzMax. Adăugați aceste două variabile la clasa JitteryButton:
privat var fuzzMin: int = 0; privat var fuzzMax: int = 2;
A doua linie a funcției displayStatic aleatoarează poziția Y a StaticMap în raport cu butonul nostru. Am spus deja filtrului să utilizeze imaginea noastră StaticMap, așa că trebuie doar să actualizăm poziția.
A treia linie reaplică filtrul pe butonul nostru.
Ultimul lucru pe care trebuie să-l facem pentru a obține această animație este să adăugați ascultătorul evenimentului ENTER_FRAME. Adăugați această linie la funcția constructorului JitteryButton:
// începe afișarea efectului static addEventListener (Event.ENTER_FRAME, displayStatic);
Și nu uitați să importați clasa Event în partea de sus a fișierului JitteryButton:
importul flash.events.Event;
Dacă salvezi și testezi filmul acum, vei vedea că efectul face ca butonul să strălucească și să sară:
Este foarte cool, dar vrem ca efectul să reacționeze și la mouse. mai departe?
Vom adăuga acum două funcții pentru a regla intensitatea efectului de bruiaj. Vom numi efectul în care avem în prezent intensitate scăzută, astfel încât să adăugăm o setare pentru intensitate medie și mare. Adăugați aceste funcții la clasa JitteryButton:
// crește intensitatea funcției private statice la MEDIU setStaticMedium (e: MouseEvent = null): void fuzzMin = 2; fuzzMax = 6; staticLength = randRange (8, 12); // crește intensitatea funcției private statice la HIGH setStaticHigh (e: MouseEvent = null): void fuzzMin = 12; fuzzMax = 25; staticLength = 12;
Puteți observa că ajustăm intensitatea prin setarea valorilor variabilelor fuzzMin și fuzzMax. În acest fel, funcția displayStatic va folosi aceste valori noi atunci când stabilește schimbarea orizontală a filtrului.
Am adăugat, de asemenea, o variabilă numită staticLength. Vom folosi acest lucru pentru a stabili cât timp va dura ultimul efect (numărul de cadre) înainte de a reveni la intensitate scăzută. Adăugați această variabilă la clasa JitteryButton și modificați funcția displayStatic astfel:
private var staticLength: int; // a apelat la funcția privată ENTER_FRAME displayStatic (e: Event): void dmFilter.scaleX = randRange (fuzzMin, fuzzMax); dmFilter.mapPoint = punct nou (0, randRange (0, -160)); myButton.filters = Array nou (dmFilter); staticLength--; în cazul în care (staticLength <= 0) fuzzMin = 0; fuzzMax = 2;
Acest nou cod scade variabila staticLength și resetează fuzzMin și fuzzMax la valorile de intensitate scăzută odată ce valoarea staticLength ajunge la zero.
Pentru a reacționa pe butonul nostru la mouse, trebuie să adăugăm două ascultători de evenimente pentru mouse și o funcție de manipulare a evenimentelor pentru fiecare.
Adăugați ascultătorii mouse-ului în funcția constructor a clasei dvs. JitteryButton:
// adăugați ascultătorii evenimentului rollover la butonul myButton.addEventListener (MouseEvent.ROLL_OVER, onButtonRollOver); myButton.addEventListener (MouseEvent.ROLL_OUT, onButtonRollOut);
Acum, creați cei doi agenți de procesare a evenimentelor care sunt menționați în cele două linii noi. Acestea merg, de asemenea, în clasa JitteryButton:
// apelat pe butonul ROLL_OVER funcția privată onButtonRollOver (e: MouseEvent): void setStaticHigh (); // apelat pe butonul ROLL_OUT funcția privată onButtonRollOut (e: MouseEvent): void setStaticMedium ();
Pentru a face acest lucru, trebuie să importați clasa MouseEvent în partea de sus a fișierului nostru JitteryButton:
importul flash.events.MouseEvent;
Acum, când butonul nostru detectează un eveniment ROLL_OVER, acesta va apela dispozitivul de tratare a evenimentului, care la rândul său numește funcția setStaticHigh. Această funcție crește valorile fuzzMin și fuzzMax (utilizate pentru setarea deplasării orizontale) pe durata specificată de variabila staticLength.
Ne-am putea opri aici. Efectul nostru este animat frumos și reacționează la răsturnarea mouse-ului. Încă mai cred că ceva lipsește aici. Să adăugăm un mic efect de scalare.
Va trebui să descărcați Biblioteca Tweener pentru acest pas, dacă nu îl aveți deja. Plasați directorul "caurina" în directorul dvs. de proiect și importați clasele Tweener în partea de sus a fișierului JitteryButton:
import caurina.transitions.Tweener;
Tweener ne permite să adăugăm câteva efecte de scalare frumoase, cu doar câteva linii de cod. Putem adăuga o singură linie la fiecare dintre agenții de preluare a evenimentelor noastre:
// chemați butonul ROLL_OVER funcția privată onButtonRollOver (e: MouseEvent): void Tweener.addTween (myButton, scaleX: 1.1, timp: .5, tranziție: "easeOutElastic"); setStaticHigh (); // chemați butonul ROLL_OOUT funcția privată onButtonRollOut (e: MouseEvent): void Tweener.addTween (myButton, scaleX: 1, timp: .5, tranziție: "easeOutElastic"); setStaticMedium ();
Aici adăugăm o animație rollerului care mărește proprietatea scaleX a butonului la 110% peste 0,5 secunde. Folosim un tip de tranziție elastic pentru a da acelei senzații de bouncy. În dispozitivul de lansare facem același lucru în sens invers, redimensionându-l înapoi la 100%.
Puteți afla mai multe despre cum să utilizați Tweener în documentația Tweener.
Ultimul lucru pe care trebuie să-l facem să realizăm acest efect este să adăugăm un sunet. Mi-am facut efectul de sunet in Garage Band. Puteți face propriile dvs. sau încercați să găsiți unul online.
Odată ce aveți unul care vă place, importați-l în bibliotecă și setați link-ul de export ca "StaticSound".
Pentru a le adăuga în JitteryButton, trebuie să imită mai întâi clasa de sunet:
import flash.media.Sound;
Apoi îl vom inițializa (adăugați această linie chiar înainte de funcția constructorului):
private var staticSound: Sunet = StaticSound nou ();
În interiorul robotului de răsturnare îi vom spune să sune:
// chemați butonul ROLL_OVER funcția privată onButtonRollOver (e: MouseEvent): void Tweener.addTween (myButton, scaleX: 1.1, timp: .5, tranziție: "easeOutElastic"); setStaticHigh (); staticSound.play ();
Acum suntem bine să plecăm. Testați-vă filmul și totul ar trebui să funcționeze. Dacă butonul sau sunetul nu funcționează corect, verificați fișierele sursă pentru a vedea clasa mea completă JitteryButton.
Lucrul cool de a construi acest efect ca o clasă separată care împachetează butonul nostru este că îl putem reuși să îl reutilizăm cu ușurință pe alte butoane.
Dacă doriți să adăugați mai multe butoane în meniul jocului, creați un buton nou și adăugați-l pe scenă. Dați-i numele instanței "button2". Apoi, în interiorul clasei de documente (fișierul "Game.as") creați un nou JitteryButton și treceți-l cu noul buton. Iată cum ar putea părea acest lucru:
pachet import flash.display.MovieClip; jocul public de clasă extinde MovieClip private var startButton: JitteryButton; privat var menuButton: JitteryButton; // Funcția publică CLASS CONSTRUCTOR Joc () // crea butoanele de jittery de la butoanele simple de pe scena startButton = nou JitteryButton (buton1); addChild (startButton); // adăugarea unui nou buton este ușoară! menuButton = nou buton Jittery (buton2); addChild (menuButton);
Veți avea nevoie aproape sigur de a schimba acest cod un pic pentru ca acesta să se încadreze în structura jocului dvs. Sperăm că acest tutorial vă va oferi un bun punct de pornire.
Dacă doriți să modificați aspectul acestui efect, puteți încerca să utilizați diferite tipuri de imagini pentru grafica StaticMap și să ajustați valorile pentru fuzzMin și fuzzMax.
Acesta este primul meu tutorial, așa că dați-mi voie să știu dacă este ceva ce pot face mai bine data viitoare. Vă mulțumim pentru lectură!
Accentsconagua