電子課件-《Flash動畫設計與制作(第二版)》-A06-3961-項目三-補間動畫制作

1、任務 3任務 1萬花筒任務 2七十二變運動的足球項目三補間動畫制作任務 4荷蘭風情補間動畫是一種基本動畫，補間動畫中的對象隨著播放時間進行移動或變形。這種動畫制作過程簡單，只需制作兩個關鍵幀上的動畫，中間部分由計算機自動運算而得到，能最大限度地減小生成文件的大小。任務 1萬花筒1. 理解形狀補間動畫的概念，掌握形狀補間動畫的分類及構成元素特點。2. 能制作形狀補間動畫。本任務是一個簡單的形狀補間動畫實例，根據(jù)兩個關鍵幀上對象的形狀、大小、顏色、位置的變化，利用形狀補間產(chǎn)生奇妙的變形效果，如圖所示。通過此任務的學習，理解形狀補間動畫的概念，掌握形狀補間動畫的制作方法。萬花筒效果圖一、形狀補間動畫

2、的概念在一個關鍵幀中繪制一個形狀，在另一個關鍵幀中修改形狀或者新繪制一個形狀，F(xiàn)lash 根據(jù)兩個關鍵幀中形狀的值來創(chuàng)建的動畫稱為形狀補間動畫。二、形狀補間動畫的構成元素形狀補間動畫可以實現(xiàn)兩個圖形之間顏色、大小、形態(tài)及位置的相互變化。形狀補間動畫的元素必須是形狀，如果是元件、文字、位圖或者群組對象，可以執(zhí)行【修改】【分離】命令，或者按【Ctrl+B】組合鍵將其打散，轉換為形狀，再創(chuàng)建形狀補間動畫。三、制作形狀補間動畫的步驟（1）在“時間軸”面板上動畫開始播放的關鍵幀中繪制動畫的起始形狀，在動畫結束處插入空白關鍵幀，繪制動畫的結束形狀。（2）單擊起始幀，在“屬性”面板上單擊“補間”旁邊的三角形

3、按鈕，從列表中選擇“形狀”，即可創(chuàng)建形狀補間動畫，如圖所示。此時，“時間軸”面板上的背景變?yōu)榈G色，在起始幀和結束幀之間增加了一個長箭頭，如圖所示。形狀補間形狀補間動畫的“時間軸”面板四、形狀補間動畫“屬性”面板形狀補間動畫的“屬性”面板如圖所示。其中常用選項的含義如下。（1）緩動：用于設定對象在變化過程中是加速還是減速。（2）混合：用于設置中間幀形狀變化的過渡形式，包括分布式和角形兩項。形狀補間動畫的“屬性”面板五、形狀補間動畫的分類（1）不可控的形狀補間動畫：用于比較簡單的形變效果。（2）可控制的形狀補間動畫：可通過添加形狀提示制作出較為精確的形變效果。關于添加形狀提示的方法，將在本項目任

4、務 2 中做詳細介紹。1. 創(chuàng)建影片文檔新建一個 Flash 文檔，設置舞臺大小為 550 像素 400 像素，背景為白色。2. 創(chuàng)建背景層將圖層 1 重命名為“背景”，將素材庫中名為“萬花筒 .jpg”的圖片導入舞臺中，鎖定“背景”圖層。3. 制作形狀變形效果（1）新建“形狀變形”影片剪輯元件。在元件編輯界面中，使用橢圓工具 在第 1 幀中繪制一個無筆觸顏色、填充顏色為紅色（#FF0000）的圓，效果如圖所示。（2）在第 20 幀插入關鍵幀，在圓的周圍繪制八個小圓，按照如圖所示的位置擺放。第 1 幀圖形第 20 幀圖形（3）在第 40 幀插入空白關鍵幀，使用多角星形工具 繪制一個多角星形，設

