項目六　學好補間，動畫制作更簡單

項目描述

本項目學習Flash各種常見的補間動畫，并利用各種補間動畫制作簡單的賀卡及一些特效小作品。

項目目標

學會傳統(tǒng)補間、補間動畫、3D旋轉、形狀補間動畫的制作。

任務一　制作“新年賀卡”

我明了

本任務的動畫，首先是對聯的上聯和下聯同時從上、下兩個方向進入，接著是財神從左面進入，最后是橫批從上依次進入，這些動畫都可以利用傳統(tǒng)補間功能來完成。在時間的先后順序上，利用時間軸上幀的順序來實現。

我掌握

(1) 會按要求創(chuàng)建傳統(tǒng)補間。

(2) 會對傳統(tǒng)補間進行參數設置。

(3) 了解賀卡的制作方法和流程。

我準備

(1) 傳統(tǒng)補間動畫是指在同一圖層的前、后兩個關鍵幀中放置同一元件實例，改變這兩個關鍵幀上元件的位置、角度、大小、色調和透明度等參數，再由Flash自動生成中間各幀上的對象所形成的動畫。

(2) 選中第1個關鍵幀或兩關鍵幀中間的幀，單擊菜單“插入”→“傳統(tǒng)補間”命令，可創(chuàng)建傳統(tǒng)補間，此時時間軸如圖6-1所示。

圖6-1　傳統(tǒng)補間的時間軸

(3) 選中傳統(tǒng)補間的第1個關鍵幀或兩關鍵幀之間的幀，打開“屬性”面板可設置傳統(tǒng)補間參數，如圖6-2所示。

圖6-2　傳統(tǒng)補間的屬性參數設置

我動手

1. 文檔設置

打開“春節(jié)賀卡(start).fla”文檔，觀察一下，為節(jié)約時間，前面已經學過的內容不再重新做，直接導入各個圖形。大家有時間可以自行導入素材并處理，達到這個效果，文檔設置為默認。

小經驗：

打開一個素材文件，首先應該觀察該文件已有的圖層和庫中的元件。

2. 制作上、下對聯效果

(1) 首先應用傳統(tǒng)補間動畫來制作上聯進入場景的動畫。選中上聯圖形，單擊菜單“修改”→“轉換為元件”命令(或按【F8】鍵)，打開“轉換為元件”對話框，名稱為“上聯”，類型為“圖形”，單擊“確定”按鈕，將對象轉換為一個圖形元件，如圖6-3所示。

圖6-3　將對象轉換為圖形元件

(2) 在場景中的“上聯”元件上右擊，單擊快捷菜單中的“分散到圖層”命令，可以看到時間軸上新建了一個“上聯”圖層，如圖6-4所示。觀察舞臺，發(fā)現舞臺上的“上聯”元件不見了。將光標移到“上聯”圖層上，按住鼠標左鍵向上拖動到“背景”圖層的上方后松開，使“上聯”圖層在“背景”圖層的上方，這樣，“上聯”圖層的“上聯”元件又顯現在背景的上方。

圖6-4　分散到圖層后的時間軸

(3) 右擊“上聯”圖層的第24幀，在快捷菜單中單擊“插入關鍵幀”命令，則在第24幀插入了一個關鍵幀；右擊“背景”圖層的第24幀，在快捷菜單中單擊“插入幀”命令，這樣在“背景”圖層上插入了幀，此時時間軸如圖6-5所示。

圖6-5　插入關鍵幀后的時間軸

(4) 單擊“上聯”圖層的第1幀，選中場景中的“上聯”元件實例，將其移動到場景的下面，保持和目前位置在同一豎直線上(拖動時按住【Shift】鍵更容易)，如圖6-6所示；單擊“上聯”圖層的第1幀到23幀中的任意一幀，單擊菜單“插入”→“傳統(tǒng)補間”命令或利用快捷菜單創(chuàng)建傳統(tǒng)補間，此時時間軸狀態(tài)如圖6-7所示。按回車鍵播放一下動畫，可以看到“上聯”可以從下到上運動。

圖6-6　將上聯移動到舞臺下方

圖6-7　完成“上聯”時間軸狀態(tài)

