Flash 8.0控制鼠標制作 蜻蜓點水

邢素萍

0 引言

首先建立一個水滴效果的影片剪輯，然后通過控制兩個翅膀扇動，制作一只飛舞的蜻蜓。制作完基本影片剪輯后，通過編寫腳本，使鼠標的點擊觸發事件，同時控制水滴和蜻蜓的飛舞，其中水滴的產生是由鼠標的點擊觸發，蜻蜓的飛舞由鼠標的移動觸發，如圖1所示：

圖1 鼠標移動觸發效果

1 制作過程與步驟

1.1 水紋擴散的制作

步驟1 啟動Flash 8.0后，單擊【文件】/【新建】，新建一個Flash文件。單擊【修改】/【文檔】，在影片屬性對話框中，設置場景的大小為400px×400px，背景色淡藍色，其他為默認值。

步驟2 單擊【插入】/【新建元件】，在彈出的【創建新元件】對話框中的【名稱】欄中填寫“water”，選擇類型為“圖形”。

圖2 混色器調配顏色

步驟4 在界面中心拖出一個圓來，如圖3所示：

圖3 制作圓形水滴

圖4 制作壓扁的水滴

步驟 5 顏色調配好之后，界面中的橢圓就已經被這種漸進色填充了。退出“water”的編輯界面，回到主場景中，單擊【窗口】/【設計面板】/【庫】命令，打開元件庫，庫中已經有了做好的橢圓，將它從元件庫中拖放到場景中來。

步驟 6 在場景中調整橢圓的大小，使它的寬度基本與場景的寬度一致，如圖5所示。

圖5 直接繪制的填充橢圓（前者）效果不好

這一步的目的是為了確定將來水紋向外擴散的范圍。

在這里調整橢圓大小，一定要確保長寬是同比例擴大，采取的方法有兩種：

方法2:使用【變形】面板，如圖6所示：

圖6 調整橢圓的大小與場景寬一致

在［約束］復選框前面的兩個輸入文本框中，填寫需要放大的比例，也可以把橢圓變大，如果兩個文本框中放大的比例一樣，就保證了橢圓的不變形。

步驟7 鼠標單擊選中橢圓，然后單擊【插入】/【轉換為元件】命令，在彈出的【轉換為元件】對話框中，將它轉化為一個電影片斷元件，并給它命名為“waterMC”，類型選擇為“影片剪輯”。

步驟8 單擊【確定】后進入“waterMC”的編輯界面。先在“圖層1”的第30幀插入一個關鍵幀。單擊選中第30幀的橢圓，不改變它的位置和大小，只在【屬性】對話框中選擇【顏色】一項中的Alpha項，在后面的數值框中，設置Alpha值為10%，如圖7所示：

圖7 【變形】面板

步驟9 回到第1幀，在時間軸上用鼠標拖動將第1幀關鍵幀移動到第 2幀上，這時第 1幀成為空白幀。在第 2幀選中橢圓，將它縮小到界面的中心位置附近，如圖8、圖9所示：

圖8 改變對象的Alpha值

圖9 縮小的水滴

并在【屬性】對話框設置這幀的圖形Alpha值為80%。上述步驟，事實上就是把第1幀變成空白關鍵幀，也可以直接在第2幀上插入關鍵幀，然后把第1幀變成空白關鍵幀。

步驟10 在第2～29幀中的任一幀上單擊鼠標右鍵，選擇【創建補間動畫】，創建第2幀到第29幀的過渡動畫。

步驟12 在這層的第35幀插入關鍵幀，放大橢圓，與上層最后一幀的橢圓大小類似。在【屬性】對話框中設置這幀的圖形Alpha值為0%。

步驟13 同樣要在這層創建新的過渡動畫，不過是從第5幀到第35幀。這樣做的目的是，在動畫播放時，上下兩層的過渡動畫就有了一個前后的時間差，給人以水紋逐層向外擴散的視覺效果。

這時可以利用“洋蔥皮”工具，觀察前后幀之間的圖形變化情況。單擊工具后觀察到的外觀輪廓情形，如圖10所示：

圖10 用“洋蔥皮”觀看到的外觀輪廓圖

步驟14 為了繼續增加水紋的擴散效果，類似上面的步驟繼續做兩個過渡動畫，每一個動畫都比前一個落后4到5幀。注意要把每個過渡動畫的最后一幀的圖形放大，并且讓它的Alpha值為0%。

