Beispiel des Endergebnisses und Anwendungsbeispiele

In diesem Beispiel werden drei individuelle Cursor verwendet (Kreuz-, Stift- und animierter Sterncursor). Durch Klick auf das graue Rechteck wird der animierte Sterncursor eingeblendet.

 

 

Ein Beispiel für übergroße Cursor aus dem Netz:

www.gluesociety.com

Standardcursor aus- und einblenden

Der Standardmauscursor lässt sich durch
 

Mouse.hide();

ausblenden und durch
 

Mouse.show();

wieder einblenden.

Anmerkung:
Durch Mouse.hide() wird der Mauszeiger nur innerhalb der Bühne ausgeblendet. Bewegt man die Maus außerhalb der Bühne, wird der normale Mauszeiger des Betriebssystems angezeigt.

Anmerkung für Fortgeschrittene:
hide()und show() sind static Methoden der Klasse Mouse. Daher werden die Methoden nicht mit einer Instanz der Klasse Mouse, sondern mit der Klasse selbst verwendet: Mouse.hide() und Mouse.show().

Mauscursor verstecken und durch einen eigenen Movieclip ersetzen: Vorbereitung

Zuerst muss in Flash ein Movieclip erstellt werden, der das Bild des neuen Cursors enthält.

Wichtig: Der Ursprung des Movieclips wird später zum Hotspot des Cursors.

Damit man den Movieclip zur Laufzeit verwenden kann, ohne dass er bereits auf der Bühne platziert wird, muss man bei den Symboleigenschaften des Movieclips die Option Export für ActionScript aktivieren.

 

1. Methode mit startDrag

 

In diesem Beispiel wird das Skript im ersten Frame der Maintimeline plaziert, damit sofort mit dem Start der swf-Datei der selbst gewählte Cursor zu sehen ist.

Im ersten Schritt wird der Standardcursor ausgeblendet.
 

Mouse.hide();

Anschließend wird eine neue Instanz des Movieclips Stift aus der Bibliothek, der den Cursor beinhaltet, erstellt und in der Variblen stiftCursor, die vom Typ MovieClip ist, abgespeichert.
Mit dem Operator new wird immer eine neue Klasseninstanz erzeugt.
 
var stiftCursor:MovieClip = new Stift();

Die Instanz des Cursors, die jetzt in der Variblen stiftCursor abgespeichert ist, wird mit stage.addChild(stiftCursor) zur Anzeigeliste des Bühnenobjekts dazugegeben.
Wenn das Cursorobjekt zur Anzeigeliste der Bühne hinzugefügt wird, liegt der Cursor über allen Objekten, die im Container des Mainmovies liegen.
In jedem Anzeigeobjekt (DisplayObject) wird über die Eigenschaft stage auf die Bühne verwiesen.
 
this.stage.addChild(stiftCursor);

Abschließend muss das Cursorobjekt über startDrag an die Mausposition gebunden werden. D.h. solange diese Verbindung nicht durch stopDrag aufgehoben wird, folgt der Movieclip der Maus. Durch den Parameter true wird der Ursprung des Movieclips, der den Cursor enthält, auf den Hotspot des Cursor (= Mausposition) platziert.
 
stiftCursor.startDrag(true);

Das gesamte Skript zusammen gefasst:
 

Mouse.hide();
var stiftCursor:MovieClip = new Stift();
this.stage.addChild(stiftCursor);
stiftCursor.startDrag(true);

Wichtige Anmerkung:
Würde man das Cursorobjekt anstatt zur Anzeigeliste der Bühne zur Anzeigeliste des Mainmovies geben, kann es sein, dass der Cursor unter anderen Objekten verschwindet. Wie das nachfolgende Video zeigt. In diesem Beispiel wird das Mainmovie über this angesprochen.

 


Genauere Informationen über die Objekthierachien von Anzeigeobjekten findet man unter .......

2. Methode mit einem Eventhandler für ENTER_FRAME

Die ersten drei Programmzeilen bleiben gegenüber der 1. Methode unverändert: Der Standardmauszeiger wird ausgeblendet und eine Instanz des Movieclips, der den neuen Cursor enthält, wird zur Anzeigeliste der Bühne hinzugefügt.
 
