第三章第三章第三章第三章

第三章 第三章 第三章

第三章 FLASH FLASH FLASH MX2004 FLASH MX2004 MX2004 MX2004 的動畫類型 的動畫類型 的動畫類型 的動畫類型 ((((一 一 一 一 ))))

使用 FLASH 製作動畫的原理，與傳統卡通動畫的製作方式類似，將 連續的動作加以分解，然後就分解後的每一個動作一格一格的繪製。

FLASH 的動畫製作方式可分為五種：(1)逐格動畫(Frame by Frame) (2)移 動漸變(Motion Tweening)動畫 (3)形狀漸變(Shape Tweening)動畫 (4)移動 導向(Motion Guide Tweening)動畫 (5)遮照動畫(Mask Tweening)。本章旨在 說明這五種動畫的製作過程。

3333----1 1 1 逐格動畫 1 逐格動畫 逐格動畫((((F 逐格動畫 F Frame by F rame by rame by F rame by F F Frame) rame) rame) rame)

此類動畫的製作與傳統動畫的製作方式相同，乃將要呈現動畫的部 份加以分解成多個細部動作，然後就每一個分解動作逐一繪製動畫元 件，完成後快速播放，運用人類視覺暫停的現象，而達到動畫的效果。

當分解的動作越細，動畫效果便越佳，當然所費的製作時間就越長、檔 案容量也越大。此種方法通常只適用於製作小的動畫檔案此種方法通常只適用於製作小的動畫檔案此種方法通常只適用於製作小的動畫檔案。 此種方法通常只適用於製作小的動畫檔案

範例 範例 範例

範例：：：匯入外連續點陣圖來：匯入外連續點陣圖來匯入外連續點陣圖來匯入外連續點陣圖來製作旋轉的製作旋轉的製作旋轉的 3D製作旋轉的3D3D3D 立體圖片立體圖片立體圖片。立體圖片。。 。

(1) 點按功能表的【檔案(File)】-【讀入(Import)】，點選點陣圖檔所 儲存的資料夾，顯示如下圖：

圖片，故會顯示下列視窗：

(3) 點按 是是是是(Y)(Y)(Y)(Y) 鈕。

(4) 回到 FLASH 的編輯畫面，可看到 FLASH 會自動將六張圖片分 別置於六個影格內，如下圖所示：

(5) 選取所有影格，然後按下標準工具列的『對齊(Arrange)-- 』 鈕，顯示下列視窗：

連續 6 個影格均為關鍵影格，

且每一影格的內容均不同。

(6) 如上圖，先點按先點按「對齊舞台」鈕，接著分別點按「水平 置中」和「垂直置中」鈕，然後在編輯區按下滑鼠左鍵，即可 將六張圖片重壘在一起(即置於舞台中央位置)。

(7) 點按 FLASH 播放控制列上的播放鈕-- ，或按下鍵盤上的 ENTER

ENTER ENTER

ENTER 鈕，測試動畫效果。

(8) 點選功能表的【控制】-【重複播放】指令，再按下播放鈕－ ， 即可重複播放動畫。

(9) 在圖層名稱上連按左鍵二次，將圖層更名為「旋轉立體鈕」。

(10)點按鍵盤上的

> > > >

< < < <

(11)將影片播放速率改為 6FPS，看看播放效果。

(12)點按功能表的【檔案 (File)】-【另存新檔 (Save As)】，儲存檔 案。

(13)按下 CtrlCtrlCtrlCtrl - EnterEnterEnter ，可將影片輸出成延長名稱為「.swf」Enter 的影片檔。

3333----2222 移動漸變 移動漸變 移動漸變((((Motion Tween 移動漸變 Motion Tween Motion Tweening Motion Tween ing ing))))和移動導向漸變 ing 和移動導向漸變 和移動導向漸變((((M 和移動導向漸變 M M Motion otion otion Guide otion Guide Guide Guide Tween

Tween Tween

Tweening ing ing ing))))動畫 動畫 動畫 動畫

