Share
În acest tutorial voi explica despre ActionScript 3.0 Event Framework. După acest tutorial trebuie să aveți o înțelegere clară a modului în care funcționează evenimentele, dispecerii evenimentului și ascultătorii evenimentului.
Deoarece schema evenimentului AS3 este imensă, vom examina toate lucrurile diferite care compun cadrul de evenimente. Vom afla despre următoarele:
Chiar credeți că veți avea un timp greu de înțelegere a cadrului evenimentului dacă vom merge direct în jargonul tehnic, așa că voi descrie mai întâi o situație reală. Întreaga situație este o metaforă a cadrului evenimentului. Bine, deci mergem aici:
Sunt un cititor avid Arte computerizate și aștept în fiecare zi pentru noua emisiune. Când primesc problema, încep să o citesc.
Bine, avem mai multe lucruri în desfășurare:
Am menționat câteva lucruri:
Un eveniment este un obiect care descrie o apariție, în Pasul 1 evenimentul este sosirea unei noi emisiuni.
De cele mai multe ori veți vedea un eveniment care este scris într-o structură similară cu aceasta:
MouseEvent.CLICK
Acest fragment de cod constă din două lucruri:
Tipul de eveniment este de fapt un șir constant constant. Ar putea suna ciudat, dar un eveniment nu este altceva decât un șir. Încercați să rulați acest fragment.
trace (MouseEvent.MOUSE_MOVE);
Veți obține ca ieșire mousemove. Tocmai am urmărit MOUSE_MOVE constant, care se află în clasa MouseEvent. Un eveniment este un șir! Dar acest șir reprezintă apariția (în acest exemplu) a mișcării mouse-ului.
Un eveniment se întâmplă întotdeauna undeva. În cazul în care se întâmplă evenimentul este locul unde acesta este concediat (expediat). Rădăcinile evenimentelor de expediere se află în clasa EventDispatcher. Realizează faptul că unde evenimentul este expediat este locul în care se întâmplă. Astfel, dacă clipul de film A expediază un eveniment, apoi un ascultător al evenimentului (ascultătorii evenimentului vor fi explicați la pasul 5) clipul video B nu ar primi acest eveniment.
Pentru a face lucrurile ușor, toate obiectele de afișare au funcția de construit dispatchEvent (eveniment: Eveniment), la fel ca multe alte clase.
var myMC: MovieClip = nouClipClip (); myMC.dispatchEvent (noul eveniment (MouseEvent.CLICK));
Dar de cele mai multe ori nu veți expedia evenimentele manual, de cele mai multe ori evenimentele sunt expediate automat. De exemplu, dacă dau clic pe clipul video A, ar trimite în mod automat evenimentul MouseEvent.CLICK.
Când se întâmplă un anumit eveniment, noi, ca dezvoltatori Flash, ne-ar plăcea să facem ceva pentru a răspunde la acest eveniment. Ascultătorii de evenimente sunt ceea ce aveți nevoie. Ascultătorii evenimentului nu au clasă proprie, nu sunt puțin diferită. Ascultătorii de evenimente sunt adăugați la un obiect. Ascultătorii de evenimente sunt obiecte care "ascultă" un anumit eveniment. Când se întâmplă acest eveniment, atunci se va apela o funcție, a handler (funcție).
Uită-te la imaginea de mai jos, arătând sintaxa din spatele funcției addEventListener (), care este folosit pentru a adăuga un ascultător de evenimente:
De fapt, nu toți acești parametri acceptă metoda addEventListener, sunt încă trei pe care nu le-am menționat. Aproape niciodată nu le veți folosi, mai ales când tocmai ați început să utilizați ascultătorii de evenimente. Să ne uităm din nou la structura metodei addEventListener.
addEventListener (tip: String, ascultător: Funcție, useCapture: Boolean = false, prioritate: int = 0, useWeakReference: Boolean = false): void
Deci, să discutăm ultimii 3 parametri:
Eliminarea unui ascultător al evenimentului este la fel de ușor ca adăugarea unui astfel de eveniment.
// aceasta adaugă un ascultător de evenimente la etapa stage.addEventListener (MouseEvent.CLICK, clickHandler); // aceasta elimină ascultătorul evenimentului adăugat la etapa stage.removeEventListener (MouseEvent.CLICK, clickHandler);
Când apare evenimentul pe care un ascultător al evenimentului îl asculta, acesta apelează o funcție. Această funcție este numită manipulant sau funcție ascultător. Uită-te la imaginea de mai jos, care arată sintaxa de manipulare:
Observă argumentul din partea handlerului, acest argument este obligatoriu. Funcția de ascultător are doar un singur argument și nu are voie să aibă mai mult. Acest eveniment conține informații despre eveniment, vom vorbi despre asta pasul 9.
Acum dorim ca myMC să răspundă la evenimentul expediat, așa că vom adăuga un eveniment și apoi funcția de manipulare. Codul nostru va arata astfel:
Accentsconagua
// creați clipul nostru de film myMC var myMC: MovieClip = new MovieClip (); // lăsați myMC să trimită evenimentul MouseEvent.CLICK myMC.dispatchEvent (noul eveniment (MouseEvent.CLICK)); // adăugați un ascultător al evenimentului la myMC, care ascultă evenimentul MouseEvent.CLICK și va apela clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // definește funcția funcție handler clickHandler (eveniment: Eveniment) trace ("Am auzit evenimentul MouseEvent.CLICK"); Încercați apoi filmul (Windows: Ctrl + Enter, Mac: Cmd + Enter).
Ai obținut rezultate? Nu? Ei bine, nici nu am. Vom vedea ce se întâmplă în etapa următoare.
Deci, ce se întâmplă greșit? Ei bine, nu poate fi o eroare de sintaxă, cel puțin Sunt nu primesc nimic. Nu, din punct de vedere tehnic, nu este chiar o eroare. Uitați-vă la codul din nou, dar de data aceasta amintiți-vă că codul va fi executat line-line:
// creați clipul nostru de film myMC var myMC: MovieClip = new MovieClip (); // lăsați myMC să trimită evenimentul MouseEvent.CLICK myMC.dispatchEvent (noul eveniment (MouseEvent.CLICK)); // adăugați un ascultător al evenimentului la myMC, care ascultă evenimentul MouseEvent.CLICK și va apela clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // definește funcția funcție handler clickHandler (eveniment: Eveniment) trace ("Am auzit evenimentul MouseEvent.CLICK"); Sper că ați realizat ce sa întâmplat greșit: evenimentul este expediat înainte ca un ascultător de evenimente să fi fost adăugat la myMC. Deci, când a fost adăugat ascultătorul evenimentului, este prea târziu, evenimentul sa întâmplat. Din fericire este ușor de rezolvat, trebuie doar să modificați ordinea și să adăugați mai întâi ascultătorul evenimentului, apoi să expediați evenimentul:
// creați clipul nostru de film myMC var myMC: MovieClip = new MovieClip (); // adăugați un ascultător al evenimentului la myMC, care ascultă evenimentul MouseEvent.CLICK și va apela clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // lăsați myMC să trimită evenimentul MouseEvent.CLICK myMC.dispatchEvent (noul eveniment (MouseEvent.CLICK)); // definește funcția funcție handler clickHandler (eveniment: Eveniment) trace ("Am auzit evenimentul MouseEvent.CLICK"); De ce am făcut toate astea? Probabil că veți întâlni această problemă și ar putea dura ceva timp pentru a vă da seama ce se întâmplă. Este mai bine să vă arătați problema și să vă învăț cum să o rezolvați.
Fiecare funcție de manipulare are un argument; argumentul evenimentului. Acest argument conține date despre eveniment și dispecerul evenimentului. Parametrul conține proprietăți pe care am dori să le citim. Iată o listă a câtorva dintre cele mai frecvent utilizate:
Cu aceasta putem folosi același handler pentru diferite tipuri de evenimente. Cum? Ei bine, vom discuta acest lucru în pasul următor.
Bine, mai întâi să analizăm acest fragment de cod:
stage.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); stage.addEventListener (MouseEvent.MOUSE_UP, upHandler); funcția downHandler (eveniment: MouseEvent) trace ("Down"); funcția upHandler (eveniment: MouseEvent) trace ("Sus"); Folosim două evenimente, și anume MouseEvent.MOUSE_DOWN și MouseEvent.MOUSE_UP. Primul eveniment este evenimentul când mouse-ul apasă butonul principal al mouse-ului și îl ține jos. Când persoana eliberează acest buton, se întâmplă evenimentul MouseEvent.MOUSE_UP. Butonul mouse-ului merge sus după eliberare.
Acum putem folosi în loc de doi manipulatori (și anume downHandler și upHandler) un singur manipulator. Eliminați codul pe care l-am scris și tastați următoarele:
stage.addEventListener (MouseEvent.MOUSE_DOWN, handler); stage.addEventListener (MouseEvent.MOUSE_UP, handler); funcția handler (eveniment: MouseEvent) trace ("Sa întâmplat ceva ..."); Bine, ne-am înființat serviciul nostru de handler și acesta funcționează, dar dorim ca personalul nostru să facă ceva specific, în funcție de evenimentul care va fi transmis unui manipulant. Din fericire, putem folosi tip de eveniment. Să o folosim!
stage.addEventListener (MouseEvent.MOUSE_DOWN, handler); stage.addEventListener (MouseEvent.MOUSE_UP, handler); funcția handler (eveniment: MouseEvent) if (event.type == "mouseDown") trace ("Down"); altceva trace ("Sus"); Acum, să spunem că se întâmplă un clic pe un filmulet, să-l sunăm mca. Evenimentul nu se trimite pur și simplu la mcA, nu, evenimentul călătorește prin întregul jucător. Această călătorie este numită flux de evenimente, gândiți-vă doar la modul în care evenimentul trece prin player.
Evenimentul începe de la cel mai înalt nivel, la etapă, după aceea va trece prin părinţi de mca, până când evenimentul ajunge la mcA. După aceasta, evenimentul va fi "bubble" înapoi de la mcA, înapoi pe scenă.
Ok, cool, dar pentru ce să folosesc asta? Pentru că acum știm că un eveniment călătorește prin toți părinții dispecerului, putem folosi doar unu pentru a urmări evenimentele mai multor obiecte.
Bine, deci să creăm câteva clipuri video în interiorul celuilalt. Puteți face acest lucru singur, sau utilizați doar fișierul step-11.fla furnizat.
Vom crea 3 clipuri video și le vom da numele de instanțe redMC, blueMC și greenMC. După aceea, plasați toate acestea într-un film mai mare, numit recipient.
Acum să începem să scriem cod. Am creat deja un strat numit acţiuni, așa că scrieți codul pe acel strat. Mai întâi să adăugăm un ascultător al evenimentului recipient, ascultarea evenimentului MouseEvent.CLICK, cu numele numitului handler clickHandler.
container.addEventListener (MouseEvent.CLICK, clickHandler); funcția clickHandler (eveniment: MouseEvent) // function body
Vrem să știm ce buton este apăsat pe tastatură, de ce am adăugat un container de evenimente unui ascultător al evenimentului? Uitați-vă la imaginea de mai jos:
După cum vedeți, evenimentul este expediat la redMC, cu toate acestea balon înapoi în container. Apoi, ascultătorul evenimentului adăugat la container va auzi evenimentul și va apela funcția ascultătorului clickHandler. La fel se întâmplă și cu blueMC și cu greenMC.
Acum vom folosi event.target, deoarece event.target este dispecerul evenimentului, iar dispecerul evenimentului este redMC. Deci, cum putem folosi event.target? Putem verifica pentru event.target.name, care returnează numele instanței ca șir. Așa că putem folosi doar normal dacă declaraţii:
container.addEventListener (MouseEvent.CLICK, clickHandler); funcția clickHandler (eveniment: MouseEvent) if (event.target.name == "redMC") trace ("Red"); dacă (event.target.name == "blueMC") trace ("Albastru"); dacă (event.target.name == "greenMC") trace ("verde"); Acum aveți o bună înțelegere a cadrului evenimentului, totuși pentru a obține ceva, cheia importantă este să știți ce eveniment să utilizați. Un loc excelent pentru a verifica ce evenimente există este ActionScript 3.0 Language and Components Reference. Doar faceți clic pe un eveniment care conține clasă, cum ar fi MouseEvent, și uitați-vă la ceea ce este fiecare eveniment.
Acest eveniment apare când utilizatorul mișcă mouse-ul. Dacă adăugați un ascultător al evenimentului care ascultă acest eveniment, de exemplu, un movieclip numit myMC, atunci știți când mouse-ul se mișcă peste myMC.
myMC.addEventListener (MouseEvent.MOUSE_MOVE, mouseMoveHandler); funcția mouseMoveHandler (eveniment: MouseEvent) trace ("mouse-ul se mișcă peste myMC"); Acest eveniment are loc atunci când utilizatorul se deplasează (se deplasează). Acest eveniment apare numai atunci când utilizatorul mută cursorul de undeva în jurul obiectului. Mutarea mouse-ului peste obiect nu mai este evenimentul MouseEvent.MOUSE_OVER, dar evenimentul MouseEvent.MOUSE_MOVE.
myMC.addEventListener (MouseEvent.MOUSE_OVER, overHandler); function overHandler (eveniment: MouseEvent) trace ("Tocmai ai mutat mouse-ul pe myMC"); Acest eveniment este exact opusul programului MouseEvent.MOUSE_OVER. Acesta este momentul în care cursorul utilizatorului se îndepărtează de pe obiect sau, deoarece aceștia (tipii care au creat AS3) îl sună, din obiect.
myMC.addEventListener (MouseEvent.MOUSE_OUT, OutHandler); function outHandler (eveniment: MouseEvent) trace ("Tocmai ai mutat mouse-ul din myMC"); Acest eveniment apare atunci când utilizatorul apasă în jos mouse-ul principal, în timp ce acesta este ținut în jos.
myMC.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); funcția downHandler (eveniment: MouseEvent) trace ("butonul principal al mouse-ului este apăsat pe myMC"); Acest eveniment este exact opusul programului MouseEvent.MOUSE_DOWN. Când utilizatorul eliberează butonul primar al mouse-ului, apare evenimentul MouseEvent.MOUSE_UP.
myMC.addEventListener (MouseEvent.MOUSE_UP, upHandler); function upHandler (eveniment: MouseEvent) trace ("butonul primar al mouse-ului a fost lansat, in timp ce plutea pe myMC"); Ei bine, numele deja o face destul de clară când apare acest eveniment. Acest eveniment are loc atunci când utilizatorul face clic (cu butonul principal al mouse-ului).
myMC.addEventListener (MouseEvent.CLICK, clickHandler); funcția clickHandler (eveniment: MouseEvent) trace ("Ați făcut clic pe myMC"); Acest eveniment apare când utilizatorul face clic de două ori (cu butonul principal al mouse-ului). Rețineți că atunci când apare MouseEvent.DOUBLE_CLICK, MouseEvent.CLICK apare pentru a doua oară.
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); funcția doubleClickHandler (eveniment: MouseEvent) trace ("Ați făcut doar dublu clic pe myMC"); Dacă încercați acum filmul și faceți dublu clic, nimic nu se va întâmpla. De ce? În mod normal, clipurile video (și aproape toate obiectele afișate) au proprietatea doubleClickEnabled setată la false. Deci MouseEvent.DOUBLE_CLICK nu va fi expediat. Doar setați-o la adevărat, și totul va funcționa bine.
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); funcția doubleClickHandler (eveniment: MouseEvent) trace ("Ați făcut doar dublu clic pe myMC"); myMC.doubleClickEnabled = true; Acest eveniment apare de fiecare dată când obiectul intră într-un cadru nou (da, care sună puțin ciudat). Ei bine, acest eveniment are loc la rata ratei cadrelor. Asta inseamna ca daca filmul are un framerat de 30 fps, atunci evenimentul va fi sunat de 30 de ori pe secunda. Pentru ce folosești acest eveniment? Puteți folosi acest eveniment pentru a face lucrurile să se întâmple treptat. De exemplu, puteți crește coordonatele x ale unui obiect cu 5, la rata ratei cadrelor.
myMC.addEventListener (Event.ENTER_FRAME, enterFrameHandler); funcția enterFrameHandler (eveniment: eveniment) myMC.x + = 5;
Acest eveniment are loc atunci când obiectul completează orice a făcut. De cele mai multe ori o veți folosi pentru lucruri care trebuie să încarce ceva sau pentru lucruri care joacă un anumit tip de mass-media. Un URLLoader încarcă un URLRequest, după ce URLLoader termină încărcarea, apoi vom încărca aceste date într-un încărcător diferit și apoi vom adăuga încărcătorul în stadiu.
var myURLRequest: URLRequest = nou URLRequest ("http://farm3.static.flickr.com/2382/1616598266_bafebf0086_o.jpg"); var myURLLoader: URLLoader = noul URLLoader (myURLRequest); myURLLoader.dataFormat = URLLoaderDataFormat.BINARY; myURLLoader.addEventListener (Event.COMPLETE, completeHandler); funcția completeHandler (eveniment: Eveniment) var loader: Loader = încărcător nou (); loader.loadBytes (myURLLoader.data); addChild (încărcător); Acest eveniment are loc atunci când player-ul Flash sau pagina în care este cuprins blițul este redimensionat. Puteți utiliza acest eveniment pentru a repoziționa obiectele după ce sa efectuat redimensionarea.
stage.addEventListener (Event.RESIZE, resizeHandler); resizeHandler (eveniment: Event) trace ("Dimensiunile scenei sunt" + stage.stageWidth + "x" + stage.stageHeight); Acest eveniment apare atunci când orice cheia este apăsată pe placa de chei.
stage.addEventListener (tastaturăEvent.KEY_DOWN, keyDownHandler); funcția keyDownHandler (eveniment: KeyboardEvent) trace ("Ați apăsat o tastă!"); Acest eveniment este exact opusul KeyboardEvent.KEY_DOWN, acest eveniment apare atunci când orice cheia este eliberată (cheia crește).
stage.addEventListener (tastaturăEvent.KEY_UP, keyUpHandler); funcția keyUpHandler (eveniment: KeyboardEvent) trace ("Ați lansat o cheie"); Desigur, e inutil să răspunzi orice cheie (cu excepția unui economizor de ecran), așa că trebuie să preluăm informații cu privire la cheia care a fost apăsată. Din fericire, unele chei sunt încorporate în clasa KeyboardEvent, acestea sunt booleani și sunt setate la adevărat când sunt presate. Acestea sunt construite în booleani:
Deci, acum putem folosi aceasta pentru a fi mai specific ce cheie trebuie apăsată înainte de a face ceva.
stage.addEventListener (tastaturăEvent.KEY_DOWN, keyDownHandler); funcția keyDownHandler (eveniment: KeyboardEvent) if (event.shiftKey) trace ("Ați apăsat tasta Shift"); S-ar putea să te întrebi, bine, ce zici de toate celelalte chei? Ei bine, e ceva numit cod cheie. Fiecare cheie are un anumit număr; un cod cheie. Putem verifica codul cheie al cheii care a declanșat evenimentul. Acest lucru se face cu event.keyCode, care returnează un număr întreg. Faceți clic aici pentru o listă de coduri cheie. Chiar dacă este pentru javascript, codurile cheie sunt aceleași.
stage.addEventListener (tastaturăEvent.KEY_DOWN, keyDownHandler); funcția keyDownHandler (eveniment: KeyboardEvent) if (event.keyCode == 65) trace ("Ați apăsat tasta A"); Acum este mai ușor să stocați codurile cheie într-o variabilă (sau dacă sunteți hardcore, într-o clasă) și pur și simplu să utilizați această variabilă, în loc de codul cheie.
var A: uint = 65; stage.addEventListener (tastaturăEvent.KEY_DOWN, keyDownHandler); funcția keyDownHandler (eveniment: KeyboardEvent) if (event.keyCode == A) trace ("Ați apăsat tasta A"); Cu codurile cheie puteți obține destul de mult, cu toate acestea uneori nu este ceea ce aveți nevoie. De exemplu, aceeași caractere este folosită pentru caractere A și A. Dar am vrea să facem diferența între cele două. Ei bine, evenimentul poartă codul de caractere al expeditorului evenimentului.
stage.addEventListener (tastaturăEvent.KEY_DOWN, keyDownHandler); funcția keyDownHandler (eveniment: KeyboardEvent) trace (event.charCode);
Bine, acest lucru funcționează, dar trebuie să ne amintim aceste coduri de caractere? Din fericire, putem folosi funcția charCodeAt (), care returnează caracterul unui caracter (într-un String). charCodeAt () ia implicit primul caracter din șir. charCodeAt (0) este primul caracter, charCodeAt (1) al doilea, și așa mai departe.
stage.addEventListener (tastaturăEvent.KEY_DOWN, keyDownHandler); funcția keyDownHandler (eveniment: KeyboardEvent) if (event.charCode == String ("a")) trace ("Ați apăsat tasta mică"); Încercați acum să tastați următoarele:
myMC.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); funcția keyDownHandler (eveniment: KeyboardEvent) trace ("Tocmai ați apăsat o cheie, în timp ce focalizați pe myMC"); Încercați să testați acest lucru, nu va funcționa! De ce? Dacă myMC este un clip video, nu va accepta intrarea tastaturii, astfel încât evenimentele tastaturii nu vor fi expediate la clipurile video. Dacă vrei ca myMC să răspundă, adăugați ascultătorul evenimentului pe scenă și apoi faceți ca myMC să facă ceva. Încercați să modificați fișierul myMC dintr-un clip video într-un câmp de text dinamic, atunci acesta va funcționa.
Ce zici de două câmpuri de text dinamice? În cazul în care tipul de utilizator, ambele câmpuri de text expediază un eveniment? Nu, doar pe cea pe care o introduceți. Se numește asta concentra. Evenimentele cu tastatură sunt expediate de obiectul care se concentrează. Scena este singurul obiect care încă mai are focalizare, în timp ce un obiect diferit se concentrează.
Acest eveniment este construit special pentru cronometre. Ea este expediată la un cronometru, care tocmai a atins momentul întârzierii. Aceasta înseamnă că puteți utiliza acest eveniment pentru a face ceva foarte precis, la intervale de timp stabilite.
var myTimer: Timer = nou Cronometru (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER, timerHandler); function timerHandler (eveniment: TimerEvent) trace ("o secunda mai tarziu ..."); Toate cronometrele au un al doilea parametru opțional. Acest parametru stabilește numărul repetat al cronometrului. Aceasta înseamnă că atunci când cronometrul ajunge la timpul de întârziere, acesta va porni din nou. În cazul în care cronometrul sa repetat la fel de des ca numărul de repetări, acesta va expedia evenimentul TimerEvent.TIMER_COMPLETE.
var myTimer: Timer = nou Cronometru (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerHandler); function timerHandler (eveniment: TimerEvent) trace ("Timerul sa repetat de 5 ori"); Asta a fost! Sper că acum aveți o înțelegere aprofundată a cadrului evenimentului ActionScript 3.0. Realizez faptul că evenimentele discutate nu sunt toate evenimentele care există, tocmai am discutat pe cele pe care le folosesc des. Nu uitați să verificați întotdeauna limba și referințele componentelor, vă poate ajuta foarte mult! A fost o plăcere scrisă pentru voi!
