您可以讓使用者利用 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 中使用投影濾鏡及其它顯示物件濾鏡的詳細資訊,請參閱
以濾鏡處理顯示物件
。