In diesem Tutorial wird Schritt für Schritt ein Transformtool in Flash Actionscript 3 erstellt. Zu Beginn werden die Funktionen im ersten Bild aufgeführt. Weiter unten wird alles in einer Klassendatei zusammengeführt. Dieses Transform Tool arbeitet nicht mit der Matrix, sondern mit Trigonometrie und verschachtelten MCs. Infos zu einem TransformTool mit Matrix findet ihr hier. Wer sich dafür interessiert, wie man eine Koordinatentransformation ohne Verschachtelung berechnet, kann sich hier schlau machen "Koordinatentransformation".
In der Bibliothek befindet sich ein Movieclipsymbol trsfTool, darin befindet sich eine Movieclipinstanz namens pfeil oder sPfeil. Dieser dient als Anfasser zum Skalieren. Später kommt noch ein Anfasser zum Rotieren hinzu, Instanzname: rPfeil. Die Instanz dieses Transformiertools hat den Instanznamen trsfTool. Aus der Position der Pfeile werden die Transformationionen berechnet.
Das Ziel welches transformiert werden soll hat den Instanznamen trsfContainer und darin befindet sich eine MCInstanz namens rect_mc. In diesen rect_mc kommen später, in der Klassendatei, die Instanzen, welche transformiert werden sollen. Diese 3 fache Verschachtelung ermöglicht es, über die einzelnen Koordinatensysteme die gewünschten Änderungen zu erzielen.
trsfContainer enthält rect_mc / rect_mc enthält das eigentliche Objekt, im folgenden Ziel genannt.
Das Ziel könnte den Registrierpunkt nicht in der Mitte haben. Es soll aber um den Mittelpunkt gedreht werden und auch vom Mittelpunkt aus skaliert werden. Um dieser Tatsache genüge zu tun, werden diese Verschachtelungen gemacht. Das Ziel wird so verschoben, das der Mittelpunkt (nicht der Registrierpunkt) im Mittelpunkt von rect_mc liegt. rect_mc liegt ohne Rotation mittig im trsfContainer. rect_mc wird skaliert, trsfContainer wird gedreht. Im Beispiel ganz unten, ist die Namensgebung etwas besser, da heißt trsfContainer, container1 und rect_mc heißt container2. Das TransformTool wird nicht skaliert sondern nur gedreht. Im TransformTool werden die Anfasser verschoben und aus der Position die Größen für die Transformation übergeben, aber das sagte ich ja bereits.
Die einzelnen Beispiele führe ich weiter unten der Reihe nach auf, sie stehen als fla Dateien in der AS3 Datei zum download bereit. Vergleiche die Actions der folgenden Datei, mit den dazugehörigen Beispielen weiter unten.
Ich habe mich Schritt für Schritt an dieses Thema herangearbeitet und liste hiermit die einzelnen Schritte als Beispiele auf, damit ihr die immer komplexer werdenden Actions versteht.
Um daraus eine Klasse zu machen, müssen noch einige Dinge geändert werden. So sollte sich Beispielsweise der Transformer jeweils um eine andere Instanz legen. Außerdem sollte die Instanz jeweils in den Container gelegt werden.
Dazu nun folgendes Beispiel
red_mc.addEventListener(MouseEvent.CLICK, getContainer);
green_mc.addEventListener(MouseEvent.CLICK, getContainer);
blue_mc.addEventListener(MouseEvent.CLICK, getContainer);
container.addEventListener(MouseEvent.MOUSE_DOWN, startDragin);
//-----------------------------------------------------------------
function getContainer(evt:MouseEvent):void {
//wenn die angeklickte Instanz nicht innerhalb von container liegt
if (evt.currentTarget.parent.name!="container") {
//wenn Container schon eine der Instanzen aufgenommen hat
//wird diese der Hauptfilmzeitleiste root hinzugefügt
if (container.numChildren>1) {
container.getChildAt(1).x=container.x;
container.getChildAt(1).y=container.y;
addChild(container.getChildAt(1));
}
container.x=evt.currentTarget.x;
container.y=evt.currentTarget.y;
evt.currentTarget.x=0;
evt.currentTarget.y=0;
container.addChild(getChildByName(evt.currentTarget.name));
}
}
//-----------------------------------------------------------------
function startDragin(evt:MouseEvent):void {
evt.currentTarget.startDrag();
evt.currentTarget.addEventListener(MouseEvent.MOUSE_UP, stopDragin);
}
//-----------------------------------------------------------------
function stopDragin(evt:MouseEvent):void {
evt.currentTarget.stopDrag();
}
Soweit so gut. Ich werde im nächsten Beispiel eine Movieclip Klasse erstellen namens TransformTool. Diese Klasse hat ein entsprechendes Symbol in der Bibliothek. Darin sind enthalten der Skalieranfasser sPfeil und Rotationsanfasser rPfeil. In der as Datei dieser Klasse werden alle Aktionen eingefügt, die für die Skalierung und Rotation zuständig sind. Als Parameter muss ein leeres Sprite, welches mittels addChild() der Bühne hinzugefügt wurde, übergeben werden.
Der "Container", das leere Sprite sowie die Instanz des TransformTools müssen im gleichen Koordinatensystem liegen, wie die Instanzen, die transformiert werden sollen. Das muss allerdings nicht die Hauptbühne sein, sondern kann auch innerhalb eines Movieclips geschehen.
Dieses übergebene Sprite hat im TransformTool den Namen container1, das entspricht dem "trsfContainer" aus den ersten Beispielen. Im Konstruktor wird ein weiteres Sprite "container2" mittels addChild() im container1 platziert. Das entspricht "rect_mc".
Die Instanzen auf der Bühne werden in der setter Funktion "positionieren" mittels addChild() in container2 platziert. So kann dann das TransformTool mit seinen Funktionen den container1 drehen und den container2 skalieren.
Wenn in container2 schon eine Instanz enthalten ist, wird diese mit den Transformationen auf die Bühne gebracht und die neue Instanz in container2 platziert. Dazu müssen dann container1 und container2 entsprechend transformiert werden.
Diese Funktion "positionieren" habe ich oben in einfacher Form vorgestellt (getContainer).
So müßte die Funktion getContainer aussehen, wenn sie nicht innerhalb der Klasse sondern im Hauptfilm programmiert wäre. Vergleiche diese Funktion mit der vorigen. Hier wurden die Transformationen hinzugefügt. Vergleiche diese Funktion auch mit der Funktion "positionieren" der Klasse, siehe unten.
function getContainer(evt:MouseEvent):void {
//wenn die angeklickte Instanz nicht innerhalb von container2 liegt
//wird erstmal die Instanz die in container2 liegt der Hauptfilmzeitleiste root hinzugefügt
if (evt.currentTarget.parent.name!="container2") {
var quellPunkt:Point=new Point(0,0);
var stagePoint:Point;
//da anfangs noch gar nichts in container2 liegt, wird das auch noch überprüft
if (container2.numChildren>0) {
//die Instanz, die in content2 liegt, wird contentMc zugewiesen, um Schreibarbeit zu sparen
var contentMc:DisplayObject=container2.getChildAt(0);
stagePoint=contentMc.localToGlobal(quellPunkt);
contentMc.width=container2.width;
contentMc.height=container2.height;
contentMc.rotation=container.rotation;
contentMc.x=stagePoint.x;
contentMc.y=stagePoint.y;
addChild(container2.getChildAt(0));
container2.scaleX=1;
container2.scaleY=1;
trsfTool.rotation=0;
trsfTool.drehung=0;
}
//Jetzt wird die angeklickte Instanz in Container2 gepackt
//vorher müssen alle Verschiebungen und Größen berechnet werden
//container wird im Mittelpunkt des anglickten MCs positioniert
//und bekommt die gleiche Rotation wie der MC
var mcRect:Rectangle=evt.currentTarget.getBounds(evt.currentTarget.parent);
container.x=mcRect.x+mcRect.width/2;
container.y=mcRect.y+mcRect.height/2;
container.rotation=evt.currentTarget.rotation;
//x-und yOffset, verschiebt die linke obere Kante auf den Registrierpunkt
var yOffset:Number=evt.currentTarget.getBounds(evt.currentTarget).y*- evt.currentTarget.scaleY;
var xOffset:Number=evt.currentTarget.getBounds(evt.currentTarget).x*- evt.currentTarget.scaleX;
//der angeklickte wird auf Nullposition gedreht und verschoben
// so dass der Registrierpunkt von container2 im Mittelpunkt liegt
// nachdem der angeklickte in container2 gepackt wurde
evt.currentTarget.rotation=0;
evt.currentTarget.x=(xOffset-evt.currentTarget.width/2);
evt.currentTarget.y=(yOffset-evt.currentTarget.height/2);
container2.addChild(getChildByName(evt.currentTarget.name));
//container in den Vordergrund
addChild(container);
//trsfTool wird gesetzt
trsfTool.setParam();
addChild(trsfTool);
}
}
Container1, der hier container genannt wird, muss im Mittelpunkt der auf der Bühne liegenden Instanz positioniert werden. Dazu wird mit getBounds ein Rechteck erzeugt und davon der Mittelpunkt durch halbe Weite und Höhe bestimmt. Egal wie die Instanz skaliert und gedreht wurde. Es ist immer der Mittelpunkt. Siehe dazu auch folgende Grafik.
var mcRect:Rectangle=evt.currentTarget.getBounds(evt.currentTarget.parent);
container.x=mcRect.x+mcRect.width/2;
container.y=mcRect.y+mcRect.height/2;
Außerdem wird der container gedreht. container2 und die Instanz, die in container2 platziert wird bekommen dann die rotation=0. Außerdem muss die Instanz so verschoben werden, dass der Mittelpunkt im Registrierpunkt von container2 liegt.
Die Drehung sowie die Plazierung der beiden Anfasser des TransformTools (hier mit Instanznamen trsfTool werden in der Funktion setParam() erzeugt.
In diesem TransformTool kann man die Instanzen proportional oder beliebig skalieren. Das wird über die public boolsche Variable scaleProp geregelt. So hat man die Möglichkeit von außen zu bestimmen, wie man das kontrollieren möchte. Hier habe ich es eingerichtet, dass durch Drücken der Shift Taste die Proportionen erhalten bleiben.
Hier die Actions in der fla Datei
var container:Sprite = new Sprite();
addChild(container);
//-----------------------------------------------------------
var trsfTool:TransformTool=new TransformTool(container);
trsfTool.scaleProp=false;
//-----------------------------------------------------------
mc1.addEventListener(MouseEvent.CLICK, getContainer);
mc2.addEventListener(MouseEvent.CLICK, getContainer);
mc3.addEventListener(MouseEvent.CLICK, getContainer);
stage.addEventListener(KeyboardEvent.KEY_DOWN, gedrueckt);
//-----------------------------------------------------------
function getContainer(evt:MouseEvent):void {
var obj:Object=evt.currentTarget;
var thisTarget:DisplayObject=DisplayObject(obj);
trsfTool.positionieren=thisTarget;
}
//-----------------------------------------------------------
//-----------------------------------------------------------
stage.addEventListener(KeyboardEvent.KEY_DOWN, gedrueckt);
stage.addEventListener(KeyboardEvent.KEY_UP, losgelassen);
//-----------------------------------------------------------
function gedrueckt(evt:KeyboardEvent):void {
if(evt.keyCode==16){trsfTool.scaleProp=true;}
}
//-----------------------------------------------------------
function losgelassen(evt:KeyboardEvent):void {
if(evt.keyCode==16){trsfTool.scaleProp=false;}
}
//-----------------------------------------------------------
Es folgt nun das komplette Actionscript des TransformTools
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.display.DisplayObject;
import flash.geom.Rectangle;
import flash.geom.Point;
public class TransformTool extends MovieClip {
private var container1:Sprite;//container1 enthält container2
private var container2:Sprite = new Sprite();// container2 enthält das Ziel das transformiert werden soll
protected var ziel:DisplayObject;// das zu transformierende Objekt
public var weite:Number;
public var hoehe:Number;
public var drehung:Number=0;
protected var rPfeilWinkel:Number;
// ein Rechteck, welches die Skaliergröße definiert
//halbe Mindestweite, halbe Mindesthöhe, halbeHöchstWeite, halbe HöchstHöhe
//Parameter für sPfeil.startDrag(false, skalRestrict)
protected var skalRestrict:Rectangle=new Rectangle(5,5,1000,1000);
protected var proportion:Number;//Seitenverhältnis der Instanz
public var scaleProp:Boolean=true;//proportionales Skalieren true/false
//-----------------------------------------------------------
//Konstruktor
public function TransformTool(_container1:Sprite) {
container1=_container1;
container2.name="container2";
container1.addChild(container2);
//container2=_container2;
this.sPfeil.addEventListener(MouseEvent.MOUSE_DOWN, startSPfeilMove);
this.rPfeil.addEventListener(MouseEvent.MOUSE_DOWN, startRPfeilMove);
container1.addEventListener(MouseEvent.MOUSE_DOWN, startDragin);
}
//------------------------------------------------------------
public function set positionieren(_ziel:DisplayObject):void {
ziel=_ziel;
if (ziel.parent.name!="container2") {
// wenn etwas im container2 liegt, wird es rausgeschmissen
// wohin? wird mit localToGlobal etc. definiert.
//stage Point bezieht sich auf das globale Koordinatensystem
//damit das TransformTool auch funktioniert, wenn die Instanzen
// und die Transformtool Instanz innerhalb eines Movieclips liegen
// braucht man auch das Koordinatensystem dieses Movieclips in dem alles liegt
//der Bezug wird unter targetPoint hergestellt ziel.parent
var quellPunkt:Point=new Point(0,0);
var stagePoint:Point;
if (container2.numChildren>0) {
var ziel2:DisplayObject=container2.getChildAt(0);
stagePoint=ziel2.localToGlobal(quellPunkt);
var targetPoint:Point=ziel.parent.globalToLocal(stagePoint);
ziel2.x=targetPoint.x;
ziel2.y=targetPoint.y;
ziel2.width=container2.width;
ziel2.height=container2.height;
ziel2.rotation=container1.rotation;
//ziel.parent Das Kooridinatensystem auf dem sich alles abspielt
ziel.parent.addChild(ziel2);
container2.scaleX=1;
container2.scaleY=1;
}
//container wird im Mittelpunkt des anglickten MCs positioniert
//und bekommt die gleiche Rotation wie der MC
var mcRect:Rectangle=ziel.getBounds(ziel.parent);
container1.x=mcRect.x+mcRect.width/2;
container1.y=mcRect.y+mcRect.height/2;
container1.rotation=ziel.rotation;
var yOffset:Number=ziel.getBounds(ziel).y*- ziel.scaleY;
var xOffset:Number=ziel.getBounds(ziel).x*- ziel.scaleX;
//der angeklickte wird auf Nullposition gedreht und verschoben
// so dass der Registrierpunkt von container2 im Mittelpunkt liegt
// nachdem der angeklickte in container2 gepackt wurde
ziel.rotation=0;
ziel.x=(xOffset-ziel.width/2);
ziel.y=(yOffset-ziel.height/2);
container2.addChild(ziel);
//proportion=container2.width/container2.height;
setParam();
container1.parent.addChild(container1);
container1.parent.addChild(this);
}
stage.addEventListener(MouseEvent.MOUSE_DOWN, deaktivier);
}
//------------------------------------------------------------
protected function skalieren(evt:Event):void {
if (scaleProp) {
if (this.mouseX>skalRestrict.x) {
sPfeil.x=this.mouseX;
sPfeil.y=this.mouseX/proportion;
}
}
container2.width=sPfeil.x*2;
container2.height=sPfeil.y*2;
rPfeil.x=sPfeil.x*-1;
rPfeil.y=sPfeil.y*-1;
weite=this.sPfeil.x*2;
hoehe=this.sPfeil.y*2;
this.stage.addEventListener(MouseEvent.MOUSE_UP, stopSPfeilMove);
}
//------------------------------------------------------------
protected function startSPfeilMove(evt:MouseEvent):void {
proportion=container2.width/container2.height;
this.addEventListener(Event.ENTER_FRAME, skalieren);
evt.currentTarget.startDrag(false, skalRestrict);
}
//------------------------------------------------------------
protected function stopSPfeilMove(evt:MouseEvent):void {
sPfeil.stopDrag();
this.removeEventListener(Event.ENTER_FRAME, skalieren);
}
//------------------------------------------------------------
public function movePos():void {
visible=true;
this.x=container1.x;
this.y=container1.y;//
}
//------------------------------------------------------------
// wenn eine andere Instanz gewählt wird, bekommt Transform Tool seine Parameter
protected function setParam():void {
visible=true;
this.x=container1.x;
this.y=container1.y;
this.rotation=container1.rotation;
this.drehung=this.rotation;
this.sPfeil.x=container2.width/2;
this.sPfeil.y=container2.height/2;
this.rPfeil.x=(container2.width/-2);
this.rPfeil.y=(container2.height/-2);
}
//------------------------------------------------------------
protected function startRPfeilMove(evt:MouseEvent):void {
rPfeilWinkel=winkel(this.rPfeil.x,this.rPfeil.y);
evt.currentTarget.addEventListener(Event.ENTER_FRAME, rotieren);
stage.addEventListener(MouseEvent.MOUSE_UP, stopRPfeilMove);
}
//------------------------------------------------------------
protected function stopRPfeilMove(evt:MouseEvent):void {
rPfeil.removeEventListener(Event.ENTER_FRAME, rotieren);
}
//------------------------------------------------------------
protected function rotieren(evt:Event):void {
var deltaY:Number=this.parent.mouseY-evt.currentTarget.parent.y;
var deltaX:Number=this.parent.mouseX-evt.currentTarget.parent.x;
var rotationRadian:Number=Math.atan2(deltaY,deltaX);
drehung = (rotationRadian/Math.PI)*180+rPfeilWinkel;
// TransformTool und container1 werden gedreht
this.rotation=drehung;
container1.rotation=drehung;
}
//------------------------------------------------------------
protected function winkel(weite:Number, hoehe:Number):Number {
//siehe Trigonometrie Tipp AS2
var vTan:Number;
vTan=weite/hoehe;
var arkusTanB:Number=Math.atan(vTan);
var alpha:Number=(arkusTanB/Math.PI)*180;
return (alpha+90);
}
//------------------------------------------------------------
protected function startDragin(evt:MouseEvent):void {
evt.currentTarget.startDrag();
evt.currentTarget.addEventListener(MouseEvent.MOUSE_UP, stopDragin);
this.addEventListener(Event.ENTER_FRAME, moveToCont);
}
//-----------------------------------------------------------------
protected function stopDragin(evt:MouseEvent):void {
evt.currentTarget.stopDrag();
this.removeEventListener(Event.ENTER_FRAME, moveToCont);
}
//-----------------------------------------------------------------
protected function moveToCont(evt:Event):void {
movePos();
}
//-----------------------------------------------------------------
//-----------------------------------------------------------------
protected function deaktivier(evt:MouseEvent):void {
if (evt.target==stage) {
this.visible=false;
}
}
}
}
Ich bin für alle Verbesserungsvorschläge und Veränderungen offen. Schreibt mir eine Email.
Im folgendem Beispiel wird der Registrierpunkt scheinbar in den Mittelpunkt verschoben Eine Instanz, deren Registrierpunkt nicht im Mittelpunkt liegt, wird per Actionscript um den Mittelpunkt gedreht. Diese Lösung arbeitet nicht mit der Matrix und der MC wird nicht in einen MC gepackt. Hier findet ihr ein gutes, englisches Tutorial für eine Lösung mit der Matrix.
Hier werde ich in mehreren Schritten Transformationen für ein Transformtool, welches mit der Action Matrix.transform arbeitet, erklären. Ausführliche Anleitungen zum Thema Matix findet ihr bei senocular / Matrix
Wenn man mit der Matrix ein Display Objekt dreht, wird diese Drehung immer um den Registrierpunkt des Elternelementes ausgeführt. Daher habe wir hier eigentlich ganz ähnliche Probleme, wie im ersten Beispiel auf dieser Seite. Das Problem wird hier auf ähnliche Weise gelöst. Das Display Objekt, welches gedreht werden soll, wird zwischenzeitlich in einem Displayobjekt Container platziert und zwar so, dass der Mittelpunkt im Registrierpunkt des Elternelementes (Container) liegt. Dann wird die Drehung ausgeführt mittels matrix.transform. Anschließend wird das Display Object wieder aus dem Container heraus genommen und mittels addChild an seine vorige Position gebracht. Für diese Aktionen brauchen wir ein Grundwissen in Sachen getBounds und localToGlobal. Ich empfehle schon an dieser Stelle, meinen Tipp getBounds zu studieren. Das erste Beispiel erklärt genau den Sachverhalt, der hier benötigt wird.
In den folgenden Beispielen benötigen wir in der Bibliothek der fla 2 Movieclips mit Klassennamen Container und einen mit Klassennamen Quadrat. Im Quadrat befindet sich ein Quadrat der Mittelpunkt sollte vom Registrierpunkt verschoben sein.
Hier werden 2 Instanzen der beiden zuvor erwähnten Klassen erzeugt. quad und cont. quad wird in cont per addChild plaziert und zwar so, dass der Mittelpunkt im Registrierpunkt von cont liegt. Siehe dazu den Tipp getBounds, dort wird dieser Vorgang erläutert.
import flash.geom.Point; var cont:Container = new Container(); var quad:Quadrat = new Quadrat(); //quad bekommt eine Größe quad.scaleX= quad.scaleY = 1.5; cont.x=100; cont.y=100; addChild(cont); //quad wird von der Bühne weg in cont platziert, es muss der Mittelpunkt von quad (nicht der Registrierpunkt) //im Registrierpunkt von cont liegen siehe hierzu meinen Tipp getBounds //dort wird genau dieser Vorgang erklärt, cont.addChild(quad); quad.x=(quad.getBounds(quad).x * -quad.scaleX)-quad.width/2 ; quad.y=(quad.getBounds(quad).y * - quad.scaleY)-quad.height/2;
Hier wird quad wieder aus cont heraus genommen und auf die Bühne gesetzt.
Mittels localToGlobal werden die x-y Positionen ermittelt.
import flash.geom.Point; var cont:Container = new Container(); var quad:Quadrat = new Quadrat(); //quad bekommt eine Größe quad.scaleX= quad.scaleY = 1.5; cont.x=100; cont.y=100; addChild(cont); //quad wird von der Bühne weg in cont platziert, es muss der Mittelpunkt von quad (nicht der Registrierpunkt) //im Registrierpunkt von cont liegen siehe hierzu meinen Tipp getBounds //dort wird genau dieser Vorgang erklärt, cont.addChild(quad); quad.x=(quad.getBounds(quad).x * -quad.scaleX)-quad.width/2 ; quad.y=(quad.getBounds(quad).y * - quad.scaleY)-quad.height/2; // hier wird quad aus dem cont heraus genommen und auf die Bühne gesetzt //mittels localToGlobal werden die x-y Positionen ermittelt var stagePoint:Point = new Point(0, 0); var targetPoint:Point = quad.localToGlobal(stagePoint); this.addChild(quad); quad.x = targetPoint.x; quad.y = targetPoint.y;
Hier wird quad zuerst auf die Bühne gebracht. Anschließend wird cont auf die Bühne gebracht und zwar an Position des Mittelpunktes von quad. quad wird in cont plaziert und mittels Matrixtransformation gedreht. Dann wird quad wieder aus cont genommen und auf der Bühne platziert.
import flash.geom.Point;
import flash.geom.Rectangle;
const RAD:Number = 180 / Math.PI;
// bogenmass = w/RAD;
// grad = w*RAD;
var cont:Container = new Container();
var quad:Quadrat = new Quadrat();
//quad bekommt eine Größe und eine Position
quad.scaleX= quad.scaleY = 2;
quad.x= 200;
quad.y=150;
addChild(quad);
//es wird die Position des Mittelpunktes von quad auf der Bühne ermittelt qRect
// dort wird cont platziert und auf die Bühne gebracht
var qRect:Rectangle = quad.getBounds(this);
cont.x=qRect.x+qRect.width/2;
cont.y=qRect.y+qRect.height/2;
addChild(cont);
cont.addChild(quad);
quad.x=(quad.getBounds(quad).x * -quad.scaleX)-quad.width/2 ;
quad.y=(quad.getBounds(quad).y * - quad.scaleY)-quad.height/2;
//hier wird quad mittels matrix transformation gedreht
//da der Mittelpunkt von quad im Registrierpunkt seines Elternelementes (cont) liegt,
//gibt es keine Probleme oder Verschiebungen, die korrigiert werden müssten
var my_matrix =quad.transform.matrix;
my_matrix.rotate(45/RAD);
quad.transform.matrix = my_matrix;
// hier wird quad aus dem cont heraus genommen und auf die Bühne gesetzt
//mittels localToGlobal werden die x-y Positionen ermittelt
var stagePoint:Point = new Point(0, 0);
var targetPoint:Point = quad.localToGlobal(stagePoint);
this.addChild(quad);
quad.x = targetPoint.x;
quad.y = targetPoint.y;