所謂移動漸變(Motion Tweening)指將單一物件(必須是元件 或 2.接著點選水

平置中和垂直 置中兩項。

1.先點按「對齊 舞台」鈕

要設定要設定

要設定要設定 為為為為 移動漸變移動漸變移動漸變移動漸變 動畫效果動畫效果動畫效果動畫效果 的物件必須是的物件必須是的物件必須是的物件必須是 FlashFlashFlashFlash 中的元件中的元件中的元件中的元件 (Symbol)

(Symbol) (Symbol)

(Symbol)或經或經或經或經「「「群組化「群組化群組化群組化」」」的物件」的物件的物件(Group的物件(Group(Group(Groupedededed Object) Object) Object)， Object)，，，不不不可以是打散的物不可以是打散的物可以是打散的物可以是打散的物 件件

件件。。。。使用使用使用 FLASH 的繪圖工具使用 的繪圖工具的繪圖工具，的繪圖工具，，，所繪製的圖像物件所繪製的圖像物件所繪製的圖像物件所繪製的圖像物件 ( 除文字工具所除文字工具所除文字工具所除文字工具所 編輯的文字

編輯的文字 編輯的文字

編輯的文字物件物件物件外物件外外 )外 ，，，，須經群組化後須經群組化後須經群組化後，須經群組化後，，，方可設定移動漸變的動畫效果方可設定移動漸變的動畫效果方可設定移動漸變的動畫效果方可設定移動漸變的動畫效果。。。。 移動漸變動畫必須置於一個獨立的圖層中，且同一圖層不可再 有其它動畫。Motion Tweening 動畫可產生的動畫效果、作用對象和 件用條件如下表所列：

Motion Tweening Motion Tweening Motion Tweening Motion Tweening

可產生的動畫效果

1. 依直線或指定路徑(Motion Guide)移動 2. 移動的速度變化(由快漸慢或反之) 3. 縮放變化

4. 旋轉方向

5. 色彩漸變效果(Color Effect)

適用的物件對象 Symbol(元件)、群組物件、文字物件

設定作用的條件

1. Motion 動畫的頭尾影格中只能有一個 Symbol 或是群組物件、文字物件；換 言之，任一動畫須獨佔一個圖層。

2. Motion 動畫只能作用在單一物件上。

3. Motion 動畫的頭尾影格不可再有其它 圖形物件。

範例一範例一

範例一範例一：：：直線的：直線的直線的直線的移動漸變移動漸變移動漸變 移動漸變

(1) 開啟新檔。

(2) 選取圖層 1 影格 1(Layer1 Frame 1)。

(3) 以「圓形工具(Oval Tool)」在舞台左側繪製一個無外框線、紅色 漸層填滿的正圓形。

(4) 在影格 20 按 F6F6F6F6 鍵，產生一關鍵影格。(複製影格 1 的圓形 圖像並設定影片長度)

(5) 將影格 20 的圓拖曳到舞台右側。(物件於不同時間置於不同位置)

(6) 游標指向影格 1，按下滑鼠右鍵，在顯示的快取功能表中選取

「建立移動補間動畫 (Create Motion Tween)」，則在時間軸上兩 關鍵影格之間會顯示虛線，此現象代表無效的動畫，此乃因「圖 像物件」(或打散的物件)不能設定移動漸變，如下圖所示：

影格的編輯作業：

1、 影格的類型：

(1) 普通影格：不能置放動畫元件，用來設定影片或動畫的長度。

(2) 關鍵影格：影格中己置放動畫元件。

(3) 空白關鍵影格：影格中尚無動畫元件，但可供未來置放動畫元件。

(4) 此外，尚有漸變動畫影格、音效影格、指令影格(Action Frame)….等。

2、 新增普通影格： F5 3、 新增空白關鍵影格： F7 4、 新增關鍵影格： F6 5、 在影格中置入物件。

6、 影格的選取、移動、刪除及關鍵影格的清除 7、圖層的新增和命名。

(7) 點按「控制工具列」上的播放鈕-- ，也不會出現移動漸變動 畫效果。

(8) 選取影格 1 的圓形，按下 CtrlCtrlCtrlCtrl - GGG 組合鍵，將圓形轉換成G 群組物件。

(9) 同法，將影格 20 的圓形轉換成群組物件。此時時間軸兩影格間 己呈現實線含箭頭的線絛，表示為有效的移動漸變影格，如下 圖所示：

呈虛線狀，表示該物件不能設定移動漸變。

(10)按下播放鈕-- ，測試動畫結果。

(11)儲存檔案—example3-2-1.fla

範例二範例二

範例二範例二：：：：移動導向動畫移動導向動畫移動導向動畫----
移動導向動畫


flyingflyingflyingflying----birds.flabirds.flabirds.flabirds.fla (1) 開啟一新檔案，背景天空藍。

(2) 將格線顯示出來。(點按主功能表的【檢視(View)】-【格線(Grid)】

-【顯示格線(Show Grid)】命令) (3) 以滑鼠點按影格 1(frame 1)。

(4) 點按功能表的【【【【視窗】】】-【其他面板】-【內建元件庫】指令，由】 選單中選取『圖形』項目。

(5) 從顯示的元件庫面板中選取「bird」項目，如下圖所示：

呈實線狀，表示此為有效的移動漸變影格。

(6) 從預覽窗格中將小鳥圖示拖曳到舞台左側。

(7) 點按功能表指令-『修改(ModifyModifyModifyModify)』-『變形(TransformTransformTransformTransform)』-『縮放 和旋轉 (ScaleScaleScaleScale and Rotateand Rotateand Rotateand Rotate)』(或直接按下 AltAltAlt - CtrlAlt CtrlCtrl - SCtrl SS S 組合鍵)，將圖形縮小為原來的 50%，如下圖所示：

選取此項 預覽窗格 動畫播放鈕

縮小為原大 小的一半

(8) 點選 frame 20，然後按下一 F6F6F6 功能鍵，新增一關鍵影格，系F6 統會自動複製前一個關鍵影格的圖形，且置於舞台上相同位 置。

(9) 將影格 20 的圖形拖曳到舞台左側，如下圖所示：

(10)將影格 20 的圖形適當放大。

(11)點按『新增移動導向鈕(Add Guide Layer)- 』，則在原圖層上 方會新增一個「Guided Layer」(導引線圖層)，如下圖所示：

(12)選取導引線圖層的第一個影格，使用「鉛筆工具」在舞台上繪 製一條曲線(或任意形狀線條)，如下圖所示：

(13)點選「靠齊格線鈕-- 」，開啟貼齊格線功能。

(14)選取圖層 1 的影格 1 (則影格 1 的內容會自動選取)。

(15)拖曳影格 1 的圖形，在拖曳過程中，圖形中間會出現一小圓，

將該小圓對齊移動導線的起點，然後鬆開左鍵。

(16)點選圖層 1 影格 20。

圖形中有一「+」

號，代表圖形物 件的中心點，拖 曳時小圓即出現 在該中心點上。

所繪製的 移動導線

(17)拖曳影格 20 的圖形，使其中心點靠齊移導線的末端，如下圖所 示：

(18)將指標指向圖層 1 (Layer1)的影格 1；然後在下方的屬性面板 (Properties Panel)中執行如下圖所示的設定：

※上圖中，勾選「縮放漸變 (Scale)」(可讓圖形在漸變中自動縮放變 化)、「旋轉 (Rotate)」項目設為「None」，並勾選「貼齊(Snap)」、「沿 路徑方向(Orient to path)」(使圖形沿著導引線移動)。

(19)、由選單中選取移動漸變

(21)、勾選此三個選項

(20)、勾選「縮放」項 目，表示要做縮放漸變

尾兩端並未貼齊導引線，只須重新拖曳物件，確定貼齊導引線 的首尾兩端即可。

(註：在實際播放時，導引線並不會顯示出來)

(23)如測試成功，按下 CtrlCtrlCtrlCtrl - EnterEnterEnterEnter ，輸出電影檔(.swf)，並儲 存檔案(example3-2-2.fla)。

【

【

【【練習練習練習練習】】】】製作顏色漸變效果製作顏色漸變效果製作顏色漸變效果((((必須是元件庫中的元件製作顏色漸變效果 必須是元件庫中的元件必須是元件庫中的元件必須是元件庫中的元件))))

(24)先以滑鼠點按影格 20，接著再點選舞台上的 bird 元件分身，則 屬性面板(Properties Panel)顯示如下圖：

(25)在上圖所示的面板中點按【顏色 (Color)】右側的向下鈕，開啟 選單，如下圖：

(26)要改變取物件的顏色，則從選單中選取「色調 (Tint)」項目，

則出現下列對話視窗：

本選單內各項目可設定 選取物件的亮度、色 彩、透明度(Alpha)及其 它效果。

(27)如下圖所示，設定色彩的 RGB 值及總量值(百分比)，則會將選 取的物件變換為錄色。

(28)按下播放鈕-- ，測試動畫廊結果。

範例三範例三

範例三範例三：：：：移動導向動畫移動導向動畫移動導向動畫----
移動導向動畫


Bowling0.flaBowling0.flaBowling0.flaBowling0.fla (1) 開啟一電影檔-Bowling0.fla。

(2) 點按功能表指令『視窗 (Window)』-『元 件庫 (Library)』，打開已建妥的影片專屬 元件庫，如右圖：

(3) 選取圖層 1 的影格 1。

(4) 從 Symbol 圖庫中，將 track 元件(Symbol) 拖曳到舞台區的中間位置，如下圖：

(5) 選取 舞 台上 的 球道 實體(Instance)， 點 按 功能 表 指令 【 修改 將 track 元件 (Symbol)拖曳 到圖層 1 的影 格 1，並放置在 舞台中央，

「track」。

(7) 點按「插入圖層 (Insert Layer) 鈕-- 」，新增一圖層，並將圖 層名稱改為「bottles」。

(8) 點按「bottles」圖層的影格 1。

(9) 從圖庫中將 bottle 元件(Symbol)拖曳到舞台區空白處(先不須置 放在球道上)。

(10)將球瓶(bottle)縮小為原尺寸的 50%。

(11)按著 CtrlCtrlCtrl 鍵不放，拖曳球瓶，可複製出一支球瓶。 Ctrl

(12)使用上法，再複製出另外 8 支球瓶，然後將球瓶排成倒三角形 狀，如下圖所示：

(13)選取所有球瓶，並將之拖曳到球道末端處，如下圖所示：

(14)點按「插入圖層鈕-- 」，再新增一圖層，並將圖層名稱改為

「bowling」。

(15)點選「bowling」圖層的影格 1，然後從圖庫中，將 bowling 元件 (Symbol)拖曳到舞台上球道的起端，如下圖所示：

(16)在「bottle」圖層的影格 24，按下 F6F6F6F6 功能鍵，插入一關鍵影 格，然後將影格 24 的保齡球稍微往球道末端移動。

(17)點按『增加移動導引線 (Add Motion Guide)鈕- 』，在「bowling」

圖層上方新增一個「導引線圖層」。

(18)選取導引線圖層的影格 1，然後使用「鉛筆工具」在球道上繪 出一條直線或曲線，如下圖所示：

繪製的 導引線

(20)同理，將「bowling」圖層影格 24 的保齡球拖曳靠齊導引線的 末端。

(21)選取所有圖層的第 35 影格，然後按下 F5F5F5F5 功能鍵，此動作 可將所有圖層下的物件顯示出來(即設定影片長度)。

(22)點選「bowling」圖層的影格 1；然後在屬性面板中依下圖所示 進行設定：

(23)設定完成後，按下 EnterEnterEnter 鈕，返回影片編輯畫面。 Enter

(24)點按「控制工具列」的播放鈕，先檢視動畫結果是否如預期，

如果一切均正確，則繼續下一步驟。

(25)在「bottles」圖層的第 25 影格，按一下 F7F7F7F7 功能鍵。此步驟 的目的在插入一空白關影格，將前面的球瓶從舞台上消除，以 便插入另一元件。

(26)點選「bottles」圖層的第 25 影格，從圖庫中拖曳「strike」元件 (Symbol)，並置於球道的末端，適度調大小。如下圖所示：

(27)點按「插入圖層鈕-- 」，在「導引線」圖層上方插入新圖層，

並將圖層名稱改為「strike text」。

(28)在「strike text」圖層的第 26 影格按一下 F6F6F6F6 功能鍵，插入一 空白關鍵影格。

(29)從圖庫中將角色筆 symbol)--「strike text」拖曳到舞台球道末端 的右側，如下圖所示：

