變更位置

Flash Player 9 以及更新的版本,Adobe AIR 1.0 以及更新的版本

任何顯示物件的最基本操作就是放置在螢幕上。若要設定顯示物件的位置,請變更物件的 x y 屬性。

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

顯示物件放置系統是以迪卡兒座標系統 (有水平 x 軸和垂直 y 軸的常用網格系統) 處理「舞台」。座標系統的原點 (0,0 座標,代表 x 和 y 軸相交處) 是在「舞台」的左上角。從此處,x 值是向右為正值而向左為負值,而 (與一般製圖系統相反) y 值是向下為正值而向上為負值。例如,上面的幾行程式碼會將物件 myShape 移至 x 座標 17 (原點向右 17 個像素) 而 y 座標 212 (原點向下 212 個像素)。

根據預設,當顯示物件是使用 ActionScript 建立時, x y 屬性同時都設定為 0,而將物件放在其父內容的左上角。

變更相對於舞台的位置

請務必記得 x y 屬性永遠都指向相對於其父顯示物件軸之 0,0 座標的顯示物件位置,因此,對包含於 Sprite 實體內的 Shape 實體 (如圓形) 而言,將 Shape 物件的 x y 屬性設定為 0 會將該圓形放置於 Sprite 的左上角,而不一定是「舞台」的左上角。若要將物件依相對於全域「舞台」座標放置,則可以使用任何顯示物件的 globalToLocal() 方法,將座標從全域 (「舞台」) 座標轉換成區域 (顯示物件容器) 座標,如下所示:

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

同樣地,您也可以使用 DisplayObject 類別的 localToGlobal() 方法,將區域座標轉換成「舞台」座標。

使用滑鼠移動顯示物件

您可以讓使用者利用 ActionScript 中的兩種不同技術,以滑鼠移動顯示物件。 在這兩種方式中,都會使用兩個滑鼠事件:按下滑鼠按鍵時,即告知物件跟隨滑鼠游標,以及放開滑鼠按鍵時,即告知物件停止跟隨滑鼠游標。

備註: Flash Player 11.3 及更新版本、AIR 3.3 及更新版本:您也可以使用 MouseEvent.RELEASE_OUTSIDE 事件涵蓋使用者在包含的 Sprite 邊界外放開滑鼠按鈕的情形。

第一種技術是使用 startDrag() 方法,比較簡單,但是也具有較多限制。按下滑鼠按鍵時,即呼叫所要拖曳之顯示物件的 startDrag() 方法;放開滑鼠按鍵時,則呼叫 stopDrag() 方法。Sprite 類別定義這兩個函數,這樣移動的物件必須是 Sprite 或其子類別之一。

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

這項技巧有一項相當大的限制,就是一次只能使用 startDrag() 拖曳一個項目。如果正在拖曳一個顯示物件,而在另一個顯示物件上呼叫 startDrag() 方法,第一個顯示物件就會立即停止跟隨滑鼠移動。例如,如果變更 startDragging() 函數 (如下所示),則將只拖曳 circle 物件,而不管 square.startDrag() 方法呼叫:

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

由於在使用 startDrag() 時只能拖曳一個物件,結果針對任何顯示物件隨時都可能呼叫 stopDrag() 方法,而導致停止目前正在拖曳的任何物件。

若需要拖曳一個以上的顯示物件,或是要避免可能會有一個以上的物件使用 startDrag() 所可能產生的衝突,最好是使用滑鼠跟隨技巧來建立拖曳作用。使用這項技巧並按下滑鼠按鍵,即會將函數訂閱為「舞台」之 mouseMove 事件的偵聽程式,然後再於每次滑鼠移動時呼叫這個函數,讓拖曳的物件跳到滑鼠的 x,y 座標;放開滑鼠按鍵之後,即會將函數取消訂閱為偵聽程式,表示它不再於滑鼠移動時進行呼叫,而且物件會停止跟隨滑鼠游標。接下來這段程式碼會示範這項技巧。

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

除了讓顯示物件跟著滑鼠游標移動外,最好是將拖曳的物件移至畫面前面,讓它浮動出現在所有其它物件之上。例如,假設您有兩個物件,一個是圓形,另一個是方形,兩者都可以使用滑鼠移動它們。若在顯示清單上,圓形正好在正方形之下,而且您按一下並拖曳圓形,要讓游標在正方形之上,圓形就會顯得好像是滑到正方形之後,打斷了拖放的感覺。其實您可以做成按一下圓形時,它會移到顯示清單頂端,然後永遠顯示在任何其它內容之上。

以下的程式碼 (從前面的範例中改編) 允許使用滑鼠移動兩個顯示物件,也就是圓形和矩形。只要滑鼠按鍵在其中一個物件之上按一下,該項目就會移到「舞台」的顯示清單頂端,讓拖曳的項目永遠都顯示在最上面 (新的程式碼或與以前列出的程式碼不同時會以粗體顯示)。

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

若要更進一步擴充這種特效,例如在遊戲中移動數堆代幣或卡片,您可以在「撿起」時,將拖曳的物件加入「舞台」的顯示清單中,然後在放開滑鼠時,將它加入另一份顯示清單 (例如位於丟下位置的代幣或卡片堆) 中。

最後,若要加強特效,您可以在按一下 (開始拖曳) 時,將「投影」濾鏡套用至顯示物件,然後在放開物件時,移除投影。如需有關在 ActionScript 中使用投影濾鏡及其它顯示物件濾鏡的詳細資訊,請參閱 以濾鏡處理顯示物件