5、置筆觸顏色為無，填充顏色為藍色（#0000FF），樣式為星形，邊數(shù)為 16，頂點大小為 0.30，如圖所示。效果如圖所示。工具選項第 40 幀圖形（4）在第 60 幀插入關鍵幀，在星形周圍繪制八個小星形，按照如圖所示的位置擺放。（5）選擇第 1 幀，單擊鼠標右鍵，從快捷菜單中選擇“復制幀”選項，再選擇第80 幀，單擊鼠標右鍵，從快捷菜單中選擇“粘貼幀”選項，將第 1 幀中的圖形復制到第 80 幀中，使形狀經(jīng)過一系列變化之后又回到初始狀態(tài)。第 60 幀圖形（6）在“時間軸”面板中單擊圖層 1，圖層 1 中的所有幀被選中，在“屬性”面板中設置補間類型為形狀。影片剪輯元件制作完畢，按【Enter】鍵

6、可以測試形狀變形效果。操作演示4. 將影片剪輯元件拖動到舞臺返回到場景中，新建圖層 2，重命名為“萬花筒”，從“庫”面板中多次拖動“形狀變形”影片剪輯元件到舞臺中，調整它們的位置與大小，在“屬性”面板中調整它們的顏色，效果如圖所示。萬花筒最終效果5. 測試保存執(zhí)行【控制】【測試影片】命令，觀察動畫效果。如果滿意，執(zhí)行【文件】【保存】命令，將文件保存為“萬花筒 .f la”。任務 2七十二變1. 能熟練制作形狀補間動畫。2. 掌握添加形狀提示的方法和技巧，能通過添加形狀提示控制變形過程。本任務利用形狀補間動畫，實現(xiàn)孫悟空變桃、桃變魚、魚變小廟的過程，如圖所示。通過此任務的學習，掌握形狀補間動畫的

7、制作方法，學會使用形狀提示來調整形狀變化。七十二變效果圖一、形狀提示的作用在“起始形狀”和“結束形狀”中添加相對應的“參考點”，使 Flash 軟件在計算變形過渡時依據(jù)一定的規(guī)則進行，從而有效地控制變形過程。二、添加形狀提示的方法（1）選擇形狀補間的第一個關鍵幀。（2）執(zhí)行【修改】【形狀】【添加形狀提示】命令，在該幀的形狀上就會增加一個帶字母的紅色“提示圓圈”，相應地在結束幀形狀中也會出現(xiàn)一個“提示圓圈”，效果如圖所示。起始幀結束幀（3）用鼠標分別拖動兩個“提示圓圈”，放置在形狀的邊緣上。首先調整起始幀上的“提示圓圈”到起始形狀的邊緣上，然后調整結束幀上的“提示圓圈”到結束形狀的邊緣上，“提示

8、圓圈”變?yōu)榫G色。此時，起始幀上的“提示圓圈”變?yōu)辄S色，效果如圖所示。（4）重復步驟（1）（3），添加其他形狀提示。調整起始幀上的“提示圓圈調整結束幀上的“提示圓圈”三、添加形狀提示的技巧（1）形狀提示可以連續(xù)添加，最多可以添加 26 個。（2）將形狀提示從形狀的左上角開始按逆時針順序擺放，可以使形狀提示更有效。（3）形狀提示的擺放位置要符合邏輯順序。（4）形狀提示要在形狀的邊緣上才能起作用。（5）要刪除所有的形狀提示，可執(zhí)行【修改】【形狀】【刪除所有提示】命令。如果要刪除單個形狀提示，可選中要刪除的形狀提示，單擊鼠標右鍵，從快捷菜單中選擇“刪除提示”選項即可。1. 創(chuàng)建影片文檔新建一個Flas

9、h文檔，設置舞臺大小為 1 200 像素400 像素，背景為灰綠色（#437862）。2. 創(chuàng)建背景層將圖層 1 重命名為“背景”，將素材庫中名為“七十二變 .jpg”的圖片導入舞臺中，在第 90 幀插入幀，鎖定“背景”圖層。3. 復制“七十二變庫 .fla”中的元件（1）打開素材文件“七十二變庫 .f la”，對“庫”面板中的“孫悟空”“魚”“小廟”元件執(zhí)行“復制”命令后，粘貼到新文檔的“庫”面板中。（2）打開項目一任務 3“桃子熟了 .f la”文件，對“庫”面板中的“桃子帶金箍棒”元件執(zhí)行“復制”命令后，粘貼到新文檔的“庫”面板中，重命名為“桃子”元件。4. 制作七十二變效果（1）新建“

