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

Skript (scroll_tween.fla):

// Durch Anklicken eines Punktes wird dieser ins Zentrum gerückt.
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

var tweenX:Tween;
var tweenY:Tween;

this.stage.addEventListener(MouseEvent.CLICK, scrollContainer);

function scrollContainer(e:MouseEvent):void {
	var deltaX:int=stage.stageWidth/2-e.stageX;
	var deltaY:int=stage.stageHeight/2-e.stageY;
	tweenX=new Tween(container_mc,"x",Regular.easeInOut,container_mc.x,container_mc.x+deltaX,1,true);
	tweenY=new Tween(container_mc,"y",Regular.easeInOut,container_mc.y,container_mc.y+deltaY,1,true);
	tweenX.addEventListener(TweenEvent.MOTION_CHANGE, checkLimitsX);
	tweenY.addEventListener(TweenEvent.MOTION_CHANGE, checkLimitsY);
	tweenX.start();
	tweenY.start();
}
function checkLimitsX(e:TweenEvent):void {
	if (e.position > 0 || e.position < stage.stageWidth-container_mc.width) {
		e.target.stop();
		if (e.position>0) {
			container_mc.x=0;
		} else {
			container_mc.x=stage.stageWidth-container_mc.width;
		}
	}
}
function checkLimitsY(e:TweenEvent):void {
	if (e.position > 0 || e.position < stage.stageHeight-container_mc.height) {
		e.target.stop();
		if (e.position>0) {
			container_mc.y=0;
		} else {
			container_mc.y=stage.stageHeight-container_mc.height;
		}
	}
}

Schrittweise Erklärung des Skripts

WICHTIG: Bei der Verwendung von Tweens müssen zuerst die entsprechenden Klassen bzw. Pakete importiert werden.

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

 
Die Tween-Variablen sollen am besten immer außerhalb von Funktionen definiert werden. Denn sonst kann es passieren, dass eine Tween-Animation noch läuft, aber die Funktion bereits abgearbeitet ist und vom Garbagecollector aus dem Speicher gelöscht wird. Damit aber auch die Tween-Variablen, die in der Funktion deklariert wurden und  nur dort Gültigkeit haben. Dadurch blockeriert die Animation und das Programm steht. Wir haben der laufenden Animation die Tween-Variablen "unter den Füßen weggezogen".

var tweenX:Tween;
var tweenY:Tween;

 
Durch Klick auf die Bühne soll der Scrollvorgang gestartet werden. Daher abonniert die Bühne das Mausereignis CLICK mit dem Eventhandler scrollContainer.

this.stage.addEventListener(MouseEvent.CLICK, scrollContainer);

 
e.stageX und e-stageY liefern die Mausposition des Klickereignisses e relativ zur Bühne. Damit wird der Abstand der Mausposition zur Bühnenmitte berechnet und in deltaX bzw. deltaY abgespeichert.

function scrollContainer(e:MouseEvent):void {
	var deltaX:int=stage.stageWidth/2-e.stageX;
	var deltaY:int=stage.stageHeight/2-e.stageY;

 
Anschließend werden für die Eigenschaften x und y des Containers container_mc zwei Tweens erzeugt. Ausgangspunkt ist die momentane Position des Containers. Zielpunkt ist die Containerposition verschoben um die Werte deltaX bzw. deltaY.
Damit die Bewegung sanft startet und stoppt wird Regular.easeInOut verwendet

	tweenX = new Tween(container_mc,"x",Regular.easeInOut,container_mc.x,container_mc.x+deltaX,1,true);
	tweenY = new Tween(container_mc,"y",Regular.easeInOut,container_mc.y,container_mc.y+deltaY,1,true);

 
Da man während der Bewegung laufend prüfen muss, ob nicht bezüglich der x- bzw. y-Richtung der Rand bereits erreicht wurde, abonnieren die Tweens das TweenEvent-Ereignis MOTION_CHANGE, das immer eintritt, wenn sich die Animationswerte ändern.

	tweenX.addEventListener(TweenEvent.MOTION_CHANGE, checkLimitsX);
	tweenY.addEventListener(TweenEvent.MOTION_CHANGE, checkLimitsY);

 Abschließend werden die Tweens gestartet.

	tweenX.start();
	tweenY.start();
}

 
Im Eventhandler checkLimitsX wird bei jedem MOTION_CHANGE-Ereignis zuerst geprüft, ob der linke oder rechte Rand des Containers in der Bühne liegt. Über e.position wird der momentane Wert des animierten Parameters, in unserem Fall die x-Position des Containers, ermittelt.
Wenn e.position >0 ist, dann ist der linke Containerrand bereits in die Bühne gerutscht.
Wenn e.position<Bühnebreite-Containerbreite ist, dann ist der rechte Containerrand schon innerhalb der Bühne.
Anmerkung: Diese Überlegungen gelten nur, wenn der Ursprung des Containers in der linken oberen Ecke liegt.

function checkLimitsX(e:TweenEvent):void {
	if (e.position > 0 || e.position < stage.stageWidth-container_mc.width) {

 
Wenn das der Fall ist, wird die Tweenanimation gestoppt und die Position des Container nachkorrigiert. Je nachdem, ob der linke oder rechte Containerrand bereits innerhalb der Bühne liegt, wird die x-Position exakt am linken bzw. rechten Bühnenrand ausgerichtet.

		e.target.stop();
		if (e.position>0) {
			container_mc.x=0;
		} else {
			container_mc.x=stage.stageWidth-container_mc.width;
		}
	}
}