1、(中職）Flash CS3動畫設計案例教程項目五ppt課件項目5制作簡單的動畫任務1方變圓形狀補間任務2自由翱翔動作補間任務3小球與彈簧形狀+動作綜合 學習結束任務1方變圓(形狀補間)任務描述任務要求： 完成一個從方形變成圓形的動畫，在形狀變化的同時，其內部的數字也會從“1”變化成“2”，如下圖所示。任務1方變圓(形狀補間)任務分析1)建立兩個圖層： 圖層1用以實現方形到圓形的變化； 圖層2用以實現數字“1”到數字“2”的變化。 返回任務1方變圓(形狀補間)任務分析2)補間方法： 圖層1中的方形和圓形是手動繪制的簡單幾何形狀，使用形狀補間來實現變化。 圖層2中的數字“1”和“2”都是文本對象，

2、在實現變化前應將其“打散”成為形狀對象，才能使用形狀補間來實現變化。 返回任務1方變圓(形狀補間)工作步驟2、建立數字“1”到“2”的形狀補間動畫 1）插入新圖層，并命名為“1變2” 。2）選擇文本工具，并設置定體、字號等屬性。3）輸入數字“1”，并打散。 4）在適當的位置插入補間起始關鍵幀。5）在適當的位置插入補間結束關鍵幀。6）在補間結束關鍵幀輸入數字“2” ，并打散。7）設置形狀補間。8）測試補間動畫（Ctrl+Enter)。返回任務1方變圓(形狀補間)工作步驟3、修整完善數字變化的形狀補間 1）選中“1變2”圖層的第12幀 。2）單擊“修改”菜單“形狀”“添加形狀提示”，在數字“1”中

3、添加形狀提示 。 3）重復同樣的操作4次，在數字“1”中添加形狀提示符 。 4）分別在第12幀和第24幀中，將形狀提示符移動到如下圖所示的位置。 返回任務1方變圓(形狀補間)工作步驟4、測試，保存。 1）測試最終效果（Ctrl+Enter)。 2）進行適當修正，再測試。 3）測試無誤后保存文件（Ctrl+s)。4）任務完成。返回任務1方變圓(形狀補間)相關知識與技能1形狀補間的概念 在一個關鍵幀中繪制一個形狀，然后在另一個關鍵幀中更改該形狀或繪制另一個形狀，Flah根據二者之間幀的值或形狀來創建的動畫稱為“形狀補間動畫”。 形狀補間動畫可以實現兩個圖形之間顏色、形狀、大小、位置的相互變化。使用

4、的元素多為繪畫出來的“幾何形狀”。如果使用圖形元件、按鈕、文字，則必先將其“分離”，即將其轉換為“形狀”后，才能創建形狀補間動畫。返回任務1方變圓(形狀補間)相關知識與技能2創建形狀補間動畫的方法 如果創建形狀補間動畫失敗，時間軸面板的背景色仍會變為淡綠色，但在起始幀和結束幀之間會出現一條長長的虛線，如下圖所示。補間失敗補間成功 同時，在“屬性”面板上會出現提示按鈕。單擊此按鈕會彈出如下圖所示對話框。此時，應檢查關鍵幀是否丟失或者關鍵幀的內容是否為“形狀”。返回任務1方變圓(形狀補間)相關知識與技能3運用繪圖紙功能編輯圖形 使用“時間軸”面板中提供的繪圖紙功能，可以在編輯動畫的同時查看多個幀中

5、的動畫內容。在制作逐幀動畫和補間動畫時，利用該功能可以對各關鍵幀中圖形的大小和位置進行更好的定位，并可參考相仿關鍵幀中的圖形，對當前幀中的圖形進行修改和調整。繪圖紙外觀繪圖紙外觀輪廓編輯多個幀修改繪圖紙標記返回任務1方變圓(形狀補間)相關知識與技能4使用形狀提示添加形狀提示 單擊形狀補間動畫的起始關鍵幀，單擊“修改”菜單“形狀”“添加形狀提示”命令，該幀的形狀里面就會增加一個 。相應地，在結束幀形狀中也會出現一個同樣符號。 分別在起始和結束關鍵幀中，用鼠標單擊并拖動這個“提示圓圈”到適當位置。返回任務1方變圓(形狀補間)相關知識與技能4使用形狀提示刪除形狀提示 如果要刪除所有的形狀提示，可單擊

