- 中國WEB開發者網絡 (http://www.webasp.net)
-- 技術教程 (http://www.webasp.net/article/)
--- Flash實例教程——魚戲蓮葉間 4 (http://www.webasp.net/article/22/21367.htm)
-- 發佈日期： 2005-04-30
下面只需添加腳本，魚就可以動起來了。
（1）回到主場景，在動作面板中為第一幀加入以下Actions，對「魚」進行初始化。
parts = 18;
v0 = 12;
v1 = 1.5;
v2 = 3;
var x = new Array();
var y = new Array();
for (i=1; i
if (i == 1) {
attachMovie("head", "fish"+i, parts+1-i);
} else if ((i == 3) or (i == 13)) {
attachMovie("fin", "fish"+i, parts+1-i);
} else {
attachMovie("body", "fish"+i, parts+1-i);
}
with (_root["fish"+i]) {
_xscale = 50-v2*(i-1);
_yscale = 60-v2*(i-1);
_alpha = 100-(100/parts)*i;
}
}
其中，parts用來設置魚的分段數，這裡將魚分成18段。
v0用來控制魚頭與鼠標位置的接近速度，在下一幀的腳本中用來作魚頭與鼠標位置之間距離的除數，以此來控制魚頭在下一時刻需要運動到的位置。
v1用來控制魚身各段之間的相對運動速度，在下一幀的腳本中用來作魚身每兩段之間距離的除數，以此來控制每一段在下一時刻需要運動到的位置。
v2用來控制魚身各段的大小遞減速度。該段腳本下面的with語句中的_xscale是實例_root["fish"+i]的橫向寬度，_yscale就是縱向寬度。它們在50和60像素的基礎上以v2*(i-1)的速度遞減。_alpha是影片剪輯實例的透明度屬性，在此也將其設為遞減，以使魚更具真實感。
上段腳本用var x = new Array();和var y = new Array();定義了兩個數組，它們將在下一幀控制魚位置的腳本中發揮作用。
attachMovie方法將head元件作為第一段，放在第18層級（level），其它部分按18遞減。第3和13段放置fin元件，其他段放置body元件。
（2）在時間軸上的第二幀上單擊鼠標右鍵，選擇「插入空白關鍵幀」命令，插入一個空白關鍵幀。打開動作面板，加入以下Actions，以控制魚的動作。
x[0] += (_xmouse-x[0])/v0;
y[0] += (_ymouse-y[0])/v0;
for (i=1; i
x[i] = x[i]+(x[i-1]-x[i])/v1;
y[i] = y[i]+(y[i-1]-y[i])/v1;
}
for (i=1; i
with (_root["fish"+i]) {
_x = (x[i-1]+x[i])/2;
_y = (y[i-1]+y[i])/2;
_rotation = 90+ (180/Math.PI)*Math.atan2((y[i]-y[i-1]), (x[i]-x[i-1]));
}
}
前兩行腳本將數組x和y的第一個元素的值設置為鼠標位置與head位置之間的一個數，使魚並不是一步到達鼠標所在的位置，而是分幾步逐漸接近的。
數組x和y的其他元素的值按當前元素與前一元素的位置差計算出來，同樣實現一個分步移動的效果。
for循環語句為將數組中的值分配給魚的每一段。其中為_rotation賦值的一行代碼相當關鍵。Math.atan2((y[i]-y[i-1]), (x[i]-x[i-1]))返回的是(y[i]-y[i-1])相對於(x[i]-x[i-1])的反正切值的弧度，為它乘以一個(180/Math.PI)可以將其轉換為度數。因為庫中的影片剪輯是豎直向下的，為其加上90可以使其符合初始狀態時的水平方向。
（3）執行第（2）步後並不能使魚跟著鼠標動起來，因為隨著動畫的循環放映將不斷為魚的各段賦初始值。現在我們需要在第3幀的位置插入一個關鍵幀，並在動作面板中為其加入以下一行Actions：
gotoAndPlay(2);
在動畫播放到第3幀的時候，將自動跳轉到第2幀，構成魚身的各影片剪輯實例的大小和方向的值將被更新。以此不斷循環，一條靈活地跟隨鼠標游動的魚兒就誕生了。效果如圖10所示。
圖 10 跟隨鼠標游動的魚
4．添加蓮葉
本例既然叫做「魚戲蓮葉間」，沒有蓮葉是不行的。下面就為其加入蓮葉。
（1）按Ctrl+F8新建一個影片剪輯元件，並命名為「蓮葉」。
（2）在蓮葉元件的編輯場景中選擇「文件」/「導入」命令，將蓮葉.jpg圖片導入到舞台中。
（3）新建一層，將蓮葉圖片複製到與圖層1相同的位置。
（4）選中圖層2中的蓮葉圖片，選擇「修改」/「轉換位圖為矢量圖」命令，在出現的「轉換位圖為矢量圖」對話框中將「顏色閾值」設置為50，將「最小區域」設置為5，如圖11所示。單擊「確定」按鈕將位圖轉換為矢量圖。
圖 11 「轉換位圖為矢量圖」對話框
（5）使用箭頭工具將圖中蓮葉及荷花部分以外的水面部分刪除。細微部分可以放大後使用套索工具選取並刪除。
（6）在圖層2上單擊鼠標右鍵，選擇彈出快捷菜單中的「遮罩層」命令，將圖層2變為遮罩層。
（7）回到主場景，新建一層，從庫面板中將「蓮葉」影片剪輯拖放到圖層2中，並調整其位置和大小到合適位置。
（8）在屬性面板中將背景色改為黑色。現在測試影片，發現魚在蓮葉上層游來游去。這可不是我們所要的效果。
（9）選中場景中的「蓮葉」影片剪輯，在屬性面板中將其實例命名為leaf，如圖12所示。
圖 12 為「蓮葉」影片剪輯實例命名
（10）選中圖層2的第1幀，在其動作面板中添加如下Actions：
leaf.duplicateMovieClip("leaf1", 30);
（11）按Ctrl+Enter鍵測試影片，魚兒乖乖地鑽到了蓮葉底下，如圖13所示。
圖 13 成功地將蓮葉置於魚的上層
5．換一個漂亮的鼠標指針
一幅漂亮的場景中出現一個白色的鼠標指針是不是很不協調？現在就來換掉這個扎眼的指針。
替換鼠標指針使用到了一個小小的技巧，就是在隱藏指針的時候對另一個影片剪輯實例進行拖曳，這樣看起來就好像是換了一個鼠標指針。鼠標拖曳用到的Actions是startDrag。
（1）新建一個名為「指針」的影片剪輯元件並進行編輯。
（2）繪製一個小球，並將其寬和高都設為8，對齊舞台的中心。
（3）新建一個圖層，將「指針」元件拖放到場景中任意位置。
（4）在屬性面板中為「指針」元件指定一個實例名稱，這裡將其命名為mymouse。
（5）確定該元件為選中狀態，在動作面板中為影片剪輯實例mymouse添加如下Actions:
onClipEvent (load) {
startDrag(mymouse, true);
mouse.hide();
}
（6）按組合鍵Ctrl+Enter測試影片，效果如圖14所示。
圖 14 替換了鼠標指針後的效果
本例小結
本例的主要任務是設計並製作「魚戲蓮葉間」的鼠標跟隨動畫。下面，分別從設計和製作兩個方面對本章的任務進行小結。
「魚戲蓮葉間」在創意設計上用的是傳統的鼠標跟隨手法，它採用魚作為跟隨鼠標的對象，所以設計的重心放在如何讓魚的運動盡量平滑和自然上。動畫中再輔以蓮葉荷花，使得整個動畫別具情趣。
「魚戲蓮葉間」的製作過程是：製作魚身各元件→在《𦭑構思添加Actions讓魚游動起來→製作並添加蓮葉元件→在幀動作面板中添加Actions重新安排蓮葉的層級→製作代替鼠標指針的小球→在影片剪輯面板中添加Actions讓小球代替鼠標指針運動。
本例在製作上力求以循序漸進的方式一步一步完成整個動畫，逐漸對動畫加以完善，這是在製作Flash動畫時經常採用的手法。每完成一步，就有一步的成就感。將複雜的大任務分解成幾個小任務，這樣每個小任務都可以迎刃而解了。
影片剪輯是一種功能強大的元件。本例用到的attachMovie、duplicateMovieClip、startDrag等腳本語句在製作很多特效時都有不可低估的作用。
鼠標跟隨是Flash在交互式動畫方面的一大特色，採用鼠標跟隨方法可以做出許許多多不同凡響的動畫。但要想使自己的作品更具創意，還得在動畫設計和腳本應用上多下功夫。