7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Das ActionScript 3.0-Event-Framework unter die Lupe nehmen

Scroll to top
Read Time: 16 mins

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

In diesem Tutorial werde ich das ActionScript 3.0 Event Framework erläutern. Nach diesem Tutorial sollten Sie ein klares Verständnis dafür haben, wie Events, Events-Verteiler und Event-Listener funktionieren.

Was werden Sie lernen?

Da das AS3-Event-Framework riesig ist, werden wir uns die verschiedenen Dinge ansehen, aus denen das Event-Framework besteht. Wir werden Folgendes lernen: 

  • Events
  • Event-Dispatcher
  • Event-Listener
  • Eventfluss
  • Oft verwendete Events
  • Und ein paar Tipps und Tricks

Schritt 1:Schritt 1: Das Event-Framework vereinfacht

Ich denke wirklich, dass es Ihnen schwer fallen würde, den Veranstaltungsrahmen zu verstehen, wenn wir direkt in den Fachjargon springen, also werde ich zuerst eine reale Situation beschreiben. Die ganze Situation ist eine Metapher für den Veranstaltungsrahmen. Okay, also los geht's:

Ich bin ein begeisterter Leser von Computer Arts und warte jeden Tag auf die neue Ausgabe. Wenn ich die Ausgabe erhalte, beginne ich sie zu lesen.

Schritt 2: Analysieren der Event-Framework-Metapher

Okay, wir haben einige Dinge im Gange:

  • Ich erhalte die neue Ausgabe. Dieser Empfang einer Ausgabe ist ein Event.
  • Dieses Event passiert irgendwo, es passiert mir, ich bin der EventDispatcher.
  • Ich warte auf die neue Ausgabe. Ich bin ein Objekt und warte auf dieses Event. Ich bin ein Objekt, das auf das Event wartet. Ich bin ein Objekt, dem ein Event-Listener hinzugefügt wurde. Dieser Event-Listener hört sich ein bestimmtes Ereignis an (nämlich das Empfangen einer neuen Ausgabe).
  • Wenn ich die Ausgabe erhalte, beginne ich sie zu lesen. Wenn das Event eingetreten ist, mache ich etwas, ich führe eine Funktion aus. Ich kümmere mich um das Event. Die Funktion, die ich mache, heißt Handler- und / oder Listener-Funktion.

Schritt 3: Technical Jargon - Event

Ich habe verschiedene Dinge erwähnt:

  • Event
  • EventDispatcher
  • Event-Listener
  • Handler / Listener-Funktion

Ein Event ist ein Objekt, das ein Event beschreibt. In Schritt 1 ist das Ereignis das Eintreffen eines neuen Problems.

In den meisten Fällen wird ein Event angezeigt, das in einer ähnlichen Struktur geschrieben ist:

Dieser Codeausschnitt besteht aus zwei Dingen:

  • MouseEvent Dies ist die Klasse, die ein oder mehrere Events enthält. Dies wird immer in CamelCase geschrieben.
  • CLICK Dies ist der Eventstyp. Dies wird immer in GROSSBUCHSTABEN geschrieben.

Der Eventstyp ist eigentlich eine statische Konstantenzeichenfolge. Es mag seltsam klingen, aber ein Event ist nichts anderes als eine Zeichenfolge. Versuchen Sie, dieses Snippet auszuführen.

Sie erhalten als Ausgabe mouseMove. Wir haben gerade die Konstante MOUSE_MOVE verfolgt, die sich in der MouseEvent-Klasse befindet. Ein Ereignis ist eine Zeichenfolge! Diese Zeichenfolge repräsentiert jedoch das Auftreten (in diesem Beispiel) der Bewegung der Maus.

Schritt 4: Technische Fachsprache - EventDispatcher

Ein Event passiert immer irgendwo. Wo das Event eintritt, wird es ausgelöst(versandt). Die Wurzeln des Dispatching von Events liegen in der Klasse EventDispatcher. Beachten Sie, dass der Ort, an dem das Event ausgelöst wird, dort stattfindet, wo es stattfindet. Wenn also Movieclip A ein Event auslöst, erhält ein Event-Listener (Event-Listener werden in Schritt 5 erläutert), der zu Movieclip B hinzugefügt wurde, dieses Event nicht.

