Drag and Drop

• startDrag() stopDrag()
• Tutorial Drop Down Menü in 4 Schritten (neue Seite)
• dropTarget, Ziel erkennen
• Slider/ Schieberegler selbst gemacht
• Einschränken der Bewegung im Rechteck / Rectangle Klasse
• Beschränkungsrechteck anhand MC Koordinaten bestimmen

startDrag(), stopDrag()

MovieClips verschieben auch kurz Drag & Drop genannt!

Einen MovieClip kann man mit der MovieClip Methode startDrag() verschieben.

myMc.startDrag();

Das Verschieben wird gestoppt durch die Methode stopDrag();

Da immer nur ein Movieclip verschoben werden kann, stoppt diese Methode die Verschiebung des Movieclips der gerade verschoben wird. Es ist also nicht explizit notwendig, den Instanznamen anzugeben.

Man kann einige Werte für startDrag() zuweisen.

myMc.startDrag(true);

Der Registrierpunkt des MCs rutscht direkt unter den Mauszeiger.

Als zweiter Parameter kann man ein Rectangle Object zuweisen, welches die Verschiebung einschränkt.

Tutorial Drop Down Menü

4 Beispiele. Diese Beispiele sind eine gute Übung, um sich mit den Klassen vertraut zu machen.

dragMovieclip startDrag(); stopDrag(); dropTarget

Wenn man dropTarget benutzt und ein DragElement über einer leeren Stelle loslässt, erscheint eine Fehlermeldung bezüglich null-Objekt Verweis. Deswegen füge ich noch eine Grafik ein, die sich über den gesamten Hintergrundbereich erstreckt. Eine andere Möglichkeit wäre Droptarget mit einem try catch Block abzufangen:

function mouseReleased(evt:MouseEvent):void
{
	evt.currentTarget.stopDrag();

	try {
		if (evt.currentTarget.dropTarget.parent is Quad) {
			myTrace("Instanz von Klasse Quad mit Namen: " + evt.currentTarget.dropTarget.parent.name);
		}
	} catch (e:Error) {
		trace("kein dropTarget Element gefunden.");
	}
}

DropTarget liefert immer das Objekt, auf dem das DragElement liegt. In diesem Beispiel möchte ich einen Verweis auf die "Quad" Instanz. "Quad" ist ein Movieclip, welche ich als Quad Klasse definiert habe. In diesem Quad-Movieclip liegt eine quadratische Grafik. Beim Loslassen über so einem Element liefert dropTarget einen Verweis auf eben diese quadratische Grafik. Daher verweise ich mittels parent auf das Elternelement. evt.currentTarget.dropTarget.parent.name

Beim Referenzieren mittels parent muss man aufpassen. Auch die händisch plazierten Grafiken sind Display Objekte. Die Hierachie kann sich auch ändern, wenn man sich in einem anderen Bild der Zeitleiste des Movieclips befindet, denn in jedem Bild der Zeitleiste können ganz andere Inhalte liegen.

function myTrace(traceValue:String):void
{
	anzeige.text=traceValue;
}



var target1:Quad = new Quad();
target1.name="t1";
target1.x=200;
target1.y=100;

var target2:Quad = new Quad();
target2.name="t2";
target2.x=100;
target2.y=200;

var target3:Quad = new Quad();
target3.name="t3";
target3.x=100;
target3.y=100;



addChild(target1);
addChild(target2);
addChild(target3);

target3.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
target1.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
target2.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);

target3.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
target1.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
target2.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);


function mouseDown(evt:MouseEvent):void
{
	evt.currentTarget.parent.addChild(evt.currentTarget);
	evt.currentTarget.startDrag();
}




function mouseReleased(evt:MouseEvent):void
{
	evt.currentTarget.stopDrag();
	if (evt.currentTarget.dropTarget.parent is Quad) {
		myTrace("das ist ein Quad mit Namen: " + evt.currentTarget.dropTarget.parent.name);
	}
}
  

Slider selbst gemacht

Hier eine Anleitung, wie man sich einen Slider mit startDrag() und stopDrag() mit AS3 erstellt.