6、“修改”菜單“形狀”“刪除所有提示”命令。 刪除單個形狀提示，可用鼠標右鍵單擊它，在彈出菜單中選擇“刪除提示”。返回任務2自由翱翔 (動作補間)任務描述任務要求： 一只雄鷹從遠方的叢山中翱翔而來。先在畫面中從右向左漸飛漸近，而后折向右方，降落在畫面的右下角。如下圖所示。 任務分析三個對象： 一幅風景圖片，一只水平方向飛行的雄鷹，一只下降的雄鷹。二個圖層： 圖層1顯示風景圖片，作為背景； 圖層2用以實現雄鷹的飛翔過程。遠近變化： 雄鷹的飛行由遠而近。在制作中，應注意其大小和位置的變化要協調。 任務2自由翱翔 (動作補間)返回工作步驟1、導入素材到庫1）新建一個空白文檔。2）單擊“文件”菜單“導入

7、”“導入到庫”，打開“導入到庫”對話框。導入“自由翱翔”的w01.jpg、y01.gif、y02.gif三個文件。3）在“庫”面板中對元件進行重新命名操作。任務2自由翱翔 (動作補間)返回工作步驟2、制作“自由飛翔”動畫 1）設置背景畫面：選中圖層1的第1幀，從“庫”面板中將W01.jpg拖動到舞臺。并設置大小和位置。2）將背景延展到第136幀。 3）插入圖層2，用于放置飛翔的雄鷹。 4）選中第1幀，將“庫”中的“水平飛翔”元件拖放到舞臺中，并調整好大小、位置、飛行方向。 任務2自由翱翔 (動作補間)返回工作步驟2、制作“自由飛翔”動畫 5）在圖層2的第76幀，插入關鍵幀。并調整圖層中雄鷹元件

8、的大小、位置。 6）在第77幀中插入關鍵幀，修改雄鷹的飛行姿勢為從左到右。 7）在圖層2的第110幀，插入關鍵幀。并調整雄鷹元件的大小和位置。任務2自由翱翔 (動作補間)返回工作步驟2、制作“自由飛翔”動畫 8）在圖層2的第111幀中插入空白關鍵幀，將“庫”中的“降落”元件拖放到舞臺中。調整其大小和位置。9）在圖層2的第136幀中插入關鍵幀。移動雄鷹位置到畫面右下角，并調整其大小。 任務2自由翱翔 (動作補間)返回工作步驟2、制作“自由飛翔”動畫 10）選中圖層2的第1幀，在“屬性”面板中設置補間方式為“動畫”補間，設置緩動值為-100。11）用同樣的方法，在第77幀、第111幀兩處設置“動畫

9、”補間。 12）測試動畫效果（Ctrl+Enter） 。 13）保存文件（Ctrl+S）。 任務2自由翱翔 (動作補間)返回相關知識與技能1、動作補間動畫的概念 在一個關鍵幀上放置一個元件或組合對象，然后在另一個關鍵幀改變這個對象的大小、顏色、位置、透明度等屬性，Flash根據二個幀之間屬性值的變化創建的動畫稱為動作補間動畫（或稱動畫補間動畫）。 通過為元件、組合對象、文字等創建動作補間，可改變這些對象的位置、尺寸、旋轉或傾斜。此外，通過改變實例與文本的顏色，還可創建顏色漸變動畫或淡入、淡出動畫。任務2自由翱翔 (動作補間)返回相關知識與技能1、動作補間動畫的概念在使用動作補間動畫時要注意：