Zur Vereinfachung verfügen alle Anzeigeobjekte wie viele andere Klassen über die integrierte Funktion dispatchEvent(event:Event).

In den meisten Fällen werden Events jedoch nicht manuell ausgelöst. In den meisten Fällen werden Ereignisse automatisch ausgelöst. Wenn ich beispielsweise auf Movieclip A klicken würde, würde das Event MouseEvent.CLICK automatisch ausgelöst.

Schritt 5: Technical Jargon - Event Listener

Wenn ein bestimmtes Event eintritt, möchten wir als Flash-Entwickler etwas unternehmen, um auf dieses Event zu reagieren. Event-Listener sind genau das, was Sie brauchen. Event-Listener haben keine eigene Klasse, nein, sie sind ein bisschen anders. Ereignis-Listener werden einem Objekt hinzugefügt. Event-Listener sind Objekte, die ein bestimmtes Event "abhören". Wenn dieses Event eintritt, wird eine Funktion aufgerufen, ein Handler (Funktion).

Schauen Sie sich das Bild unten an und zeigen Sie die Syntax hinter der Funktion addEventListener(), mit der ein Event-Listener hinzugefügt wird:

Eigentlich sind das nicht alle Parameter, die die addEventListener-Methode akzeptiert, es gibt noch drei, die ich nicht erwähnt habe. Sie werden sie fast nie verwenden, insbesondere wenn Sie gerade erst mit der Verwendung von Event-Listenern begonnen haben. Schauen wir uns noch einmal die Struktur der addEventListener-Methode an.

Lassen Sie uns also die letzten 3 Parameter diskutieren:

  • useCapture: Wenn dieser Parameter auf true gesetzt ist, hören wir uns das Event in der Erfassungsphase an. Standardmäßig ist dieser Parameter auf false gesetzt, daher hören wir uns das Event in der Ziel- und Blasenphase an. Wir werden den Eventsfluss in Schritt 10 diskutieren.
  • priority: Auch wenn es so aussieht, als ob alle Event-Listener gleichzeitig arbeiten, tun sie dies tatsächlich nicht. Manchmal können sie miteinander in Konflikt geraten. Dies soll sicherstellen, dass ein bestimmter Event-Listener eine höhere Priorität als ein anderer Event-Listener hat.
  • useWeakReference: Wenn dieser Parameter auf true gesetzt ist, wird eine schwache Verbindung zwischen dem Objekt und dem Event-Listener hergestellt. Was bedeutet das? Normalerweise wird bei Objekten Müll gesammelt, wenn keine Verweise darauf vorhanden sind. Wenn das Objekt entfernt wird, wo ein Event-Listener hinzugefügt wird, ist es weiterhin vorhanden, wenn auf eine andere Stelle verwiesen wird. Dies geschieht mit starken Speicherreferenzen. Bei schwachen Speicherreferenzen wird der Event-Listener entfernt, wenn das Objekt, zu dem er hinzugefügt wurde, entfernt wird. Ich persönlich setze diesen Parameter auf true (daher verwende ich schwache Speicherreferenzen).

Das Entfernen eines Event-Listeners ist genauso einfach wie das Hinzufügen eines Listeners.

Schritt 6: Handler / Listener-Funktion

Wenn das Event eintritt, auf das ein Event-Listener wartet, ruft er eine Funktion auf. Diese Funktion wird als Handler- oder Listener-Funktion bezeichnet. Sehen Sie sich das Bild unten an, das die Syntax des Handlers zeigt:

Beachten Sie das Argument im Handler, dieses Argument ist obligatorisch. Die Listener-Funktion hat nur ein Argument und darf nicht mehr haben. Dieses Event enthält Informationen zum Event. Wir werden in Schritt 9 darüber sprechen.

Schritt 7: Hinzufügen eines Event-Listeners und -Handlers

Jetzt möchten wir, dass myMC auf das ausgelöste Event reagiert, also fügen wir ein Event und anschließend die Handlerfunktion hinzu. Unser Code sieht folgendermaßen aus:

Testen Sie anschließend Ihren Film (Windows: Strg + Eingabetaste, Mac: Befehlstaste + Eingabetaste).

Haben Sie eine Ausgabe bekommen? Nein? Nun, ich auch nicht. Wir werden uns im nächsten Schritt ansehen, was falsch läuft.

Schritt 8: Code-Reihenfolge

Also, was läuft falsch? Nun, es kann kein Syntaxfehler sein, zumindest bekomme ich nichts. Nein, das ist technisch gesehen nicht einmal ein Fehler. Schauen Sie sich den Code noch einmal an, aber denken Sie diesmal daran, dass der Code Zeile für Zeile ausgeführt wird:

Ich hoffe, Sie haben erkannt, was schief gelaufen ist: Das Event wird ausgelöst, bevor ein Event-Listener zu myMC hinzugefügt wurde. Wenn also der Event-Listener hinzugefügt wurde, ist es zu spät, das Event ist eingetreten. Zum Glück ist es einfach zu lösen. Ändern Sie einfach die Reihenfolge und fügen Sie zuerst den Event-Listener hinzu. Versenden Sie anschließend das Event:

Warum haben wir das alles gemacht? Nun, Sie werden wahrscheinlich auf dieses Problem stoßen und es kann eine Weile dauern, bis Sie erkennen, was los ist. Es ist besser, Ihnen das Problem zu zeigen und Ihnen beizubringen, wie Sie es lösen können.

Schritt 9: Das Event-Argument

Jede Handlerfunktion hat ein Argument. das Event-Argument. Dieses Argument enthält Daten zum Event und zum Eventsverteiler. Der Parameter enthält Eigenschaften, die wir lesen möchten. Hier ist eine Liste der am häufigsten verwendeten:

  • target: Dies gibt das Zielobjekt und damit den Eventsverteiler des Events zurück.
  • currentTarget: Dies gibt das aktuell anvisierte Objekt innerhalb des Eventflusses zurück. Wir werden in Schritt 10 über den Eventfluss sprechen.
  • type: Dies gibt die Eventzeichenfolge zurück. Der Wert wird immer in camelCase geschrieben. MOUSE_DOWN hat also den Wert mouseDown.

Damit können wir den gleichen Handler für verschiedene Arten von Ereignissen verwenden. Wie? Nun, wir werden dies im nächsten Schritt besprechen.

Schritt 10: Mehrere Events, eine Listener-Funktion

Okay, schauen wir uns zuerst diesen Codeausschnitt an:

Wir verwenden zwei Events, nämlich MouseEvent.MOUSE_DOWN und MouseEvent.MOUSE_UP. Das erste Event ist das Event, bei dem die Maus die primäre Maustaste drückt und gedrückt hält. Wenn die Person diese Schaltfläche loslässt, tritt das Ereignis MouseEvent.MOUSE_UP auf. Die Maustaste wird nach dem Loslassen nach oben gedrückt.

Jetzt können wir anstelle von zwei Handlern (nämlich downHandler und upHandler) nur einen Handler verwenden. Entfernen Sie den von uns geschriebenen Code und geben Sie Folgendes ein:

Okay, wir haben unseren Handler eingerichtet und es funktioniert, aber wir möchten, dass unser Handler etwas Bestimmtes tut, je nachdem, welches Event an den Handler übergeben wird. Zum Glück können wir event.type verwenden. Lassen Sie es uns benutzen!

Schritt 11: Event-Fluss

Nehmen wir nun an, ein Klick auf einen Movieclip erfolgt, nennen wir ihn mcA. Das Event wird nicht einfach bei mcA versandt, nein, das Event durchläuft den gesamten Spieler. Diese Reise wird als Event-Fluss bezeichnet. Denken Sie nur daran, wie das Event durch den Spieler fließt.

Die Veranstaltung beginnt auf der obersten Ebene, auf der Bühne, danach geht sie durch die Eltern von mcA, bis die Veranstaltung mcA erreicht. Danach "sprudelt" die Veranstaltung von mcA zurück auf die Bühne.

