Ändern der Position

Eine allgemeine Manipulation eines Anzeigeobjekts ist das Positionieren des Objekts auf dem Bildschirm. Zum Einstellen der Position eines Anzeigeobjekts ändern Sie dessen Eigenschaften x und y.

myShape.x = 17; 
myShape.y = 212;

Im Positionierungssystem von Anzeigeobjekten wird die Bühne als kartesisches Koordinatensystem (das gewohnte Rastersystem mit einer horizontalen x- und einer vertikalen y-Achse) behandelt. Der Ursprung des Koordinatensystems (die Koordinate 0,0, an der sich die x- und y-Achse treffen), befindet sich in der oberen linken Ecke der Bühne. Von diesem Ursprungspunkt aus gehen die positiven x-Werte nach rechts und die negativen nach links, während (im Gegensatz zu typischen Graphensystemen) positive y-Werte nach unten und negative nach oben gehen. Beispielsweise wird das Objekt myShape mit den folgenden Codezeilen an die x-Koordinate 17 (17 Pixel vom Ursprungspunkt nach rechts) und die y-Koordinate 212 (212 Pixel vom Ursprungspunkt nach unten) verschoben.

Standardmäßig werden die x- und y-Eigenschaften eines mit ActionScript erstellten Anzeigeobjekts auf 0 eingestellt und das Objekt somit in der oberen linken Ecke des übergeordneten Inhalts platziert.

Ändern der Position relativ zur Bühne

Die Eigenschaften x und y beziehen sich immer auf die Position des Anzeigeobjekts relativ zur 0,0-Koordinate der Achsen des übergeordneten Anzeigeobjekts. Bei einer Shape-Instanz (z. B. einem Kreis), die in einer Sprite-Instanz enthalten ist, platziert das Einstellen der x- und y-Eigenschaften auf Null den Kreis in der oberen linken Ecke des Sprite, die nicht unbedingt auch die obere linke Ecke der Bühne ist. Um ein Objekt relativ zu den globalen Koordinaten der Bühne zu platzieren, verwenden Sie die globalToLocal()-Methode eines Anzeigeobjekts, um die Koordinaten von globalen Koordinaten (Bühne) in lokale Koordinaten (Anzeigeobjektcontainer) umzuwandeln. Dies wird im folgenden Beispiel gezeigt:

// Position the shape at the top-left corner of the Stage,  
// regardless of where its parent is located. 
 
// Create a Sprite, positioned at x:200 and y:200. 
var mySprite:Sprite = new Sprite(); 
mySprite.x = 200; 
mySprite.y = 200; 
this.addChild(mySprite); 
 
// Draw a dot at the Sprite's 0,0 coordinate, for reference. 
mySprite.graphics.lineStyle(1, 0x000000); 
mySprite.graphics.beginFill(0x000000); 
mySprite.graphics.moveTo(0, 0); 
mySprite.graphics.lineTo(1, 0); 
mySprite.graphics.lineTo(1, 1); 
mySprite.graphics.lineTo(0, 1); 
mySprite.graphics.endFill(); 
 
// Create the circle Shape instance. 
var circle:Shape = new Shape(); 
mySprite.addChild(circle); 
 
// Draw a circle with radius 50 and center point at x:50, y:50 in the Shape. 
circle.graphics.lineStyle(1, 0x000000); 
circle.graphics.beginFill(0xff0000); 
circle.graphics.drawCircle(50, 50, 50); 
circle.graphics.endFill(); 
 
// Move the Shape so its top-left corner is at the Stage's 0, 0 coordinate. 
var stagePoint:Point = new Point(0, 0); 
var targetPoint:Point = mySprite.globalToLocal(stagePoint); 
circle.x = targetPoint.x; 
circle.y = targetPoint.y;

Entsprechend können Sie die localToGlobal()-Methode der DisplayObject-Klasse verwenden, um lokale Koordinaten in globale Bühnenkoordinaten umzuwandeln.

Erstellen einer Drag & Drop-Interaktion