10、構成動作補間動畫的元素是元件，包括影片剪輯、圖形元件、按鈕、文字，也可以是位圖、組合的對象等。 如果動畫的對象是形狀，要實現動作補間，需要把形狀進行“組合”或者轉換成“元件”后方可。 如果創建補間動作動畫后，又改變了兩個關鍵幀之間的幀數，或者在某個關鍵幀中移動了群組或實例，Flash將自動重新生成兩個關鍵幀之間的過渡幀。任務2自由翱翔 (動作補間)返回相關知識與技能2、創建動作補間動畫的方法 創建動作補間動畫時，先在時間軸面板上動畫開始處設置一個起始關鍵幀，并設置一個對象，一幀中只能放一個對象。在動畫結束處設置一個結束關鍵幀，并設置該對象新的屬性。然后使用以下兩種方法之一設置補間動畫： 單擊開

11、始幀，在“屬性”面板上單擊“補間”右邊的下拉列表，在彈出的列表項中選擇“動畫”，即可。 選擇要創建動畫的第1個關鍵幀，單擊右鍵，在彈出的菜單中選擇“創建補間動畫”。任務2自由翱翔 (動作補間)返回相關知識與技能2、創建動作補間動畫的方法 創建動作補間動畫后，時間軸面板的背景色變為淡綠色，在起始幀和結束幀之間有一個長長的箭頭。 如果創建動作補間動畫失敗，在起始幀和結束幀之間會出現一條長長的虛線，在“屬性”面板上會出現提示按鈕，表示關鍵幀中存在未組合的形狀，或在一個幀中包含多個組或元件。此時不會發生補間動畫。 動畫補間至少需要兩個關鍵幀。當然，也可以是多個關鍵幀，創建首尾銜接多段動畫。 返回任務2

12、自由翱翔 (動作補間)任務3小球與彈簧(形狀補間+動作補間)任務描述任務要求： 小球從上方向下方的彈簧落下，在彈簧的彈力作用下又彈向上方。如此反復不斷的“下落上彈”過程。 任務分析有三個對象： 一個小球，一只垂真放置的彈簧，彈簧下小球的陰影。建立三個圖層： 圖層1用以顯示小球的陰影； 圖層2用以顯示彈簧的伸縮變化； 圖層3用以顯示小球的上下運動。任務3小球與彈簧(形狀補間+動作補間)返回任務分析小球的運動過程： 下落時，由慢而快；上升時，由快而慢的。彈簧的運動過程： 壓縮時，由快而慢的，伸張時由慢而快的。陰影的變化過程： 小球下落時，陰影由大而小，由淡而濃的；小球上升時相反。任務3小球與彈簧(

13、形狀補間+動作補間)返回工作步驟1、制作對象1）新建一個空白文檔。2）在圖層1之上新建兩個圖層圖層2、圖層3。給這三個圖層命名為：陰影、彈簧、小球。如下圖所示。任務3小球與彈簧(形狀補間+動作補間)返回工作步驟1、制作對象3）選擇“橢圓工具”。在“屬性”面板中設置筆觸色和填充色。 4）在舞臺上方，水平居中的位置畫一個正圓。并設置好填充效果。任務3小球與彈簧(形狀補間+動作補間)返回工作步驟1、制作對象5）選擇“矩形工具”，在“屬性”面板中設置筆觸顏色為“黑色”，填充顏色為“無色”。在“彈簧”圖層的第1幀繪制一個長方形。6）繪制長方形的對角線。再刪除相應的邊，制作如下圖所示形狀。任務3小球與彈簧

14、(形狀補間+動作補間)7）通過復制，修改，得到彈簧形狀。 組合這些線條后，置于小球下方。返回工作步驟1、制作對象8）選擇“陰影”圖層的第1幀，選擇“橢圓工具” 。設置筆觸顏色為“無” ，填充色為“放射狀” 。并設置放射狀的初始值和終止值均為“#666666”，初始顏色的Alpha為100%，終止顏色的Alpha為0%。9）在彈簧下方畫一個橢圓。適當調整填充區域，得到小球的垂直投影。將此投影轉換成元件。任務3小球與彈簧(形狀補間+動作補間)返回工作步驟1、制作對象10）將小球投影轉換成元件。11）適當調整橢圓位置，保證它與彈簧、小球三者的中心在同一垂直線上。如下圖所示。任務3小球與彈簧(形狀補間

