移動與形狀漸變動畫－ 英文字母動畫教學影片

Presentation on theme: "移動與形狀漸變動畫－ 英文字母動畫教學影片"— Presentation transcript:

1 移動與形狀漸變動畫－ 英文字母動畫教學影片
第 3 章 移動與形狀漸變動畫－ 英文字母動畫教學影片

2 本堂課重點提要 3-1 設定動畫的背景 3-2 佈置及建立文字的動畫 3-3 用移動補間動畫做出字母逐字移入的效果
3-4 用形狀補間動畫製作字母大寫變小寫的效果 3-5 設置形狀提示點輔助字母的形狀變化

3 3-1 設定動畫的背景 Flash 雖然具備繪圖工具, 但在實務上, 動畫設計師通常還是習慣在專門的繪圖或影像軟體, 將所需的素材繪製或處理好, 再匯入 Flash 來製作動畫的部份。本節將匯入一個 Photoshop 格式的圖檔, 做為動畫的背景, 接著會更深入講解製作移動補間動畫的條件及做法。 匯入 Photoshop 圖檔 製作彩虹吊框的移動補間動畫

4 匯入 Photoshop 圖檔 本範例安排的是藍天白雲的影像背景, 我們已事先用 Photoshop 處理好一張合適的圖檔, 存放在書附光碟的範例檔案\Ch03 資料夾中, 檔名為 Ch03.psd, 我們要將此圖檔匯入做為這段動畫的背景。 請在歡迎螢幕的新增項目下, 選擇 Flash 檔案 (ActionScript 3.0) 項目, 或是執行 『檔案/新增』 命令, 新增一個空白的文件。接著再執行 『檔案/匯入/匯入至舞台』 命令, 並如下操作：

5 匯入 Photoshop 圖檔

6 匯入 Photoshop 圖檔 範例使用的圖檔包含了 2 個圖層, 此時可以選擇要匯入哪幾個圖層, 或個別設定每個圖層的屬性。此例 2 個圖層都要匯入。請如下操作：

7 匯入 Photoshop 圖檔

8 『點陣圖影像含可編輯的圖層樣式』和『平面化的點陣圖影像的』2 個選項的差別
匯入 .psd 檔案時, 點陣圖影像含可編輯的圖層樣式 (以下簡稱可編輯樣式) 和平面化的點陣圖影像 (以下簡稱平面化影像) 該怎麼選擇呢？其實這 2 者最主要的區別, 是可編輯樣式能維持圖層的透明度, 而平面化影像則是將設定了透明度的圖層, 與其底下圖層合併後再匯入。而我們最容易察覺的差異, 就是採用平面化影像時, 圖層容易出現雜點。因此, 若 .psd 檔案的圖層已設定透明度, 則建議採用可編輯樣式會是比較好的選擇。

9 製作彩虹吊框的移動補間動畫 剛才匯入的 .psd 檔案分成彩虹吊框及天空 2 個圖層。實際上要當成背景的是天空圖層, 而彩虹吊框則屬於動畫的一部份。我們要讓彩虹吊框從舞台左方之外, 移動到舞台的中央, 移動的時間約 20 個影格 (影格 1～20)。上一堂課已經製作過移動補間動畫了, 而這段讓彩虹吊框進入舞台的動畫, 就是利用移動補間動畫來製作。製作動畫之前, 再來複習一下製作補間動畫的條件, 並檢視一下目前還有什麼條件沒有滿足：

10 製作彩虹吊框的移動補間動畫 1個圖層只能有 1 個元件：彩虹吊框圖層只 1 個元件, 這個條件已經滿足了。
必須有 2 個關鍵影格, 而且 2 個關鍵影格要有差異：彩虹吊框目前只有 1 個關鍵影格, 需要建立第 2 個關鍵影格, 並做變化。 這樣我們已經很清楚, 下一個步驟應該建立第 2 個關鍵影格, 並讓 2 個影格形成差異, 現在就來動手製作吧！

11 製作彩虹吊框的移動補間動畫 首先要建立第 2 個關鍵影格, 請選取彩虹吊框 圖層的影格 20, 按下 F6 鍵插入關鍵影格：

