AS3編程教學：元件拖動高級教程

2024-02-06

1678

元件拖動是Flash交互設計領域一個非常常用的交互手段和效果，利用flash自帶的startDrag和stopDrag就能實現基本的拖動運動，本節對這個方法進行一個全面的講述，旨在讓大家徹底掌握“拖動

元件拖動是Flash交互設計領域一個非常常用的交互手段和效果，利用flash自帶的startDrag和stopDrag就能實現基本的拖動運動，本節對這個方法進行一個全面的講述，旨在讓大家徹底掌握“拖動”這個技術。

新建空白文檔

首先我們打開Flash軟件，利用歡迎界面來新建一個空白文檔。

導入笑臉圖

我們找了一張笑臉圖，導入到舞臺中。為了方便操作，可以按下Q鍵來進行縮放。

轉化成影片剪輯

將笑臉圖轉化成影片剪輯，并給它一個實例名為mcFace，因為程序控制時需要這個名字。

添加代碼

在時間軸新建一層AS圖層，在第一幀加入下列代碼，便可以實現這張笑臉圖的自由拖動：

(_DOWN, startDragFace);
(_UP, stopDragFace);
function startDragFace(e:MouseEvent):void {
    ();
}
function stopDragFace(e:MouseEvent):void {
    ();
}

自由拖動元件

我們可以在笑臉的任意位置單擊鼠標并將其拖動到舞臺的任何位置，沒有任何限制，這是最基本的拖動效果。

設置第一個參數

通過設置startDrag函數的第一個參數為true，可以實現拖動時將鼠標鎖定在注冊點處。

(_DOWN, startDragFace);
(_UP, stopDragFace);
function startDragFace(e:MouseEvent):void {
    (true);
}
function stopDragFace(e:MouseEvent):void {
    ();
}

設置限制區域

繼續修改startDrag函數，給它加入一個限制區域。通過創建一個Rectangle對象來定義一個矩形區域，實現拖動的限制。

(_DOWN, startDragFace);
(_UP, stopDragFace);
function startDragFace(e:MouseEvent):void {
    (true, new Rectangle(50, 50, 300, 300));
}
function stopDragFace(e:MouseEvent):void {
    ();
}

限制拖動范圍

經過以上修改，我們發現笑臉已經不能自由拖動了，在左邊和右邊有個地方就過不去了。這就提供了一種很好的邊界判斷方法，而且不用我們自己去判斷。這種方法在滾動條組件的滑動條拖動中也常被使用。

以上就是關于AS3編程中元件拖動的高級教程，希望能夠幫助大家更好地掌握這個技術。