(5) 同樣，利用上面的方法，制作“下聯”動畫。其制作過程為：①將下聯轉換為“下聯”圖形元件；②將“下聯”分散到圖層；③將“下聯”圖層移動到合適位置；④在“下聯”圖層的第24幀插入關鍵幀；⑤將“下聯”圖層的第1幀的“下聯”元件實例移到場景上方；⑥在“下聯”圖層的第1幀到第24幀之間創(chuàng)建傳統(tǒng)補間。時間軸狀態(tài)如圖6-8所示。

圖6-8　完成“上聯”、“下聯”的時間軸

3. 制作財神動畫

(1) 根據傳統(tǒng)補間的要求，先將財神轉化成一個元件。選中財神身體和手，單擊菜單“修改”→“轉換為元件”命令，打開“轉化為元件”對話框，選中“影片剪輯”→命名為“財神”，單擊“確定”按鈕，將其轉換成一個影片剪輯元件。

(2) 財神一般會有恭喜發(fā)財的動作，這里也可以利用逐幀動畫制成這樣的動畫。雙擊場景中的財神元件，進入“財神”元件的編輯狀態(tài)。利用“任意變形工具”選中財神的手，將變形中心移到上部，如圖6-9(a)所示。選中第4幀，按【F6】鍵插入關鍵幀，利用“任意變形工具”調整財神的手，將其向下拉伸一點，如圖6-9(b)所示。

圖6-9　調整財神

(3) 單擊“場景 1”回到主場景。現在開始應用傳統(tǒng)補間來制作財神入場動畫。右擊場景中的財神，單擊快捷菜單“分散到圖層”命令，這樣自動新建“財神”圖層，并將“財神”元件放置在該層中。按住“財神”圖層拖動到“上聯”圖層的上方，選中“財神”圖層的第24幀，按【F6】鍵插入關鍵幀，然后選中“財神”圖層的第1幀，選中財神，將其移到場景的右側，如圖6-10所示。

圖6-10　將財神移到舞臺右側

(4) 右擊“財神”圖層的第1幀，在快捷菜單中單擊“創(chuàng)建傳統(tǒng)補間”命令。按回車鍵播放動畫，可以看到，財神直接從右向左移動到舞臺。我們可以使財神旋轉進入，更改傳統(tǒng)動畫的屬性即可以實現。選中“財神”圖層的第1幀到第23幀中的任意一幀，單擊菜單“窗口”→“屬性”命令，打開“屬性”面板，展開“補間”選項，在旋轉列表框中選逆時針(2次)，如圖6-11所示。

圖6-11　傳統(tǒng)補間屬性設置

(5) 此時播放動畫，財神旋轉進入場景，并且是與對聯同時進入的，可以在時間上進行調整，讓財神在對聯之后出現。選中“財神”圖層的第1幀到第24幀，在選中區(qū)按下鼠標左鍵向左拖動到第25幀，拖動后的時間軸如圖6-12所示。在其他圖層的第45幀右擊，單擊快捷菜單中的“插入幀”命令，再測試動畫。

圖6-12　拖動后的時間軸

4. 制作橫批動畫

橫批的四個字從上依次進入場景中，我們可以依照前面的方法，完成橫批的動畫。在這里只介紹簡單的步驟，供大家參考。

(1) 分別選中各文字，將其轉換成同名的圖形元件。

(2) 選中各文字的元件實例，單擊快捷菜單中的“分散到圖層”命令。

(3) 選中新建的 “恭”、“賀”、“新”、“春”四個圖層，按住鼠標左鍵拖動，將其移到“財神”圖層的上方，并將其他圖層鎖定。

(4) 在新建的四個圖層的第24幀插入關鍵幀。

(5) 選中第1幀，在場景中選中“恭”、“賀”、“新”、“春”四個元件實例，將其移到場景的上方，如圖6-13所示。

(6) 分別在這四個圖層的第1幀到第24幀中插入傳統(tǒng)補間，可以調整補間屬性，如圖6-14所示。

圖6-13　四個元件位置

圖6-14　補間屬性

(7) 調整四個圖層入場時間順序，調整結果如圖6-15所示。

圖6-15　調整好后的圖層

(8) 其他圖層插入幀的方法與“春”圖層的幀的插入方法一樣。

5. 添加聲音

