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

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

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

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

匯入 Photoshop 圖檔

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

匯入 Photoshop 圖檔

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

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

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

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

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

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

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

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

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

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

用文字工具建立文字

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

用文字工具建立文字

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

修改文字屬性

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

修改文字屬性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

製作字母的形狀補間動畫

製作字母的形狀補間動畫

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

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

製作字母的形狀補間動畫

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

製作字母的形狀補間動畫

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

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

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

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

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

增加形狀提示點

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

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

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

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

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

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

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

將 Flash 動畫置入網頁中

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

將 Flash 動畫置入網頁中

將 Flash 動畫置入網頁中

將 Flash 動畫置入網頁中

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

將 Flash 動畫置入網頁中

將 Flash 動畫置入網頁中