Ändern der Position

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.

Mithilfe von zwei verschiedenen ActionScript-Techniken können Sie Benutzern die Möglichkeit geben, Anzeigeobjekte mit der Maus zu verschieben. 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. Diese beiden Funktionen werden von der Sprite-Klasse definiert. Deshalb muss das verschobene Objekt zur Sprite-Klasse oder einer ihrer Unterklassen gehören.

// This code creates a mouse drag interaction using the startDrag() 
// technique. 
// square is 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 Zieheffekt 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 moves display objects 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, ist es oft empfehlenswert, das gezogene Objekt in den Vordergrund der Anzeige zu stellen, sodass es schwebend vor allen anderen Objekten angezeigt wird. Angenommen, Sie haben zwei Objekte, die beide mit der Maus verschoben werden können: einen Kreis und ein Quadrat. 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 Ziehen-und-Ablegen-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.

Mit dem folgenden Code (der aus dem vorigen Beispiel übernommen und angepasst wurde) können zwei Anzeigeobjekte, ein Kreis und ein Quadrat, mit der Maus verschoben werden. 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 Codebeispiel 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 .