ActionScript3: Cursor aus-/einblenden, ändern, animieren und Movieclips an die Maus binden

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);
}