ActionScript3: Container (Sprites, Movieclips) ziehen (drag) und scrollen, Panoramen

In diesem Beispiel kann man irgendwo die Bühne anklicken und den Mauszeiger bei gedrückter Maustaste nach links und rechts bewegen. In Abhängigkeit von der Entfernung des Mauszeigers vom ursprünglichen Anklickpunkt, rotiert das Panorama in unterschiedlicher Geschwindigkeit: je weiter weg vom Anklickpunkt desto schneller.

Skript (panorama360_speedChange.fla):

var nullPunkt:int;
var schrittweite:int;

this.stage.addEventListener(MouseEvent.MOUSE_DOWN,startScrollen);
function startScrollen(e:MouseEvent):void {
	nullPunkt=e.stageX;
	schrittweite=0;
	this.stage.addEventListener(MouseEvent.MOUSE_MOVE, scrollen);
	panorama_mc.addEventListener(Event.ENTER_FRAME, rotierePanorama);
}
function scrollen(e:MouseEvent):void {
	schrittweite=e.stageX-nullPunkt;
}
function rotierePanorama(e:Event) {
	e.target.x+=schrittweite;
	if (e.target.x+e.target.width < stage.stageWidth) {
		e.target.x+=e.target.width-stage.stageWidth;
	} else if (e.target.x > 0) {
		e.target.x-=e.target.width-stage.stageWidth;
	}
}

this.stage.addEventListener(MouseEvent.MOUSE_UP, stopScrollen);
function stopScrollen(e:MouseEvent):void {
	this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, scrollen);
	panorama_mc.removeEventListener(Event.ENTER_FRAME, rotierePanorama);
}

 
Erläuterungen zum Skript

In der Variablen nullPunkt wird die x-Koordinate des Anklickpunktes gespeichert. Damit kann man immer die aktuelle Distanz des Mauszeigers vom Anklickpunkt ermitteln. Daraus wird die aktuelle Scrollgeschwindigkeit berechnet, die in der Variablen schrittweite gespeichert wird.

var nullPunkt:int;
var schrittweite:int;

Beim MOUSE_DOWN-Ereignis auf der Bühne wird der Eventhandler startScrollen aufgerufen.
In diesem wird durch nullPunkt=e.stageX; die x-Koordinate des Mauszeigers relativ zur Bühne als Bezugspunkt gespeichert und die Schrittweit wird auf 0 gesetzt. D.h. nur durch einen Klick wird noch keine Bewegung ausgelöst.

this.stage.addEventListener(MouseEvent.MOUSE_DOWN,startScrollen);
function startScrollen(e:MouseEvent):void {
	nullPunkt=e.stageX;
	schrittweite=0;

 
Abschließend wird im Eventhandler startScrollen der Eventhandler scrollen für das Bewegen der Maus aktiviert und der ENTER_FRAME-Eventhandler rotierePanorama, der wieder, wie im vorhergehenden Kapitel, für die Rotation des Panoramas zuständig ist.

	this.stage.addEventListener(MouseEvent.MOUSE_MOVE, scrollen);
	panorama_mc.addEventListener(Event.ENTER_FRAME, rotierePanorama);
}

Im MOUSE_MOVE-Eventhandler scrollen wird nur der x-Abstand zwischen Mauszeiger und Anklickpunkt berechnet und als Schrittweite abgespeichert.
Anmerkung: Hier könnte man ausgehend vom Abstand für die Schrittweite auch komplexere Formeln verwenden, die nicht 1:1 den Pixelabstand in die Schrittweite überführen.

function scrollen(e:MouseEvent):void {
	schrittweite=e.stageX-nullPunkt;
}

Im ENTER_FRAME-Eventhandler rotierePanorama wird das Panorama um die Schrittweite verschoben und anschließend geprüft, ob einer der Panoramaränder bereits in der Bühne liegt.
Wenn das der Fall ist, wird das Panorama um (Panoramabreite - Bühnenbreite) verschoben.

function rotierePanorama(e:Event) {
	e.target.x+=schrittweite;
	if (e.target.x+e.target.width < stage.stageWidth) {
		e.target.x+=e.target.width-stage.stageWidth;
	} else if (e.target.x > 0) {
		e.target.x-=e.target.width-stage.stageWidth;
	}
}  

 
Beim MOUSE_UP-Ereignis werden die Eventhandler scrollen und rotierePanorama wieder deaktiviert.

this.stage.addEventListener(MouseEvent.MOUSE_UP, stopScrollen);
function stopScrollen(e:MouseEvent):void {
	this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, scrollen);
	panorama_mc.removeEventListener(Event.ENTER_FRAME, rotierePanorama);
}