Ok, cool, aber wofür kann ich das verwenden? Da wir jetzt wissen, dass ein Event alle Eltern des Dispatchers durchläuft, können wir nur einen Event-Listener verwenden, um die Events von mehr als einem Objekt zu verfolgen.

Schritt 12: Mehrere Objekte, ein Event-Listener

Okay, also lassen Sie uns mehrere Movieclips ineinander erstellen. Sie können dies selbst tun oder einfach die bereitgestellte Datei step-11.fla verwenden.

Wir erstellen 3 Movieclips und geben ihnen die Instanznamen redMC, blueMC und greenMC. Legen Sie anschließend alle diese Elemente in einen größeren Movieclip mit dem Namen container.

Beginnen wir jetzt mit dem Schreiben von Code. Ich habe bereits eine Ebene mit dem Namen Actions erstellt. Schreiben Sie also Ihren Code auf diese Ebene. Fügen wir zunächst dem container einen Event-Listener hinzu, der das Ereignis MouseEvent.CLICK mit dem Handler clickHandler abhört.

Wir möchten wissen, auf welche Schaltfläche geklickt wird. Warum haben wir dem Container einen Event-Listener hinzugefügt? Schauen Sie sich das Bild unten an:

Wie Sie sehen, wird das Event bei redMC ausgelöst, es sprudelt jedoch zurück in den Container. Dann hört der dem Container hinzugefügte Event-Listener das Event und ruft die Listener-Funktion clickHandler auf. Das gleiche passiert mit blueMC und greenMC.

Jetzt verwenden wir event.target, da event.target der Event-Dispatcher und der Event-Dispatcher redMC ist. Wie können wir event.target verwenden? Wir können nach event.target.name suchen, das den Instanznamen als Zeichenfolge zurückgibt. Wir können also nur normale if-Anweisungen verwenden:

Schritt 13: Häufig verwendete Events

Jetzt haben Sie ein gutes Verständnis für das Event-Framework. Um jedoch etwas zu erreichen, ist es wichtig zu wissen, welches Event verwendet werden soll. Ein guter Ort, um zu überprüfen, welche Events vorhanden sind, ist die ActionScript 3.0-Sprach- und Komponentenreferenz. Klicken Sie einfach auf ein Ereignis mit einer Klasse wie MouseEvent und sehen Sie sich die einzelnen Events an.

Schritt 14: MouseEvent.MOUSE_MOVE

Dieses Event tritt auf, wenn der Benutzer die Maus bewegt. Wenn Sie einen Event-Listener hinzufügen, der dieses Event abhört, beispielsweise in einem Movieclip mit dem Namen myMC, wissen Sie, wann sich die Maus über myMC bewegt.

Schritt 15: MouseEvent.MOUSE_OVER

Dieses Event tritt auf, wenn sich der Benutzer bewegt (schwebt). Dieses Event tritt nur auf, wenn der Benutzer den Cursor von einer anderen Stelle über das Objekt bewegt. Wenn Sie die Maus über das Objekt bewegen, ist dies nicht mehr das Event MouseEvent.MOUSE_OVER, sondern das Event MouseEvent.MOUSE_MOVE.

Schritt 16: MouseEvent.MOUSE_OUT

Dieses Event ist genau das Gegenteil von MouseEvent.MOUSE_OVER. Dies ist der Fall, wenn sich der Cursor des Benutzers vom Objekt wegbewegt oder wie sie (die Leute, die AS3 erstellt haben) es nennen, aus dem Objekt heraus.

Schritt 17: MouseEvent.MOUSE_DOWN

Dieses Event tritt auf, wenn der Benutzer die primäre Maus nach unten drückt, während sie gedrückt gehalten wird.

Schritt 18: MouseEvent.MOUSE_UP

Dieses Event ist genau das Gegenteil von MouseEvent.MOUSE_DOWN. Wenn der Benutzer die primäre Maustaste loslässt, tritt das Event MouseEvent.MOUSE_UP auf.

Schritt 19: MouseEvent.CLICK