在“春”圖層上新建圖層“音樂”，選中第1幀，按組合鍵【Ctrl+L】，打開“庫”面板，將07聲音元件拖入舞臺中。

6. 完成動畫

在“聲音”圖層上新建新圖層“動作”，該層的最后一幀插入空白關鍵幀，按【F9】鍵打開“動作”面板，在“動作”面板中輸入動作：“stop()”。按組合鍵【Ctrl+Enter】測試動畫，以“新春賀卡.fla”為文件名保存該動畫。

我收獲

我留言

我練習

(1) 完成新年賀卡的制作。

(2) 制作職教中心日夜交替動畫(提示：先將職教中心和天空轉換成元件，創(chuàng)建傳統(tǒng)補間，調整職教中心亮度，調整天空透明度就可以完成?？梢詤⒁娨淹瓿傻膭赢嫞Ч麉⒁娙找菇惶?last).fla)。

任務二　制作“旋轉的錢幣”

我明了

本任務制作一個具有3D旋轉效果的錢幣，使大家能夠理解補間動畫的制作方法。

我掌握

認識補間動畫，并掌握其制作方法，會用補間創(chuàng)建常見的補間動畫，以制作本任務所要的動畫。掌握3D補間的制作方法，會制作簡單3D旋轉效果。

我準備

1. 補間動畫

基于對象創(chuàng)建的(傳統(tǒng)補間是基于時間軸創(chuàng)建的)動畫，創(chuàng)建補間動畫的對象包括元件和文本對象，創(chuàng)建方式更靈活，創(chuàng)建過程更簡單。

2. 創(chuàng)建補間動畫的流程

(1) 為創(chuàng)建補間動畫的對象添加與動畫播放時間一樣長的普通幀(也可在創(chuàng)建動畫后再設置動畫的播放時間)。

(2) 在舞臺上右擊要創(chuàng)建動畫的對象，從彈出的快捷菜單中單擊“創(chuàng)建補間動畫”命令。

(3) 單擊時間軸上的不同幀，選中對象，設置對象在不同幀上的位置、旋轉、縮放、傾斜、顏色或濾鏡等屬性，Flash會自動在該幀上生成關鍵幀，并在關鍵幀之間生成動畫。

3. 動畫編輯器

單擊菜單“窗口”→“動畫編輯器”命令，可打開“動畫編輯器”對話框，如圖6-16所示，在該對話框中可以對動畫進行編輯與調整。

圖6-16　“動畫編輯器”對話框

我動手

1. 文檔設置

打開“旋轉的錢幣(start).fla”文檔，可以看到，庫里面只有一張導入的圖片。將幀頻調整為12fps，其他屬性保持默認。

2. 制作文字飛入動畫

(1) 選擇“文本工具”，在場景中輸入標題 “旋轉的錢幣”，選中剛輸入的文本，打開“屬性”面板，設置文本屬性，如圖6-17所示。

圖6-17　文本屬性

(2) 右擊時間軸的第20幀，單擊快捷菜單中的“插入幀”命令。右擊場景中的文字對象，單擊快捷菜單中的“創(chuàng)建補間”命令；觀察圖層圖標，發(fā)生了改變，如圖6-18所示。

圖6-18　插入補間動畫圖層圖標的變化

(3) 選擇時間軸的第1幀，將文字移到場景外的上方，按組合鍵【Ctrl+T】打開“變形”面板，將文本框的寬和高縮小到原來的20%；再選中時間軸的第20幀，將文本移到舞臺內的上部，在“變形”面板中將文本框的寬和高調整到100%。此時時間軸的第20幀變成一個關鍵幀，舞臺上的文本如圖6-19所示。

圖6-19　舞臺上的文本

(4) 圖中的虛線表示文本移動的路徑，將光標指到路徑的中央，按住鼠標左鍵，將其拖動到圖6-20所示的位置，然后放開鼠標左鍵，使移動路徑發(fā)生改變。按回車鍵播放動畫。

圖6-20　改變文本框移動路徑

練一練：一個補間動畫做完了，總結一下制作補間動畫的過程吧：1.________________ __________________ 2.________________ __________________ 3.________________ __________________ 4.________________ __________________

3. 制作錢幣轉動動畫

