Share
In questo tutorial illustrerò il Framework di eventi di ActionScript 3.0. Dopo questo tutorial dovresti avere una chiara comprensione di come funzionano gli eventi, i dispatcher di eventi e gli ascoltatori di eventi.
Poiché il framework dell'evento AS3 è enorme, esamineremo tutte le diverse cose che compongono il framework dell'evento. Impareremo su quanto segue:
Penso davvero che sarebbe difficile capire il framework dell'evento se entriamo direttamente nel gergo tecnico, quindi descriverò per prima cosa una situazione reale. L'intera situazione è una metafora della struttura dell'evento. Ok, allora eccoci qui:
Sono un avido lettore di Arti grafiche e aspetto ogni singolo giorno il nuovo numero. Quando ricevo il problema, comincio a leggerlo.
Ok, abbiamo diverse cose in corso:
Ho menzionato diverse cose:
Un evento è un oggetto che descrive un'occorrenza, in Passo 1 l'evento è l'arrivo di un nuovo numero.
La maggior parte delle volte vedrai un evento scritto in una struttura simile a questa:
MouseEvent.CLICK
Questo snippet di codice consiste di due cose:
Il tipo di evento è in realtà una stringa costante statica. Potrebbe sembrare strano, ma un Evento non è altro che una stringa. Prova a eseguire questo snippet.
traccia (MouseEvent.MOUSE_MOVE);
Otterrai come risultato mouseMove. Abbiamo appena tracciato il MOUSE_MOVE costante, che si trova nella classe MouseEvent. Un evento è una stringa! Ma questa stringa rappresenta l'occorrenza (in questo esempio) del movimento del mouse.
Un evento accade sempre da qualche parte. Dove accade l'evento è dove viene licenziato (spedito). Le origini degli eventi di distribuzione si trovano nella classe EventDispatcher. Realizza che il luogo in cui viene spedito l'evento è dove sta accadendo. Quindi se filmato A invia un evento, quindi un listener di eventi (gli ascoltatori di eventi verranno spiegati nel passaggio 5) aggiunti a filmato B non riceverebbe questo evento.
Per semplificare le cose, tutti gli oggetti di visualizzazione hanno la funzione incorporata dispatchEvent (event: Event), proprio come molte altre classi.
var myMC: MovieClip = new MovieClip (); myMC.dispatchEvent (new Event (MouseEvent.CLICK));
Ma la maggior parte delle volte non invii gli eventi manualmente, la maggior parte delle volte gli eventi vengono inviati automaticamente. Ad esempio, se clicchino sul clip filmato A, invierà automaticamente l'evento MouseEvent.CLICK.
Quando accade un certo evento, noi, come sviluppatori Flash, vorremmo fare qualcosa per rispondere a questo evento. Gli ascoltatori di eventi sono ciò di cui hai bisogno. Gli ascoltatori di eventi non hanno una propria classe, no sono un po 'diversi. I listener di eventi vengono aggiunti a un oggetto. Gli ascoltatori di eventi sono oggetti che "ascoltano" un determinato evento. Quando si verifica questo evento, verrà chiamata una funzione, a gestore (funzione).
Guarda l'immagine sottostante, mostrando la sintassi dietro la funzione addEventListener (), che viene utilizzato per aggiungere un listener di eventi:
In realtà quelli non sono tutti i parametri accettati dal metodo addEventListener, ce ne sono ancora tre che non ho menzionato. Non li utilizzerai quasi mai, soprattutto quando hai appena iniziato a utilizzare i listener di eventi. Esaminiamo nuovamente la struttura del metodo addEventListener.
addEventListener (type: String, listener: Function, useCapture: Boolean = false, priority: int = 0, useWeakReference: Boolean = false): void
Quindi discutiamo gli ultimi 3 parametri:
Rimuovere un listener di eventi è semplice come aggiungerne uno.
// questo aggiunge un listener di eventi allo stage stage.addEventListener (MouseEvent.CLICK, clickHandler); // rimuove il listener di eventi aggiunto allo stage stage.removeEventListener (MouseEvent.CLICK, clickHandler);
Quando l'evento si verifica quando un ascoltatore di eventi sta ascoltando, chiama una funzione. Questa funzione è chiamata gestore o il funzione di ascolto. Guarda l'immagine sottostante, mostrando la sintassi del gestore:
Si noti l'argomento nel gestore, questo argomento è obbligatorio. La funzione listener ha solo un argomento e non gli è permesso avere di più. Questo evento contiene informazioni sull'evento, ne parleremo in passaggio 9.
Ora vogliamo che myMC risponda all'evento inviato, quindi aggiungeremo un evento e successivamente la funzione del gestore. Il nostro codice apparirà così:
Accentsconagua
// crea il nostro filmato myMC var myMC: MovieClip = new MovieClip (); // consenti a myMC di inviare l'evento MouseEvent.CLICK myMC.dispatchEvent (new Event (MouseEvent.CLICK)); // aggiungi un listener di eventi a myMC, che ascolta l'evento MouseEvent.CLICK e chiamerà clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // definisce la funzione funzione di gestione clickHandler (event: Event) trace ("Ho sentito l'evento MouseEvent.CLICK"); Successivamente prova il tuo film (Windows: Ctrl + Invio, Mac: Cmd + Invio).
Hai avuto qualche risultato? No? Beh, nemmeno io. Vedremo cosa non va nel prossimo passo.
Allora, cosa c'è che non va? Beh, non può essere un errore di sintassi, almeno sono non ottenere nulla. No, tecnicamente non è nemmeno un errore. Guarda di nuovo il codice, ma questa volta ricorda che il codice verrà eseguito riga per riga:
// crea il nostro filmato myMC var myMC: MovieClip = new MovieClip (); // consenti a myMC di inviare l'evento MouseEvent.CLICK myMC.dispatchEvent (new Event (MouseEvent.CLICK)); // aggiungi un listener di eventi a myMC, che ascolta l'evento MouseEvent.CLICK e chiamerà clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // definisce la funzione funzione di gestione clickHandler (event: Event) trace ("Ho sentito l'evento MouseEvent.CLICK"); Spero che tu abbia capito cosa non ha funzionato: l'evento viene inviato prima che un listener di eventi sia stato aggiunto a myMC. Quindi, quando il listener di eventi è stato aggiunto, è troppo tardi, l'evento è successo. Fortunatamente è facile da risolvere, basta cambiare l'ordine e prima aggiungere l'ascoltatore dell'evento, quindi spedire l'evento:
// crea il nostro filmato myMC var myMC: MovieClip = new MovieClip (); // aggiungi un listener di eventi a myMC, che ascolta l'evento MouseEvent.CLICK e chiamerà clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // consenti a myMC di inviare l'evento MouseEvent.CLICK myMC.dispatchEvent (new Event (MouseEvent.CLICK)); // definisce la funzione funzione di gestione clickHandler (event: Event) trace ("Ho sentito l'evento MouseEvent.CLICK"); Allora perché abbiamo fatto tutto questo? Bene, probabilmente incontrerai questo problema e potrebbe volerci un po 'per capire cosa sta succedendo. È meglio mostrarti il problema e insegnarti come risolverlo.
Ogni funzione del gestore ha un argomento; l'argomento dell'evento. Questo argomento contiene dati sull'evento e sul dispatcher dell'evento. Il parametro contiene proprietà che vorremmo leggere. Ecco una lista di alcuni dei più usati:
Con questo possiamo usare lo stesso gestore per diversi tipi di eventi. Come? Bene parleremo di questo nel prossimo passo.
Ok, prima diamo un'occhiata a questo frammento di codice:
stage.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); stage.addEventListener (MouseEvent.MOUSE_UP, upHandler); function downHandler (event: MouseEvent) trace ("Down"); function upHandler (event: MouseEvent) trace ("Up"); Stiamo usando due eventi, vale a dire MouseEvent.MOUSE_DOWN e MouseEvent.MOUSE_UP. Il primo evento è l'evento quando il mouse preme il pulsante principale del mouse e lo tiene giù. Quando la persona rilascia questo pulsante, succede l'evento MouseEvent.MOUSE_UP. Il pulsante del mouse va su dopo averlo rilasciato.
Ora possiamo usare invece di due gestori (vale a dire downHandler e upHandler) un solo gestore. Rimuovi il codice che abbiamo scritto e scrivi come segue:
stage.addEventListener (MouseEvent.MOUSE_DOWN, gestore); stage.addEventListener (MouseEvent.MOUSE_UP, gestore); gestore di funzioni (event: MouseEvent) trace ("Qualcosa è successo ..."); Ok, abbiamo configurato il nostro gestore e funziona, ma vogliamo che il nostro gestore faccia qualcosa di specifico, a seconda di quale evento è passato al gestore. Fortunatamente, possiamo usare Tipo di evento. Usiamolo!
stage.addEventListener (MouseEvent.MOUSE_DOWN, gestore); stage.addEventListener (MouseEvent.MOUSE_UP, gestore); gestore di funzioni (event: MouseEvent) if (event.type == "mouseDown") trace ("Down"); else trace ("Up"); Ora diciamo che un clic avviene su un Movie Clip, chiamiamolo MCA. L'evento non viene semplicemente inviato su mcA, no, l'evento viaggia attraverso l'intero giocatore. Questo viaggio è chiamato il flusso di eventi, pensa solo a come l'evento scorre attraverso il giocatore.
L'evento inizia al livello più alto, al palcoscenico, dopo passerà attraverso il genitori di MCA, fino a quando l'evento raggiunge mcA. In seguito l'evento tornerà "in bolla" da mcA, di nuovo sul palco.
Ok, bello, ma per cosa posso usare questo? Perché ora sappiamo che un evento viaggia attraverso tutti i genitori del dispatcher, possiamo usare solo uno ascoltatore di eventi, per tenere traccia degli eventi di più di un oggetto.
Ok, quindi creiamo alcuni clip filmato uno dentro l'altro. Puoi farlo da solo, o semplicemente utilizzare il file step-11.fla fornito.
Creeremo 3 filmati e daremo loro i nomi delle istanze redMC, blueMC e greenMC. Successivamente, inserisci tutti questi all'interno di un Movie Clip più grande, chiamato contenitore.
Ora iniziamo a scrivere il codice. Ho già creato un livello chiamato Azioni, quindi scrivi il tuo codice su quel livello. Per prima cosa aggiungiamo un listener di eventi a contenitore, ascoltando l'evento MouseEvent.CLICK, con il gestore chiamato clickHandler.
container.addEventListener (MouseEvent.CLICK, clickHandler); function clickHandler (event: MouseEvent) // function body
Vogliamo sapere quale pulsante viene cliccato, quindi perché abbiamo aggiunto un listener di eventi al contenitore? Bene, guarda l'immagine qui sotto:
Come vedi, l'evento viene inviato su redMC, tuttavia lo farà bolla torna al contenitore. Quindi il listener di eventi aggiunto al contenitore sentirà l'evento e chiamerà la funzione listener clickHandler. Lo stesso accade con blueMC e greenMC.
Ora useremo event.target, perché event.target è il dispatcher di eventi e il dispatcher di eventi è redMC. Quindi, come possiamo usare event.target? Possiamo controllare event.target.name, che restituisce il nome dell'istanza come una stringa. Quindi possiamo semplicemente usare il normale Se dichiarazioni:
container.addEventListener (MouseEvent.CLICK, clickHandler); function clickHandler (event: MouseEvent) if (event.target.name == "redMC") trace ("Red"); if (event.target.name == "blueMC") trace ("Blue"); if (event.target.name == "greenMC") trace ("Green"); Ora hai una buona comprensione del framework degli eventi, tuttavia per ottenere qualcosa, la cosa fondamentale è sapere quale evento utilizzare. Un ottimo posto per verificare quali eventi esistono, è la Guida di riferimento al linguaggio e ai componenti di ActionScript 3.0. Basta fare clic su un evento che contiene la classe, come MouseEvent, e controllare quale sia ciascun evento.
Questo evento si verifica quando l'utente sposta il mouse. Se aggiungi un listener di eventi che ascolta questo evento, su, diciamo, un Movie Clip chiamato myMC, allora sapresti quando il mouse si muoverà su myMC.
myMC.addEventListener (MouseEvent.MOUSE_MOVE, mouseMoveHandler); function mouseMoveHandler (event: MouseEvent) trace ("Il mouse si sposta su myMC"); Questo evento si verifica quando l'utente si sposta (aleggia). Questo evento si verifica solo quando l'utente sposta il cursore da qualche altra parte sull'oggetto. Spostare il mouse sull'oggetto non è più l'evento MouseEvent.MOUSE_OVER, ma l'evento MouseEvent.MOUSE_MOVE.
myMC.addEventListener (MouseEvent.MOUSE_OVER, overHandler); function overHandler (event: MouseEvent) trace ("Hai appena spostato il mouse su myMC"); Questo evento è esattamente l'opposto di MouseEvent.MOUSE_OVER. Questo è quando il cursore dell'utente si sposta fuori dall'oggetto, o come lo chiamano (i ragazzi che hanno creato AS3), fuori dall'oggetto.
myMC.addEventListener (MouseEvent.MOUSE_OUT, outHandler); function outHandler (event: MouseEvent) trace ("Hai appena spostato il mouse su myMC"); Questo evento si verifica quando l'utente preme il mouse principale verso il basso, mentre viene tenuto premuto.
myMC.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); function downHandler (event: MouseEvent) trace ("Il tasto principale del mouse è premuto su myMC"); Questo evento è esattamente l'opposto di MouseEvent.MOUSE_DOWN. Quando l'utente rilascia il pulsante principale del mouse, si verifica l'evento MouseEvent.MOUSE_UP.
myMC.addEventListener (MouseEvent.MOUSE_UP, upHandler); function upHandler (event: MouseEvent) trace ("Il tasto del mouse primario è stato rilasciato, mentre si passava il mouse su myMC"); Bene, il nome rende già abbastanza chiaro quando si verifica questo evento. Questo evento si verifica quando l'utente fa clic (con il pulsante principale del mouse).
myMC.addEventListener (MouseEvent.CLICK, clickHandler); function clickHandler (event: MouseEvent) trace ("Hai appena fatto clic su myMC"); Bene, questo evento si verifica quando l'utente fa clic due volte (con il pulsante principale del mouse). Si noti che quando si verifica MouseEvent.DOUBLE_CLICK, che MouseEvent.CLICK si sta verificando per la seconda volta.
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); function doubleClickHandler (event: MouseEvent) trace ("Hai appena fatto doppio clic su myMC"); Se ora testi il tuo film e fai doppio clic, non accadrà nulla. Perché? Bene, per impostazione predefinita i clip filmato (e quasi tutti gli oggetti di visualizzazione) hanno la proprietà doubleClickEnabled impostata su false. Quindi MouseEvent.DOUBLE_CLICK non verrà inviato. Basta impostarlo su true e tutto funzionerà correttamente.
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); function doubleClickHandler (event: MouseEvent) trace ("Hai appena fatto doppio clic su myMC"); myMC.doubleClickEnabled = true; Questo evento si verifica ogni volta che l'oggetto entra in una nuova trama (sì, sembra un po 'strano). Bene, in pratica questo evento si verifica al ritmo della frequenza dei fotogrammi. Ciò significa che se il tuo film ha un framerate di 30 fps, l'evento verrà chiamato 30 volte al secondo. Per cosa useresti questo evento? Puoi usare questo evento per far accadere le cose gradualmente. Ad esempio, è possibile aumentare la coordinata x di un oggetto di 5, alla velocità della frequenza dei fotogrammi.
myMC.addEventListener (Event.ENTER_FRAME, enterFrameHandler); function enterFrameHandler (event: Event) myMC.x + = 5;
Questo evento si verifica quando l'oggetto completa ciò che stava facendo. La maggior parte delle volte lo utilizzerai per cose che hanno bisogno di caricare qualcosa o per cose che riproducono una qualche forma di media. Un URLLoader carica un URLRequest, dopo che URLLoader ha completato il caricamento, quindi caricheremo questi dati in un altro caricatore e in seguito aggiungeremo il caricatore allo stage.
var myURLRequest: URLRequest = new URLRequest ("http://farm3.static.flickr.com/2382/1616598266_bafebf0086_o.jpg"); var myURLLoader: URLLoader = new URLLoader (myURLRequest); myURLLoader.dataFormat = URLLoaderDataFormat.BINARY; myURLLoader.addEventListener (Event.COMPLETE, completeHandler); function completeHandler (event: Event) var loader: Loader = new Loader (); Loader.loadBytes (myURLLoader.data); addChild (loader); Questo evento si verifica quando il flash player o la pagina in cui è contenuto il flash viene ridimensionato. È possibile utilizzare questo evento per riposizionare gli oggetti dopo il ridimensionamento.
stage.addEventListener (Event.RESIZE, resizeHandler); function resizeHandler (event: Event) trace ("Le dimensioni dello stage sono" + stage.stageWidth + "x" + stage.stageHeight); Questo evento si verifica quando qualunque il tasto viene premuto sulla tastiera.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) trace ("Hai appena premuto un tasto!"); Questo evento è esattamente l'opposto di KeyboardEvent.KEY_DOWN, questo evento si verifica quando qualunque la chiave viene rilasciata (la chiave sale).
stage.addEventListener (KeyboardEvent.KEY_UP, keyUpHandler); function keyUpHandler (event: KeyboardEvent) trace ("Hai appena rilasciato una chiave"); Certo, è abbastanza inutile rispondere qualsiasi chiave (tranne che per uno screen saver), quindi dovremmo recuperare le informazioni su quale tasto è stato premuto. Fortunatamente, alcune delle chiavi sono incorporate nella classe KeyboardEvent, sono booleane e sono impostate su true quando viene premuto. Questi costruiti in booleani sono:
Quindi ora possiamo usare questo per essere più specifici quale tasto deve essere premuto prima di fare qualcosa.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.shiftKey) trace ("Hai appena premuto il tasto shift"); Potresti starti chiedendo, okay, che dire di tutte le altre chiavi? Beh, c'è qualcosa chiamato il chiave. Ogni chiave ha un certo numero; un codice chiave. Possiamo controllare il codice chiave della chiave che ha attivato l'evento. Questo viene fatto con event.keyCode, che restituisce un intero. Clicca qui per un elenco di codici chiave. Anche se è per javascript, i codici chiave sono gli stessi.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.keyCode == 65) trace ("Hai appena premuto il tasto A"); Ora è più semplice memorizzare i codici chiave in una variabile (o se sei hardcore, in una classe) e usare semplicemente quella variabile, invece del codice chiave.
var A: uint = 65; stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.keyCode == A) trace ("Hai appena premuto il tasto A"); Con i codici chiave puoi fare parecchio, tuttavia a volte non è ciò di cui hai bisogno. Ad esempio, la stessa chiave viene utilizzata per i personaggi un e UN. Ma vorremmo ancora distinguere tra questi due. Bene, l'evento porta il codice del personaggio del dispatcher dell'evento.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) trace (event.charCode);
Va bene, funziona, tuttavia dobbiamo ricordare questi codici di caratteri? No. Fortunatamente possiamo usare la funzione charCodeAt (), che restituisce il codice carattere di un carattere (in una stringa). charCodeAt () prende per impostazione predefinita il primo carattere fuori dalla stringa. charCodeAt (0) è il primo carattere, charCodeAt (1) il secondo, eccetera.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.charCode == String ("a"). charCodeAt ()) trace ("Hai appena premuto una chiave minuscola"); Ora prova a digitare quanto segue:
myMC.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) trace ("Hai appena premuto un tasto, mentre ti concentri su myMC"); Prova a provare questo, non funzionerà! Perché? Se myMC è un clip filmato, non accetta l'input da tastiera, quindi gli eventi della tastiera non verranno inviati ai clip filmato. Se vuoi che myMC risponda, aggiungi il listener di eventi allo stage e poi fai in modo che myMC faccia qualcosa. Prova a cambiare myMC da un clip filmato a un campo di testo dinamico, quindi funzionerà.
Che dire di due campi di testo dinamici? Se l'utente digita, entrambi i campi di testo inviano un evento? No, solo quello che stai digitando. Questo è chiamato messa a fuoco. Gli eventi della tastiera vengono inviati dall'oggetto che ha lo stato attivo. Il palcoscenico è l'unico oggetto che ha ancora la messa a fuoco, mentre un altro oggetto ha anche il focus.
Questo evento è appositamente progettato per i timer. Viene inviato ad un timer, che ha appena raggiunto il tempo di ritardo. Ciò significa che puoi usare questo evento per fare qualcosa in modo molto preciso, a intervalli di tempo prestabiliti.
var myTimer: Timer = new Timer (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER, timerHandler); function timerHandler (event: TimerEvent) trace ("un secondo dopo ..."); Tutti i timer hanno un secondo parametro opzionale. Questo parametro imposta il conteggio delle ripetizioni del timer. Ciò significa che quando il timer raggiunge il tempo di ritardo, ricomincerà. Se il timer si è ripetuto tutte le volte che il conteggio delle ripetizioni, invierà l'evento TimerEvent.TIMER_COMPLETE.
var myTimer: Timer = new Timer (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerHandler); function timerHandler (event: TimerEvent) trace ("Il timer si è ripetuto 5 volte"); Era così! Spero che ora abbiate una conoscenza approfondita del framework di eventi di ActionScript 3.0. Realizza che gli eventi discussi non sono tutti gli eventi esistenti, ho appena discusso quelli che uso spesso. Non dimenticare di controllare sempre la lingua e i componenti di riferimento, può aiutarti molto! È stato un piacere scrivere per voi ragazzi!
