Legg denne funksjonen til JitteryButton klasse:
//skape forskyvning kartet filterprivate funksjon createDMFilter (): DisplacementMapFilter {var mapBitmap: BitmapData = ny StaticMap (0,0); //Bruker bitmap data fra vår StaticMap bilde Var MapPoint: Point = new Point (0, 0); //Posisjonen til StaticMap bilde i forhold til våre knappe Var kanaler: uint = BitmapDataChannel.RED; //Hvilken farge som skal brukes til forflytning Var componentX: UINT = kanaler; Var componentY: UINT = kanaler; Var scaleX: Number = 5; //Mengden av horisontale skift Var Scaley: Nummer = 1; //Mengden av vertikal forskyvning VAR-modus: String = DisplacementMapFilterMode.COLOR; Var farge: uint = 0; Var alfa: Antall = 0; returnere ny DisplacementMapFilter (mapBitmap, MapPoint, componentX, componentY, scaleX, Scaley, modus, farge, alfa);}

Denne funksjonen lager rett og slett den Displacement Map Filter bruker BitmapData fra vår StaticMap bilde. Dette trenger ikke å være i sin egen funksjon, jeg bare gjør det for klarhet

For at det skal fungere vi må importere disse klassene på toppen av vår JitteryButton klasse.
import flash.display.BitmapData, import flash.display.BitmapDataChannel, importere flash.filters.DisplacementMapFilter, importere flash.filters.DisplacementMapFilterMode, import flash.geom.Point;

(Du kan lære mer om DisplacementMapFilter klasse i AS3 dokumentasjon)

Vi vil nå opprette en variabel for å holde filteret. Vi bruker det til knappen ved å sette på knappen 's' filtre 'eiendom til en matrise som inneholder vår filter

