De positie wijzigen

Houd er rekening mee dat de eigenschappen x en y altijd naar de positie van het weergaveobject verwijzen ten opzichte van de 0,0-coördinaat van de bovenliggende assen van het weergaveobject. Voor een instantie Shape (zoals een cirkel) die zich in een instantie Sprite bevindt, betekent dit bijvoorbeeld dat als u de eigenschappen x en y van het object Shape op 0 instelt, de cirkel in de linkerbovenhoek van de Sprite wordt geplaatst (die mogelijk niet de linkerbovenhoek van het werkgebied is). Als u een object wilt positioneren ten opzichte van de algemene coördinaten van het werkgebied, kunt u de methode globalToLocal() van een weergaveobject als volgt gebruiken om algemene coördinaten (werkgebied) om te zetten in lokale coördinaten (weergaveobjectcontainer):

// 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;

U kunt nu op dezelfde manier de methode localToGlobal() van de klasse DisplayObject gebruiken om lokale coördinaten om te zetten in werkgebiedcoördinaten.

In ActionScript kunt u een gebruiker objecten laten verplaatsen aan de hand van twee verschillende technieken. In beide gevallen worden twee muisgebeurtenissen gebruikt. De ene gebeurtenis vindt plaats wanneer de muisknop wordt ingedrukt en het object de muiscursor volgt. De andere gebeurtenis vindt plaats wanneer de muisknop wordt losgelaten en de muiscursor niet langer door het object wordt gevolgd.

De eerste techniek, met gebruik van de methode startDrag() , is eenvoudiger maar heeft meer beperkingen. Wanneer de muisknop wordt ingedrukt, wordt de methode startDrag() van het te slepen weergaveobject aangeroepen. Wanneer de muisknop wordt losgelaten, wordt de methode stopDrag() aangeroepen. De klasse Sprite wordt door deze twee functies gedefinieerd, dus het verplaatste object moet deel uitmaken van de klasse Sprite of een subklasse hiervan.

// 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);

Deze methode heeft een belangrijke beperking: er kan slechts een item per keer worden gesleept met startDrag() . Als een weergaveobject wordt gesleept en de methode startDrag() voor een ander weergaveobject wordt aangeroepen, stopt het eerste weergaveobject direct met het volgen van de muis. Als de functie startDragging() bijvoorbeeld wordt gewijzigd, zoals hieronder aangegeven, wordt alleen het object circle gesleept, ondanks de methodeaanroep square.startDrag() :

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

Als gevolg van het feit dat er slechts een object per keer kan worden gesleept met startDrag() , kan de methode stopDrag() voor elk weergaveobject worden aangeroepen en stopt deze het slepen van het object dat op dat moment wordt gesleept.

Als u meer dan een weergaveobject moet slepen, of het risico op een conflict tussen verschillende objecten wilt vermijden die startDrag() gebruiken, is het raadzaam de muismethode te gebruiken om het sleepeffect te maken. Met deze techniek wordt, wanneer u de muisknop indrukt, een functie als listener geabonneerd op de gebeurtenis mouseMove van het werkgebied. Deze functie, die vervolgens elke keer dat de muis beweegt wordt aangeroepen, zorgt ervoor dat het te slepen object naar de x,y-coördinaten van de muis wordt verplaatst. Als de muisknop wordt losgelaten, wordt het abonnement van de functie als listener opgezegd. Dit houdt in dat deze niet langer wordt aangeroepen wanneer de muis wordt verplaatst en dat het object stopt met het volgen van de muiscursor. De volgende code demonstreert deze methode:

// 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);

Naast het feit dat de muiscursor wordt gevolgd door een weergaveobject, is het vaak gewenst dat het gesleepte object naar de voorgrond van het scherm wordt geplaatst zodat het lijkt of het boven de andere objecten drijft. Stel dat u beschikt over twee objecten, een cirkel en een vierkant, die allebei met de muis kunnen worden verplaatst. Als de cirkel zich in het weergaveoverzicht onder het vierkant bevindt en u op de cirkel klikt en deze sleept totdat de cursor zich boven het vierkant bevindt, wordt de cirkel achter het vierkant gesleept, waardoor de illusie van Slepen en neerzetten verdwijnt. In plaats hiervan kunt u ervoor zorgen dat wanneer op de cirkel wordt geklikt, de cirkel naar het hoogste niveau in het weergaveoverzicht wordt verplaatst en zodoende altijd boven de andere inhoud wordt weergegeven.

Met het volgende codevoorbeeld (een aanpassing van het vorige voorbeeld) kunnen twee weergaveobjecten, een cirkel en een vierkant, met de muis worden verplaatst. Wanneer boven een item op de muisknop wordt geklikt, wordt dat item naar het hoogste niveau van het weergaveoverzicht van het werkgebied verplaatst, zodat het gesleepte item altijd op de voorgrond wordt weergegeven. (Nieuwe of gewijzigde code ten opzichte van het vorige voorbeeld wordt vet weergegeven.)

// 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);

Als u dit effect wilt vergroten, zoals bijvoorbeeld voor een spel met stapels symbolen of kaarten, kunt u het object waarmee wordt gesleept toevoegen aan het weergaveoverzicht van het werkgebied wanneer deze wordt 'opgepakt' en het vervolgens aan een ander weergaveoverzicht toevoegen, zoals de 'stapel' waarop deze wordt losgelaten, op het moment dat de muisknop wordt losgelaten.

Ten slotte kunt u een filter Slagschaduw op het weergaveobject toepassen wanneer hierop wordt geklikt (wanneer u begint met slepen) en het filter opheffen wanneer het object wordt losgelaten. Zie Weergaveobjecten filteren voor meer informatie over het gebruik van het filter Slagschaduw en overige filters voor weergaveobjecten in ActionScript.