Mouse.hide();
var stiftCursor:MovieClip = new Stift();
this.stage.addChild(stiftCursor);

Die Movieclipinstanz stiftCursor des neuen Cursors  abonniert nun das Ereignis ENTER_FRAME. D.h. immer wenn das Ereignis ENTER_FRAME eintritt, wird die Instanz stiftCursor benachrichtigt und es wird der Eventhandler meinCursor ausgeführt.
 
stiftCursor.addEventListener(Event.ENTER_FRAME, meinCursor);

Beim Ausführen der Eventhandlerfunktion meinCursor wird der Cursor auf die aktuelle Mausposition gesetzt.
Der Eventhandler erhält als Input ein Event e. Mit e.target erhält man das Ereignisziel, in diesem Fall ist das die Instanz stiftCursor. D.h. man könnte statt e.target auch stiftCursor schreiben.
Durch Ändern der x- und y-Eigenschaft von stiftcursor wird die Position des Cursors auf die aktuelle Mausposition gesetzt. stage.mouseX und stage.mouseY liefern dabei die Koordinaten der Mausposition.
 

function meinCursor (e:Event):void {
e.target.x = stage.mouseX;
e.target.y = stage.mouseY;
}

Wichtiger Hinweis:
Bei Verwendung eines Eventhandlers für das Ereignis ENTER_FRAME ist die Ausführung des Skripts von der Framerate des Movies abhängig. D.h. bei einer niedrigen Framerate, wird die Position des Cursors nur sehr selten aktualisiert. Er springt von einem Punkt zum nächsten und folgt der Maus verzögert und ruckweise.

Zusammengefasst ergibt sich folgender Code:
 

Mouse.hide();
var stiftCursor:MovieClip = new Stift();
this.stage.addChild(stiftCursor);
stiftCursor.addEventListener(Event.ENTER_FRAME, meinCursor);
function meinCursor (e:Event):void {
e.target.x = stage.mouseX;
e.target.y = stage.mouseY;
}


Genauere Informationen über Events und Eventhandler findet man unter .......

Aufgabe:
Ändern Sie die Bildrate des Flashmovies und lassen den Standardmauscursor eingeblendet. Beobachten Sie das Verhalten des selbst erstellten Cursors in Relation zum Standardcursor.

3. Methode mit einem Eventhandler für MOUSE_MOVE

Die ersten drei Programmzeilen bleiben wieder unverändert  und werden durch die Ausrichtung des Cursors an der Position des Mauszeigers ergänzt, damit der Cursor an der richtigen Stelle auftaucht, auch wenn die Maus nicht bewegt wird.  

Mouse.hide();
var stiftCursor:MovieClip = new Stift();
this.stage.addChild(stiftCursor);
stiftCursor.x = this.stage.mouseX;
stiftCursor.y = this.stage.mouseY;


Die Bühne stage abonniert nun das Ereignis MOUSE_MOVE. D.h. immer wenn das Ereignis Bewegen der Maus (innerhalb der Bühne) eintritt, wird die Instanz der Bühne benachrichtigt und es wird der Eventhandler meinCursor ausgeführt.
this.stage.mouseX und this.stage.mouseY liefern die x- und y-Koordinaten des Mauszeigers relativ zum Bühnenursprung in der linken oberen Ecke.

Wichtig: Da das MOUSE_MOVE-Ereignis viel häufiger als das ENTER_FRAME-Ereignis auftritt, aber normalerweise die Bühne nur bei ENTER_FRAME-Ereignissen aktualisiert wird, muss durch die Methode updateAfterEvent() die vorzeitige Aktualisierung der Bühne bei einem MOUSE_MOVE-Ereignis erzwungen werden.

Durch MOUSE_MOVE folgt der Cursor weicher der Mausbewegung als bei ENTER_FRAME.

 

this.stage.addEventListener(MouseEvent.MOUSE_MOVE, meinCursor);
function meinCursor(e:MouseEvent):void {
stiftCursor.x = this.stage.mouseX;
stiftCursor.y = this.stage.mouseY;
e.updateAfterEvent();
}

