Download presentation
Presentation is loading. Please wait.
1
第 11 章 色彩形狀漸變動畫─超 Easy！
2
本章提要 11-1 動畫元件與流程說明 11-2 設定文件屬性並置入背景圖 11-3 建立 FLASH 文字物件並設定文字飛入動畫
11-4 製作文字形狀與色彩漸變形狀補間動畫 11-5 設定形狀提示點 11-6 再加一段形狀補間動畫 11-7 淡出效果的動畫結尾 11-8 延伸學習
3
前言 本章範例的重點以形狀補間動畫的變形、變色與淡出為主, 其次介紹文字物件的處理、動作以及分散至圖層 (Distribute to Layer) 功能的應用；至於文字飛入的移動補間動畫雖說非常容易, 但我們在本範例中又加了一些不同的設定技巧！ 請先播放範例檔 11.swf, 觀賞本章範例的動畫效果：
4
前言
5
11-1 動畫元件與流程說明 元件介紹 動畫製作流程 重點說明
6
元件介紹 本章動畫的主角是各個英文字母文字物件, 由於 Flash 提供了文字物件打散 (Break Apart) 及分散至圖層 (Distribute to Layer) 功能, 讓我們能從建立文字、分配圖層、到設定動畫 的過程一氣呵成, 所以 並不需要先製作這些英 文字母, 只要準備好一 個背景元件, 就可以邁 入動畫製作階段囉！
7
動畫製作流程
8
重點說明 本章範例主要由 4 段動畫構成： FLASH 此 5 字會分別從天外飛來 (使用移動補間動畫效果)：此處特別利用了打散 (Break Apart) 文字物件的方式將各字母分離, 再利用分散至圖層 (Distribute to Layer) 功能, 將各字母迅速分配到各圖層, 以便製作具有時間差效果的動畫。
9
重點說明 FLASH 這 5 個字會變化形狀和顏色成為 SUPER 這 5 個字 (使用形狀補間動畫效果)：此處需特別注意的是, 製作形狀補間動畫必須使用圖像物件 (Shapes), 而不能直接使用文字物件, 所以必須將文字物件分離成圖像物件, 才能開始設定動畫。另外我們還使用了形狀提示點 (Shape Hints) 的功能, 讓字母變形變得更順暢美麗。
10
重點說明 SUPER 這 5 字會繼續變形變色為 EASY！這 5個字 (使用形狀補間動畫效果)：此處則與前一段變形變色動畫大同小異, 而由於 SUPER 和 EASY！字母的差異較大, 所以特別要仔細設定形狀提示點, 確保變形的過程不致太突兀！ EASY！這 5 字會逐漸的消失表示動畫已經結束 (使用移動補間動畫效果)：我們利用調整各文字的透明度 (Alpha) , 讓文字逐漸消失淡出, 做為動畫結尾。
11
11-2 設定文件屬性並置入背景圖 設定文件屬性 置入背景圖
12
設定文件屬性 本範例動畫之文件屬性如下圖所示：
13
置入背景圖 背景圖像元件是純為裝飾的靜態背景, 你可以依個人喜好製作, 此處我們就不特別介紹, 直接進入整個動畫製作的階段。如果你還沒畫好背景圖像元件, 可以直接開啟練習檔 11-learn.fla , 利用現成的元件來練習。 準備好背景之後, 請點選背景圖層的影格1, 直接將背景圖像元件從元件庫拉曳到舞台中, 並調整好位置：
14
置入背景圖
15
11-3 建立 FLASH 文字物件並 設定文字飛入動畫
建立文字飛入動畫
16
建立 FLASH 文字物件 首先我們要建立 FLASH 這 5 個字母的文字物件：
17
建立文字飛入動畫 接著進行文字物件的圖層分配, 步驟是先將 5 個字母分配到不同圖層, 再設定文字飛入的移動補間動畫。此時就是打散及分散至圖層功能大顯身手的時候了！ 請點選舞台中的 FLASH 文字物件, 然後按一次 [Ctrl] + [B] 鍵來打散 (或執行『修改/打散』命令)：
![建立文字飛入動畫 接著進行文字物件的圖層分配, 步驟是先將 5 個字母分配到不同圖層, 再設定文字飛入的移動補間動畫。此時就是打散及分散至圖層功能大顯身手的時候了！ 請點選舞台中的 FLASH 文字物件, 然後按一次 [Ctrl] + [B] 鍵來打散 (或執行『修改/打散』命令)：](http://slidesplayer.com/slide/16992442/98/images/17/%E5%BB%BA%E7%AB%8B%E6%96%87%E5%AD%97%E9%A3%9B%E5%85%A5%E5%8B%95%E7%95%AB+%E6%8E%A5%E8%91%97%E9%80%B2%E8%A1%8C%E6%96%87%E5%AD%97%E7%89%A9%E4%BB%B6%E7%9A%84%E5%9C%96%E5%B1%A4%E5%88%86%E9%85%8D%2C+%E6%AD%A5%E9%A9%9F%E6%98%AF%E5%85%88%E5%B0%87+5+%E5%80%8B%E5%AD%97%E6%AF%8D%E5%88%86%E9%85%8D%E5%88%B0%E4%B8%8D%E5%90%8C%E5%9C%96%E5%B1%A4%2C+%E5%86%8D%E8%A8%AD%E5%AE%9A%E6%96%87%E5%AD%97%E9%A3%9B%E5%85%A5%E7%9A%84%E7%A7%BB%E5%8B%95%E8%A3%9C%E9%96%93%E5%8B%95%E7%95%AB%E3%80%82%E6%AD%A4%E6%99%82%E5%B0%B1%E6%98%AF%E6%89%93%E6%95%A3%E5%8F%8A%E5%88%86%E6%95%A3%E8%87%B3%E5%9C%96%E5%B1%A4%E5%8A%9F%E8%83%BD%E5%A4%A7%E9%A1%AF%E8%BA%AB%E6%89%8B%E7%9A%84%E6%99%82%E5%80%99%E4%BA%86%EF%BC%81+%E8%AB%8B%E9%BB%9E%E9%81%B8%E8%88%9E%E5%8F%B0%E4%B8%AD%E7%9A%84+FLASH+%E6%96%87%E5%AD%97%E7%89%A9%E4%BB%B6%2C+%E7%84%B6%E5%BE%8C%E6%8C%89%E4%B8%80%E6%AC%A1+%5BCtrl%5D+%2B+%5BB%5D+%E9%8D%B5%E4%BE%86%E6%89%93%E6%95%A3+%28%E6%88%96%E5%9F%B7%E8%A1%8C%E3%80%8E%E4%BF%AE%E6%94%B9%2F%E6%89%93%E6%95%A3%E3%80%8F%E5%91%BD%E4%BB%A4%29%EF%BC%9A.jpg "建立文字飛入動畫 接著進行文字物件的圖層分配, 步驟是先將 5 個字母分配到不同圖層, 再設定文字飛入的移動補間動畫。此時就是打散及分散至圖層功能大顯身手的時候了！ 請點選舞台中的 FLASH 文字物件, 然後按一次 [Ctrl] + [B] 鍵來打散 (或執行『修改/打散』命令)：")
18
建立文字飛入動畫
19
建立文字飛入動畫 在 5 個字母仍處於被選取的狀態下, 按下 [Ctrl] + [Shift] + [D] 鍵 (或執行『修改/分散至圖層』命令)： 2004版:『修改/時間軸/分散至圖層』
![建立文字飛入動畫 在 5 個字母仍處於被選取的狀態下, 按下 [Ctrl] + [Shift] + [D] 鍵 (或執行『修改/分散至圖層』命令)： 2004版:『修改/時間軸/分散至圖層』](http://slidesplayer.com/slide/16992442/98/images/19/%E5%BB%BA%E7%AB%8B%E6%96%87%E5%AD%97%E9%A3%9B%E5%85%A5%E5%8B%95%E7%95%AB+%E5%9C%A8+5+%E5%80%8B%E5%AD%97%E6%AF%8D%E4%BB%8D%E8%99%95%E6%96%BC%E8%A2%AB%E9%81%B8%E5%8F%96%E7%9A%84%E7%8B%80%E6%85%8B%E4%B8%8B%2C+%E6%8C%89%E4%B8%8B+%5BCtrl%5D+%2B+%5BShift%5D+%2B+%5BD%5D+%E9%8D%B5+%28%E6%88%96%E5%9F%B7%E8%A1%8C%E3%80%8E%E4%BF%AE%E6%94%B9%2F%E5%88%86%E6%95%A3%E8%87%B3%E5%9C%96%E5%B1%A4%E3%80%8F%E5%91%BD%E4%BB%A4%29%EF%BC%9A+2004%E7%89%88%3A%E3%80%8E%E4%BF%AE%E6%94%B9%2F%E6%99%82%E9%96%93%E8%BB%B8%2F%E5%88%86%E6%95%A3%E8%87%B3%E5%9C%96%E5%B1%A4%E3%80%8F.jpg "建立文字飛入動畫 在 5 個字母仍處於被選取的狀態下, 按下 [Ctrl] + [Shift] + [D] 鍵 (或執行『修改/分散至圖層』命令)： 2004版:『修改/時間軸/分散至圖層』")
20
建立文字飛入動畫
21
建立文字飛入動畫 接著就可以設定文字飛入的移動補間動畫。為了要讓文字動畫飛入後的位置完美, 我們要在還沒更動到 F、L、A、S、H 這 5 個文字物件的位置之前, 先設定好結束影格：
22
建立文字飛入動畫
23
建立文字飛入動畫
24
建立文字飛入動畫 至此移動補間動畫雖設定好了, 但 F、L、A、S、H 這 5 字並無移動位置, 所以播放也不會產生動畫效果。此時我們要將 F、L、A、S、H 此 5 字在第 1 格影格的位置分別拉出舞台, 這樣才能製造文字飛入的效果：
25
建立文字飛入動畫
26
建立文字飛入動畫 再來要製作時間差的動畫效果：
27
建立文字飛入動畫
28
11-4 製作文字形狀與色彩漸變的形狀補間動畫 建立 SUPER 文字物件 調整字母位置 設定形狀補間動畫
29
建立 SUPER 文字物件 首先是建立 S、U、P、E、R 這 5 個獨立的文字物件, 並將之分別安排至 F、L、A、S、H 各圖層中。使用的方法和一開始建立 FLASH 文字物件時一樣：
30
建立 SUPER 文字物件
31
建立 SUPER 文字物件
32
建立 SUPER 文字物件
33
建立 SUPER 文字物件 以上動作都完成後, 你就可以把空的 S、U、P、E、R 圖層都刪除, 以方便接下來的操作。
34
調整字母位置 在正式設定動畫前, 我們最好先利用描圖紙功能讓 FLASH 這 5 個字母與SUPER 這 5 個字母能分別對齊 (完整重疊), 這樣變形起來才不會有位移, 也比較美觀：
35
調整字母位置
36
設定形狀補間動畫 接下來要設定形狀補間動畫。由於形狀補間動畫不能設定在文字物件上, 所以我們在做變化前, 要把需要用到的字母執行『修改/打散』命令, 將其轉變為圖像物件：
37
設定形狀補間動畫
38
設定形狀補間動畫
39
設定形狀補間動畫 FLASH 至 SUPER 的變形變色動畫至此大致完成, 你可以先播放看看。
你可能會發現, H 變形成 R 的樣子有點詭異, 不是很好看。沒關係, 我們再設定一下形狀提示點 (Shape Hint) 來改善這個問題。
40
11-5 設定形狀提示點 有時單純的形狀補間動畫無法讓圖像物件變形得很漂亮, 這時可以設定形狀提示點 (Shape Hint) 來幫助整個變形過程。 形狀提示點的作用是在形狀補間動畫的起始影格設定數個提示點, 然後在結束影格指定這些提示點的對應位置, 這樣 Flash 就會依照這些提示點來變形。 下邊是本範例中, H 字母變形成 R 字母的兩種狀況比較：
41
設定形狀提示點
42
設定形狀提示點 現在我們就在 H 字母上設置形狀提示點, 幫助它更順利地變形成 R 字母：
43
設定形狀提示點
44
設定形狀提示點
45
刪除、顯示/隱藏形狀提示點 若想刪除全部的形狀提示點, 請先選擇時間軸內形狀提示點的起始影格, 然後執行『修改/形狀/移除全部提示點』 命令將形狀提示點一次全部刪除。或者你也可以將滑鼠移到形狀提示點上, 按滑鼠右鈕執行『移除形狀提示點』命令來移除單一的形狀提示點。另外, 執行『檢視/顯示形狀提示點』命令可以顯示或隱藏形狀提示點。
46
11-6 再加一段形狀補間動畫 仿照 11-4 和 11-5 節的做法, 再於後面加上一段 SUPER 變形變色成為 EASY！的動畫即可：
47
再加一段形狀補間動畫
48
11-7 淡出效果的動畫結尾 最後我們只要再製作文字淡出消失的結尾動畫, 整個動畫就製作完成：
49
淡出效果的動畫結尾
50
淡出效果的動畫結尾
51
淡出效果的動畫結尾
52
淡出效果的動畫結尾 最後我們只要將背景圖層影格的長度增加到 75 影格後, 你就可以按下 [Ctrl] + [Enter] 鍵發佈檔案瀏覽動畫了。
![淡出效果的動畫結尾 最後我們只要將背景圖層影格的長度增加到 75 影格後, 你就可以按下 [Ctrl] + [Enter] 鍵發佈檔案瀏覽動畫了。](http://slidesplayer.com/slide/16992442/98/images/52/%E6%B7%A1%E5%87%BA%E6%95%88%E6%9E%9C%E7%9A%84%E5%8B%95%E7%95%AB%E7%B5%90%E5%B0%BE+%E6%9C%80%E5%BE%8C%E6%88%91%E5%80%91%E5%8F%AA%E8%A6%81%E5%B0%87%E8%83%8C%E6%99%AF%E5%9C%96%E5%B1%A4%E5%BD%B1%E6%A0%BC%E7%9A%84%E9%95%B7%E5%BA%A6%E5%A2%9E%E5%8A%A0%E5%88%B0+75+%E5%BD%B1%E6%A0%BC%E5%BE%8C%2C+%E4%BD%A0%E5%B0%B1%E5%8F%AF%E4%BB%A5%E6%8C%89%E4%B8%8B+%5BCtrl%5D+%2B+%5BEnter%5D+%E9%8D%B5%E7%99%BC%E4%BD%88%E6%AA%94%E6%A1%88%E7%80%8F%E8%A6%BD%E5%8B%95%E7%95%AB%E4%BA%86%E3%80%82.jpg "淡出效果的動畫結尾 最後我們只要將背景圖層影格的長度增加到 75 影格後, 你就可以按下 [Ctrl] + [Enter] 鍵發佈檔案瀏覽動畫了。")
53
淡出效果的動畫結尾
54
套用特效變化 除了可以利用移動補間動畫、形狀補間動畫、透明度變化圖形效果外, 你還可以套用時間軸特效 (請參考第 16 章) 或濾鏡 (請參考第 14 章), 製作出各種圖形的特殊變化效果。
55
11-8 延伸學習 範例 11-a01.swf 是應用形狀補間動畫及移動補間動畫, 讓土星移動及變色的動畫！你可以播放來看看動畫的效果：
56
延伸學習 其圖層與關鍵影格配置情形, 可開啟範例檔案 11-a01.fla 來查看：
Similar presentations