Her er JitteryButton klassen så langt (linje 18 og 25 er nye).
Pakke {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; public class JitteryButton strekker Sprite {private Var MyButton: Simple; //Oppretter en variabel for å holde forskyvning kartet filter privat Var dmFilter: DisplacementMapFilter = createDMFilter (); //Klassen konstruktør offentlig funksjon JitteryButton (knapp: Simple) {MyButton = knappen; //Bruke filteret til knappe myButton.filters = new Array (dmFilter); } //Skape forskyvning kartet filter privat funksjon createDMFilter (): DisplacementMapFilter {var mapBitmap: BitmapData = new StaticMap (0,0); //Bruker bitmap data fra vår StaticMap bilde Var MapPoint: Point = new Point (0, 0); //Dette er plasseringen av StaticMap bilde i forhold til våre knappe Var kanaler: uint = BitmapDataChannel.RED; //Hvilken farge som skal brukes til forflytning Var componentX: UINT = kanaler; Var componentY: UINT = kanaler; Var scaleX: Number = 5; //Mengden av horisontale skift Var Scaley: Nummer = 1; //Mengden av vertikal forskyvning VAR-modus: String = DisplacementMapFilterMode.COLOR; Var farge: uint = 0; Var alfa: Antall = 0; returnere ny DisplacementMapFilter (mapBitmap, MapPoint, componentX, componentY, scaleX, Scaley, modus, farge, alfa); }}}

Hvis vi lagre og teste filen nå kan vi se forskyvning kartet filteret blir brukt til vår knapp:

Du kan se hvordan de horisontale linjene vi trakk i StaticMap er skiftende pikslene i vår knappen til venstre og høyre. Mengden av skiftet er avhengig av mørke linjene i bildet og scaleX innstillingen i vår Displacement Map Filter.

Dessverre er det statiske ikke animere så det ser ganske halt. La oss fikse det nå ...

Dette er en enkel funksjon som returnerer et tilfeldig heltall innenfor et angitt område:
//returnerer et tilfeldig tall mellom spesifiserte området (inkludert) privat funksjon randRange (min: int, max: int): int {var randomNum: int = Math.floor (Math.random () * (max - min + 1)) + min; tilbake randomNum; }

Jeg synes det gjør det litt enklere å generere tilfeldige verdier. Vi kommer til å randomisering noen forskjellige verdier for våre statisk effekt, så det vil komme godt

Legg den til JitteryButton klasse

det er et par måter vi kan animere statisk effekt. Den første vil være å endre mengden av horisontale skift anvendes til vår knapp. Dette gjøres gjennom scaleX eiendommen av DisplacementMapFilter.

Vi kan også animere posisjonen til StaticMap bilde i forhold til vår knapp. Dette vil sikre at de samme områdene av knappen er ikke alltid å bli flyttet.

For å animere effekten vil vi legge til en funksjon som heter "displayStatic" som blir kalt hver ramme for å oppdatere disse to egenskapene til filteret . Legg denne funksjonen til JitteryButton klasse:
//oppfordret ENTER_FRAMEprivate funksjon displayStatic (e: Hendelses): void {dmFilter.scaleX = randRange (fuzzMin, fuzzMax); dmFilter.mapPoint = ny Point (0, randRange (0, -160)); myButton.filters = new Array (dmFilter);}

Den første linjen i denne funksjonen randomiserer mengden horisontal forskyvning til en verdi mellom variablene fuzzMin og fuzzMax. Legg disse to variablene til JitteryButton Klasse:
privat Var fuzzMin: int = 0; privat Var fuzzMax: int = 2;

Den andre linjen på displayStatic funksjon randomiserer Y posisjon StaticMap i forhold til vår knapp. Vi har allerede fortalt at filteret skal bruke vår StaticMap bilde slik at vi bare trenger å oppdatere posisjonen.

Den tredje linjen bare re-bruker filteret vårt knappen.

Det siste vi trenger å gjøre for å få dette animeringen er å legge til ENTER_FRAME hendelsen lytteren. Legg til denne linjen til JitteryButton konstruktøren funksjon:
//begynne å vise den statiske effectaddEventListener (Event.ENTER_FRAME, displayStatic);

Og ikke glem å importere hendelsesklassen på toppen av JitteryButton filen:
import flash.events.Event;

Hvis du lagrer og teste filmen nå vil du se effekten gjør vår knappen shimmer og hoppe:

det er ganske kult, men vi ønsker at effekten skal reagere på mus også. Onward ...

Vi vil nå legge to funksjoner for å justere intensiteten på jitter effekt. Vi ringer effekten vi har for tiden lav intensitet så vil vi legge til en innstilling for Medium og Høy intensitet. Legg disse funksjonene til din JitteryButton klasse:
//øke intensiteten av statisk til MEDIUMprivate funksjon setStaticMedium (e: Mouseevent = null): void {fuzzMin = 2; fuzzMax = 6; staticLength = randRange (8, 12);} //øke styrken på det statiske til HIGHprivate funksjon setStaticHigh (e: Mouseevent = null): void {fuzzMin = 12; fuzzMax = 25; staticLength = 12;}

Du kan se at vi justerer intensiteten ved å sette verdiene til fuzzMin og fuzzMax variabler. På denne måten vår displayStatic funksjonen vil bruke disse nye verdiene når den setter den horisontale forskyvning av filteret.

Vi har også lagt til en variabel kalt staticLength. Vi vil bruke dette til å angi hvor lenge mer intens effekt skal vare (antall bilder) før retur til lav intensitet. Legg denne variabelen til JitteryButton klassen og endre displayStatic funksjon slik:
privat Var staticLength: int; //oppfordret ENTER_FRAMEprivate funksjon displayStatic (e: Hendelses): void {dmFilter.scaleX = randRange (fuzzMin, fuzzMax); dmFilter.mapPoint = ny Point (0, randRange (0, -160)); myButton.filters = new Array (dmFilter); staticLength--; if (staticLength < = 0) {fuzzMin = 0; fuzzMax = 2; }}

Dette nye koden svekkelser den staticLength variabel og tilbake fuzzMin og fuzzMax til de lave intensitetsverdiene når verdien av staticLength når null

for å gjøre vårt knappen reagerer på muse vi må legge til to mus hendelsen lyttere og en hendelseshåndterer funksjon for hver

Legg musen lyttere i konstruktør-funksjonen på din JitteryButton klasse.
//legger roll hendelsen lyttere til buttonmyButton.addEventListener (MouseEvent.ROLL_OVER, onButtonRollOver), myButton.addEventListener (MouseEvent.ROLL_OUT, onButtonRollOut);

nå oppretter de to hendelseshåndterere det refereres til i de to nye linjer. Disse også gå i JitteryButton klasse:
//oppfordret knappen ROLL_OVERprivate funksjon onButtonRollOver (e: Mouseevent): void {setStaticHigh ();} //oppfordret knappen ROLL_OUTprivate funksjon onButtonRollOut (e: Mouseevent): void {setStaticMedium ( );}

for å gjøre dette alt arbeid vi må importere Mouseevent klassen på toppen av vår JitteryButton filen:
import flash.events.MouseEvent;

nå når vår knappen oppdager en ROLL_OVER hendelse det vil kalle hendelseshåndterer som igjen kaller vår setStaticHigh funksjon. Denne funksjonen øker verdiene for fuzzMin og fuzzMax (brukes for innstilling av horisontal shift) for varigheten angitt av staticLength variable

Vi kunne stopp her. Vår effekt animere pent og reagerer på muse velt. Jeg fortsatt føler at noe mangler her skjønt. La oss legge litt skalering effekt.

Du må laste ned Tweener Bibliotek for dette trinnet hvis du ikke allerede har gjort det. Plasser 'caurina-mappen i prosjektkatalogen og importere Tweener klasser på toppen av JitteryButton filen:
import caurina.transitions.Tweener;

Tweener tillater oss å legge til noen fine skaleringseffekter med bare et par linjer med kode. Vi kan legge til en linje til hver av våre roll hendelseshåndterere:
//oppfordret knappen ROLL_OVERprivate funksjon onButtonRollOver (e: Mouseevent): void {Tweener.addTween (MyButton, {scaleX: 1,1, tid: 0,5, overgang: "easeOutElastic"}); setStaticHigh ();} //oppfordret knappen ROLL_OOUTprivate funksjon onButtonRollOut (e: Mouseevent): void {Tweener.addTween (MyButton, {scaleX: 1, tid: 0,5, overgang: "easeOutElastic"}); setStaticMedium ();}

Her vi legger en animasjon til roll handler som skalerer knappens scaleX eiendom til 110% over .5 sekunder. Vi bruker en elastisk overgangstype for å gi den som bouncy preg. I utbyggingen handler vi gjør det samme i revers, skalere den tilbake til 100%.

Du kan lære mer om hvordan du bruker Tweener i Tweener dokumentasjon.

Det siste vi trenger å gjøre lage denne effekten fullstendig er å legge til noen lyd. Jeg gjorde mitt lydeffekt i Garage Band. Du kan lage din egen eller prøve å finne en online.

Når du har en du liker, importere den til biblioteket og sette sammenhengen å eksportere som "StaticSound".

For å legge den til vår JitteryButton vi må først importere Lydklasse:
importere flash.media.Sound;

Så vi vil initialisere den (legge denne linjen rett før konstruktøren funksjon):
privat Var staticSound: Sound = new StaticSound ();

Inne i roll behandleren vil vi fortelle lyden å spille:
//oppfordret knappen ROLL_OVERprivate funksjon onButtonRollOver (e: Mouseevent): void {Tweener.addTween (MyButton, {scaleX: 1.1, tid: 0,5, overgang: "easeOutElastic"}); setStaticHigh (); staticSound.play ();}

Nå er vi godt å gå. Test filmen og alt skal fungere. Hvis knappen eller lyden ikke virker sjekke kildefilene for å se min ferdig JitteryButton klasse

Den kule ting om å bygge denne effekten som en egen klasse som brytes vår knappen er at vi enkelt kan bruke den på andre knapper.

Hvis du vil legge til flere knapper i spillmenyen bare lage en ny knapp og legge den til på scenen. Gi den forekomsten navnet 'knappen2'. Så inne dokumentet klassen ( 'Game.as' fil) opprette en ny JitteryButton og passerer det den nye knappen. Her er hvordan det kan se ut:
pakke {import flash.display.MovieClip; public class Spill strekker MovieClip {private Var startknappen: JitteryButton; privat Var menuButton: JitteryButton; //Klassen konstruktør offentlig funksjon Game () {//oppretter nervøs knappene fra de enkle knappene på scenen startknappen = new JitteryButton (Button1); addChild (startknappen); //Legger til en ny knapp er enkelt! menuButton = ny JitteryButton (knappen2); addChild (menuButton); }}}

Du vil nesten helt sikkert behov for å endre denne koden litt for å få det til å passe inn i strukturen av spillet. Forhåpentligvis vil denne opplæringen vil gi deg et godt utgangspunkt skjønt.

Hvis du ønsker å endre utseende på denne effekten kan du prøve å bruke ulike typer bilder for StaticMap grafikk, og justere verdiene for fuzzMin og fuzzMax.

Dette er min første tutorial så gi meg beskjed hvis det er noe jeg kan gjøre bedre neste gang. Takk for lesing!