Das gesammte Skript zusammengefasst:
 
Mouse.hide();
var stiftCursor:MovieClip = new Stift();
this.stage.addChild(stiftCursor);
stiftCursor.x = this.stage.mouseX;
stiftCursor.y = this.stage.mouseY;
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, meinCursor);
function meinCursor(e:MouseEvent):void {
stiftCursor.x = this.stage.mouseX;
stiftCursor.y = this.stage.mouseY;
e.updateAfterEvent();
}

Aus-/Einblenden des Cursors, wenn die Maus die Bühne verlässt und wieder hinein fährt

Wie das nachfolgende Video zeigt, bleibt bis jetzt der individuelle Mauscursor am Bühnenrand stecken, wenn die Maus die Bühne verlässt. In diesem Kapitel wird gezeigt wie der selbst erstellte Mauscursor aus- und wieder eingeblendet werden kann.

Immer wenn die Maus die Bühne (das Flash Player-Fenster) verlässt, wird vom Bühnenobjekt automatisch das Ereignis MOUSE_LEAVE generiert. Die Bühneninstanz kann nun über einen Eventlistener dieses Ereignis abonnieren und mit dem Eventhandler hideCusor darauf reagieren.
 

this.stage.addEventListener(Event.MOUSE_LEAVE, hideCursor);
 
Im Eventhandler hideCursor wird der Stiftcursor durch stiftCursor.visible = false auf unsichtbar gesetzt. Anschließend aboniert die Bühne noch das Ereignis MOUSE_MOVE, das eintritt sobald die Maus wieder in die Bühne hinein bewegt wird und reagiert darauf mit dem Eventhandler showCursor.
 
function hideCursor(e:Event):void {
stiftCursor.visible = false;
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, showCursor);
}

Im Eventhandler showCursor wird der Stiftcursor wieder sichtbar gemacht und anschließend deaktiviert sich der Eventhandler sofort selbst. Durch this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, showCursor) wird der Eventlistener wieder entfernt.
Dadurch wird er nur einmal beim ersten MOUSE_MOVE-Ereignis nach dem Wiedereintritt auf der Bühne ausgeführt.
 
function showCursor(e:MouseEvent):void {
stiftCursor.visible = true;
this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, showCursor);
}

Das komplette Skript zusammengefasst:
 

Mouse.hide();
var stiftCursor:MovieClip = new Stift();
this.stage.addChild(stiftCursor);
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, meinCursor);
function meinCursor(e:MouseEvent):void {
stiftCursor.x = this.stage.mouseX;
stiftCursor.y = this.stage.mouseY;
}
this.stage.addEventListener(Event.MOUSE_LEAVE, hideCursor);
function hideCursor(e:Event):void {
stiftCursor.visible = false;
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, showCursor);
}
function showCursor(e:MouseEvent):void {
stiftCursor.visible = true;
this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, showCursor);
}

Wechseln zwischen verschiedenen Mauszeigern bei (Maus-)Ereignissen

Bis jetzt wurde gezeigt, wie der Standardmauszeiger durch einen individuellen Cursor ersetzt werden kann. In diesem Kapitel wird nun erklärt, wie man ausgelöst durch Ereignisse zwischen verschiedenen selbst erstellten Mauszeigern wechselt.

Im ersten Schritt wird der Standardmauszeiger ausgeblendet.

Mouse.hide();

 Anschließend wird je eine Movieclipinstanz von den Movieclips, die die Cursor enthalten, erstellt.
 
var kreuzCursor:MovieClip = new Kreuz();
var stiftCursor:MovieClip = new Stift();
var sternCursor:MovieClip = new Stern();

Wichtig ist nun, dass die Cursormovieclips nicht auf Mausereignisse reagieren können. Denn bei einem Mausereignis, z.B. Anklicken eines Movieclips auf der Bühne, liegt immer der Cursormovieclip ganz oben und fängt das Anklicken ab. D.h. der Movieclip, der angeklickt werden soll, erhält nie die Information, dass er angeklickt wurde und kann nicht reagieren.
Dazu wird die Eigenschaft mouseEnabled auf false gesetzt.
 
