In ActionScript und Adobe Flash gibt es viele Events, zu den wichtigsten zählen onclick, onrelease, onrollover und onrollout.
Hier werden diese genauer beschrieben und auch wird versucht den Sinn der einzelnen Events genauer zu erklären.
Inhalt
In ActionScript und Adobe Flash gibt es viele Events, zu den wichtigsten zählen onclick, onrelease, onrollover und onrollout.
Hier werden diese genauer beschrieben und auch wird versucht den Sinn der einzelnen Events genauer zu erklären.
Es gibt mehrer Arten ein Events hinzu zufügen, die saubere und besser Lösung ist über sogenannte Event-Handler bzw. Event-Methode
Die andere Möglichkeit ist über die Ereignisprozedur on(). Diese Ergeinisprozedur sollte nur für einfache Tests oder nicht ganz so wichtige Dateien verwendet werden.
In CS3 wurde die Ergeinisprozedur stark eingeschränkt, somit sollte jeder der neu mit ActionScript anfängt diese nicht benutzen.
Ereignisprozeduren mit on() werden direkt im zu verwendentend Objekt definiert, wenn ein Button auf einen Klick reagieren soll, so wird diese direkt in den Button definiert.
Die Ereignissprozedur mit on() hat den Nachteil, dass das entsprechende Event direkt im Object definiert werden muss.
Somit müssen alle Pathe vom Object aus gesehen gesetzt werden.
// ActionScript von Button
on(click) {
trace('Du hast mich geklickt');
}
Event-Methode werden in der _level0 bzw. _root Ebene definiert, somit haben alle Events dhie selben Pathe.
Ein weiterer Vorteil ist, das man ohne weitere Probleme die ActionScript Datei auslagern kann und für andere Projekte die gleich aufgebaut sind weiter verwenden kann.
Es sollte also immer Event-Methoden anstatt Ereignisprozedur mit on() verwendet werden.
/*
ActionScript von "_root"
button = Button Object
*/
button.onclick = function() {
trace('Du hast mich geklickt');
}
Der Event-Handler hat eine Reihe von Vorteilen, so ist es möglich das mehrer verschiedene Event-Handler für das selbe Event definiert werden.
Es ist also möglich wie bei einem Baukasten zu sagen, fügen das hinzu und das auch noch.
Ein weitere Vorteil ist das Event-Handler nicht im Object definiert werden und man somit nicht vom Object aus gehen muss, sondern von der Ebene wo der Event Handler definiert wird (meist _level0 bzw. _root).
Ein Nachteil von Event-Handler ist, das diese nur bei Objekte funktionieren die das Event kennen.
Wenn also auf der Bühne ein MovieClip oder ein Button erstellt wird und als Instanz definiert wird, kann diese nicht mit allen Events direkt angesprochen werden.
Es sind also nicht für alle Objecte alle Event Handler verfügbar, jedoch können relativ einfach eigene Event-Handler erstellt bzw. definiert werden.
/*
ActionScript in "_root"
button = Button Object
*/
button.addEventListener("click", function () {
trace('Du hast mich geklickt');
});
Anbei eine Übersicht welche die Events mit der dazu gehörigen Ereignisprozedur on() und die dem entsprechende Event-Methode zeigt.
Die Events arbeiten unabhängig von ein ander, wenn also nun eine Ereignisprozedur und eine Event-Methode definiert wird, so werden beide ausgeführt.
Movieclip Events
| Event | Ereignisprozedur | Event-Methode | |
|---|---|---|---|
| load | onClipEvent(load) | onLoad |
|
| unload | onClipEvent(unload) | onUnload |
|
| enterFrame | onClipEvent(enterFrame) | onEnterFrame |
|
| mouseDown | onClipEvent(mouseDown) | onMouseDown |
|
| mouseUp | onClipEvent(mouseUp) | onMouseUp |
|
| mouseMove | onClipEvent(mouseMove) | onMouseMove |
|
| keyDown | onClipEvent(keyDown) | onKeyDown |
|
| keyUp | onClipEvent(keyUp) | onKeyUp |
|
| data | onClipEvent(data) | onData |
|
Button Events
| Event | Ereignisprozedur | Event-Methode | |
|---|---|---|---|
| press | on(press) | onPress |
|
| release | on(release) | onRelease |
|
| releaseOutside | on(releaseOutside) | onReleaseOutside |
|
| rollOver | on(rollOver) | onRollOver |
|
| rollOut | on(rollOut) | onRollOut |
|
| dragOver | on(dragOver) | onDragOver |
|
| dragOut | on(dragOut) | onDragOut |
|
| keyPress | on(keyPress "...") | onKeyDown / onKeyUp |
|
Wie hier gut zu sehen ist, unterscheiden sich Ereignisprozedur und Event-Methode in der Schreibweise, diese ist in Adobe Flash sehr wichtig.
Wer also von Ereignisprozedur auf Event-Methode umsteigen möchte, sollte sich die Unterschiede in der Schreibweise genauer ansehen.
click / onClick wird dann ausgeführt wenn der User auf den definierten Button klickt und die Maustaste über diesen Bereich wieder losläst.
// ActionScript in "_root"
button.onClick = function() {
_root.evt = 'click / onClick';
};
// ActionScript in "_root"
button.addEventListener("click", function() {
evt = 'click / onClick';
});
press / onPress wird dann ausgeführt wenn der User auf den definierten Bereich klickt. Das Event wird ausgelöst sobald die Maustaste gedrückt worden ist, dabei spielt es keine Rolle ob diese weiterhin gedrückt bleibt oder nicht.
// ActionScript in "_root"
button.onPress = function() {
_root.evt = 'Press / onPress';
};
// ActionScript in "_root"
test.addEventListener(MouseEvent.MOUSE_DOWN, function() {
_root.evt = 'Press / onPress';
});
Es gibt für onPress keinen Standart Event Handler, meist wird hierfür ein MouseEvent definiert MouseDown welches den selben Zweck erfühlt.
Das onPress Event wird von vielen Standart Popup Blocker die im Browser mitgeliefert werden geblockt. Eine Alternative wäre hier onRelease.
// ActionScript in "_root"
button.onRelease = function() {
_root.evt = 'release / onRelease';
};
// ActionScript in "_root"
test.addEventListener(MouseEvent.MOUSE_UP, function() {
_root.evt = 'release / onRelease';
});
Es gibt für onRelease keine Standart Event Handler, meist für hierfür ein MouseEvent definiert MouseUp welches den selben Effekt erfühlt.
onRelease funktioniert im Gegensatz zu onClick auch auf MovieClips und sollte bevorzugt verwendet werden wenn man eine Klick Action definieren will.
Es gehört zum Standartverhalten das wenn der User sich verklickt / falsch geklickt hat, die Maus gedrückt läst und aus dem Bereich rausfährt.
Würde hier onPress verwendet werden, so würde trotzdem die Action ausgeführt werden und der User würde sich ärgern. ;)
rollover / onRollOver wird immer dann ausgeführt wenn der User mit der Maus sich über ein Motiv bewegt.
Dieses Event wird meist dafür verwendet um einen Hover Effekt zu erzeugen.
// ActionScript in "_root"
button.onRollOver = function() {
_root.evt = 'rollover / onRollOver';
};
// ActionScript in "_root"
test.addEventListener(MouseEvent.ROLL_OVER, function() {
_root.evt = 'rollover / onRollOver';
});
Es gibt für onRollOver auch kein Standart Event Handler, hier wird ein MouseEvent definiert Roll_Over.
rollover / onRollOut wird ausgeführt, wenn der User die entsprechende Fläche mit der Maus verlässt.
Zusammen mit rollover / onRollOver lassen sich schöne Möglichkeiten gestallten.
// ActionScript in "_root"
button.onRollOver = function() {
_root.evt = 'rollout / onRollOut';
};
// ActionScript in "_root"
test.addEventListener(MouseEvent.ROLL_OUT, function() {
_root.evt = 'rollout / onRollOut';
});
Es gibt auch für onRollOut kein Standart Event Handler, hier wird ein MouseEvent definiert Roll_Out.
Diese Beispiele soll helfen die Events ein weniger besser zu verstehen.
Beispiel mit allen Events
// ActionScript in "_root"
test.onRollOut = function () {
evt = 'rollout / onRollOut';
};
test.onRollOver = function () {
evt = 'rollover / onRollOver';
};
test.onPress = function () {
evt = 'press / onPress';
};
test.onRelease = function () {
evt = 'release / onRelease';
};
Mini Game
Dies Beispiel stellt ein einfaches Game da, wo man versuchen muss so viele Zielscheiben wie möglich zu treffen.
// Highscore auf 0 setzten
var score = 0;
// Mousepointer durch Fadenkreuz ersetzten
this.attachMovie("Fadenkreuz", "pointer_mc", this.getNextHighestDepth());
Mouse.hide();
var Fadenkreuz:Object = new Object();
Fadenkreuz.onMouseMove = function() {
pointer_mc._x = _xmouse;
pointer_mc._y = _ymouse;
updateAfterEvent();
};
Mouse.addListener(Fadenkreuz);
// Punkte bei Treffer erhöhen
mc_Ziele.onPress = function() {
score++;
};
// Bewege Ziele
mc_Ziele.onEnterFrame = function() {
if ((this._width/2)*-1<this._x) {
this._x -= 10;
} else {
this._x = Stage.width;
}
};
Wie man hier sieht sind das nicht viele Zeilen und alles wird mit Events gesteuert.
Die Zeile this.attachMovie("Fadenkreuz",.... fügt das Fadenkreuz direkt aus der Bibliothek in den Anzeigebereich hinzu.
Wir müssen ja nicht die Bühne mit alle Objekten vollsetzten, sondern laden die einfach aus der Bibliothek wenn wir diese benötigen.
updateAfterEvent(); sorgt einfach dafür das bei jeder Mausbewegung, unabhängig von der Framerate der FlashDatei, der Movieclip "Fadenkreuz" aktualisiert wird.
Damit wir bei jedem Frame die Ziele bewegen können benützen wir das Event onEnterFrame. Dieses Event wird bei jedem Frame ausgeführt somit entsteht eine recht flüssige Bewegung.
Beispiel mit einfachen Effekt
Wenn man bei diesen Beispiel mit dem Maus über "Mail" fährt öffnet sich ein Fenster mit dem Inhalt der Email.
Dieser ganze Effekt wurde wieder nur mit Events gesteuert, es wird also keine Schleife verwendet oder aber MovieClips welche bereits den Event enthalten.
// letter = Text
// email = Email Symbol
// Letter beim Start ausblenden
letter._visible = 0;
// Variablen
var save_height = letter._height;
var fade_in = false;
var i;
// Oeffnen der Email
mail.onRollOver = function() {
i=0;
fade_in = true;
};
// Fade in Event beim öffnen der Email
letter.onEnterFrame = function() {
if (fade_in && i < save_height) {
letter._alpha = 0;
letter._visible = 1;
letter._height = i;
letter._alpha = 100/save_height*i;
i += 10;
}
};
// Einfaches Fadeout wenn die Email verlassen wird
letter.onRollOut = function() {
letter._visible = 0;
fade_in = false;
};
Wenn mit der Maus über das Email Symbol email gefahren wird, so wird fade_in auf true gesetzt.
Bei jedem Frame wird geprüft ob fade_in gesetzt ist oder nicht, wenn ja wird der Text letter mit einen einfachen Effekt eingeblendet.