15、+動作補間)返回工作步驟2、創建補間動畫1）在時間軸中建立關鍵幀并完成補間動畫。如下圖所示。2）各關鍵幀中的對象如下圖所示。任務3小球與彈簧(形狀補間+動作補間)第1幀第12幀第18幀第24 幀第36 幀返回工作步驟3、設置變速運動1）選中“小球”圖層中的第1幀，在“屬性”面板中設置緩動值為-100。可實現小球下落速度由慢到快。2）同樣的方法設置“小球”圖層中第12幀緩動值為100，第18幀緩動值為-100，第24幀緩動值為100。任務3小球與彈簧(形狀補間+動作補間)3）同樣的方法設置“彈簧”圖層中第12幀緩動值為100，第18幀緩動值為-100，第24幀緩動值為100。4）同樣的方法設置“

16、陰影”圖層中第1幀緩動值為-100，第12幀緩動值為100，第18幀緩動值為-100，第24幀緩動值為100。返回工作步驟4、設置陰影顏色深淺的變化1）選中“陰影”圖層第1幀中的橢圓，在“屬性”面板中設置顏色為“Alpha”，值為20%。2）設置“陰影”圖層第12幀中的橢圓顏色為“Alpha”，值為70%。任務3小球與彈簧(形狀補間+動作補間)3）設置“陰影”圖層第18幀中的橢圓顏色為“Alpha”，值為100%。4）設置“陰影”圖層第24幀中的橢圓顏色為“Alpha”，值為70%。5）設置“陰影”圖層第36幀中的橢圓顏色為“Alpha”，值為20%。返回工作步驟5、設置幀頻 通過改變動畫的幀

17、頻來改變小球的下落速度。幀頻越大，每秒播放的幀數就越多，即播放速度越快。可用以下方法之一：任務3小球與彈簧(形狀補間+動作補間)單擊“修改”菜單“文檔”，打開“文檔屬性”對話框。在“幀頻”數值框中輸入24fps或48fps。如右圖所示。工作步驟5、設置幀頻 通過改變動畫的幀頻來改變小球的下落速度。幀頻越大，每秒播放的幀數就越多，即播放速度越快。可用以下方法之一：任務3小球與彈簧(形狀補間+動作補間)單擊舞臺的空白區域，在“屬性”面板的“幀頻”數值框中輸入24fps或48fps。如下圖所示。返回相關知識與技能1、影響補間效果的兩個屬性 “緩動”選項：設置其值后，形狀補間動畫會隨之發生相應的變化。

18、 數值在-1到-100的負值之間，動畫運動的速度從慢到快，朝運動結束的方向加速度補間； 數值在1到100的正值之間，動畫運動的速度從快到慢，朝運動結束的方向減慢補間； 默認情況下，數值為0，保持勻速運動。任務3小球與彈簧(形狀補間+動作補間)返回相關知識與技能1、影響補間效果的兩個屬性 “混合”選項：它支持二個子選項： “角形”選項創建的動畫中間形狀會保留有明顯的角和直線，適合于具有銳化轉角和直線的混合形狀； “分布式”選項創建的動畫中間形狀較平滑，形狀變化得更加自然。任務3小球與彈簧(形狀補間+動作補間)返回相關知識與技能2、設置對象的顏色樣式 選擇要改變顏色屬性的元件，然后在“屬性”面板的“顏色”下拉列表框中選擇相應的選項進行設置即可，該下拉列表中包括了“無”、“亮度”、“色調”、“Alpha“和“高級”五個選項，其含義如下：。 任務3小球與彈簧(形狀補間+動作補間) 亮度：該選項可用來調整元件的相對亮度和暗度。取值范圍為-100l00%，其中，100%為白色，-100%為黑色，默認值為0。用戶可直接輸入數字或通過拖曳滑桿來調整。返回相關知識與技能2、設置對象的顏色樣式 色調：該選項可用來增加某種色調，可用顏色拾取器，也可直接輸入紅、綠和藍三種顏色值。使用