kreuzCursor.mouseEnabled = false;
stiftCursor.mouseEnabled = false;
sternCursor.mouseEnabled = false;

Nun wird eine Movieclipvariable aktuellerCursor definiert, in der immer der gerade gezeigte Cursormoveiclip gespeichert ist.
 

var aktuellerCursor:MovieClip;

In dieser Varibalen wird der Kreuzcursor als Anfangscursor abgespeichert. Die Startposition des Cursors wird auf die Mausposition gesetzt und anschließend wird der Cursor zur Anzeigeliste der Bühne dazugegeben.
 
aktuellerCursor = kreuzCursor;
aktuellerCursor.x = this.stage.mouseX;
aktuellerCursor.y = this.stage.mouseY;
this.stage.addChild(aktuellerCursor);

Wie bereits in den vorigen Kapiteln erklärt, wird über einen Bühneneventlistener für MOUSE_MOVE der Cursor an die Mausposition gebunden.
 
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, meinCursor);
function meinCursor(e:MouseEvent):void {
aktuellerCursor.x = this.stage.mouseX;
aktuellerCursor.y = this.stage.mouseY;
}

Durch zwei weitere Eventlistener wird sicher gestellt, dass der Cursor aus- und wieder eingeblendet wird, wenn die Maus die Bühne verlässt und wieder darüber fährt. Siehe voriges Kapitel.
 
this.stage.addEventListener(Event.MOUSE_LEAVE, hideCursor);
function hideCursor(e:Event):void {
aktuellerCursor.visible = false;
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, showCursor);
}
function showCursor(e:MouseEvent):void {
aktuellerCursor.visible = true;
this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, showCursor);
}

Nun aboniert die Movieclipinstanz rechteck vier Events, die über die Maus ausgelöst werden: ROLL_OVER, ROLL_OUT, MOUSE_DOWN und MOUSE_UP.
 
this.rechteck.addEventListener(MouseEvent.ROLL_OVER, changeCursorToStift);
this.rechteck.addEventListener(MouseEvent.ROLL_OUT, changeCursorToKreuz);
this.rechteck.addEventListener(MouseEvent.MOUSE_DOWN, changeCursorToStern);
this.rechteck.addEventListener(MouseEvent.MOUSE_UP, changeCursorToStift);


Abschließend wird für jeden Cursor ein Eventhandler definiert, der den Cursor einblendet. Dabei wird immer nach demselben Schema vorgegangen:

  1. Der aktuelle Cursor wird aus der Anzeigeliste der Bühne entfernt.
  2. Der Variablen aktuellerCursor wirdder neue Cusormovieclip zugeordnet.
  3. Der neue aktuelle Cursor wird auf die Mausposition gesetzt.
  4. Der aktuelle Cursor wird wieder zur Anzeigeliste der Bühne hinzugefügt.
     
function changeCursorToKreuz(e:MouseEvent):void {
this.stage.removeChild(aktuellerCursor);
aktuellerCursor = kreuzCursor;
aktuellerCursor.x = this.stage.mouseX;
aktuellerCursor.y = this.stage.mouseY;
this.stage.addChild(aktuellerCursor);
}
function changeCursorToStift(e:MouseEvent):void {
this.stage.removeChild(aktuellerCursor);
aktuellerCursor = stiftCursor;
aktuellerCursor.x = this.stage.mouseX;
aktuellerCursor.y = this.stage.mouseY;
this.stage.addChild(aktuellerCursor);
}
function changeCursorToStern(e:MouseEvent):void {
this.stage.removeChild(aktuellerCursor);
aktuellerCursor = sternCursor;
aktuellerCursor.x = this.stage.mouseX;
aktuellerCursor.y = this.stage.mouseY;
this.stage.addChild(aktuellerCursor);
}

Animierte Cursor

Wenn der Movieclip, der als individueller Cursor verwendet wird, eine Animation enthält, dann erhält man einen animierten Cursor.
Der Rest wird in den anderen Kapiteln erklärt.