Der Slider soll mittels startDrag() verschoben werden. Dieses Ziehen soll auch weiter funktionieren, wenn die Maus nicht mehr direkt über dem Slider liegt und erst stoppen, sobald man die Maus loslässt. Würde man die stopDrag() Funktion mit dem Event MOUSE_UP direkt an den Slider hängen, würde es nicht funktionieren, da die Maus nicht mehr über dem Slider liegt. Der Event muss an die Bühne geknüpft werden und der Ziehvorgang muss mittels einer Variable überwacht werden.

Wenn du das Ganze in einer Movieclip oder Sprite Klasse unterbringst, siehe auch addedToStage. Desweiteren wird in der Klasse der Event Listener an die stage Eigenschaft der Klasse (DisplayObjects) gehängt.

this.stage.addEventListener(....);

var slidePosX:Number=100;
var slidePosY:Number=50;
//Dreieck, Anfasser für Slider
var dreieck:Sprite= new Sprite();
this.addChild(dreieck);
dreieck.x=slidePosX;
dreieck.y=slidePosY;
dreieck.graphics.beginFill(0x000000);
dreieck.graphics.lineTo(0,0);
dreieck.graphics.lineTo(15,-8.75);
dreieck.graphics.lineTo(15,8.75);
dreieck.graphics.endFill();
// Sensorpunkt Kreis unsichtbar
dreieck.graphics.beginFill(0x000000, 0);
dreieck.graphics.drawCircle(9, 0, 16);
//drag Slider
var draggin:Boolean=false;
function startSlide(evt:MouseEvent):void
{
	draggin=true;
	var rect:Rectangle=new Rectangle(slidePosX,slidePosY,0,300);
	dreieck.startDrag(true, rect);
}

function stopSlide(evt:MouseEvent):void
{
	if (draggin) {
		dreieck.stopDrag();
	}
	draggin=false;
}

dreieck.addEventListener(MouseEvent.MOUSE_DOWN, startSlide);
stage.addEventListener(MouseEvent.MOUSE_UP, stopSlide);

Rectangle

Man kann die Bewegungsfunktion einschränken, dazu muss man ein Rechteck (Rectangle Objekt) initialisieren. Die Parameter des Rechteck sind: x und y Position der linken oberen Ecke, die Breite und die Höhe des Rechtecks.

Dieses Rechteck wird der Drag Funktion als zweiter Parameter übergeben.

myMc.startDrag(true, myRect);

Beschränkungsrechteck aus MC Koordinaten

Nehmen wir mal an wir hätten eine MovieClip Instanz namens line_mc. An dieser Linie soll sich das Dreieck rauf und runter bewegen. Dann kann man sich die Koordinaten des Rechtecks auch direkt aus dem Movieclip line_mc ausgeben lassen. Ich setze voraus, dass sich das verschiebbare Dreieck und line_mc im selben Koordinatensystem befinden und dass Dreieck seinen Registrierpunkt in der Mitte hat.

var rect:Rectangle = line_mc.getRect(line_mc.parent);
dreieck.startDrag(true, rect);

//Dreieck, Anfasser für Slider
var dreieck:Sprite= new Sprite();
this.addChild(dreieck);
dreieck.x=20;
dreieck.y=20;
dreieck.graphics.beginFill(0x000000);
dreieck.graphics.lineTo(0,0);
dreieck.graphics.lineTo(15,-8.75);
dreieck.graphics.lineTo(15,8.75);
dreieck.graphics.endFill();
// Sensorpunkt Kreis unsichtbar
dreieck.graphics.beginFill(0x000000, 0);
dreieck.graphics.drawCircle(9, 0, 16);


//drag Slider------------------------


dreieck.addEventListener(MouseEvent.MOUSE_DOWN, startSlide);
stage.addEventListener(MouseEvent.MOUSE_UP, stopSlide);

function startSlide(evt:MouseEvent):void
{
    var rect:Rectangle=new Rectangle(20,20,0,300);
    dreieck.startDrag(true, rect);
}
 
function stopSlide(evt:MouseEvent):void
{
    dreieck.stopDrag();
}