步驟15 最后，為了使水紋產生一次就停止，要為這個“MC”填寫一個幀腳本。鼠標在時間軸上的最后1幀（此處為45幀）處右擊，在快捷菜單中，選擇【動作】，在【動作】面板中，添加腳本語言：

stop(); //控制動畫完成一次就停止。

“waterMC”的時間軸，如圖11所示：

圖11 最后的waterMC的時間軸

1.2 “蜻蜓”飛舞動畫的制作

步驟1 回到主場景中，雙擊“圖層1”，改名為“蜻蜓”。單擊【文件】/【導入】/【導入到舞臺】命令，然后從外部導入一張含有蜻蜓的圖片，如圖12所示。

圖12 導入的蜻蜓圖片

步驟 2 將圖片中不必要的圖案及背景除去后，剩下需要的“蜻蜓”圖案，如圖13所示：

圖13 蜻蜓圖象

鼠標單擊選中“蜻蜓”的圖案，這時它應該呈現出白色的網格狀，然后按Ctrl＋G快捷鍵，將它成組，這樣它就不會被誤操作而改變。然后用鼠標拖曳改變“蜻蜓”圖案的大小，使它與場景大小相配。

步驟 3 鼠標再次單擊選中已經成組的“蜻蜓”圖案，然后單擊【插入】/【轉換為元件】命令，在彈出的【轉換為元件】的對話框中，將它轉化為一個電影片斷元件，并給它命名為“蜻蜓MC”。

步驟4 單擊“確定”后，場景中的這個“蜻蜓”已經是一個“MC”元件的實例了。鼠標直接雙擊“蜻蜓”圖案，進入“蜻蜓MC”元件的編輯界面。

步驟5 新建一層“圖層2”，單擊選中“蜻蜓”圖案，復制一份圖案到新層中去。然后選中復制出來的圖案，單擊Ctrl＋B鍵將其打散，這時圖案上又呈現出白色的網格。

步驟6 單擊橡皮擦工具，選擇合適的橡皮大小，擦去“蜻蜓”的“身體”部分，留下兩個翅膀的圖案，如圖14所示。

圖14 擦除蜻蜓后剩下的翅膀

步驟7 分別選擇兩個翅膀，把它們分別轉換為MC的元件“翅膀1”和“翅膀2”，如圖15所示：

圖15 翅膀轉換為元件

在將翅膀圖案轉化為“MC”元件時，在彈出的【轉換為元件】對話框中，應該注意將元件中心位置設為左下角，如圖16所示：

圖16 設置【注冊】中心為左下角

步驟8 回到“翅膀1”的編輯界面，首先移動這個翅膀的位置使它與“蜻蜓”圖案中相應的翅膀位置重合，如圖17所示：

圖17 調整“翅膀1”的位置與身體吻合

然后在時間軸上的第3幀和第5幀按F6鍵，分別插入一個關鍵幀，這樣翅膀的圖案也自動復制過來了。

步驟9 下面只對第3幀的圖形進行處理。在第3幀單擊選中“翅膀”，然后單擊【窗口】/【設計面板】/【變形】命令，或者使用快捷鍵 Ctrl＋T，打開【變形】面板。在面板中對這幀的翅膀圖形進行處理：橫向和縱向均縮小為原有尺寸的 80%，用鼠標選擇“傾斜”選項，然后在后面的兩個輸入框中分別輸入 10和-10，然后按回車鍵?！咀冃巍棵姘宓脑O置，如圖18所示：

圖18 設置變形面板

只修改第3幀，這樣在運動過程中，翅膀從第1幀到第3幀扇動，然后在第3幀到第5幀再運動回來，形成一個循環。

步驟10 在時間軸上創建第1幀到第3幀，以及第3幀到第5幀的類型為“補間動畫”運動的過渡動畫。

步驟11 回到“蜻蜓MC”的編輯當中，在“圖層2”中，從【窗口】/【設計面板】/【庫】中選擇“翅膀1MC”，拖入到場景中，并且放到蜻蜓軀體上原先的位置上。

步驟13 這樣“蜻蜓MC”就做好了。回到主場景中，從【窗口】/【設計面板】/【庫】中選擇“蜻蜓 MC”拖到場景中，按Ctrl＋Enter鍵可以觀看測試效果。

1.3 動畫的控制播放和背景的添加

步驟1 退出元件編輯界面后，回到主場景，新建一層“圖層 2”。這個動畫的主場景只有一幀，在這幀中，從元件庫中將電影片斷元件“waterMC”拖放到場景中。

