Flash / ActionScript: Event Handling

Die Möglichkeit in ActionScript , Aktionen bzw. Methoden durch Auftreten bestimmter erwünschter Ereignisse auszulösen, verleiht Flash filmen jenen interaktiven Charakter, welcher dazu führte, dass sich das Format auch auf dem Gebiet der Erstellung von Webpräsenzen etablieren konnte.

Dabei wird zwischen vom Flash film selbst und vom Benutzer bzw. Betrachter ausgelösten Ereignissen unterschieden. Erstgenannte können beispielsweise das Erreichen eines bestimmten Bildes einer Movieclipinstanz während derer Wiedergabe oder das vollständige Einladen der Instanz in den Speicher sein. Zu den benutzerausgelösten Ereignissen zählen vor allem jene, welche in Verbindung mit Schaltflächen auftreten können.
Seit der Einführung von Flash MX im März 2002 gibt es zwei generelle Modelle, Ereignisse in ActionScript zu verarbeiten: Ereignisprozeduraktionen und Ereignisprozedurmethoden.

Ereignisprozeduraktionen

Dieses Modell ist das ältere der beiden und ist aufgrund der ihm zugrunde liegenden Philosophie vergleichsweise eher unflexibel. Zunächst sei die allgemeine Syntax erklärt:

Ereignisprozeduraktion(Ereignis)
{
Anweisung(en);
}

Die Ereignisprozeduraktion kann je nach Kontext entweder eine Movieclip- oder eine Schaltflächenaktion mit entsprechendem Ereignis als erwartetem Parameter sein.
Soll eine Movieclipinstanz auf ein Ereignis reagieren, ist die Ereignisprozeduraktion onClipEvent(Ereignis) zu verwenden, wobei die hierfür möglichen Ereignisparameter in der Übersicht im Verlauf dieses Kapitels zusammengestellt sind. Folgende beispielhafte Ereignisaktion ist einer Instanz eines Movieclips angehängt, d.h. in einem Schlüsselbild ihrer Zeitleiste notiert:

onClipEvent (enterFrame)
{
trace("Bild erreicht");
}

Der Ereignisprozeduraktion onClipEvent() wurde als Parameter das Ereignis enterFrame übergeben, so dass die im Block notierte Ausgabeanweisung ausgelöst wird, wenn das Bild, in welchem das Codefragment notiert ist, beim Abspielen des Films "betreten" wird.
Soll hingegen einer Schaltflächeninstanz eine Ereignisaktion hinzugefügt werden, ist die Verwendung der Ereignisprozeduraktion on(Ereignis) verbindlich. Die in diesem Zusammenhang möglichen Ereignisse sind wiederum in einem entsprechenden Überblick zusammengefasst. Der folgende ActionScript-Code zeigt Ereignisaktionen, welche einer Schalftflächeninstanz angehängt wurden:

on(rollOver)
{
  this._x += 2;
  this._y += 2;
}

on(rollOut)
{
  this._x -= 2;
  this._y -= 2;
}

Der Parameter rollOver für on() bewirkt, dass das nachfolgende Ereignis ausgelöst wird, wenn sich der Mauscursor über die Instanz bewegt, rollOut, wenn er sie wieder verlässt. In diesem Beispiel wird die Schaltflächeninstanz, in derer Zeitleiste die Ereignisaktion notiert ist, horizontal und vertikal um positiv 2 Pixel verschoben, wenn das Mausereignis rollOver eintritt. Verlässt der Cursor wieder die Instanz (Ereignis rollOut), wird die Instanz entsprechend zurück verschoben. Auf diese Weise wird zum Beispiel in simpler Buttoneffekt simmuliert.
Ereignisaktionen ist in diesem Modell gemein, dass sie nur in Schlüsselbildern der Zeitleiste derjenigen Instanzen notiert, also angehängt, werden können, welche das Ereignis verarbeiten soll. Die Instanz muss sich also bereits auf der Bühne befinden, so dass man auf deren Zeitleiste zugreifen kann. Daraus folgt zugleich, dass derartig definierte Ereignisaktionen auch nur Instanzen angehängt werden können, welche nicht mithilfe von entsprechenden ActionScript - Anweisungen dynamisch erzeugt wurden. Diese beiden Tatsachen begründen die eingangs erwähnte geringe Flexibilität.

Ereignisprozedurmethoden

Seit Flash MX kennt ActionScript dieses neue Modell des Event Handlings, welchem folgende allgemeine Syntax zugrunde liegt:

Instanzname.Ereignis = function ()
{
Anweisung(en);
}

Diese Syntax suggeriert bereits die weitaus flexiblere Ereignisverarbeitung, welchem dank dieses Modells möglich wird. Die zu verarbeitenden Ereignisse müssen nämlich nicht direkt in der Zeitleiste der betreffenden Instanz notiert, sondern können auch in beliebigen anderen Bildern des Flash films notiert werden. Die definierte Funktion wird der Instanz mit dem Namen Instanzname zugewiesen und ausgeführt, wenn das entsprechende Ereignis der Instanz auftritt. Auf diese Weise ist es auch kein Problem mehr, Ereignisaktionen für mit ActionScript dynamisch erzeugte Instanzen von Movieclips oder Schaltflächen zu definieren.
In den folgenden Beispielen werden analog zum Modell der Ereignisprozeduraktion die gleichen Aktionen für die jeweilige Instanz von Movieclip bzw. Schaltfläche ausgelöst, wobei die entsprechenden Instanzen per ActionScript dynamisch erzeugt werden. Die Ereignisverarbeitung einer Movieclipinstanz wie in Beispiel 1 - hier mit Namen MC_Instance - würde also in diesem Modell wie folgt beschrieben werden müssen:

//Erzeugt eine leere Movieclipinstanz namens MC_Instance
_root.createEmptyMovieClip("MC_Instance",1);

MC_Instance.onEnterFrame = function()
{
trace("Bild erreicht");
}

Beispiel 2 aus vorigem Abschnitt könnte in diesem Modell so realisiert werden:

//Erzeugt eine Instanz namens Button_Instance vom
//Symbol Button_Symbol aus Bibliothek
_root.attachMovie("Button_Symbol","Button_Instance",1);

Button_Instance.onRollOver = function()
{
  with(Button_Instance)
  {
    _x += 2;
    _y += 2;
  }
}

Button_Instance.onRollOut = function()
{
  with(Button_Instance)
  {
    _x -= 2;
    _y -= 2;
  }
}

Beide Beispiele führen im Ergebnis zu den gleichen Aktionen, wobei diese nur an unterschiedlichen Stellen für die entsprechenden Instanzen notiert werden können. Die hier verwendeten Anweisungen zum dynamischen Erzeugen von Instanzen werden im entsprechenden Kapitel noch näher betrachtet,

Überblick möglicher Ereignisse für Movieclipinstanzen

In der folgenden Übersicht sind die möglichen Ereignisse für Movieclipinstanzen zusammengestellt, wobei die Syntax für beide Modelle für jedes entsprechende Ereignis gezeigt wird.

Ereignisaktion (Modell Ereignisprozeduraktionen)	Ereignisprozedur (Modell Ereignisprozedurmethoden)	Aktion wird ausgelöst, ...
`onClipEvent(load)`	`Instanzname.onLoad`	... wenn Instanz erzeugt, d.h. in Zeitleiste eingefügt wurde
`onClipEvent(unload)`	`Instanzname.onUnload`	... wenn Instanz zerstört, d.h. aus Zeitleiste entfernt wurde
`onClipEvent(enterFrame)`	`Instanzname.onEnterFrame`	... solange Instanz existiert, d.h. in der Zeitleiste eingefügt ist (periodisches Auslösen)
`onClipEvent(mouseMove)`	`Instanzname.onMouseMove`	... wenn Instanz existiert und Benutzer Maus bewegt
`onClipEvent(mouseDown)`	`Instanzname.onMouseDown`	... wenn Instanz existiert und Benutzer linke Maustaste drückt
`onClipEvent(mouseUp)`	`Instanzname.onMouseUp`	... wenn Instanz existiert und Benutzer linke Maustaste loslässt
`onClipEvent(keyDown)`	`Instanzname.onKeyDown`	... wenn Instanz existiert und Benutzer eine beliebige Taste auf der Tastatur betätigt
`onClipEvent(keyUp)`	`Instanzname.onKeyUp`	... wenn Instanz existiert und Benutzer eine beliebige Taste auf der Tastatur loslässt
`onClipEvent(data)`	`Instanzname.onData`	... wenn Datenübertragung mittels `loadVariables("url", stufe [, variablen])` oder `loadMovie("url", stufe [, variablen])` abgeschlossen wurde

Überblick möglicher Ereignisse für Schaltflächeninstanzen

Diese Übersicht zeigt mögliche Ereignisse für Instanzen von Schaltflächen. Auch hier werden beiden Modelle mit der jeweiligen Syntax gegenübergestellt.

Ereignisaktion (Modell Ereignisprozeduraktionen)	Ereignisprozedur (Modell Ereignisprozedurmethoden)	Aktion wird ausgelöst, wenn ...
`on(press)`	`Instanzname.onPress`	... Benutzer mit linker Maustaste auf Schaltfläche klickt
`on(release)`	`Instanzname.onRelease`	... Benutzer mit linker Maustaste auf Schaltfläche klickt und Maustaste über Schaltfläche loslässt
`on(releaseOutside)`	`Instanzname.onReleaseOutside`	... Benutzer mit linker Maustaste auf Schaltfläche klickt und Maustaste außerhalb der Schaltfläche loslässt
`on(rollOut)`	`Instanzname.onRollOut`	... Benutzer Mauscursor ohne Drücken einer Maustaste aus Schaltfläche herauszieht
`on(rollOver)`	`Instanzname.onRollOver`	... Benutzer Mauscursor ohne Drücken einer Maustaste über die Schaltfläche zieht
`on(dragOut)`	`Instanzname.onDragOut`	... Benutzer Mauscursor mit gedrückter linker Maustaste aus Schaltfläche herauszieht
`on(dragOver)`	`Instanzname.onDragOver`	... Benutzer Mauscursor mit gedrückter linker Maustaste über die Schaltfläche zieht
`on(keyPress("Taste"))`	`Instanzname.onKeyDown Instanzname.onKeyUp`	... Benutzer `Taste` auf der Tastatur betätigt; `Taste` ist entweder Tastencode oder - konstante

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Formularelemente mit ActionScript beeinflussen

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project