在 bottle 圖層 的第 25 影格 插入 strike symbol。

將 strike text 角色 拖曳到「strike text」圖層的第 26 影格。

(31)點按「strike text」圖層的第 28 影格，選取該影格下的文字物件，

然後在屬性面板右側的「顏色：」欄設定「Alpha」值為 0%(即 完全透明)，如下圖所示：

(32)如上圖所述步驟設定，然後按下 EnterEnterEnterEnter 鈕，結果如下圖所示：

(33)重複步驟(22)和(23)，將影格 32 的文字物件亦設定為完全透明 色。(以上步驟的作用在於製作”一閃一閃的「閃爍效果」二次”) (34)儲存檔案--\3-2\bowling1.fla。

(35)按下 EnterEnterEnter 鍵測試動畫結果。 Enter

(36)如滿意所得效果，按下 CtrlCtrlCtrlCtrl - EnterEnterEnterEnter ，輸出影片。

【

【

【

【練習一練習一練習一練習一】】】】在「strike text」圖層上新增一圖層，命名為「voice」，然後 在本圖層的第 25 影格插入一 關鍵影格，並從【視窗】【一 般元件庫】-【聲音】的聲音圖庫插入「Clunk/Squeak Loop」

音效，如下圖所示：

影格 28 的文字物件變 成透明顏色。