10、變化”圖層，選擇第 1 幀，將“庫”面板中的“孫悟空”元件拖動到舞臺左側，放置位置如圖所示。按【Ctrl+B】組合鍵將其打散。第 1 幀的孫悟空（2）在第 10 幀插入關鍵幀，“孫悟空”元件大小不變，保持 10 幀，使動畫開始時有個緩沖。在第 18 幀插入關鍵幀，將“孫悟空”縮小，擺放到桃樹枝上，效果如圖所示。第 18 幀的孫悟空（3）選中第 10 幀，在“屬性”面板中選擇形狀補間類型，創(chuàng)建形狀補間動畫。拖動時間滑塊，可以看到兩個關鍵幀之間的形狀動畫，效果如圖所示。形狀補間中的孫悟空（4）經(jīng)過觀察，發(fā)現(xiàn)中間過渡的形狀變化不夠理想，需要添加形狀提示進行動畫的后期修補。選中第 10 幀，執(zhí)行【修改

11、】【形狀】【添加形狀提示】命令，在“孫悟空”的中部出現(xiàn)一個紅色 a 標記。使用鼠標拖動標記到“孫悟空”的頭部，效果如圖所示。第 10 幀的形狀提示（5）選中第 18 幀，將“孫悟空”中部的紅色 a 標記拖動到“孫悟空”頭部，此時紅色 a 標記變?yōu)榫G色 a 標記，效果如圖所示。第 18 幀的形狀提示（6）同樣的方法，再添加兩個形狀提示，分別放置在“孫悟空”的左腳邊和右腳邊，效果如圖所示。添加三個形狀提示（7）在第 23 幀插入關鍵幀，使變小的“孫悟空”保持 5 幀的緩沖。在第 30 幀插入空白關鍵幀，從“庫”面板中將“桃子”元件拖動到舞臺中，放置在“孫悟空”站立的位置上，如圖所示，按【Ctrl+

12、B】組合鍵將其打散。選中第 23 幀，在“屬性”面板中創(chuàng)建形狀補間動畫。桃子的位置（8）在第 40 幀插入關鍵幀，使“桃子”元件保持 10 幀的緩沖。在第 55 幀插入空白關鍵幀，從“庫”面板中將“魚”元件拖動到舞臺中，放置在背景中小河的位置上，如圖所示，按【Ctrl+B】組合鍵將其打散。選中第 40 幀，在“屬性”面板中創(chuàng)建形狀補間動畫。魚的位置（9）在第 65 幀插入關鍵幀，使“魚”元件保持 10 幀的緩沖。在第 80 幀插入空白關鍵幀，從“庫”面板中將“小廟”元件拖動到舞臺中，放置在背景中山前的位置上，如圖所示，按【Ctrl+B】組合鍵將其打散。選中第 65 幀，在“屬性”面板中創(chuàng)建形狀

13、補間動畫。小廟的位置操作演示（10）在第 90 幀插入幀，使“小廟”元件保持 10 幀的緩沖。至此，七十二變效果制作完成。5. 測試保存執(zhí)行【控制】【測試影片】命令，觀察動畫效果。如果滿意，執(zhí)行【文件】【保存】命令，將文件保存為“七十二變 .f la”。任務 3運動的足球1. 理解動畫補間動畫的概念，掌握動畫補間動畫構成元素的特點。2. 掌握動畫補間動畫的制作方法，能應用旋轉、緩動值制作動畫。本任務是制作一個簡單的動畫補間動畫，利用兩個關鍵幀上足球位置的變化，實現(xiàn)足球撞擊樹樁的運動，效果如圖所示。通過此任務的學習，理解動畫補間動畫的概念，掌握動畫補間動畫的制作方法，以及旋轉、緩動值的應用技巧。

14、運動的足球效果圖一、動畫補間動畫的概念在一個關鍵幀上放置一個元件，然后在另一個關鍵幀上改變元件的大小、顏色、位置、透明度等，F(xiàn)lash 根據(jù)這兩個關鍵幀之間的值創(chuàng)建的動畫稱為動畫補間動畫。二、動畫補間動畫的構成元素構成動畫補間動畫的元素可以是影片剪輯元件、圖形元件、按鈕、文字、位圖、組合等，但不能是形狀。如果是形狀，需要轉換為“元件”或組合后方可使用。三、制作動畫補間動畫的步驟（1）在“時間軸”面板上動畫開始播放的地方創(chuàng)建一個關鍵幀，并在關鍵幀中設置一個元件，在動畫結束的地方創(chuàng)建另一個關鍵幀，修改該元件的屬性。（2）選擇起始幀，在“屬性”面板上單擊“補間”旁邊的三角形按鈕，在彈出的下拉列表中選