Nun, der Name macht schon ziemlich deutlich, wann dieses Event eintritt. Dieses Event tritt auf, wenn der Benutzer klickt (mit der primären Maustaste).

Schritt 20: MouseEvent.DOUBLE_CLICK

Nun, dieses Event tritt auf, wenn der Benutzer zweimal klickt (mit der primären Maustaste). Beachten Sie, dass MouseEvent.CLICK beim Auftreten von MouseEvent.DOUBLE_CLICK zum zweiten Mal auftritt.

Wenn Sie jetzt Ihren Film testen und doppelklicken, geschieht nichts. Warum? Standardmäßig haben Movieclips (und fast alle Anzeigeobjekte) die Eigenschaft doubleClickEnabled auf false gesetzt. MouseEvent.DOUBLE_CLICK wird also nicht versendet. Setzen Sie es einfach auf true und alles wird gut funktionieren.

Schritt 21: Event.ENTER_FRAME

Dieses Event tritt jedes Mal auf, wenn das Objekt in einen neuen Frame eintritt (ja, das klingt etwas seltsam). Nun, im Grunde tritt dieses Event mit der Rate der Bildrate auf. Das heißt, wenn Ihr Film eine Bildrate von 30 fps hat, wird das Event 30 Mal pro Sekunde aufgerufen. Wofür würden Sie dieses Event nutzen? Sie können dieses Event verwenden, um Dinge schrittweise geschehen zu lassen. Sie können beispielsweise die x-Koordinate eines Objekts mit der Bildrate um 5 erhöhen.

Schritt 22: Event.COMPLETE

Dieses Event tritt auf, wenn das Objekt die Ausführung abgeschlossen hat. Meistens verwenden Sie es für Dinge, die etwas laden müssen, oder für Dinge, die irgendeine Form von Medien abspielen. Ein URLLoader lädt eine URLRequest. Nachdem der URLLoader das Laden abgeschlossen hat, laden wir diese Daten in einen anderen Loader und fügen den Loader anschließend der Bühne hinzu.

Schritt 23: Event.RESIZE

Dieses Event tritt auf, wenn die Größe des Flash-Players oder der Seite, auf der sich der Flash befindet, geändert wird. Mit diesem Event können Sie Objekte nach der Größenänderung neu positionieren.

Schritt 24: KeyboardEvent.KEY_DOWN

Dieses Event tritt auf, wenn einen Schlüssel auf der Tastatur gedrückt wird.

Schritt 25: KeyboardEvent.KEY_UP

Dieses Event ist genau das Gegenteil von KeyboardEvent.KEY_DOWN. Dieses Event tritt auf, wenn ein Schlüssel losgelassen wird (der Schlüssel geht nach oben).

Schritt 26: Verwenden der integrierten Schlüsselbooleschen Werte

Natürlich ist es ziemlich nutzlos, auf einen Schlüssel zu antworten (mit Ausnahme eines Bildschirmschoners), daher müssten wir Informationen darüber abrufen, welche Taste gedrückt wurde. Glücklicherweise sind einige der Tasten in die Klasse KeyboardEvent integriert. Dies sind Boolesche Werte, die beim Drücken auf true gesetzt werden. Diese eingebauten Booleschen Werte sind:

  • KeyboardEvent.altKey, dies wird auf true gesetzt, wenn die Alt-Taste gedrückt wird.
  • KeyboardEvent.commandKey, dies wird auf true gesetzt, wenn die Befehlstaste gedrückt wird (nur AIR).
  • KeyboardEvent.controlKey, dies wird auf true gesetzt, wenn die Steuertaste (Strg) gedrückt wird (nur AIR).
  • KeyboardEvent.ctrlKey, dies wird auf true gesetzt, wenn die Steuertaste (Strg) unter Windows gedrückt wird. Auf dem Mac ist die Strg-Taste jedoch wahr, wenn die Cmd-Taste gedrückt wird.
  • KeyboardEvent.shiftKey, dies wird auf true gesetzt, wenn die Umschalttaste gedrückt wird.

Jetzt können wir dies verwenden, um genauer zu bestimmen, welche Taste gedrückt werden muss, bevor wir etwas tun.

