Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert for et år siden i januar 2010.
I denne opplæringen lærer du hvordan du bruker AS3s DisplacementMapFilter-klasse for å lage en gjenbrukbar statisk forvrengningseffekt for knappopprulling.
La oss se på det endelige resultatet vi vil jobbe for:
Et forskyvningskart fungerer ved å bruke fargeværdiene fra ett bilde for å endre plasseringen av piksler i et annet bilde. Denne effekten brukes ofte til å lage en flat grafisk "wrap" rundt et dimensjonalt bilde. Vi skal bruke den her for å forvride en knapp, slik at det ser ut som det mottar statisk forstyrrelse.
Du kan lese mer om forskyvningskartlegging her.
Opprett en ny Flash-fil (ActionScript 3).
Filminnstillingene dine varierer avhengig av spillet ditt. For denne demonstrasjonen setter jeg opp min film som 500x300, svart bakgrunn og 30 fps.
Opprett et nytt knappesymbol på scenen (Sett inn> Nytt symbol). Design de 4 statene for knappen din. Den nøyaktige utformingen skal være noe som samsvarer med spillet ditt. Noe glødende og halvtransparent fungerer bra med denne effekten.
Jeg brukte en font som heter Genetrix Square for mine, men du bør bruke noe som samsvarer med utseendet på spillet ditt.
Gi din knapp et eksempelnavn på 'button1'.
Hvis du lagrer og tester filmen din (Kontroll> Testfilm), bør du nå se knappen på scenen som svarer på musen med overgangsstatene du har designet. Som dette:
Vi må legge til tilpasset funksjonalitet til vår knapp. Vi oppnår dette ved å opprette en ny tilpasset klasse og sette vår enkle knapp inne i den.
Opprett en ny ActionScript-fil med navnet "JitteryButton.as". Lagre denne filen i samme katalog som din viktigste Flash-fil. Legg til denne koden for å lage wrapper for vår knapp:
pakke import flash.display.Sprite; importer flash.display.SimpleButton; offentlig klasse JitteryButton utvider Sprite private var myButton: SimpleButton; // holder referansen til vår enkle knapp // KLASS CONSTRUCTOR offentlig funksjon JitteryButton (knapp: SimpleButton) myButton = button; // knappen på scenen blir sendt inn
Alle denne koden er så langt akseptert den enkle knappen og lagrer en referanse til den. Vi legger til flere funksjoner senere.
Opprett en ny ActionScript-fil med navnet 'Game.as'. Dette blir dokumentklassen for filmen vår. Lagre det i samme katalog som hoved Flash-filen.
Denne koden vil legge til vår tilpassede knappomslag rundt knappen på scenen:
pakke import flash.display.MovieClip; offentlig klasse Spillet utvider MovieClip private var startButton: JitteryButton; // KLASSKONSTRUKTØR Offentlig funksjon Spill () // Lag jittery-knappen fra den enkle knappen på scenen startButton = Ny JitteryButton (button1); // legg til den nye knappen til scenen addChild (startButton);
Denne koden oppretter en ny forekomst av vår tilpassede JitteryButton-klasse og sender den til knappen på scenen ('button1').
Selvfølgelig vil dokumentklassen din ende opp med å se mye annerledes siden det vil ha koden for spillet ditt i den. Her er vi bare opptatt av koden for vår knapp.
Tilbake inne i Flash-filen din, sett dokumentklassen til 'Spill'. Husk at du ikke inkluderer filtypen her.
Hvis du lagrer og tester filmen igjen på dette tidspunktet, bør du se nøyaktig det samme som når vi testet i trinn 4. Den eneste forskjellen er at nå er vår kode satt opp for å kunne legge til vår tilpassede atferd.
Vi lager nå bildet av det statiske mønsteret som vi vil bruke til å forvride vår knapp grafikk.
Åpne Photoshop og opprett et nytt bilde fylt med nøytralt grå (# 808080). Bildet skal være litt bredere enn knappen og ca. 3 eller 4 ganger så høyt. Min knapp er 277x56, og bildet mitt er 310x220.
Vi starter med et nøytralt grått fordi det ikke vil påvirke bildet vårt.
Vi legger nå litt støy til bildet vårt. Dette vil ikke være veldig merkbart i vår statiske effekt, men det gir det litt ekstra glans. Du kan hoppe over dette trinnet hvis du vil.
Dupliser bakgrunnslaget og navnet på det nye laget "Støy". Du bør nå ha 2 lag fylt med nøytralt grå. Velg det nye støynivået og velg Filter> Støy> Legg til støy. Sett Beløp til 120% og Fordeling til enhetlig. Kryss av monokromatisk.
Hit OK.
Sett "Noise" -laget til 10% opacity.
Opprett et nytt lag kalt "linjer". Bruk nå en 1px blyantbørste til å legge til noen horisontale svarte og grå linjer på bildet.
Husk hvordan disse linjene vil påvirke bildet vårt: noe mørkere enn nøytralt vil skifte bildet vårt i en retning og noe lettere vil skifte det i den andre.
Velg Arkiv> Lagre for web og enheter og lagre bildet som et 8-fargegif med navnet 'staticMap.gif'.
Tilbake i Flash, importer "staticMap.gif" til biblioteket ditt (Fil> Import> Importer til bibliotek?). Åpne koblingsegenskapene, sjekk Eksporter for ActionScript, og sett klassenavnet til 'StaticMap'.
Vi kan nå referere til dette bildet i vår kode ved å bruke StaticMap klassenavnet.
Legg til denne funksjonen i JitteryButton-klassen din:
// Opprett forskyvningskartfilteret privat funksjon createDMFilter (): DisplacementMapFilter var mapBitmap: BitmapData = new StaticMap (0,0); // bruk bitmapdataene fra StaticMap image var mapPoint: Point = nytt punkt (0, 0); // posisjonen til StaticMap-bildet i forhold til våre knapp varkanaler: uint = BitmapDataChannel.RED; // hvilken farge som skal brukes for forskyvning var componentX: uint = kanaler; var komponentY: uint = kanaler; var skalaX: tall = 5; // mengden av horisontal skift var skalaY: Tall = 1; // mengden av vertikal skift var modus: String = DisplacementMapFilterMode.COLOR; var farge: uint = 0; var alfa: tall = 0; returner ny DisplacementMapFilter (mapBitmap, mapPoint, komponentX, komponentY, skalaX, skalaY, modus, farge, alfa);
Denne funksjonen oppretter bare displacement map-filteret ved hjelp av BitmapData fra StaticMap-bildet. Dette trenger ikke å være i sin egen funksjon, jeg gjør det bare for klarhet.
For at den skal fungere, må vi importere disse klassene øverst i vår JitteryButton-klasse:
importer flash.display.BitmapData; importer flash.display.BitmapDataChannel; importer flash.filters.DisplacementMapFilter; importer flash.filters.DisplacementMapFilterMode; importer flash.geom.Point;
(Du kan lære mer om klassen DisplacementMapFilter i AS3-dokumentasjonen)
Vi lager nå en variabel for å holde filteret. Vi bruker den til knappen ved å sette knappens "filtre" -egenskap til en matrise som inneholder filteret vårt.
Her er JitteryButton-klassen så langt (linjene 18 og 25 er nye):
pakke import flash.display.Sprite; importer flash.display.SimpleButton; importer flash.display.BitmapData; importer flash.display.BitmapDataChannel; importer flash.filters.DisplacementMapFilter; importer flash.filters.DisplacementMapFilterMode; importer flash.geom.Point; importere caurina.transitions.Tweener; offentlig klasse JitteryButton utvider Sprite private var myButton: SimpleButton; // opprett en variabel for å holde fortjenestekartfiltret privat var dmFilter: DisplacementMapFilter = createDMFilter (); // CLASS CONSTRUCTOR offentlig funksjon JitteryButton (knapp: SimpleButton) myButton = button; // bruk filteret til knappen myButton.filters = new Array (dmFilter); // Opprett forflytningskartfilteret privat funksjon createDMFilter (): DisplacementMapFilter var mapBitmap: BitmapData = ny StaticMap (0,0); // bruk bitmapdataene fra StaticMap image var mapPoint: Point = nytt punkt (0, 0); // dette er posisjonen til StaticMap-bildet i forhold til våre knapp varkanaler: uint = BitmapDataChannel.RED; // hvilken farge som skal brukes for forskyvning var componentX: uint = kanaler; var komponentY: uint = kanaler; var skalaX: tall = 5; // mengden av horisontal skift var skalaY: Tall = 1; // mengden av vertikal skift var modus: String = DisplacementMapFilterMode.COLOR; var farge: uint = 0; var alfa: tall = 0; returner ny DisplacementMapFilter (mapBitmap, mapPoint, komponentX, komponentY, skalaX, skalaY, modus, farge, alfa);
Hvis vi lagrer og tester filen nå, kan vi se at forskyvningskartfilteret blir brukt på vår knapp:
Du kan se hvordan de horisontale linjene vi tegnet i StaticMap skifter pikslene i knappen vår til venstre og høyre. Mengden av skiftet er avhengig av mørket på linjene i bildet og skalaX-innstillingen i vårt erstatnings kartfilter.
Dessverre er det statiske ikke animert, så det ser ganske ut. La oss fikse det nå?
Dette er en enkel funksjon som returnerer et tilfeldig heltall innenfor et spesifisert område:
// returnerer et tilfeldig tall mellom det angitte området (inkluderende) privat funksjon randRange (min: int, maks: int): int var randomNum: int = Math.floor (Math.random () * (max - min + 1) ) + min; returnere randomNum;
Jeg finner det gjør det litt enklere å generere tilfeldige verdier. Vi vil randomisere noen få forskjellige verdier for vår statiske effekt, slik at den kommer til nytte.
Legg den til i JitteryButton-klassen din.
Det er et par måter vi kan animere den statiske effekten på. Den første vil være å endre mengden horisontal skift som er brukt på vår knapp. Dette gjøres gjennom egenskapen scaleX i DisplacementMapFilter.
Vi kan også animere posisjonen til StaticMap-bildet i forhold til vår knapp. Dette vil sikre at de samme områdene på knappen ikke alltid blir skiftet.
For å animere effekten legger vi til en funksjon kalt "displayStatic" som blir kalt hver ramme for å oppdatere disse to egenskapene til filteret. Legg til denne funksjonen i JitteryButton-klassen din:
// ringte på ENTER_FRAME privatfunksjonsdisplayStatic (e: Event): void dmFilter.scaleX = randRange (fuzzMin, fuzzMax); dmFilter.mapPoint = nytt punkt (0, randRange (0, -160)); myButton.filters = nytt Array (dmFilter);
Den første linjen i denne funksjonen randomiserer mengden horisontal skifting til en verdi mellom variablene fuzzMin og fuzzMax. Legg til disse to variablene i JitteryButton-klassen din:
privat var fuzzMin: int = 0; privat var fuzzMax: int = 2;
Den andre linjen i displayStatic-funksjonen randomiserer StaticMaps Y-posisjon i forhold til vår knapp. Vi har allerede fortalt at filteret skal bruke StaticMap-bildet vårt, slik at vi bare trenger å oppdatere stillingen.
Den tredje linjen gjelder bare filteret på vår knapp.
Det siste vi må gjøre for å få denne animasjonen, er å legge til ENTER_FRAME hendelseslytteren. Legg denne linjen til JitteryButton-konstruktørfunksjonen:
// begynn å vise den statiske effekten addEventListener (Event.ENTER_FRAME, displayStatic);
Og ikke glem å importere hendelsesklassen øverst i JitteryButton-filen:
importere flash.events.Event;
Hvis du lagrer og tester filmen nå, vil du se at effekten gjør vår knapp glimrende og hoppe:
Det er ganske kult, men vi vil at effekten skal reagere på musen også. Videre?
Vi legger nå to funksjoner for å justere intensiteten til jitter-effekten. Vi kaller effekten vi har for øyeblikket Lav intensitet, så vi legger til en innstilling for middels og høy intensitet. Legg til disse funksjonene i JitteryButton-klassen din:
// øke intensiteten til den statiske til MEDIUM private funksjonen setStaticMedium (e: MouseEvent = null): void fuzzMin = 2; fuzzMax = 6; staticLength = randRange (8, 12); // øke intensiteten til den statiske til HIGH private funksjon setStaticHigh (e: MouseEvent = null): void fuzzMin = 12; fuzzMax = 25; staticLength = 12;
Du kan se at vi justerer intensiteten ved å sette verdiene for fuzzMin og fuzzMax-variablene. På denne måten vil vår displayStatic-funksjon bruke disse nye verdiene når den setter det horisontale skiftet av filteret.
Vi har også lagt til en variabel kalt staticLength. Vi bruker dette til å angi hvor lenge den mer intense effekten skal vare (antall rammer) før du returnerer til lav intensitet. Legg til denne variabelen i JitteryButton-klassen din, og modifiser din displayStatic-funksjon slik:
private var staticLength: int; // ringte på ENTER_FRAME privatfunksjonsdisplayStatic (e: Event): void dmFilter.scaleX = randRange (fuzzMin, fuzzMax); dmFilter.mapPoint = nytt punkt (0, randRange (0, -160)); myButton.filters = nytt Array (dmFilter); staticLength--; if (staticLength <= 0) fuzzMin = 0; fuzzMax = 2;
Denne nye koden dekorerer staticLength-variabelen og tilbakestiller fuzzMin og fuzzMax til lavintensitetsverdiene når verdien av staticLength når null.
For å få knappen til å reagere på musen, må vi legge til to musevisehørere og en hendelseshåndteringsfunksjon for hver.
Legg til muselytterne i konstruktørfunksjonen til JitteryButton-klassen din:
// legg overløshyttelseshørerne til knappen myButton.addEventListener (MouseEvent.ROLL_OVER, onButtonRollOver); myButton.addEventListener (MouseEvent.ROLL_OUT, onButtonRollOut);
Lag nå de to hendelseshåndteringene som refereres til i de to nye linjene. Disse går også i klassen JitteryButton:
// påkalt ROLL_OVER privat funksjon påButtonRollOver (e: MouseEvent): void setStaticHigh (); // påkallet ROLL_OUT privat funksjon påButtonRollOut (e: MouseEvent): void setStaticMedium ();
For å gjøre alt dette, må vi importere MouseEvent-klassen øverst i vår JitteryButton-fil:
importer flash.events.MouseEvent;
Nå når vår knapp registrerer en ROLL_OVER-hendelse, vil den ringe hendelseshandleren som igjen kalles vår setStaticHigh-funksjon. Denne funksjonen øker verdiene for fuzzMin og fuzzMax (brukes til å sette horisontalskiftet) i den varigheten som er spesifisert av staticLength-variabelen.
Vi kunne stoppe her. Vår effekt er å animere pent og reagerer på musens overdragelser. Jeg føler fortsatt at noe mangler her skjønt. La oss legge til en liten skaleringseffekt.
Du må laste ned Tweener-biblioteket for dette trinnet hvis du ikke allerede har det. Plasser mappen 'caurina' i prosjektkatalogen og importer Tweener-klassene øverst i JitteryButton-filen:
importere caurina.transitions.Tweener;
Tweener gjør det mulig for oss å legge til noen fine skaleringseffekter med bare et par linjer med kode. Vi kan legge til en linje til hver av våre overføringsbegivenheter:
// kalt på ROLL_OVER privat funksjon påButtonRollOver (e: MouseEvent): void Tweener.addTween (myButton, scaleX: 1.1, time: .5, transition: "easeOutElastic"); setStaticHigh (); // kalt på ROLL_OOUT privat funksjon påButtonRollOut (e: MouseEvent): void Tweener.addTween (myButton, scaleX: 1, time: .5, transition: "easeOutElastic"); setStaticMedium ();
Her legger vi til en animasjon til overgangshandleren som skalerer knappens skalaX-egenskap til 110% over .5 sekunder. Vi bruker en elastisk overgangstype for å gi den den hoppende følelsen. I utrullingshåndteringen gjør vi det samme i motsatt retning, og skaler det tilbake til 100%.
Du kan lære mer om hvordan du bruker Tweener i Tweener-dokumentasjonen.
Det siste vi må gjøre, gjør denne effekten fullstendig, er å legge til litt lyd. Jeg laget min lydeffekt i Garage Band. Du kan lage din egen eller prøve å finne en online.
Når du har en du vil, kan du importere den inn i biblioteket ditt og sette koblingen til å eksportere som "StaticSound".
For å legge det til vår JitteryButton må vi først importere lydklassen:
importere flash.media.Sound;
Da vil vi initialisere den (legg til denne linjen like før konstruktørfunksjonen):
privat var staticSound: Sound = new StaticSound ();
Inne i rollover-håndteringen vil vi fortelle lyden å spille:
// kalt på ROLL_OVER privat funksjon påButtonRollOver (e: MouseEvent): void Tweener.addTween (myButton, scaleX: 1.1, time: .5, transition: "easeOutElastic"); setStaticHigh (); staticSound.play ();
Nå er vi glade for å gå. Test filmen og alt skal fungere. Hvis knappen din eller lyden ikke virker, kontroller du kildedataene for å se min fullførte JitteryButton-klasse.
Den kule tingen om å bygge denne effekten som en egen klasse som bryter vår knapp er at vi enkelt kan gjenbruke den på andre knapper.
Hvis du vil legge til flere knapper på spillmenyen, må du bare opprette en ny knapp og legge den til scenen. Gi den forekomstnavnet 'button2'. Deretter oppretter du en ny JitteryButton i dokumentkatalogen din ("Game.as" -filen) og sender den den nye knappen. Slik ser det ut:
pakke import flash.display.MovieClip; offentlig klasse Spillet utvider MovieClip private var startButton: JitteryButton; private var menyButton: JitteryButton; // KLASSKONSTRUKTØR Offentlig funksjon Spill () // Lag jittery knappene fra de enkle knappene på scenen startButton = Ny JitteryButton (button1); addChild (startknappen); // legge til en ny knapp er enkelt! meny knapp = ny JitteryButton (knapp2); addChild (menuButton);
Du må nesten sikkert endre denne koden litt for å få det til å passe inn i strukturen i spillet ditt. Forhåpentligvis vil denne opplæringen gi deg et godt utgangspunkt.
Hvis du vil endre utseendet på denne effekten, kan du prøve å bruke forskjellige typer bilder for StaticMap-grafikken, og justere verdiene for fuzzMin og fuzzMax.
Dette er min første opplæring så la meg vite om det er noe jeg kan gjøre bedre neste gang. Takk for at du leste!
Accentsconagua