I denna handledning kommer jag att förklara om ActionScript 3.0 Event Framework. Efter denna handledning borde du ha en klar förståelse för hur händelser, händelsespedagoger och händelsehörare arbetar.
Eftersom AS3-evenemangsramen är enorm ser vi på alla de olika sakerna som sammanställer evenemangsramen. Vi lär oss om följande:
Jag tror verkligen att du skulle ha svårt att förstå evenemangsramen om vi hoppar rakt in i det tekniska jargonget, så jag ska först beskriva en verklig situation. Hela situationen är en metafor för evenemangsramen. Okej, så här går vi:
Jag är en ivrig läsare av Computer Arts och jag väntar varje dag på den nya frågan. När jag får problemet börjar jag läsa den.
Okej, vi har flera saker på gång:
Jag har nämnt flera saker:
En händelse är ett objekt som beskriver en händelse, i Steg 1 händelsen är ankomsten av en ny fråga.
De flesta gånger ser du ett evenemang som är skrivet i en struktur som liknar detta:
MouseEvent.CLICK
Detta koduttag består av två saker:
Händelsetypen är faktiskt en statisk konstant sträng. Det kanske låter konstigt, men en händelse är inget annat än en sträng. Prova att köra den här siten.
spåra (MouseEvent.MOUSE_MOVE);
Du får som utgång mouse. Vi har just spårat den konstanta MOUSE_MOVE, som ligger inne i MouseEvent-klassen. En händelse är en sträng! Men denna sträng representerar förekomsten av (i detta exempel) musens rörelse.
En händelse sker alltid någonstans. Där händelsen händer är var den blir avfyrade (skickas). Rötterna för att skicka händelser är i klassen EventDispatcher. Inse att var händelsen skickas är var det händer. Så om filmklipp A skickar en händelse, då kommer en händelselyssnare (händelselyttare att förklaras i steg 5) läggas till filmklipp B skulle inte få den här händelsen.
För att göra det enkelt, har alla visningsobjekt den inbyggda funktionen dispatchEvent (event: Event), precis som många andra klasser.
var myMC: MovieClip = ny MovieClip (); myMC.dispatchEvent (ny händelse (MouseEvent.CLICK));
Men de flesta gånger kommer du inte att skicka händelser manuellt, de flesta gånger skickas händelser automatiskt. Om jag till exempel klickar på filmklipp A skickas det automatiskt till händelsen MouseEvent.CLICK.
När en viss händelse inträffar vill vi, som Flash-utvecklare, göra något för att svara på den här händelsen. Händelselyttare är vad du behöver. Händelselyttare har inte sin egen klass, nej de är lite annorlunda. Händelselyttare läggs till i ett objekt. Händelselysare är objekt som "lyssnar" på en viss händelse. När händelsen händer, kommer en funktion att ringas, a handler (funktion).
Titta på bilden nedan och visa syntaxen bakom funktionen addeventlistener (), som används för att lägga till en händelse lyssnare:
Egentligen är det inte alla parametrar som addEventListener-metoden accepterar, det finns fortfarande tre som jag inte har nämnt. Du kommer nästan aldrig använda dem, speciellt när du just har börjat använda händelselöser. Låt oss se igen på strukturen i addEventListener-metoden.
addEventListener (typ: String, lyssnare: Funktion, useCapture: Boolean = false, priority: int = 0, useWeakReference: Boolean = false): void
Så låt oss diskutera de senaste 3 parametrarna:
Att ta bort en händelse lyssnare är lika lätt som att lägga till en.
// det här lägger till en händelselyttare på scenen stage.addEventListener (MouseEvent.CLICK, clickHandler); // detta tar bort händelseläsenaren till scenen scenen.removeEventListener (MouseEvent.CLICK, clickHandler);
När händelsen inträffar som en händelseloggare lyssnar på kallas den en funktion. Denna funktion kallas hanterare eller den lyssnarfunktion. Titta på bilden nedan, som visar hanterarens syntax:
Observera argumentet i hanteraren, detta argument är obligatoriskt. Lyssnarfunktionen har bara ett argument och får inte ha mer. Denna händelse innehåller information om händelsen, vi talar om detta i steg 9.
Nu vill vi att myMC ska svara på den skickade händelsen, så vi lägger till en händelse och därefter handlarfunktionen. Vår kod kommer att se ut så här:
// skapa vårt myMC-filmklipp var myMC: MovieClip = ny MovieClip (); // låt myMC skicka händelsen MouseEvent.CLICK myMC.dispatchEvent (ny händelse (MouseEvent.CLICK)); // lägg till en händelse lyssnare till myMC, som lyssnar på händelsen MouseEvent.CLICK, och kommer att ringa clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // definiera handlarfunktionsfunktionen clickHandler (händelse: Event) trace ("Jag hörde händelsen MouseEvent.CLICK");
Efteråt testar din film (Windows: Ctrl + Enter, Mac: Cmd + Enter).
Fick du någon produktion? Nej? Jo, det gjorde jag inte heller. Vi tittar på vad som går fel i nästa steg.
Så vad går fel? Tja, det kan inte vara ett syntaxfel, åtminstone Jag är inte få någonting. Nej, det här är tekniskt inte ens ett fel. Titta på koden igen, men den här gången kommer du ihåg att koden ska utföras linje för rad:
// skapa vårt myMC-filmklipp var myMC: MovieClip = ny MovieClip (); // låt myMC skicka händelsen MouseEvent.CLICK myMC.dispatchEvent (ny händelse (MouseEvent.CLICK)); // lägg till en händelse lyssnare till myMC, som lyssnar på händelsen MouseEvent.CLICK, och kommer att ringa clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // definiera handlarfunktionsfunktionen clickHandler (händelse: Event) trace ("Jag hörde händelsen MouseEvent.CLICK");
Jag hoppas att du har insett vad som har gått fel: händelsen skickas innan en händelseloggare har lagts till myMC. Så när händelselysaren har lagts till är det för sent, händelsen har hänt. Lyckligtvis är det enkelt att lösa, ändra bara ordern och lägg till händelselyssnaren först och skicka sedan händelsen:
// skapa vårt myMC-filmklipp var myMC: MovieClip = ny MovieClip (); // lägg till en händelse lyssnare till myMC, som lyssnar på händelsen MouseEvent.CLICK, och kommer att ringa clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // låt myMC skicka händelsen MouseEvent.CLICK myMC.dispatchEvent (ny händelse (MouseEvent.CLICK)); // definiera handlarfunktionsfunktionen clickHandler (händelse: Event) trace ("Jag hörde händelsen MouseEvent.CLICK");
Så varför gjorde vi allt det? Tja, du kommer sannolikt att stöta på det här problemet och det kan ta ett tag att inse vad som händer. Det är bättre att visa problemet och lära dig hur man löser det.
Varje hanterarfunktion har ett argument; händelsesargumentet. Det här argumentet innehåller data om händelsen och händelseshändaren. Parametern innehåller egenskaper som vi skulle vilja läsa. Här är en lista över några av de vanligast använda:
Med detta kan vi använda samma hanterare för olika typer av händelser. På vilket sätt? Tja, vi diskuterar detta i nästa steg.
Okej, låt oss först titta på detta kodstycke:
stage.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); stage.addEventListener (MouseEvent.MOUSE_UP, upHandler); funktion downHandler (händelse: MouseEvent) trace ("Down"); funktion upHandler (händelse: MouseEvent) trace ("Up");
Vi använder två händelser, nämligen MouseEvent.MOUSE_DOWN och MouseEvent.MOUSE_UP. Den första händelsen är händelsen när musen trycker på den primära musknappen och håller den ner. När personen släpper den här knappen, händer händelsen MouseEvent.MOUSE_UP. Musknappen går upp efter att ha släppt den.
Nu kan vi använda istället för två hanterare (nämligen downHandler och upHandler) bara en handlare. Ta bort koden vi har skrivit och skriv följande:
stage.addEventListener (MouseEvent.MOUSE_DOWN, hanterare); stage.addEventListener (MouseEvent.MOUSE_UP, hanterare); funktionshanterare (händelse: MouseEvent) trace ("Något har inträffat ...");
Okej, vi har satt upp vår hanterare och det fungerar, men vi vill att vår hanterare ska göra något specifikt, beroende på vilken händelse som överförs till hanteraren. Lyckligtvis kan vi använda event typ. Låt oss använda det!
stage.addEventListener (MouseEvent.MOUSE_DOWN, hanterare); stage.addEventListener (MouseEvent.MOUSE_UP, hanterare); funktionshanterare (händelse: MouseEvent) if (event.type == "mouseDown") trace ("Down"); annat spår ("upp");
Låt oss nu säga att ett klick händer på en filmklipp, låt oss ringa det MCA. Evenemanget skickas inte enkelt till mcA, nej, händelsen färdas genom hela spelaren. Denna resa kallas händelseflöde, Tänk bara hur händelsen strömmar genom spelaren.
Evenemanget börjar på högsta nivå, vid skede, efteråt kommer det att gå igenom föräldrar av MCA, tills evenemanget når mcA. Efteråt kommer evenemanget "bubbla" tillbaka från mcA, tillbaka till scenen.
Ok, coolt men vad kan jag använda för? Eftersom vi nu vet att en händelse färdas genom alla förälderens föräldrar, kan vi bara använda ett händelse lyssnare, för att spåra händelserna i mer än ett objekt.
Okej, så låt oss skapa några flera filmklipp inuti varandra. Du kan göra det själv, eller använd bara den angivna steg-11.fla-filen.
Vi skapar 3 filmklipp och vi ger dem förekomstnamnen redMC, blueMC och greenMC. Efteråt placera alla dessa inuti en större filmklipp, namngiven behållare.
Nu börjar vi skriva kod. Jag har redan skapat ett skikt som heter Åtgärder, så skriv din kod på det lagret. Låt oss först lägga till en händelse lyssnare till behållare, lyssnar på evenemanget MouseEvent.CLICK, med handlaren heter clickhandler.
container.addEventListener (MouseEvent.CLICK, clickHandler); funktion clickHandler (händelse: MouseEvent) // funktion body
Vi vill veta vilken knapp som klickas, så varför lade vi till en händelselyttare i behållaren? Titta på bilden nedan:
Som du ser, skickas evenemanget på redMC, men det kommer det bubbla tillbaka till behållaren. Då hörs händelselyssnaren till behållaren höra händelsen och kommer att ringa lyssnarfunktionen clickHandler. Samma sak händer med blueMC och greenMC.
Nu ska vi använda event.target, eftersom event.target är evenemangsförsändaren, och händelsespelaren är redMC. Så hur kan vi använda event.target? Vi kan leta efter event.target.name, som returnerar förekomstnamnet som en sträng. Så vi kan bara använda normal om uttalanden:
container.addEventListener (MouseEvent.CLICK, clickHandler); funktion clickHandler (händelse: MouseEvent) if (event.target.name == "redMC") trace ("Red"); om (event.target.name == "blueMC") trace ("Blue"); om (event.target.name == "greenMC") spår ("grönt");
Nu har du en bra förståelse för evenemangsramen, men för att uppnå någonting är det viktigaste att veta vilken händelse som ska användas. Ett bra ställe att kolla vilka händelser som finns är ActionScript 3.0-språk- och komponentreferensen. Klicka bara på en händelse som innehåller klass, som MouseEvent, och titta på vad varje händelse är.
Denna händelse inträffar när användaren flyttar musen. Om du lägger till en händelseloggare som lyssnar på den här händelsen, låt oss säga en filmklipp med namnet myMC, då skulle du veta när musen rör sig över minMC.
myMC.addEventListener (MouseEvent.MOUSE_MOVE, mouseMoveHandler); funktion mouseMoveHandler (händelse: MouseEvent) trace ("musen flyttar över minMC");
Denna händelse inträffar när användaren flyttar över (svävar). Denna händelse inträffar endast när användaren flyttar markören från någon annanstans över objektet. Flytta musen över objektet är då inte längre händelsen MouseEvent.MOUSE_OVER, men händelsen MouseEvent.MOUSE_MOVE.
myMC.addEventListener (MouseEvent.MOUSE_OVER, overHandler); funktion överHandler (händelse: MouseEvent) trace ("Du har just flyttat musen på myMC");
Denna händelse är just motsatsen till MouseEvent.MOUSE_OVER. Det här är när användarens markör flyttar från objektet eller som de (de killar som skapade AS3) kallar det, ur objektet.
myMC.addEventListener (MouseEvent.MOUSE_OUT, outHandler); funktion outHandler (händelse: MouseEvent) trace ("Du har bara flyttat musen ut myMC");
Denna händelse inträffar när användaren trycker ner den primära musen medan den hålls nere.
myMC.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); funktion downHandler (händelse: MouseEvent) trace ("Den primära musknappen trycks ned på myMC");
Denna händelse är exakt motsatsen till MouseEvent.MOUSE_DOWN. När användaren släpper den primära musknappen uppträder händelsen MouseEvent.MOUSE_UP.
myMC.addEventListener (MouseEvent.MOUSE_UP, upHandler); funktion upHandler (händelse: MouseEvent) trace ("Den primära musknappen har släppts, medan den svängde över minMC");
Tja, namnet gör det redan ganska klart när den här händelsen inträffar. Denna händelse inträffar när användaren klickar (med den primära musknappen).
myMC.addEventListener (MouseEvent.CLICK, clickHandler); funktion clickHandler (händelse: MouseEvent) trace ("Du klickade bara på myMC");
Tja, den här händelsen inträffar när användaren klickar två gånger (med den primära musknappen). Observera att när MouseEvent.DOUBLE_CLICK inträffar, så kommer MouseEvent.CLICK för andra gången.
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); funktion doubleClickHandler (händelse: MouseEvent) trace ("Du har bara dubbelklickat myMC");
Om du nu testar din film och dubbelklickar kommer ingenting att hända. Varför? Bra standardfilmer (och nästan alla visningsobjekt) har egenskapen doubleClickEnabled satt till false. Så MouseEvent.DOUBLE_CLICK kommer inte att skickas. Ställ det bara på sant, och allt fungerar bra.
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); funktion doubleClickHandler (händelse: MouseEvent) trace ("Du har bara dubbelklickat myMC"); myMC.doubleClickEnabled = true;
Denna händelse inträffar varje gång objektet kommer in i en ny ram (ja det låter lite konstigt). Nåväl sker det här händelsen i takt med bildhastigheten. Det betyder att om din film har en framerate på 30 bilder per sekund, så kommer händelsen att ringas 30 gånger i sekundet. Vad skulle du använda den här händelsen för? Du kan använda denna händelse för att få saker att hända gradvis. Till exempel kan du öka ett objekts x-koordinat med 5, med hastigheten på bildhastigheten.
myMC.addEventListener (Event.ENTER_FRAME, enterFrameHandler); funktion enterFrameHandler (händelse: Event) myMC.x + = 5;
Denna händelse inträffar när objektet fullbordar vad det än gjorde. De flesta gånger använder du den för saker som behöver ladda något, eller för saker som spelar någon form av media. En URLLoader laddar upp en URLRequest, efter att URLLoader fyller i, laddar vi dessa data till en annan laddare och lägger sedan till laddaren till scenen.
var myURLRequest: URLRequest = ny URLRequest ("http://farm3.static.flickr.com/2382/1616598266_bafebf0086_o.jpg"); var myURLLoader: URLLoader = ny URLLoader (myURLRequest); myURLLoader.dataFormat = URLLoaderDataFormat.BINARY; myURLLoader.addEventListener (Event.COMPLETE, completeHandler); funktion completeHandler (händelse: händelse) var loader: Loader = new Loader (); Loader.loadBytes (myURLLoader.data); addChild (loader);
Denna händelse inträffar när flashspelaren eller den sida där blixten är innehängt ändras. Du kan använda denna händelse för att ompositionera objekt efter att storleksändringen har hänt.
stage.addEventListener (Event.RESIZE, resizeHandler); funktion resizeHandler (händelse: Event) trace ("Dimensionerna av scenen är" + stage.stageWidth + "x" + stage.stageHeight);
Denna händelse inträffar när några tangenten trycks på tangentbordet.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); funktion keyDownHandler (händelse: KeyboardEvent) trace ("Du har bara tryckt på en nyckel!");
Denna händelse är precis motsatt av KeyboardEvent.KEY_DOWN, den här händelsen inträffar när några nyckeln släpps (nyckeln går upp).
stage.addEventListener (KeyboardEvent.KEY_UP, keyUpHandler); funktion keyUpHandler (händelse: KeyboardEvent) trace ("Du har bara släppt en nyckel");
Det är naturligtvis ganska värdelöst att svara på Vilken tangent somhelst (förutom skärmsläckare), så vi skulle behöva hämta information om vilken tangent som har tryckts. Lyckligtvis är några av nycklarna inbyggda i klassen KeyboardEvent, det här är boolesker och är inställda på sant när det trycks ner. Dessa inbyggda booleaner är:
Så nu kan vi använda detta för att vara mer specifikt vilken nyckel måste tryckas innan vi gör något.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); funktion keyDownHandler (händelse: KeyboardEvent) if (event.shiftKey) trace ("Du har bara tryckt på shift-tangenten");
Du kanske undrar, okej, hur är det med alla andra nycklar? Tja, det finns något som heter nyckelkod. Varje nyckel har ett visst nummer; en nyckelkod. Vi kan kontrollera nyckelkoden för nyckeln som utlöste händelsen. Detta görs med event.keyCode, som returnerar ett heltal. Klicka här för en lista med nyckelkoder. Även om det gäller javascript är nyckelkoderna samma.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); funktion keyDownHandler (händelse: KeyboardEvent) if (event.keyCode == 65) trace ("Du har bara tryckt på A-tangenten");
Nu är det enklare att lagra nyckelkoderna i en variabel (eller om du är hardcore, i en klass) och bara använda den variabeln istället för nyckelkoden.
var A: uint = 65; stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); funktion keyDownHandler (händelse: KeyboardEvent) if (event.keyCode == A) trace ("Du har bara tryckt på A-tangenten");
Med nyckelkoder kan du få ganska mycket gjort, men det är ibland inte vad du behöver. Till exempel används samma nyckel för tecknen en och en. Men vi vill fortfarande skilja mellan de två. Tja, bär händelsen karaktärskoden för händelsessändaren.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); funktion keyDownHandler (händelse: KeyboardEvent) spår (event.charCode);
Okej, det här fungerar, men måste vi då komma ihåg dessa teckenkoder? Nej. Lyckligtvis kan vi använda funktionen charCodeAt (), som returnerar karaktärskoden för ett tecken (i en sträng). charCodeAt () tar som standard det första tecknet ur strängen. charCodeAt (0) är den första karaktären, charCodeAt (1) den andra, etc..
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); funktion keyDownHandler (händelse: KeyboardEvent) if (event.charCode == String ("a"). charCodeAt ()) trace ("Du har bara tryckt på den små bokstaven en nyckel");
Försök nu skriva följande:
myMC.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); funktion keyDownHandler (händelse: KeyboardEvent) trace ("Du har bara tryckt på en tangent medan du fokuserar på myMC");
Prova att testa detta, det fungerar inte! Varför? Om myMC är ett filmklipp klarar det inte tangentbordets ingång, så tangentbordshändelser skickas inte i filmklipp. Om du vill att myMC ska svara lägger du till händelselyssnaren i scenen och gör sedan minMC något. Försök ändra minMC från ett filmklipp till ett dynamiskt textfält, så fungerar det.
Vad sägs om två dynamiska textfält? Om användaren skriver, skickar båda textfälten en händelse? Nej, bara den du skriver in. Detta heter fokus. Tangentbordshändelser skickas av objektet som har fokus. Steget är det enda objektet som fortfarande har fokus, medan ett annat objekt också har fokus.
Denna händelse är speciellt byggd för timers. Den skickas till en timer, som bara nått fördröjningstiden. Det betyder att du kan använda den här händelsen för att göra något mycket exakt, med angivna tidsintervaller.
var myTimer: Timer = Ny Timer (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER, timerHandler); funktion timerHandler (händelse: TimerEvent) trace ("en sekund senare ...");
Alla tidtagare har en valfri andra parameter. Denna parameter ställer in repeteringsräknaren för timern. Det betyder att när timern når fördröjningstiden börjar den igen. Om timern har upprepat så ofta som upprepningstalet, skickar det händelsen TimerEvent.TIMER_COMPLETE.
var myTimer: Timer = Ny Timer (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerHandler); funktion timerHandler (händelse: TimerEvent) trace ("Timern har upprepat 5 gånger");
Det var det! Jag hoppas att du nu har en grundlig förståelse för ActionScript 3.0: s händelseram. Inse att de diskuterade händelserna inte är alla händelser som finns, jag diskuterade bara de som jag använder ofta. Glöm inte alltid att kontrollera språk- och komponentreferensen, det kan hjälpa dig mycket! Det var ett nöje att skriva för dig!