12 製作彩虹吊框的移動補間動畫 接著要讓 2 個關鍵影格有差異。目前影格 1 和影格 20 的彩虹吊框, 都是在舞台的中央, 也就是彩虹吊框進入舞台後要停止的位置。因此, 我們應該選取影格 1 舞台上的彩虹吊框, 並將彩虹吊框拉曳到左側的舞台外：

13 製作彩虹吊框的移動補間動畫

14 製作彩虹吊框的移動補間動畫 讓 2 個關鍵影格產生差異後, 建立補間動畫的必要條件都滿足了。請在彩虹吊框 圖層的影格 1～20 間, 按滑鼠右鈕執行 『建立移動補間動畫』 命令：

15 製作彩虹吊框的移動補間動畫 回到影格 1 按下 Enter 鍵 (Windows) / retum 鍵 (Mac) 觀看動畫效果, 此時會發現背景的天空只有在影格 1 出現, 之後影格就變成空白了。因此, 我們要將天空圖層的影格延長。不過, 由於陸續還會加入其它動畫, 因此不妨將所有圖層的影格多延長一些, 就不用常常去顧慮哪些圖層的影格沒有出現。請選取所有圖層的影格 300, 按 F5 鍵 插入影格：

16 3-2 佈置及建立文字的動畫 這段動畫的內容是英文的教學, 主角當然就是英文字母了。現在我們就利用文字工具來建立這段動畫的主角。
用文字工具建立文字 修改文字屬性 用『打散』及『分散至圖層』拆解成個別文字圖層

17 用文字工具建立文字 之前匯入 .psd 檔案時新增了 2 個圖層, 而原本的圖層 1 卻空了下來, 我們正好可以用來建立英文字母, 建立方法如下。 動畫的英文字母安排在彩虹吊框到達舞台中央後才會出現, 所以請在圖層 1 的影格 21 插入關鍵影格。而目前圖層 1 的位置在天空及彩虹吊框圖層之下, 必須將圖層 1 調整到最上方才不會被背景遮住：

18 用文字工具建立文字

19 用文字工具建立文字 現在就來建立英文字母吧！請按下工具面板的文字工具鈕 以切換到文字工具, 並選取圖層 1 的影格 21, 然後在舞台上的彩虹吊框中按下滑鼠左鈕, 輸入英文字母 "RAINBOW"：

20 用文字工具建立文字

21 修改文字屬性 剛才輸入的文字只有一種顏色, 而且字級太小, 根本就看不清楚。我們來修改一下文字的顏色及字級, 讓畫面看起來更活潑一點。
請先選取圖層 1 的影格 21, 接著按下工具面板的選取工具鈕 , 然後在下方的屬性面板修改文字的樣式：

22 修改文字屬性

23 修改文字屬性 我們打算讓 "RAINBOW" 的 7 個字母, 分別改成彩虹的 7 個顏色。以下以修改字母 "R" 為例, 請切換至文字工具或雙按文字物件, 再用滑鼠選取 "R"(如果不好選取, 可以用縮放工具 來放大顯示), 然後按下屬性面板的文字(填色) 顏色鈕, 此時指標會變成滴管工具 , 請利用這個工具來 "吸取" 彩虹的紅色：

24 修改文字屬性

25 修改文字屬性 剩下的 6 個字母請用同樣的方式, 由左而右依序改成彩虹的橙、黃、綠、藍、靛、紫等顏色。最後, 再利用選取工具, 將文字移動到彩虹吊框的中央, 結果如下圖所示：

26 用『打散』及『分散至圖層』拆解成個別文字圖層
接著要製作 "RAINBOW" 由舞台外, 逐字移動到彩虹吊框上的動畫。這段動畫將利用移動補間動畫來完成。我們要的是 R、A、I、N、B、O、W 逐一從天空中掉下來的效果。目前 RANIBOW 位在同一個圖層, 無法個別設置移動補間動畫, 因此必須設法讓 7 個字母各自獨立到圖層中。這個工作看似麻煩, 其實只要利用『打散』及『分散至圖層』功能, 就可以輕鬆完成囉！

27 用『打散』及『分散至圖層』拆解成個別文字圖層
請繼續使用之前操作的檔案, 或是開啟 03-ex01.fla 來操作。"RAINBOW" 目前仍是 1 個文字物件, 因此我們要把它拆開, 讓 7 個字母分別獨立出來。 請在舞台上的 "RAINBOW" 按滑鼠右鈕, 執行『打散』命令, 就可以把每個字母都拆開來：

