文／江冠儀 (教學發展中心多媒體設計師)

　　網頁動畫常是輔助教學的好工具。這次要為各位老師及助教示範如何在Adobe Flash CS3 製作一個簡易的教學輔助動畫。希望老師透過這個範例，可以學習到製作動畫的簡單技巧。

　　一般我們所說的動畫，是利用視覺暫留的原理，由連續影格畫面的播放產生的結果。在 Flash 當中，有三種不同的動畫製作方式，移動補間動畫、形狀補間動畫及逐格動畫。

Flash CS3 的操作介面如下：

A：主功能選單
B：工具箱
C：時間軸／圖層
D：舞台
E：浮動面板
F：屬性面板

請先打開Adobe Flash CS3。選擇開啟新檔(ActionScript 3.0)

動畫的尺寸大小請直接用屬性面板的預設值500 x 400 pixels 即可。

　　在時間軸進行影格設定之前，先說明 Flash 中的三種影格概念，影格大致可分為「關鍵影格」、「空白關鍵影格」、「影格」。補間動畫製作的前提，一定要有兩個關鍵影格才能製作。

　　「空白關鍵影格」的作用在於該時間點沒有具像的物件，但是可在上面加入聲音及 Action Script 程式碼，而加入程式的影格，影格上會多 a 符號。而「影格」則是關鍵影格時間的延伸，不管是「關鍵影格」或是「空白關鍵影格」，都可以透過增加影格長度而加長播放時間。下圖為時間軸上移動補間動畫影格的表現方式。

A：影格的結束點。關鍵影格後的影格超過一格，就會在最後一格處出現這個方框。
B：移動補間動畫，當兩個關鍵影格設定移動補間動畫時，可以進行位移、縮放、旋轉、翻轉、透明度、色調、明度的變化。
C：影格。即關鍵影格（空白關鍵影格或關鍵影格）時間的延伸。

　　接下來，要進入實際範例解說，本範例以化學實驗的原理為例，用 Flash 動畫來表現酒精燈被點燃的現象。本例的重點在於：酒精藉由棉線燈蕊由酒精燈底部到達棉線燈蕊頂端，當點火時就會產生燃燒現象。

Step1：

　　在製作之前請先思考本動畫中有哪些部份是「會動作」的跟「不會動作」的，將需要繪製的圖列出如下。
(1) 酒精燈－分為酒精、棉線燈蕊、玻璃瓶。
(2) 點火的火柴棒－分為火跟火柴棒。

Step2：

　　先在舞台區繪製酒精燈的部份，分為三個圖層，依上至下圖層分別繪製玻璃瓶、酒精、棉線。（如上圖）畫完之後請將「酒精」跟「棉線」各自轉成圖像元件，並將三者重疊排列好。此時，我們需要先調整酒精圖像元件的透明度，調整的方式請先打開「屬性列」，在透明度的下拉選單中，選擇 Alpha，將數值改為 25%。

　　請再新增一個圖層，圖層名稱輸入「火柴」，並且在該圖層繪製火柴棒及火兩個物件，請將兩者選起來之後，按右鍵－轉成圖像元件，取名「火柴」。

　　此時四個圖層的上下關係如下圖。

Step3：

　　請在舞台上雙按兩下圖像元件「火柴」，此時會進入火柴的編輯區，請將火跟火柴的圖像分為兩個圖層放置，請務必這樣做，把會動跟不會動的物件拆開成不同的圖層，將會有利於後續的編輯。此時，我們希望可以讓火會放大縮小地動態表現，請利用選取工具將火的部份選取起來，按右鍵出現下拉選單時，請將火轉成元件，並選擇「圖像元件」，取名為「火」。當火被轉成元件之後，您就可以再雙按滑鼠左鍵，進入火的內部編輯區。
請在時間軸的第二個影格處，新增一個關鍵影格。（如下圖）

　　選取第二個關鍵影格處，請利用工具箱的「選取工具」沿著火的曲線邊緣進行調整，待會在播放動畫時，火的兩種變化就會反覆循環播放。

Step4：