【

【

【

【練習二】】】】加上一個按鈕圖層加上一個按鈕圖層加上一個按鈕圖層，加上一個按鈕圖層，，以按鈕控制開始和再玩一次，以按鈕控制開始和再玩一次以按鈕控制開始和再玩一次以按鈕控制開始和再玩一次。。。 。

範例四 範例四 範例四

範例四：：：：移動導向動畫移動導向動畫移動導向動畫----
移動導向動畫

兩個以上圖層共用一條導線
兩個以上圖層共用一條導線兩個以上圖層共用一條導線兩個以上圖層共用一條導線 (1) 開啟檔案—catchmouse_0.fla。

(2) 將圖層 1 更名為--mouse。

(3) 點按功能表的「視窗 (Window)」-「元件庫(Library)」，打開 事前已建妥的影片圖庫。

(4) 於元件庫中將 Symbol(角色)
mouse(小老鼠)拖曳到舞台任 意位置上(影格 1)。

(5) 在「mouse 圖層」的第 36 影格按 F6 ，新增一關鍵影格，

並將該影格下的小老鼠圖示稍微往旁邊移動，使其不與第 一影格的圖形重疊。

(6) 在 mouse 圖層上方，新增一圖層，並命名為—cat。

(7) 從元件庫中將 Symbol
cat(小貓角色)拖曳到舞台任意位置上 (「cat 圖層」的影格 1)。

