Ändra position

Det är viktigt att komma ihåg att x- och y-egenskaperna alltid refererar till visningsobjektets position i förhållande till 0,0-koordinaten för överordnat visningsobjekt. För en Shape-instans (till exempel en cirkel) som ingår i en Sprite-instans där Shape-objektets x- och y-egenskaper anges som 0 placeras cirkeln överst i vänstra hörnet i Sprite-instansen, vilket inte behöver vara överst i vänstra hörnet på scenen. För att placera ett objekt i förhållande till de globala scenkoordinaterna kan du använda metoden globalToLocal() för valfritt visningsobjekt så att koordinaterna konverteras från globala (scen) till lokala (behållare för visningsobjekt) enligt följande:

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

Du kan på liknande sätt använda klassen DisplayObjects metod localToGlobal() för att konvertera lokala koordinater till scenkoordinater.

Du kan göra det möjligt för en användare att flytta visningsobjekt med musen på två olika sätt i ActionScript. I båda fallen används två mushändelser: när musknappen trycks ner följer objektet med musmarkörens rörelse och när knappen släpps stannar objektet.

Det första sättet, med metoden startDrag(), är enklare men mer begränsat. När musknappen trycks ner anropas metoden startDrag() för visningsobjektet som ska dras. När musknappen släpps anropas metoden stopDrag(). Sprite-klassen definierar dessa två funktioner, och objektet som ska flyttas måste därför bestå av ett Sprite-objekt eller någon av dess underklasser.

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

Den här tekniken har en viktig begränsning: endast ett objekt i taget kan dras med startDrag(). Om ett visningsobjekt dras och metoden startDrag() anropas för ett annat visningsobjekt upphör det första visningsobjektet genast att följa musrörelsen. Om till exempel funktionen startDragging() ändras kommer endast objektet circle att dras, trots metodanropet square.startDrag():

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

Som en konsekvens av faktumet att endast ett objekt i taget kan dras via startDrag() kan metoden stopDrag() anropas för valfritt visningsobjekt och pågående objekt som dras kommer att stoppas.

Om du behöver dra fler än ett visningsobjekt, eller för att undvika en möjlig konflikt där fler än ett objekt kanske används med startDrag(), så är det bättre att använda den musföljande tekniken för att skapa drageffekten. När musknappen trycks ner och den här tekniken används agerar en funktion som avlyssnare för händelsen mouseMove på scenen. Med den här funktionen, som sedan anropas varje gång musen flyttas, hoppar objektet som dras till musens x,y-koordinat. När musknappen släpps slutar funktionen att agera som avlyssnare, vilket innebär att den inte längre anropas vid musrörelser och objektet upphör att följa efter musmarkören. Här följer ett kodexempel som visar tekniken:

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

Förutom att få ett visningsobjekt att följa efter musmarkören vill du kanske kunna flytta objektet längst fram på skärmen, så att det verkar flyta över alla andra objekt. Anta till exempel att du har två objekt, en cirkel och en kvadrat, som båda kan flyttas med musen. Om cirkeln råkar vara under fyrkanten på visningslistan och du klickar och drar cirkeln så att markören hamnar över fyrkanten så kommer cirkeln att läggas bakom fyrkanten, vilket bryter dra och släpp-illusionen. I stället kan du göra så att när cirkeln klickas, så flyttas den högst upp i visningslistan och på så vis läggs den framför annat innehåll.

Med följande kod (anpassad från det tidigare exemplet) kan du få två visningobjekt, en cirkel och en kvadrat, att flyttas med hjälp av musen. När musknappen trycks ner över någotdera objekt så flyttas det högst upp i scenens visningslista. Då hamnar det dragna objektet alltid överst. (Kod som är ny eller ändrad sedan föregående listning visas med fet stil.)

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

Effekten kan utökas ytterligare, i till exempel spel där token eller kort flyttas mellan högar, genom att det dragna objektet läggs till scenens visningslista när det ”plockas upp”. Därefter lägger du objektet i en annan visningslista, t.ex. ”högen” där det lämnades, när musknappen släpps.

Slutligen, för att förstärka effekten, kan du använda ett skuggfilter på visningsobjektet när det klickas (och dras) och ta bort skuggan när objektet släpps. Mer information om hur du använder skuggfilter och andra visningsobjektfilter i ActionScript finns i Filtrera visningsobjekt.