　　酒精的圖層，將步驟 2 畫好的「酒精」元件再次轉成取名叫「酒精下降」的影片片段。（這個方塊待會在棉線吸收酒精的動畫製作時，也可以重複使用）。在主場景舞台時，先複製玻璃瓶，再到「酒精下降」影片片段的編輯區中，將玻璃瓶貼上並填色，請將玻璃瓶圖層放在上層，取名叫「遮色片」，而酒精圖放在下層，取名叫「酒精」。

Step 5：

　　開始進行動畫製作：瓶中的酒精此時要展現的是逐漸減少的狀態。

　　請在兩個圖層的影格第 15 格處「新增關鍵影格」，並請選取下方的「酒精」圖層，回到第一個影格，按右鍵，選擇「建立補間動畫」。讓舞台中的酒精仍是被選取的狀態，請到第 15 格處的關鍵影格，利用工具箱上的自由變形工具 將酒精的高度往下壓扁。請在「遮色片」圖層名稱右方空白處，按右鍵，選擇「遮罩」，即可將玻璃瓶以外的酒精部份隱藏起來。

Step 6:

　　為了讓酒精下降的動畫停留在最後一格，所以，此時請新增一個圖層，取名「動作」，在第 15 影格請新增一個「空白關鍵影格」。

　　選擇此影格並且將主選單「視窗」＞＞「動作視窗」叫出來，或按快速鍵 F9。

　　請在動作視窗中輸入文字　stop();

　　關閉動作視窗，此時可觀察動作圖層，在該影格上顯示 a，表示該影格已經有寫入 action script 指令。

Step 7 :

　　動畫製作：棉線要呈現的狀態，一開始酒精的位置跟瓶內酒精的水平面相同，慢慢地由下而上將酒精吸滿到棉線燈蕊的頂端。請您先回到主場景，將棉線按右鍵，將圖像元件轉成「棉線吸酒精」的影片片段，此動畫的製作方式跟 Step5 方式大致相同，將棉線元件的編輯區中，將該線條複製到圖層中，並且利用油漆桶填入顏色，請在第 15 格處的關鍵影格，利用自由變形工具 ，將酒精的水平尺寸往上拉高。再到「棉線」圖層，按右鍵，選擇「遮罩」，即可將棉線外的酒精部份隱藏起來。此時要注意的不同處在於它比「酒精下降」影片片段多新增一個圖層，取名「棉線邊框」，做法是將元件庫中將「棉線」圖像元件拉進舞台。此作法的用意為：先前棉線圖層做成遮色片之後，它的實際外框被隱藏住，所以需要新增一個外框。

Step 8：

　　回到主場景中，請先將全部圖層的第30格處新增影格，在取名叫「火柴」的圖層上，第30格新增關鍵影格，然後再第１格處按右鍵，選擇「建立補間動畫」，請在時間軸的第15個影格處按右鍵，選擇新增關鍵影格，將火柴圖像移到棉線頂端上面。

Step 9：

　　請新增一個圖層，取名「火」，在第 15 格新增一個空白關鍵影格，將元件庫把圖像元件「火」拉到舞台中，其對齊原來舞台上火柴圖層的火。

Step 10：

　　為了讓畫面停留在第 30 影格處，請新增一個圖層，取名「動作」，此時請在第30 格處新增一個空白關鍵影格，並且把動作視窗叫出來，寫入控制動畫停止的action script指令。(寫法請參考Step6)

Step11：

　　請到主功能表「檔案」＞＞「儲存」，可將編輯檔存放在電腦硬碟中。若要測試動畫，請到主功能表「控制」＞＞「測試動畫」，或按快速鍵Ctrl + Enter。

動畫完成囉～

當然，您可以繼續將動畫做更細部更精緻的調整，只要進入各個元件的編輯區當中，就可以在時間軸上針對不同圖層的影格進行設定。希望此次教學的內容可以幫助老師及助教，製作教學動畫時做為一個實用的參考。

因為篇幅關係，本文僅概略說明，若對於講解的軟體功能不清楚，可參考 Adobe的官方線上說明，網址為http://livedocs.adobe.com/flash/9.0_tw/UsingFlash/。本中心數位媒體組舉辦之「數位教學工作坊」，每學期亦提供教師及教學助理相關軟體的操作課程，歡迎留意開課訊息前往報名參加。