Konum değiştirme

x ve y özelliklerinin her zaman, üst görüntüleme nesnesinin eksenlerinin 0,0 koordinatına göre görüntüleme nesnesinin konumunu ifade ettiğinin unutulmaması önemlidir. Bu nedenle de, bir Sprite örneğinin içinde yer alan bir Shape örneği (örn. bir daire) için, Shape nesnesinin x ve y özelliklerinin 0 olarak ayarlanması sonucunda daire Sprite öğesinin sol üst köşesine yerleştirilir ve bunun her zaman Sahne Alanı'nın sol üst köşesi olması gerekmez. Bir nesnesi genel Sahne Alanı koordinatlarına göre konumlandırmak için, koordinatları genel (Sahne Alanı) koordinatlardan yerel (görüntüleme nesnesi kabı) koordinatlarına dönüştürmek için aşağıdaki gibi, herhangi bir görüntüleme nesnesinin globalToLocal() yöntemini kullanabilirsiniz:

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

Aynı şekilde, yerel koordinatları Sahne Alanı koordinatlarına dönüştürmek için de DisplayObject sınıfının localToGlobal() yöntemini kullanabilirsiniz.

ActionScript'te bir kullanıcının fareyi kullanarak görüntü nesnelerini hareket ettirmesi iki teknikle sağlanır. Her iki durumda da iki fare olayı kullanılır; fare düğmesine basıldığında, nesneye fare imlecini takip etmesi bildirilir ve düğme serbest bırakıldığında, nesneye fare imlecini takip etmeyi durdurması bildirilir.

Birinci teknik olan startDrag() yöntemi, daha kolay ancak sınırlıdır. Fare düğmesine basıldığında, sürüklenecek görüntüleme nesnesinin startDrag() yöntemi çağrılır. Fare düğmesi serbest bırakıldığında, stopDrag() yöntemi çağrılır. Bu iki işlev, Sprite sınıfında tanımlandığı için hareket eden nesne bir Sprite ya da onun alt sınıflarından biri olmalıdır.

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

Bu teknik önemli ölçüde bir sınırlama içerir: startDrag() kullanılarak aynı anda yalnızca bir öğe sürüklenebilir. Yalnızca bir görüntüleme nesnesi sürüklenirken startDrag() yöntemi başka bir görüntüleme nesnesinde çağrılırsa, birinci görüntüleme nesnesi fareyi takip etmeyi hemen durdurur. Örneğin, startDragging() işlevi burada gösterildiği gibi değiştirilirse, square.startDrag() yöntemi çağrısına rağmen yalnızca circle nesnesi sürüklenir:

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

startDrag() kullanılarak yalnızca bir nesnenin sürüklenebilmesinin sonucunda, stopDrag() yöntemi herhangi bir görüntüleme nesnesinde çağrılabilir ve geçerli olarak sürüklenen nesneyi durdurur.

Birden çok görüntüleme nesnesi sürüklemeniz gerekiyorsa veya birden çok nesnenin startDrag() yöntemini kullanması durumunda çakışma oluşması olasılığını önlemek için, en iyisi sürükleme etkisini oluşturmak için fareyi takip etme tekniğinin kullanılmasıdır. Bu teknikte, fare düğmesine basıldığında, bir işlev, Sahne Alanı'nın mouseMove olayına dinleyici olarak abone olur. Daha sonra fare her hareket ettiğinde çağrılacak olan bu işlev, sürüklenen nesnenin, farenin x, y koordinatına atlamasına neden olur. Fare düğmesi serbest bırakıldıktan sonra, işlevin dinleyici olarak aboneliği kaldırılır, başka bir deyişle, artık fare hareket ettiğinde bu işlev çağrılmaz ve nesne fare imlecini takip etmeyi durdurur. Aşağıda, bu tekniği gösteren birkaç kod yer almaktadır:

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

Görüntüleme nesnesinin fare imlecini takip etmesini sağlamaya ek olarak, sürüklenen nesneyi görüntünün önüne taşımak çoğu zaman tercih edildiği için diğer tüm nesnelerin yukarısında kayıyor gibi görünür. Örneğin bir daire ve bir kare gibi her ikisi de fareyle taşınabilir iki nesneniz olduğunu varsayın. Görüntüleme listesinde daire karenin aşağısında bulunursa ve siz de imlecin karenin üzerine gelmesi için daireyi tıklatıp sürüklerseniz, daire karenin arkasından kayıyor gibi görünür ve bu da sürükleyip bırakma görüntüsünü bozar. Bunun yerine, daire tıklatıldığında görüntüleme listesinin üst kısmına gidecek şekilde ayarlama yapabilir ve böylece dairenin diğer tüm içeriklerin en üstünde görüntülenmesini sağlayabilirsiniz.

Aşağıdaki kod (önceki örnekten alınmış) fareyle taşınacak iki görüntü nesnesi sağlar; bir daire ve bir kare. Fare düğmesine her basıldığında, öğe Sahne Alanı'nın görüntüleme listesinin en üst kısmına taşınır, böylece sürüklenen öğe her zaman en üstte görüntülenir. (Yeni olan veya önceki listeden değiştirilen kod kalın yazı tipinde görüntülenir.)

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

Bu etkiyi daha fazla genişletmek için (örn. kümeler arasında işaret veya kartların taşındığı bir oyun için), "alındığında" sürüklenen nesneyi Sahne Alanı'nın görüntüleme listesine ekleyebilir ve daha sonra fare düğmesi serbest bırakıldığında bunu başka bir listeye (bırakıldığı "küme" gibi) ekleyebilirsiniz.

Son olarak, etkiyi geliştirmek için, tıklatıldığında (sürüklemeye başladığınızda) görüntüleme nesnesine bir gölge filtresi ekleyebilir ve nesne serbest bırakıldığında gölgeyi kaldırabilirsiniz. ActionScript'te gölge filtresinin ve diğer görüntüleme nesnesi filtrelerinin kullanılmasıyla ilgili ayrıntılar için, bkz. Görüntüleme nesnelerine filtre uygulama.