15、擇“動畫”，即可創(chuàng)建動畫補間動畫，如圖所示。動畫補間此時，“時間軸”面板的背景色變?yōu)樗{紫色，在起始幀和結束幀之間有一個長箭頭，如圖所示。動畫補間動畫的“時間軸”面板四、動畫補間動畫的“屬性”面板動畫補間動畫的“屬性”面板如圖所示。其中各選項的說明如下。動畫補間動畫的“屬性”面板（1）縮放：如果想實現(xiàn)組或實例的尺寸變化，選擇這個復選框。（2）緩動：制作的補間動畫一般都是勻速運動。（3）旋轉：用于設定物體的旋轉運動。（4）調整到路徑：使對象沿指定的路徑運動，并隨著路徑的改變而相應地改變角度。（5）同步：使動畫在場景中首尾連續(xù)循環(huán)播放。（6）貼緊：使對象在沿路徑運動時可以自動捕捉路徑。1. 創(chuàng)建影片

16、文檔新建一個 Flash 文檔，設置舞臺大小為 550 像素 400 像素，背景為白色（#FFFFFF）。2. 創(chuàng)建背景層（1）將圖層 1 重命名為“背景”，將素材庫中名為“運動的足球 .jpg”的圖片導入到舞臺中，如圖所示。（2）在“背景”圖層的第 64 幀處插入幀，鎖定“背景”圖層。背景層3. 繪制“足球”元件使用橢圓工具 、多角星形工具 、線條工具 、選擇工具 、顏料桶工具 等繪制如圖所示的“足球”元件。足球操作演示4. 讓足球運動起來（1）返回到場景中，新建圖層，重命名為“足球”，使用選擇工具 ，將“庫”面板中的“足球”元件拖動到舞臺的左側，位置如圖所示。（2）在“足球”圖層的第 30

17、 幀處插入關鍵幀，將足球拖動到舞臺的右側，剛碰到樹樁處，如圖所示。左側足球的位置右側足球的位置（3）選中第 1 幀，在“屬性”面板中設置補間類型為動畫，緩動值為 -30，旋轉為順時針 2 次，讓足球從左向右做加速運動，如圖所示。動畫補間動畫的“屬性”面板（足球撞擊樹樁）（4）在第 32 幀處插入關鍵幀，選擇任意變形工具 ，將變形中心點移動到右側的中心位置，縮放到如圖所示的大小。足球變形（5）使用選擇工具 復制第 30 幀，粘貼到第 34 幀處。（6）復制第 1 幀，粘貼到第 64 幀處。（7）選中第 34 幀，在“屬性”面板中設置補間類型為動畫，緩動值為 30，旋轉為逆時針 2 次，讓足球從右

18、向左做減速運動，如圖所示。動畫補間動畫的“屬性”面板（足球從樹樁彈回）（8）運動的足球最終效果如圖所示。運動的足球最終效果操作演示5. 測試保存執(zhí)行【控制】【測試影片】命令，觀察動畫效果。如果滿意，執(zhí)行【文件】【保存】命令，將文件保存為“運動的足球 .f la”。任務 4荷蘭風情熟練掌握動畫補間動畫的制作方法，能熟練應用圖形元件、影片剪輯元件等制作動畫補間動畫。本任務是一個動畫補間動畫實例，通過動畫補間動畫制作風車旋轉、郁金香長大、云飄動和太陽發(fā)光效果，如圖所示。通過此任務的學習，熟練掌握動畫補間動畫的制作方法，以及圖形元件、影片剪輯元件在動畫中的應用。荷蘭風情效果圖在通常情況下，動畫補間動畫

19、是通過改變兩個關鍵幀上元件的大小、顏色、位置、透明度等來實現(xiàn)動畫效果的。此外，動畫補間動畫還可以使對象做旋轉運動。方法是：在“屬性”面板中選擇動畫補間后，再選擇“旋轉”項中的“順時針”或“逆時針”選項，如圖所示。動畫補間動畫的“屬性”面板關于旋轉選項的說明如下。（1）無：對象不旋轉。（2）自動：對象在進行旋轉時以最小的角度旋轉一次。（3）順時針：指定對象按順時針方向旋轉，右邊文本框中的數(shù)字表示對象旋轉的次數(shù)，如圖所示。順時針旋轉 1 次（4）逆時針：指定對象按逆時針方向旋轉，右邊文本框中的數(shù)字表示對象旋轉的次數(shù)，如圖所示。逆時針旋轉 1 次1. 創(chuàng)建影片文檔新建一個 Flash 文檔，設置舞臺

20、大小為 550 像素 400 像素，背景為藍色（#0000FF）。2. 繪制背景層（1）將圖層 1 重命名為“背景”，選擇矩形工具 ，設置筆觸顏色為無，填充類型為線性，左側顏色滑塊為藍色（#0099FF），右側顏色滑塊為白色（#FFFFFF），在舞臺中繪制藍白漸變矩形，使用漸變變形工具 調整漸變方向，使用“對齊”面板調整矩形與舞臺相匹配，如圖所示。繪制藍白漸變矩形（2）使用橢圓工具 ，設置筆觸顏色為黑色（#000000），筆觸高度為 1，填充顏色為綠色（#009900），在舞臺中繪制橢圓，制作背景綠地，如圖所示。（3）選擇矩形工具 ，在工作區(qū)空白處繪制一個筆觸顏色為黑色、無填充顏色的矩形，使用

21、“對齊”面板將矩形與舞臺匹配，如圖所示。繪制矩形繪制橢圓（4）使用選擇工具 選擇黑色輪廓外的草地，按【Delete】鍵刪除，同時刪除黑色矩形輪廓，背景繪制完成，效果如圖所示，鎖定背景層。操作演示背景3. 制作“云飄動”影片剪輯元件（1）新建“白云”圖形元件，使用橢圓工具 在元件編輯區(qū)中繪制白云，如圖所示。白云（2）新建“云飄動”影片剪輯元件，選中圖層 1 第 1 幀，將“白云”元件拖動到元件編輯區(qū)，在第 120 幀插入關鍵幀，在“屬性”面板中將 X軸參數(shù)增加 600 像素，使白云從舞臺左側向舞臺右側移動，并移出舞臺。選中第 1 幀，在“屬性”面板中創(chuàng)建動畫補間動畫，如圖所示?！皩傩浴泵姘?.

22、制作“太陽發(fā)光”影片剪輯元件（1）新建“太陽光輝”圖形元件，使用橢圓工具 ，設置筆觸顏色為無，填充類型為放射狀，左側顏色滑塊為黃色（#FFFF00），Alpha 值為 100%，右側顏色滑塊也為黃色（#FFFF00），Alpha 值為 0%，繪制圓，如圖所示。太陽光輝（2）新建“太陽發(fā)光”影片剪輯元件，使用橢圓工具 在圖層 1 繪制一個無筆觸顏色、填充顏色為黃色（#FFFF00）的圓，在第 50 幀插入幀。（3）新建圖層 2，將其移到圖層 1 的下方，從“庫”面板中將“太陽光輝”元件拖動到元件編輯區(qū)，使其與圖層 1 中的圓對齊，如圖所示。在第 25 幀和 50 幀處分別插入關鍵幀，選擇第 25

23、 幀的圓，執(zhí)行【修改】【變形】【縮放和旋轉】命令，在彈出的對話框中設置“縮放”值為 150%，將其放大到 150%。選中圖層 2 所有幀，在“屬性”面板中創(chuàng)建動畫補間動畫。太陽5. 制作“花生長”影片剪輯元件（1）打開項目一任務 4“美麗的家園 .f la”文件，對“庫”面板中的“郁金香”元件執(zhí)行“復制”命令后，粘貼到新文檔的“庫”面板中。（2）新建“花生長”影片剪輯元件，從“庫”面板中將“郁金香”圖形元件拖動到元件編輯區(qū)，使用任意變形工具 將中心點調整到下端中部，在第 40幀插入關鍵幀。選擇第 1 幀的郁金香，按住【Shift】鍵將其縮小，如圖所示。選中第 1 幀，在“屬性”面板中創(chuàng)建動畫補間動畫。第 1 幀的郁金香（3）選