28 用『打散』及『分散至圖層』拆解成個別文字圖層

29 用『打散』及『分散至圖層』拆解成個別文字圖層
接著要將每個字母各自分配到圖層中。趁著剛才執行打散後, 每個字母還處於選取狀態, 我們可以直接在字母上按滑鼠右鈕, 執行『分散至圖層』命令, 每個字母就會乖乖的自己開新圖層待著, 如下圖所示：

30 用『打散』及『分散至圖層』拆解成個別文字圖層
接下來先把 7 個圖層的文字, 一一轉換成元件, 再來製作移動補間動畫。以字母 "R" 為例, 請在舞台的字母 "R" 上按滑鼠右鈕, 執行『轉換成元件』命令,並為元件命名。其他的字母, 也請您依相同方法一一轉換成元件：

31 用『打散』及『分散至圖層』拆解成個別文字圖層

32 用『打散』及『分散至圖層』拆解成個別文字圖層

33 用『打散』及『分散至圖層』拆解成個別文字圖層
字母分散到各圖層後, 預設會放在影格 1 的位置。我們要讓這些字母延後到影格 21 才開始出現, 以免彩虹吊框還沒進入舞台, 字母已經出現在舞台上了。請選取 R、A、I、N、B、O、W 圖層的影格 1, 再用拉曳的方式移動到影格 21：

34 用『打散』及『分散至圖層』拆解成個別文字圖層

35 用『打散』及『分散至圖層』拆解成個別文字圖層

36 3-3 用移動補間動畫做出字母逐字移入的效果 若希望每個字母逐一進入舞台, 最後停留在彩虹吊框中, 較直覺的做法, 就是逐一為字母做移動補間動畫。但如此一來, 7 個字就要做 7 遍, 豈不累人？其實這 7 個元件移動的方式、速度都相同, 所以我們只要一次做好 7 個元件的移動補間動畫, 再來調整每個字母進入舞台的時間就可以了！不是很懂？沒關係,動手做是最好的學習方法, 現在來製作這段動畫囉！您可以繼續使用剛才的檔案, 或開啟範例檔 03-ex02.fla 來操作。

37 用移動補間動畫做出字母逐字移入的效果 我們預計每個字母從舞台外移動到定位, 要使用 10 個影格, 意思就是字母要從影格 21 開始移動, 直到影格 31 停止。請在 R、A、I、N、B、O、W 圖層 (以下簡稱為文字圖層) 的影格 31 (21+10), 插入 關鍵影格：

38 用移動補間動畫做出字母逐字移入的效果 目前字母是在最後要停留的位置, 所以應該改變字母起始的位置, 也就是影格21 的位置。請選取文字圖層的影格 21, 以便將舞台上的文字同時選取起來。接著將舞台上的文字一起拉曳到舞台 (外) 上方：

39 用移動補間動畫做出字母逐字移入的效果

40 用移動補間動畫做出字母逐字移入的效果 接著請選取文字圖層的影格 21, 然後按滑鼠右鈕, 執行『建立移動補間動畫』命令, 就可以一次完成這 7 個圖層的移動補間動畫了：

41 用移動補間動畫做出字母逐字移入的效果 完成字母移動的動畫後, 再來就是調整字母進入舞台的時間了。最先進入舞台的字母 "R" 不需要調整, 只要調整其他 6 個字母即可, 方法如下：

42 用移動補間動畫做出字母逐字移入的效果 請依樣畫葫蘆, 讓後續 I～W 圖層的字母, 都比前一個字母晚 2 個影格進場。完成後, 您可以按 Ctrl + Enter 鍵 (Windows) / returm 鍵 (Mac)預覽一下動畫的效果：

43 用移動補間動畫做出字母逐字移入的效果 完成文字逐字進場的動畫, 您一定也很開心吧！不過我們要精益求精, 再強化動畫的效果。筆者希望字母在到達定位時能彈跳一下, 表現出有彈性的視覺效果。您可以延續剛才的檔案繼續操作, 或是開啟 03-ex03.fla 來操作。請先在每個字母移動補間動畫的最後再插入 2 個關鍵 影格：

