第 11 章 色彩形狀漸變動畫─超 Easy！

本章提要 11-1 動畫元件與流程說明 11-2 設定文件屬性並置入背景圖 11-3 建立 FLASH 文字物件並設定文字飛入動畫 11-4 製作文字形狀與色彩漸變形狀補間動畫 11-5 設定形狀提示點 11-6 再加一段形狀補間動畫 11-7 淡出效果的動畫結尾 11-8 延伸學習

前言 本章範例的重點以形狀補間動畫的變形、變色與淡出為主, 其次介紹文字物件的處理、動作以及分散至圖層 (Distribute to Layer) 功能的應用；至於文字飛入的移動補間動畫雖說非常容易, 但我們在本範例中又加了一些不同的設定技巧！ 請先播放範例檔 11.swf, 觀賞本章範例的動畫效果：

前言

11-1 動畫元件與流程說明 元件介紹 動畫製作流程 重點說明

元件介紹 本章動畫的主角是各個英文字母文字物件, 由於 Flash 提供了文字物件打散 (Break Apart) 及分散至圖層 (Distribute to Layer) 功能, 讓我們能從建立文字、分配圖層、到設定動畫 的過程一氣呵成, 所以 並不需要先製作這些英 文字母, 只要準備好一 個背景元件, 就可以邁 入動畫製作階段囉！

動畫製作流程

重點說明 本章範例主要由 4 段動畫構成： FLASH 此 5 字會分別從天外飛來 (使用移動補間動畫效果)：此處特別利用了打散 (Break Apart) 文字物件的方式將各字母分離, 再利用分散至圖層 (Distribute to Layer) 功能, 將各字母迅速分配到各圖層, 以便製作具有時間差效果的動畫。

重點說明 FLASH 這 5 個字會變化形狀和顏色成為 SUPER 這 5 個字 (使用形狀補間動畫效果)：此處需特別注意的是, 製作形狀補間動畫必須使用圖像物件 (Shapes), 而不能直接使用文字物件, 所以必須將文字物件分離成圖像物件, 才能開始設定動畫。另外我們還使用了形狀提示點 (Shape Hints) 的功能, 讓字母變形變得更順暢美麗。

重點說明 SUPER 這 5 字會繼續變形變色為 EASY！這 5個字 (使用形狀補間動畫效果)：此處則與前一段變形變色動畫大同小異, 而由於 SUPER 和 EASY！字母的差異較大, 所以特別要仔細設定形狀提示點, 確保變形的過程不致太突兀！ EASY！這 5 字會逐漸的消失表示動畫已經結束 (使用移動補間動畫效果)：我們利用調整各文字的透明度 (Alpha) , 讓文字逐漸消失淡出, 做為動畫結尾。

11-2 設定文件屬性並置入背景圖 設定文件屬性 置入背景圖

設定文件屬性 本範例動畫之文件屬性如下圖所示：

置入背景圖 背景圖像元件是純為裝飾的靜態背景, 你可以依個人喜好製作, 此處我們就不特別介紹, 直接進入整個動畫製作的階段。如果你還沒畫好背景圖像元件, 可以直接開啟練習檔 11-learn.fla , 利用現成的元件來練習。 準備好背景之後, 請點選背景圖層的影格1, 直接將背景圖像元件從元件庫拉曳到舞台中, 並調整好位置：

置入背景圖

11-3 建立 FLASH 文字物件並 設定文字飛入動畫 建立文字飛入動畫

建立 FLASH 文字物件 首先我們要建立 FLASH 這 5 個字母的文字物件：

建立文字飛入動畫 接著進行文字物件的圖層分配, 步驟是先將 5 個字母分配到不同圖層, 再設定文字飛入的移動補間動畫。此時就是打散及分散至圖層功能大顯身手的時候了！ 請點選舞台中的 FLASH 文字物件, 然後按一次 [Ctrl] + [B] 鍵來打散 (或執行『修改/打散』命令)：

建立文字飛入動畫

建立文字飛入動畫 在 5 個字母仍處於被選取的狀態下, 按下 [Ctrl] + [Shift] + [D] 鍵 (或執行『修改/分散至圖層』命令)： 2004版:『修改/時間軸/分散至圖層』

建立文字飛入動畫

建立文字飛入動畫 接著就可以設定文字飛入的移動補間動畫。為了要讓文字動畫飛入後的位置完美, 我們要在還沒更動到 F、L、A、S、H 這 5 個文字物件的位置之前, 先設定好結束影格：