(1) 雙擊“圖層1”，將其重命名為“文本”。單擊新建圖層按鈕新建圖層，重命名為“錢幣”。選中“錢幣”圖層的第1幀，打開“庫”面板，將“美元.png”拖到場景中，調整大小和位置，其屬性如圖6-21所示。

圖6-21　錢幣的屬性

小提示：

調整大小和位置可以利用信息、屬性或對齊面板。

(2) 單擊錢幣，單擊菜單“修改”→“轉換為元件”命令，命名為“錢幣”，屬性為“影片剪輯”，做好后單擊“確定”按鈕，如圖6-22所示。

圖6-22　將美元轉換為影片剪輯

(3) 右擊“錢幣”圖層的第20幀，單擊快捷菜單中的“創(chuàng)建補間動畫”命令。再在第20幀上右擊一次，在此時的快捷菜單中單擊“3D補間”命令，如圖6-23所示。

圖6-23　插入3D補間

(4) 選擇“錢幣”時間軸的第20幀，單擊菜單“窗口”→“動畫編輯器”命令，打開“動畫編輯器”對話框，如圖6-24所示。

圖6-24　“動畫編輯器”對話框

(5) 單擊基本動畫右邊的，打開基本動畫，在旋轉Y文本框中輸入－176°，如圖6-25所示。

圖6-25　調整旋轉Y屬性

(6) 將光標移到“錢幣”圖層的第20幀，當光標變成?時，按住【Shift】鍵向右拖動到第40幀，延長補間動畫最后一個關鍵幀的內容。同樣，將“文本”圖層最后一個關鍵幀的內容也延長到第40幀。時間軸如圖6-26所示。

圖6-26　在第40幀插入幀

試一試：

比較一下，如果不按【Shift】鍵，會出現什么情況？

(7) 選中第21幀中的硬幣，打開“動畫編輯器”對話框，調整旋轉Y度數為－184°；同樣，調整第40幀中的旋轉Y度數為－356°。此時時間軸如圖6-27所示。

圖6-27　在第40幀插入幀

(8) 按組合鍵【Ctrl+Enter】測試動畫，以“旋轉的錢幣.fla”文件名保存。

我收獲

我留言

我練習

(1) 應用補間動畫制作飛舞的蝴蝶。

(2) 制作旋轉的撲克牌。

任務三　制作“旋轉的3D立方體”

我明了

本任務是制作一個旋轉3D立方體的水晶舞臺，進一步學習3D補間的應用。

我掌握

掌握3D工具制作立方體的方法，應用補間制作立方體的旋轉。

我準備

(1) 3D變形工具。利用3D變形工具可以對一個3D影片剪輯進行變換。3D工具包括3D旋轉工具和3D平移工具等兩種。使用3D旋轉工具選中立方體，光標指向相應的位置時所呈現形狀及作用如圖6-28所示。3D平移工具選中后呈現的狀態(tài)如圖6-29所示。

圖6-29　3D平移工具

(2) 打開“屬性”面板，可以進行3D定位和查看，如圖6-30所示。

圖6-30　3D定位和查看

(3) 打開“變形”面板，可以進行3D變形，如圖6-31所示。

圖6-31　3D變形

我動手

1. 舞臺屬性設置

打開“水晶舞臺(start).fla”文檔，設置文檔屬性，背景顏色為黑色，大小為300×300，其余屬性為默認，如圖6-32所示。

圖6-32　舞臺屬性設置

試一試：

還記得怎么一次選中多個元件嗎？借助【Shift】鍵試試吧！

2. 設置立方體的六個面

(1) 按組合鍵【Ctrl+L】打開“庫”面板，選中第1個到第6個圖片，并將其拖到舞臺上，此時6個圖片完全重合。從圖片左上部按住鼠標左鍵向右下拖動，選中全部圖片，調整屬性如圖6-33所示。

圖6-33　圖片屬性設置

(2) 保持舞臺上所有圖片的選中狀態(tài)，單擊菜單“修改”→“轉換為元件”命令，將其轉換成名為“立方體”的影片剪輯，如圖6-34所示。

圖6-34　轉換為“立方體”的影片剪輯