步驟 2 這時在場景中的只是一個白色的點，表示這個“MC”的第1幀為空白幀。選中它，在【屬性】面板中，為這個電影片斷元件命名實例名為“water”。

步驟3 在場景中的小圓點上左擊鼠標，然后在菜單中，選擇【窗口】/【開發面板】/【動作】，打開【動作】面板，在面板中按下按鈕，選擇【全局函數】/【影片剪輯控制】中的【onClipEvent】選項，然后在彈出的【事件】選項中，選【mouseDown】一項，如圖19所示：

圖19 添加waterMC的腳本

步驟 4 繼續為這個空白電影片斷元件添加腳本，最后得到的腳本代碼如下：

步驟5 在圖19所示界面中，為“water”編寫的腳本中再做一些修改，得到如下所示的腳本代碼，就可以實現增強畫面效果的目的：

步驟6 單擊選中圖層“蜻蜓”的“蜻蜓MC”元件實例，在【動作】面板中按下按鈕，選擇【全局函數】/【影片剪輯控制】中的【onClipEvent】選項。在彈出的【事件】選項中，選【enterFrame】選項，然后繼續為這個“MC”添加腳本，腳本代碼如下所示：

步驟7 最后，回到主場景再新建一層“圖層3”，改名為“背景”。將這層放在最下面，鎖定其他層。然后導入一張含有水草的圖片，如圖20所示：

圖20 導入的“水草”圖片

步驟8 將圖片中所需要的圖案分離出來，如圖20所示。然后布置在場景中，得到的場景，如圖21所示：

圖21 我們需要的圖案

步驟9 為了使整個畫面顏色協調，把小草的透明度（即Alpha值）設定為50%，蜻蜓的透明度設定為 80%，如圖22、圖23所示：

圖22 用一些小草布置的背景

圖23 設置對象的Alpha值

步驟10 至此，整個動畫制作完成。直接按Ctrl＋Enter鍵預覽一下效果，可看到一只扇動著翅膀的“蜻蜓”隨著鼠標在畫面中自由地飛翔，單擊左鍵一下，在畫面中就出現了一圈圈的波紋，仿佛“蜻蜓”在水面上掠過一樣。

知識詳解

這里對前面用到的幾條腳本語句說明一下。

對于代碼：

onClipEvent (mouseDown)是面向一個“MC”的響應，表示當鼠標左鍵按下時，將引起響應。

_root._xmouse;和_root._ymouse;表示了鼠標在主坐標系中的位置。

duplicateMovieClip（idname，newname，depth）表示復制出一個新的電影片斷實例。例如，本例中的duplicateMovieClip(this,"water1",1)就表示復制當前這個實例產生一個新的實例“water1”。

綜合起來，這段腳本的意思就是：當鼠標左鍵按下時，把獲取到的鼠標坐標賦給“waterMC”的這個實例“water”，也就是制作的水紋的中心點的位置，于是就在鼠標點擊的附近產生了一層層的波紋。并且由于“MC”本身的最后一幀是要靜止下來的，這樣鼠標點一次就出現一個波紋。

對于代碼：

這個腳本實現的功能是，當動畫播放時，我們將看不到鼠標，同時當前MC跟著鼠標的移動而拖動。

2 小結

_x和_y表示當前這個“MC”實例在主坐標系中的坐標。

本文利用了 Flash的一些“動作”語言知識，在制作“波紋”和“蜻蜓”自身飛舞動畫的過程中，也用到了一些基本制作技能和知識。所用的主要知識點和需要注意的地方有色彩效果的制作；利用多層和播放的不同步，產生水紋的效果；MovieClip對象中的方法，本例中是響應一個鼠標事件；獲取鼠標的坐標；設置對象的位置；duplicateMovieClip 的應用；鼠標拖動的使用。通過本小制作,可以了解“動作”腳本編寫上的一些應用，關鍵是通過例子來理解整個動畫的構思和具體語句的控制作用。同時也看到，一些基本的影片剪輯的制作，往往是完成一個復雜動畫的重要基礎，讀者可以嘗試制作彩帶跟隨鼠標的動畫。

[1]《Flash 8 中文版實用教程》[M]李敏 北京機械工業出版社2009年2月

[2]《Flash 8動畫與交互動畫制作教程》[M]潘明寒 北京航空航天大學出版社 2008年1月

[3]《Flash8.0中文版動畫制作》[M]林華 姜靈敏 華南理工大學出版社 2007年8月