建立文字飛入動畫

建立文字飛入動畫

建立文字飛入動畫 至此移動補間動畫雖設定好了, 但 F、L、A、S、H 這 5 字並無移動位置, 所以播放也不會產生動畫效果。此時我們要將 F、L、A、S、H 此 5 字在第 1 格影格的位置分別拉出舞台, 這樣才能製造文字飛入的效果：

建立文字飛入動畫

建立文字飛入動畫 再來要製作時間差的動畫效果：

建立文字飛入動畫

11-4 製作文字形狀與色彩漸變的形狀補間動畫 建立 SUPER 文字物件 調整字母位置 設定形狀補間動畫

建立 SUPER 文字物件 首先是建立 S、U、P、E、R 這 5 個獨立的文字物件, 並將之分別安排至 F、L、A、S、H 各圖層中。使用的方法和一開始建立 FLASH 文字物件時一樣：

建立 SUPER 文字物件

建立 SUPER 文字物件

建立 SUPER 文字物件

建立 SUPER 文字物件 以上動作都完成後, 你就可以把空的 S、U、P、E、R 圖層都刪除, 以方便接下來的操作。

調整字母位置 在正式設定動畫前, 我們最好先利用描圖紙功能讓 FLASH 這 5 個字母與SUPER 這 5 個字母能分別對齊 (完整重疊), 這樣變形起來才不會有位移, 也比較美觀：

調整字母位置

設定形狀補間動畫 接下來要設定形狀補間動畫。由於形狀補間動畫不能設定在文字物件上, 所以我們在做變化前, 要把需要用到的字母執行『修改/打散』命令, 將其轉變為圖像物件：

設定形狀補間動畫

設定形狀補間動畫

設定形狀補間動畫 FLASH 至 SUPER 的變形變色動畫至此大致完成, 你可以先播放看看。 你可能會發現, H 變形成 R 的樣子有點詭異, 不是很好看。沒關係, 我們再設定一下形狀提示點 (Shape Hint) 來改善這個問題。

11-5 設定形狀提示點 有時單純的形狀補間動畫無法讓圖像物件變形得很漂亮, 這時可以設定形狀提示點 (Shape Hint) 來幫助整個變形過程。 形狀提示點的作用是在形狀補間動畫的起始影格設定數個提示點, 然後在結束影格指定這些提示點的對應位置, 這樣 Flash 就會依照這些提示點來變形。 下邊是本範例中, H 字母變形成 R 字母的兩種狀況比較：

設定形狀提示點

設定形狀提示點 現在我們就在 H 字母上設置形狀提示點, 幫助它更順利地變形成 R 字母：

設定形狀提示點

設定形狀提示點

刪除、顯示/隱藏形狀提示點 若想刪除全部的形狀提示點, 請先選擇時間軸內形狀提示點的起始影格, 然後執行『修改/形狀/移除全部提示點』 命令將形狀提示點一次全部刪除。或者你也可以將滑鼠移到形狀提示點上, 按滑鼠右鈕執行『移除形狀提示點』命令來移除單一的形狀提示點。另外, 執行『檢視/顯示形狀提示點』命令可以顯示或隱藏形狀提示點。

11-6 再加一段形狀補間動畫 仿照 11-4 和 11-5 節的做法, 再於後面加上一段 SUPER 變形變色成為 EASY！的動畫即可：

再加一段形狀補間動畫

11-7 淡出效果的動畫結尾 最後我們只要再製作文字淡出消失的結尾動畫, 整個動畫就製作完成：

淡出效果的動畫結尾

淡出效果的動畫結尾

淡出效果的動畫結尾

淡出效果的動畫結尾 最後我們只要將背景圖層影格的長度增加到 75 影格後, 你就可以按下 [Ctrl] + [Enter] 鍵發佈檔案瀏覽動畫了。

淡出效果的動畫結尾

套用特效變化 除了可以利用移動補間動畫、形狀補間動畫、透明度變化圖形效果外, 你還可以套用時間軸特效 (請參考第 16 章) 或濾鏡 (請參考第 14 章), 製作出各種圖形的特殊變化效果。

11-8 延伸學習 範例 11-a01.swf 是應用形狀補間動畫及移動補間動畫, 讓土星移動及變色的動畫！你可以播放來看看動畫的效果：

延伸學習 其圖層與關鍵影格配置情形, 可開啟範例檔案 11-a01.fla 來查看：