(3) 雙擊舞臺上的“立方體”剪輯實例，進入其編輯狀態(tài)。選中圖片1，單擊菜單“修改”→“轉換為元件”命令，將其轉換成名為“T1”的影片剪輯，然后將“T1”移動到上部，如圖6-35所示。

圖6-35　將“T1”移到上部

(4) 同樣，選中圖片2，單擊菜單“修改”→“轉換為元件”命令，將其轉換成名為“T2”的影片剪輯，并將其移動到左邊。再按同樣的方法，依次將其他圖片轉換為影片剪輯元件，名稱分別為“T3”~“T6”，位置如圖6-36所示。

圖6-36　將圖片轉換為元件

(5) 選中“T1”影片剪輯，按組合鍵【Ctrl+F3】打開“屬性”面板，在展開的“3D定位和查看”項中將X、Y、Z的值分別設為0，0，－50，透視角度設置為45°，以便于觀察，如圖6-37所示。

圖6-37　設置“T1”的3D屬性

(6) 選中“T2”影片剪輯，打開“屬性”面板，在展開的“3D定位和查看”項中將X、Y、Z的值分別設為0，－50，0，然后單擊菜單“窗口”→“變形”命令，打開“變形”面板，將3D旋轉X值設置為90°，如圖6-38所示。

圖6-38　“T2”的3D屬性和3D變形

(7) 依次選中其他影片剪輯實例，設置其 3D屬性和3D變形，分別如圖6-39至圖6-42所示。

圖6-39　“T3”的3D屬性和3D旋轉

圖6-40　“T4”的3D屬性和3D旋轉

圖6-41　“T5”的3D屬性和3D旋轉

想一想：

思考一下設置立方體的六個面時為什么會是這些值？

圖6-42　“T6”的3D屬性和3D旋轉

(8) 六個面設置好后，大家可以看到，一個立方體就做好了，如圖6-43所示。

圖6-43　立方體

3. 制作立方體旋轉動畫

(1) 返回“場景1”，在“圖層1”的第50幀插入普通幀。然后選中舞臺上的“立方體”實例，將其放置于舞臺中央(即X=0，Y=0)，右擊立方體，在彈出的快捷菜單中單擊“創(chuàng)建補間動畫”命令。

(2) 單擊第1幀，選中“立方體”實例，使用“3D旋轉工具”繞X軸旋轉45°(或打開“變形”面板，直接將3D旋轉的X值改為45°，設置如圖6-44所示)。

(3) 選中第50幀，單擊菜單“窗口”→“動畫編輯器”命令，打開“動畫編輯器”對話框，將基本動畫欄中的旋轉Y的值改為360°，如圖6-45所示。

圖6-44　設置3D旋轉

圖6-45　動畫編輯器設置

(4) 選中第50幀中的“立方體”影片剪輯實例，在“屬性”面板的“3D定位和查看”欄中將其“透視角度”設為1，完成后測試動畫，觀看3D效果。以“水晶舞臺.fla”為文件名保存。

我收獲

我留言

我練習

完成本任務練習。試著修改立方體的3D參數，觀察其變化。

任務四　制作“喝杯果汁”動畫

我明了

與傳統(tǒng)補間動畫和基于對象的補間動畫不同，形狀補間主要針對形狀的變化來創(chuàng)建過渡動畫。本任務將帶領讀者學習形狀補間動畫的創(chuàng)建方法，以及形狀提示的應用。

我掌握

(1) 形狀補間動畫的創(chuàng)建方法。

(2) 利用形狀提示對形狀補間動畫進行簡單調整。

我準備

1. 形狀補間動畫

形狀補間動畫是基于時間軸創(chuàng)建的，時間軸上的對象必須是可編輯的圖形?？删庉嫷膱D形包括Flash自帶繪圖工具直接繪制的圖形、已經被分離的文字圖形或被分離的導入圖形。

2. 創(chuàng)建形狀補間動畫的流程

(1) 繪制圖形或導入圖形并執(zhí)行分離操作。

(2) 在時間軸的關鍵位置處插入關鍵幀，對當前圖形進行修改或重新繪制。

(3) 在兩關鍵幀之間右擊，并在快捷菜單中單擊“創(chuàng)建補間形狀”命令，或單擊菜單“插入”→“補間形狀”命令。

我動手1. 場景設置