(8) 在「cat 圖層」的第 36 影格按 F6F6F6 ，新增一關鍵影格，並F6 將該影格下的小貓圖示稍微往旁邊移動，使其不與第一影 格的圖形重疊。(注意：小貓與小老鼠圖形在舞台上不要重

(10) 點選導引線圖層的影格 1，以方形工具在舞台上繪出一空心 矩形，如下圖所示：

(11) 使用「橡皮擦工具」在矩形的右上角擦出一小缺口，如下 圖：

(12) 點選「mouse 圖層」；點按功能表的【修改(Modify)】-【圖 層(Layer)】指令，顯示如下圖的對話框：

在矩形的右上 角擦拭出一小 小的缺口。

(13) 如上圖所示，在「類型 (Type)：」處勾選【已導引(guided)】

項目，然後按下 確定確定確定確定 鈕，則可看見「mouse 圖層」名 稱往右縮進，而與「cat 圖層」相同，表示兩者均受到同一 條導引線的導引線了!

(14) 按著 ShiftShiftShift 鍵不放，以滑鼠點選「mouse 圖層」和「cat 圖Shift 層」的第一個影格，然後在屬性面板中設定如下圖所示的 移動導向漸變的動畫效果。

點選「已導引 (guided)」項目。

兩圖層名稱均 向右內縮。

(15) 點按「mouse 圖層」的影格 1，將該影格下的圖形元件(小老 鼠)拖曳靠齊導引線(矩形)缺口的起點處，如下圖所示：

(16) 點按「mouse 圖層」的影格 36，將本影格下的小老鼠拖曳 靠齊導引線(矩形)的終點。

(17) 確定影格 36 的小老鼠呈選取狀，點按功能表的『修改 (Modify)』-『變形(Transform)』-『順時針旋轉 90 度 (Rotate 90。CW)，如下圖所示：

將影格 1 的小 老鼠拖曳到 此處。

(18) 同法，將「cat 圖層」的第一影格拖曳靠齊導引線的起點，

第 36 影格的小貓拖曳靠齊導引線的終點(註：先將影格 1 的小貓水平旋轉 180 度，影格 36 的小貓向左旋 90 度)，如 下圖所示：

將第 336 影 格的老鼠拖 曳到導引線 的終點，並將 小老鼠向右 旋轉 90 度。

影格一的狀態。可將小老

鼠稍微往前移動。

(19) 按 EnterEnterEnterEnter 鍵測試動畫結果。

(20) 儲存檔案(\3-2\catchmouse1.fla)。

【【【

【練習一練習一練習一練習一】】】將】將將將「「「「catcatcat 圖層cat圖層圖層圖層」」」」的第一個影格向後移動到第的第一個影格向後移動到第的第一個影格向後移動到第的第一個影格向後移動到第 18181818 影格影格影格影格，，，，再測試動再測試動再測試動再測試動 畫結果。(\3-2\catchmouse2.fla)

【

【【

【練習二練習二練習二練習二】】】】將小貓和小老鼠作相反方向的移動將小貓和小老鼠作相反方向的移動將小貓和小老鼠作相反方向的移動。將小貓和小老鼠作相反方向的移動。。。

影格

36的狀態。