Pastor Pixel Tipps Tutorial Anleitungen Hilfe

Drag and Drop

 

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.

myMc.addEventListener(MouseEvent.MOUSE_DOWN, dragStart);

addEventListener(MouseEvent.MOUSE_UP, dragStop);

function dragStart(evt:MouseEvent):void

{

myMc.startDrag();

}

function dragStop(evt:MouseEvent):void

{

stopDrag();

}

 

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 

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.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

 


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

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

siehe auch Drehknopf Slider im Tipp programmierte Bewegung

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(....);

 

Rectangle

public function Rectangle(x:Number = 0, y:Number = 0, width:Number = 0, height:Number = 0)

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