打開素材文件“來杯果汁(start).fla”文檔，會看到舞臺中有一幅餐桌的圖形，且餐桌上的杯子和果汁都被單獨放在一個圖層中。場景設置保持為默認。

2. 果汁動畫制作

(1) 在“果汁1”圖層上方新建兩個圖層，并分別命名為“果汁2”和“果汁3”，如圖6-46所示。

圖6-46　新建圖層

(2) 在所有圖層的第70幀插入普通幀，然后在“果汁1”圖層的第10幀和第15幀處插入關鍵幀，再使用“任意變形工具”對“果汁1”圖層的第15幀中的“果汁”元件實例進行旋轉，并向右移動到杯子上方，如圖6-47所示，再在“果汁1”圖層的第10幀到第15幀之間創(chuàng)建傳統(tǒng)補間動畫。

想一想：

回顧傳統(tǒng)補間的制作方法。

圖6-47　移動并旋轉果汁

(3) 在“果汁2”圖層的第15幀插入空白關鍵，然后選擇“線條工具”和“選擇工具”，在該關鍵幀中繪制流入杯中的果汁，并為其填充橙色，最后將其連線刪除，效果如圖6-48所示。

(4) 在“果汁2”圖層的第20幀插入空白關鍵幀，然后選擇“線條工具”和“選擇工具”，在該關鍵幀中繪制流入杯中的果汁，并為其填充橙色，最后將其連線刪除，效果如圖6-49所示。

圖6-48　流出的果汁

圖6-49　流入杯中的果汁

想一想：

仔細觀察一下，成功的補間形狀與傳統(tǒng)補間有什么異同。

(5) 選中“果汁2”圖層的第15幀到第20幀之間的任意一幀，在選中區(qū)右擊，在快捷菜單中單擊“創(chuàng)建補間形狀”命令，此時時間軸如圖6-50所示。

圖6-50　創(chuàng)建補間形狀

練一練：

相同的是兩關鍵幀之間都是 _______________，不同的是實心箭頭后的背景形狀補間是__________色，傳統(tǒng)補間是__________色。

(6) 分別在“果汁3”圖層的第20幀插入關鍵幀，選中第20幀，然后選擇“線條工具”和“選擇工具”，繪制杯中的果汁，并為其填充黃色，刪除邊線，如圖6-51(a)所示；然后在第30幀、第40幀及第50幀處插入關鍵幀，分別選擇“線條工具”和“選擇工具”，調整第20幀、第30幀、第40幀、第50幀中的果汁形狀，最終結果如圖6-51(d)所示。

圖6-51　杯中的果汁

(7) 在“果汁3”圖層的第20幀到第30幀之間，第30幀到第40幀之間以及第40幀到第50幀之間插入補間形狀動畫。按回車鍵預覽動畫效果。

3. 添加補間形狀提示

(1) 預覽動畫時，如果發(fā)現果汁效果不太自然，可以利用形狀提示進行調整。

(2) 單擊“果汁3”圖層的第20幀，然后連續(xù)按組合鍵【Ctrl+Shift+H】四次，添加四個形狀提示，將標有字母“a”的形狀提示拖到杯中果汁的左下角，將標有字母“b”的形狀提示拖到杯中果汁的右下角，將標有字母“c”的形狀提示拖到左上角，將標有字母“d”的形狀提示移到右上角。再將“果汁3”圖層的第30幀中的形狀提示移動到相應位置，如圖6-52所示。預覽動畫。如果其他段動畫還有不自然的地方，可用同樣的方法進行修改。

圖6-52　添加形狀提示

(3) 在“果汁2”圖層的第50幀處插入空白關鍵幀，在“果汁1”圖層的第50幀處插入關鍵幀，在第55幀處插入空白關鍵幀，然后將“果汁1”圖層的第1幀中的“果汁”元件實例原位復制到第55幀中。最后在“果汁1”圖層的第50幀到第55幀之間創(chuàng)建傳統(tǒng)補間動畫，如圖6-53所示，至此，實例就完成了。以“來杯果汁.fla”為文件名保存。

圖6-53　插入傳統(tǒng)補間

我收獲

我留言

我練習

(1) 完成本任務練習。

(2) 制作文字簡單變形動畫。

(3) 制作線段延伸動畫。