44 用移動補間動畫做出字母逐字移入的效果 以字母 "R" 為例, 新插入的 2 個關鍵影格, 分別在影格 32 及 33, 而這 2個關鍵影格的內容和影格 31 一樣。我們要做的, 就是讓影格 32 的字母 "R"稍微向上移動位置, 影格 33 則維持不變。這麼一來, 播放到影格 32 時就會看到字母 "R" 跳了一下, 也就形成「彈跳」效果了。操作方法如下：

45 用移動補間動畫做出字母逐字移入的效果

46 用移動補間動畫做出字母逐字移入的效果 其他的 6 個字母請如法炮製, 就完成字母移動的動畫了。您可以按 Ctrl + Enter 鍵 (Windows) / returm 鍵 (Mac) 預覽一下動畫的效果。

47 3-4 用形狀補間動畫製作字母大寫變小寫的效果
接下來要進入這堂課的重頭戲了, 我們要製作字母大寫變小寫的形狀補間動畫。之前使用的是移動補間動畫, 主要應用於元件的移動位置、旋轉、改變大小...等動畫；而本節使用的形狀補間動畫, 是應用於 2 個不同元件之間, 形狀或顏色的轉換, 例如：矩形變成圓形、紅色變成綠色...等。 製作形狀補間動畫的條件 製作字母的形狀補間動畫

48 製作形狀補間動畫的條件 動手操作之前, 先說明製作形狀補間動畫的 2 個條件, 第一個條件和移動補間動畫一樣, 『必須是 2 個有差異的關鍵影格』；另一個條件, 就是套用形狀補間動畫的 2 個關鍵影格, 都必須是圖形、不可為元件, 什麼意思呢？ 以範例來說, "RAINBOW" 是文字, 隨時可以用文字工具修改字級、顏色、字型, 甚至改成其它文字, 但若是把「文字」轉換成「圖形」, 就無法再修改文字的屬性了。

49 製作形狀補間動畫的條件 這就像文書處理軟體 (例如：Microsoft Word) 一樣, 我們輸入的文字可以隨時做修改, 但若是插入一張『文字的圖片』, 就沒辦法像自行輸入的文字一樣做修改了。 在 Flash 中, 要分辦「 文字」和「圖形」,可 以從選取後的外觀來 判斷：

50 製作形狀補間動畫的條件 因此若某個元件想製作形狀補間動畫, 就必須執行『打散』命令轉換成圖形。了解製作形狀補間動畫的條件、文字及圖形的區別後, 我們就來動手製作這段動畫吧！

51 製作字母的形狀補間動畫 請繼續使用之前操作的檔案, 或是開啟 03-ex04.fla 來進行操作。
我們希望 "RAINBOW" 所有字母就定位後 (影格 45)再開始形狀補間動畫, 且以10 個影格的長度來完成。因此補間動畫的頭尾關鍵影格應分別設定在 影格 4 6 及56：

52 製作字母的形狀補間動畫 接著請選取文字圖層的影格 56, 然後在舞台的字母上按滑鼠右鈕, 執行『打散』命令, 讓字母先脫離元件的屬性, 回復成文字, 以便將字母修改成小寫：

53 製作字母的形狀補間動畫

54 製作字母的形狀補間動畫

55 製作字母的形狀補間動畫 接著切換到文字工具,然後將影格 5 6 的"RAINBOW" 改成小寫的 "rainbow"：

56 製作字母的形狀補間動畫 趁著文字剛修改完成, 請將 7 個小寫字母一一轉換成元件, 命名時不可和其他元件同名 (英文大小寫會視為相同)。2 個關鍵影格的元件都準備好了, 現在則是要將元件再轉成圖形。請選取影格 56 的所有字母, 然後按右鈕執行 2 次『打散』命令 (第 1 次是為了脫離元件, 第 2 次則是將文字轉成圖形)。接著同樣在影格 46 執行 2 次『打散』命令：

57 製作字母的形狀補間動畫

58 製作字母的形狀補間動畫 影格 46 和影格 56 的字母都轉成圖形後, 就可以建立形狀補間動畫了。請繼續延用剛才的檔案, 或是開啟範例檔 03-ex05.fla 來操作。請選取文字圖層的影格 46, 然後按右鈕執行『建立形狀補間動畫』命令, 就完成補間動畫了：

59 製作字母的形狀補間動畫

