摩擦力(漸進移動)

摩擦力是指物體在運動時遇到阻力而漸漸地變慢，這樣的效果也常常運用在Flash中。如果是使用補間動畫裡的"減速"也可達到，但有些呆板!!而使用程式碼來製作摩擦力效果的話，則可以讓整個移動方式變得很靈活，甚至可以即時更改要移動到的目標位置，且相當的自然，以下就是為各位所做的示範:
1.請自行開啟一個Flash文件(AS 3.0)。
2.準備一個影片片段元件並輸入實體名稱ball。
3.在影格上建立一個as圖層(建議各位將您的設計元素與程式碼分開較好管理)，如下圖:

4.指定as圖層的第一格並於動作面板中鍵入以下程式碼:
this.addEventListener(Event.ENTER_FRAME,easing);
function easing(e:Event):void
{
    ball.x = mouseX;
    ball.y = mouseY;
}
5.測試影片時會發現到~整個元件會跟著滑鼠移動!!(已經完成一半囉!)
 
◎以IE預覽會不正常顯示，請使用Firefox、Chrome...
接下來~筆者再換一種寫法，就是讓ball的X座標一直去累加ball.x與mouseX之間的差距，它們之間的距離就是mouseX減掉ball.x；ball的Y座標寫法也是與X座標寫法相同。
筆者宣告了一個變數為distanceX，並且將mouseX-ball.x的值指定給distanceX，接著再將ball.x累加distanceX；distanceY的寫法與distanceX的寫法相同，如以下程式所示:
this.addEventListener(Event.ENTER_FRAME,easing);
function easing(e:Event):void
{
    var distanceX = mouseX - ball.x;
    var distanceY = mouseY - ball.y;
    ball.x +=  distanceX;
    ball.y +=  distanceY;
}
以上寫法與第一種寫法所得到的效果完全相同，但可延伸性卻是更多!!
6.各位想想!筆者將ball.x加一次就加上mosueX了，如果是加上distanceX的10%那會如何呢?筆者將程式放在要執行ENTER_FRAME的函式中，因此它會不斷的去執行，導致distanceX會不停的被計算出來，而筆者又讓ball.x一次僅移動之間差距的10%，這樣就形成了摩擦力效果；Y座標的做法也相同，筆者就不再詳述了，如以下程式所示:
this.addEventListener(Event.ENTER_FRAME,easing);
function easing(e:Event):void
{
    var distanceX = mouseX - ball.x;
    var distanceY = mouseY - ball.y;
    ball.x +=  distanceX * .1;
    ball.y +=  distanceY * .1;
}

◎以IE預覽會不正常顯示，請使用Firefox、Chrome...
7.在此筆者整理出了一段公式。移動量 = ( 目標位置 - 現在位置 ) * 漸進小數值
現在位置 += 移動量
亦可再簡化成一行:
現在位置 += ( 目標位置 - 現在位置 ) * 漸進小數值
這段公式盡量不要背，各位要去理解它為什麼要這樣寫?進而慢慢培養出整理、理解、邏輯與排列的能力。不然，上面的那些內容是筆者寫身體健康的嗎?
各位可以再看看簡化後的寫法:
this.addEventListener(Event.ENTER_FRAME,easing);
function easing(e:Event):void
{
    ball.x += (mouseX - ball.x)*.1;
    ball.y += (mouseY - ball.y)*.1;
}
這樣是不是心曠神怡許多了!!
8.亦可在移動時在加上旋轉效果~各位可以自己想想!!

◎以IE預覽會不正常顯示，請使用Firefox、Chrome...