Ein allgemeiner Grund für das Verschieben eines Anzeigeobjekts ist das Erstellen einer Drag & Drop-Interaktion, d. h., wenn ein Benutzer auf ein Objekt klickt, wird das Objekt mit dem Mauszeiger verschoben, bis die Maustaste wieder losgelassen wird. Eine Drag & Drop-Interaktion kann in ActionScript auf zwei Arten erstellt werden. In beiden Fällen werden zwei Mausereignisse verwendet: Beim Drücken der Maustaste wird das Objekt angewiesen, dem Mauszeiger zu folgen; beim Loslassen der Maustaste wird das Objekt angewiesen, dem Mauszeiger nicht weiter zu folgen.

Das erste Verfahren, bei dem die startDrag()-Methode verwendet wird, ist einfacher, aber auch weniger vielseitig. Beim Drücken der Maustaste wird die startDrag()-Methode des zu ziehenden Anzeigeobjekts aufgerufen. Beim Loslassen der Maustaste wird die stopDrag()-Methode aufgerufen.

// This code creates a drag-and-drop interaction using the startDrag() 
// technique. 
// square is a DisplayObject (e.g. a MovieClip or Sprite instance). 
 
import flash.events.MouseEvent; 
 
// This function is called when the mouse button is pressed. 
function startDragging(event:MouseEvent):void 
{ 
    square.startDrag(); 
} 
 
// This function is called when the mouse button is released. 
function stopDragging(event:MouseEvent):void 
{ 
    square.stopDrag(); 
} 
 
square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging); 
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

Dieses Verfahren weist jedoch eine entscheidende Einschränkung auf: Mit startDrag() kann nur jeweils ein Objekt gezogen werden. Wenn ein Anzeigeobjekt gezogen wird und die startDrag()-Methode für ein weiteres Anzeigeobjekt aufgerufen wird, hört das erste Anzeigeobjekt sofort auf, dem Mauszeiger zu folgen. Nach einer Änderung der startDragging()-Funktion (wie im Folgenden gezeigt), wird nur das circle-Objekt gezogen, ungeachtet des Aufrufs der square.startDrag()-Methode:

function startDragging(event:MouseEvent):void 
{ 
    square.startDrag(); 
    circle.startDrag(); 
}

Als Konsequenz der Tatsache, dass mit startDrag() nur ein Objekt gezogen werden kann, soll die stopDrag()-Methode für ein Anzeigeobjekt aufgerufen werden, um das derzeit gezogene Objekt zu stoppen.

Wenn Sie mehrere Anzeigeobjekte ziehen müssen oder mögliche Konflikte vermeiden möchten, wenn mehrere Objekte startDrag() verwenden, verwenden Sie am besten die Maus folgen-Technik, um den Drag-Effekt zu erzeugen. Bei dieser Technik wird beim Drücken der Maustaste eine Funktion als Listener des mouseMove-Ereignisses der Bühne abonniert. Diese Funktion, die mit jeder Bewegung der Maus aufgerufen wird, führt dazu, dass das gezogene Objekt zur x,y-Koordinate der Maus springt. Sobald die Maustaste losgelassen wird, ist die Funktion nicht mehr als Listener abonniert. Dies bedeutet, dass sie nicht mehr mit jeder Bewegung der Maus aufgerufen wird und das Objekt dem Mauszeiger nicht mehr folgt. Im Folgenden ist ein Code aufgeführt, der diese Technik demonstriert:

// This code creates a drag-and-drop interaction using the mouse-following 
// technique. 
// circle is a DisplayObject (e.g. a MovieClip or Sprite instance). 
 
import flash.events.MouseEvent; 
 
var offsetX:Number; 
var offsetY:Number; 
 
// This function is called when the mouse button is pressed. 
function startDragging(event:MouseEvent):void 
{ 
    // Record the difference (offset) between where 
    // the cursor was when the mouse button was pressed and the x, y 
    // coordinate of the circle when the mouse button was pressed. 
    offsetX = event.stageX - circle.x; 
    offsetY = event.stageY - circle.y; 
     
    // tell Flash Player to start listening for the mouseMove event 
    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCircle); 
} 
 
// This function is called when the mouse button is released. 
function stopDragging(event:MouseEvent):void 
{ 
    // Tell Flash Player to stop listening for the mouseMove event. 
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragCircle); 
} 
 
// This function is called every time the mouse moves, 
// as long as the mouse button is pressed down. 
function dragCircle(event:MouseEvent):void 
{ 
    // Move the circle to the location of the cursor, maintaining  
    // the offset between the cursor's location and the  
    // location of the dragged object. 
    circle.x = event.stageX - offsetX; 
    circle.y = event.stageY - offsetY; 
 
    // Instruct Flash Player to refresh the screen after this event. 
    event.updateAfterEvent(); 
} 
 
circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging); 
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

Neben dem Effekt, dass ein Anzeigeobjekt dem Mauszeiger folgt, stellt ein Teil der Drag & Drop-Interaktion das gezogene Objekt in den Vordergrund, sodass es schwebend vor allen anderen Objekten angezeigt wird. Angenommen, Sie haben zwei Objekte, ein Kreis und ein Quadrat, beide haben eine Drag & Drop-Interaktion. Wenn sich der Kreis in der Anzeigeliste unter dem Quadrat befindet und Sie den Kreis klicken und ziehen, sodass sich der Mauszeiger über dem Quadrat befindet, scheint sich der Kreis hinter das Quadrat zu schieben, wodurch der Drag & Drop-Eindruck unterbrochen wird. Stattdessen können Sie es so einrichten, dass der Kreis nach dem Klicken an die Spitze der Anzeigeliste verschoben wird und somit immer im Vordergrund vor allen anderen Objekten angezeigt wird.

Der folgende Code (eine Adaption des vorangegangenen Beispiels) erstellt eine Drag & Drop-Interaktion für zwei Anzeigeobjekte, einen Kreis und ein Quadrat. Wenn die Maustaste über einem dieser Objekte gedrückt wird, wandert dieses Objekt an die Spitze der Anzeigeliste der Bühne, sodass es während des Ziehens immer im Vordergrund angezeigt wird. Im Vergleich zum vorangegangenen Code-Listing neuer oder geänderter Code wird fett angezeigt.

// This code creates a drag-and-drop interaction using the mouse-following 
// technique. 
// circle and square are DisplayObjects (e.g. MovieClip or Sprite  
// instances). 
 
import flash.display.DisplayObject; 
import flash.events.MouseEvent; 
 
var offsetX:Number; 
var offsetY:Number; 
var draggedObject:DisplayObject; 
 
// This function is called when the mouse button is pressed. 
function startDragging(event:MouseEvent):void 
{ 
    // remember which object is being dragged 
    draggedObject = DisplayObject(event.target); 
     
    // Record the difference (offset) between where the cursor was when 
    // the mouse button was pressed and the x, y coordinate of the 
    // dragged object when the mouse button was pressed. 
    offsetX = event.stageX - draggedObject.x; 
    offsetY = event.stageY - draggedObject.y; 
     
    // move the selected object to the top of the display list 
    stage.addChild(draggedObject); 
     
    // Tell Flash Player to start listening for the mouseMove event. 
    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject); 
} 
 
// This function is called when the mouse button is released. 
function stopDragging(event:MouseEvent):void 
{ 
    // Tell Flash Player to stop listening for the mouseMove event. 
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject); 
} 
 
// This function is called every time the mouse moves, 
// as long as the mouse button is pressed down. 
function dragObject(event:MouseEvent):void 
{ 
    // Move the dragged object to the location of the cursor, maintaining  
    // the offset between the cursor's location and the location  
    // of the dragged object. 
    draggedObject.x = event.stageX - offsetX; 
    draggedObject.y = event.stageY - offsetY; 
     
    // Instruct Flash Player to refresh the screen after this event. 
    event.updateAfterEvent(); 
} 
 
circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging); 
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging); 
 
square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging); 
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

Um diesen Effekt zu erweitern, beispielsweise für ein Spiel, bei dem Token oder Karten zwischen Stapeln verschoben werden, können Sie das gezogene Objekt beim „Aufnehmen“ zur Anzeigeliste der Bühne hinzufügen und es dann beim „Ablegen“, d. h. dem Loslassen der Maustaste, einer anderen Anzeigeliste hinzufügen (z. B. der Anzeigeliste „Stapel“).

Als weitere Aufwertung können Sie einen Drop Shadow-Filter auf ein Anzeigeobjekt anwenden, wenn darauf geklickt wird (wenn Sie das Ziehen beginnen), und diesen Schlagschatten mit dem Loslassen des Objekts wieder entfernen. Weitere Informationen zum Drop Shadow-Filter und anderen Filtern für Anzeigeobjekte in ActionScript finden Sie unter Anwenden von Filtern auf Anzeigeobjekte.