Schritt 27: Verwenden von Schlüsselcodes

Sie fragen sich vielleicht, okay, was ist mit all den anderen Schlüsseln? Nun, es gibt so etwas wie den Schlüsselcode. Jeder Schlüssel hat eine bestimmte Nummer; ein Schlüsselcode. Wir können den Schlüsselcode des Schlüssels überprüfen, der das Ereignis ausgelöst hat. Dies geschieht mit event.keyCode, das eine Ganzzahl zurückgibt. Klicken Sie hier, um eine Liste der Schlüsselcodes anzuzeigen. Obwohl es sich um Javascript handelt, sind die Schlüsselcodes dieselben.

Jetzt ist es einfacher, die Schlüsselcodes in einer Variablen (oder, wenn Sie Hardcore sind, in einer Klasse) zu speichern und diese Variable anstelle des Schlüsselcodes zu verwenden.

Schritt 28: Verwenden von Zeichencodes

Mit Schlüsselcodes können Sie eine Menge erledigen, aber manchmal ist es nicht das, was Sie brauchen. Zum Beispiel wird der gleiche Schlüssel für die Zeichen a und A verwendet. Wir möchten jedoch immer noch zwischen diesen beiden unterscheiden. Nun, das Ereignis trägt den Zeichencode des Even-Verteilers.

Okay, das funktioniert, aber müssen wir uns dann diese Zeichencodes merken? Zum Glück können wir die Funktion charCodeAt() verwenden, die den Zeichencode eines Zeichens (in einem String) zurückgibt. charCodeAt() nimmt standardmäßig das erste Zeichen aus der Zeichenfolge. charCodeAt(0) ist das erste Zeichen, charCodeAt(1) das zweite usw.

Schritt 29: Fokus

Versuchen Sie nun Folgendes einzugeben:

Versuchen Sie dies zu testen, es wird nicht funktionieren! Warum? Wenn myMC ein Movieclip ist, werden keine Tastatureingaben akzeptiert, sodass Tastaturereignisse nicht an Movieclips gesendet werden. Wenn Sie möchten, dass myMC reagiert, fügen Sie den Event-Listener zur Bühne hinzu und lassen Sie myMC etwas tun. Versuchen Sie, myMC von einem Movieclip in ein dynamisches Textfeld zu ändern, dann funktioniert es.

Was ist mit zwei dynamischen Textfeldern? Wenn der Benutzer tippt, lösen beide Textfelder ein Event aus? Nein, nur die, die Sie eingeben. Dies wird als Fokus bezeichnet. Tastaturereignisse werden von dem Objekt ausgelöst, das den Fokus hat. Die Bühne ist das einzige Objekt, das noch fokussiert ist, während ein anderes Objekt ebenfalls fokussiert ist.

Schritt 30: TimerEvent.TIMER

Diese Event wurde speziell für Timer entwickelt. Es wird zu einem Timer versendet, der gerade die Verzögerungszeit erreicht hat. Dies bedeutet, dass Sie dieses Ereignis verwenden können, um in festgelegten Zeitintervallen etwas sehr Genaues zu tun.

Schritt 31: TimerEvent.TIMER_COMPLETE

Alle Timer haben einen optionalen zweiten Parameter. Dieser Parameter legt die Wiederholungszahl des Timers fest. Dies bedeutet, dass der Timer erneut startet, wenn er die Verzögerungszeit erreicht. Wenn sich der Timer so oft wiederholt hat wie die Anzahl der Wiederholungen, wird das Ereignis TimerEvent.TIMER_COMPLETE ausgelöst.

Abschluss

Das war's! Ich hoffe, dass Sie jetzt ein gründliches Verständnis des Event-Frameworks von ActionScript 3.0 haben. Beachten Sie, dass die besprochenen Events nicht alle existierenden Events sind. Ich habe nur die Events besprochen, die ich häufig verwende. Vergessen Sie nicht, immer die Sprach- und Komponentenreferenz zu überprüfen, es kann Ihnen sehr helfen! Es war eine Freude für euch zu schreiben!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.