60 製作字母的形狀補間動畫 我們希望字母變形的動畫也能有時間差, 讓每個字母變化完後, 再進行下一個字母的變化。請參考 3-19 頁的作法, 逐一將 A～W 字母往右拉曳, 讓第 1 個關鍵影格, 與上一個字母的第 2 個關鍵影格位在同一個位置：

61 3-5 設置形狀提示點輔助字母的形狀變化 完成字母變形動畫後, 如果您觀察動畫的效果, 會發現字母 "R" 變成 "r" 及"I" 變成 "i" 的過程會出現破洞, 看起來不甚美觀, 我們可以利用形狀提示點,讓補間動畫依提示點的位置改變形狀, 才不會出現破洞的情形：

62 設置形狀提示點輔助字母的形狀變化

63 設置形狀提示點輔助字母的形狀變化 增加形狀提示點 製作吊框與字母移出舞台的動畫 將 Flash 動畫置入網頁中

64 增加形狀提示點 我們以字母 "R" 變形成 "r", 來示範如何設定形狀提示點。請您延續之前的檔案, 或是開啟範例檔 03-ex06.fla 繼續操作。 請選取影格 46 的大寫字母 "R", 再切換成縮放工具 , 然後拉曳一個圍住"R" 的方框, 將 "R" 放大顯示。接著執行『修改/形狀/增加形狀提示點』命令：

65 增加形狀提示點

66 增加形狀提示點 先將提示點拉曳到字母的左上方, 接著再執行相同的命令加入第 2 個形狀提示點, 然後將第 2 個提
示點拉曳到右下方, 如右圖所示： 設定好大寫字母 "R", 接著請選取影格56 , 您會看到小寫字母 "r" 已經出現形狀提示點, 而且是依相反的順序顯 示的。請將 2 個提示 點拉曳到和大寫字母 R 對應的位置, 就完成了：

67 增加形狀提示點 接著請依右圖所示, 為字母 "I" 及 "i" 設定形狀提示點。設定完成後, 您可以按Enter 鍵 (Windows) / returm 鍵 (Mac) 來預覽動畫的效果。

68 製作吊框與字母移出舞台的動畫 整段動畫終於接近尾聲了！最後我們讓字母和彩虹吊框一起向右移出舞台外, 做法當然就是您應該已經很熟悉的移動補間動畫囉！在此就簡單提示一下步驟！您可以繼續使用之前的檔案, 或開啟範例檔 03-ex07.fla 來操作。 在文字圖層及彩虹吊框圖層的影格 120 及 130 插入關鍵影格, 然後將這些圖層中影格 130 的物件, 向右拉曳到舞台外。最後建立影格 120～130 的移動補間動畫, 就完成囉：

69 製作吊框與字母移出舞台的動畫

70 製作吊框與字母移出舞台的動畫 這段動畫播放到影格 130 就結束了, 剩下沒有用到的影格應該移除掉, 否則動畫會一直播放到影格300 才停止。請將所有圖層影格131～300 選取起來, 然後 按右鈕,執行『移 除影格』命令, 就能將沒用到的 影格移除：

71 製作吊框與字母移出舞台的動畫 到此全部完成了, 請按 Ctrl + Enter 鍵 (Windows) / returm 鍵(Mac) 發佈動畫成果。

72 將 Flash 動畫置入網頁中 當網頁要加入 Flash 動畫時, 通常會先使用網頁編輯軟體 (例如：Dreamweaver) 設計出網頁版型, 並規劃出空間以放置 Flash 動畫。請使用網頁瀏覽器, 開啟範例檔 03-ex08.html：

73 將 Flash 動畫置入網頁中

74 將 Flash 動畫置入網頁中 當你將 Flash 動畫製作完成, 只要再運用網頁編輯軟體將動畫置入預留的空間即可。以下示範如何使用 Dreamweaver 將 Flash 動畫置入到網頁中。請用 Dreamweaver 開啟 03-ex08.html, 並如下操作：

75 將 Flash 動畫置入網頁中

76 將 Flash 動畫置入網頁中

77 將 Flash 動畫置入網頁中

78 將 Flash 動畫置入網頁中 插入的動畫在編輯畫面中只會以一個灰色的 Flash 元件來表示, 如果想看動畫實際播放的效果, 可按 F12 鍵以瀏覽器預覽動畫：

79 將 Flash 動畫置入網頁中

80 將 Flash 動畫置入網頁中