FlashCS6第7章基本動(dòng)畫的制作課件

1、第7章基本動(dòng)畫的制作 本章簡介:在Flash CS6動(dòng)畫的制作過程中，時(shí)間軸和幀起到了關(guān)鍵性的作用。本章將介紹動(dòng)畫中幀和時(shí)間軸的使用方法及應(yīng)用技巧。讀者通過學(xué)習(xí)要了解并掌握如何靈活地應(yīng)用幀和時(shí)間軸，并根據(jù)設(shè)計(jì)需要制作出豐富多彩的動(dòng)畫效果。第7章基本動(dòng)畫的制作 本章簡介:課堂學(xué)習(xí)目標(biāo)了解動(dòng)畫和幀的基本概念掌握逐幀動(dòng)畫的制作方法掌握形狀補(bǔ)間動(dòng)畫的制作方法掌握傳統(tǒng)補(bǔ)間動(dòng)畫的制作方法熟悉測(cè)試動(dòng)畫的方法了解Deco工具的使用方法課堂學(xué)習(xí)目標(biāo)了解動(dòng)畫和幀的基本概念7.1幀與時(shí)間軸 課堂案例制作美好回憶動(dòng)畫動(dòng)畫中幀的概念 幀的顯示形式 時(shí)間軸面板 繪圖紙（洋蔥皮）功能 在時(shí)間軸面板中設(shè)置幀 7.1幀與時(shí)間軸

2、 課堂案例制作美好回憶動(dòng)畫使用“刷子”工具，繪制光標(biāo)圖形；使用“文本”工具，添加文字；使用“翻轉(zhuǎn)幀”命令，將幀進(jìn)行翻轉(zhuǎn)；使用“影片剪輯”元件，制作小貓動(dòng)畫。 效果圖 7.1.1課堂案例制作美好回憶動(dòng)畫使用“刷子”工具，繪制光標(biāo)圖形；使用“文本”工具，添加文字；醫(yī)學(xué)證明，人類具有視覺暫留的特點(diǎn)，即人眼看到物體或畫面后，在1/24秒內(nèi)不會(huì)消失。利用這一原理，在一幅畫沒有消失之前播放下一幅畫，就會(huì)給人造成流暢的視覺變化效果。所以，動(dòng)畫就是通過連續(xù)播放一系列靜止畫面，給視覺造成連續(xù)變化的效果。在Flash CS6中，這一系列單幅的畫面就叫幀，它是Flash CS6動(dòng)畫中最小時(shí)間單位里出現(xiàn)的畫面。每秒鐘

3、顯示的幀數(shù)叫幀率，如果幀率太慢就會(huì)給人造成視覺上不流暢的感覺。所以，按照人的視覺原理，一般將動(dòng)畫的幀率設(shè)為24幀/秒。7.1.2動(dòng)畫中幀的概念 醫(yī)學(xué)證明，人類具有視覺暫留的特點(diǎn)，即人眼看到物體或畫面后，在7.1.3幀的顯示形式 空白關(guān)鍵幀 在時(shí)間軸中，白色背景帶有黑圈的幀為空白關(guān)鍵幀。 關(guān)鍵幀 在時(shí)間軸中，灰色背景帶有黑點(diǎn)的幀為關(guān)鍵幀。 動(dòng)作補(bǔ)間幀 在時(shí)間軸中，帶有黑色圓點(diǎn)的第1幀和最后1幀為關(guān)鍵幀，中間藍(lán)色背景帶有黑色箭頭的幀為補(bǔ)間幀。 形狀補(bǔ)間幀 在時(shí)間軸中，帶有黑色圓點(diǎn)的第1幀和最后1幀為關(guān)鍵幀，中間綠色背景帶有黑色箭頭的幀為補(bǔ)間幀。7.1.3幀的顯示形式 空白關(guān)鍵幀 7.1.3幀的顯示

4、形式 包含動(dòng)作語句的幀 在時(shí)間軸中，第1幀上出現(xiàn)一個(gè)字母“a”，表示這1幀中包含了使用“動(dòng)作”面板設(shè)置的動(dòng)作語句。 幀標(biāo)簽 在時(shí)間軸中，第1幀上出現(xiàn)一只紅旗，表示這一幀的標(biāo)簽類型是名稱；第1幀上出現(xiàn)兩條綠色斜杠，表示這一幀的標(biāo)簽類型是注釋；第1幀上出現(xiàn)一個(gè)金色的錨，表示這一幀的標(biāo)簽類型是錨記 。 7.1.3幀的顯示形式 包含動(dòng)作語句的幀 “時(shí)間軸”面板由圖層面板和時(shí)間軸組成。 “時(shí)間軸”面板7.1.4時(shí)間軸面板 “時(shí)間軸”面板由圖層面板和時(shí)間軸組成。 “時(shí)間軸”面板7.1一般情況下，F(xiàn)lash CS6的舞臺(tái)只能顯示當(dāng)前幀中的對(duì)象。如果希望在舞臺(tái)上出現(xiàn)多幀對(duì)象以幫助當(dāng)前幀對(duì)象的定位和編輯，F(xiàn)la

5、sh CS6提供的繪圖紙（洋蔥皮）功能可以將其實(shí)現(xiàn)。7.1.5繪圖紙（洋蔥皮）功能 “幀居中”按鈕：單擊此按鈕，播放頭所在幀會(huì)顯示在時(shí)間軸的中間位置。 “繪圖紙外觀”按鈕：單擊此按鈕，時(shí)間軸標(biāo)尺上出現(xiàn)繪圖紙的標(biāo)記顯示，在標(biāo)記范圍內(nèi)的幀上的對(duì)象將同時(shí)顯示在舞臺(tái)中。 一般情況下，F(xiàn)lash CS6的舞臺(tái)只能顯示當(dāng)前幀中的對(duì)象。7.1.5繪圖紙（洋蔥皮）功能 “繪圖紙外觀輪廓”按鈕：單擊此按鈕，時(shí)間軸標(biāo)尺上出現(xiàn)繪圖紙的標(biāo)記顯示，在標(biāo)記范圍內(nèi)的幀上的對(duì)象將以輪廓線的形式同時(shí)顯示在舞臺(tái)中。 “編輯多個(gè)幀”按鈕：單擊此按鈕，繪圖紙標(biāo)記范圍內(nèi)的幀上的對(duì)象將同時(shí)顯示在舞臺(tái)中，可以同時(shí)編輯所有的對(duì)象。 “修改繪

6、圖紙標(biāo)記”按鈕：單擊此按鈕，彈出其下拉菜單。 7.1.5繪圖紙（洋蔥皮）功能 “繪圖紙外觀輪廓”按鈕：7.1.6在時(shí)間軸面板中設(shè)置幀 插入幀 選擇“插入 時(shí)間軸 幀”命令，或按F5鍵，可以在時(shí)間軸上插入一個(gè)普通幀；選擇“插入 時(shí)間軸 關(guān)鍵幀”命令，或按F6鍵，可以在時(shí)間軸上插入一個(gè)關(guān)鍵幀；選擇“插入 時(shí)間軸 空白關(guān)鍵幀”命令，可以在時(shí)間軸上插入一個(gè)空白關(guān)鍵幀。 選擇幀 選擇“編輯 時(shí)間軸 選擇所有幀”命令，選中時(shí)間軸中的所有幀。單擊要選的幀，幀變?yōu)樯钌?。用鼠?biāo)選中要選擇的幀，再向前或向后進(jìn)行拖曳，其間鼠標(biāo)經(jīng)過的幀全部被選中。按住Ctrl鍵的同時(shí)，用鼠標(biāo)單擊要選擇的幀，可以選擇多個(gè)不連續(xù)的幀。按

7、住Shift鍵的同時(shí)，用鼠標(biāo)單擊要選擇的兩個(gè)幀，這兩個(gè)幀中間的所有幀都被選中。 7.1.6在時(shí)間軸面板中設(shè)置幀 插入幀 7.1.6在時(shí)間軸面板中設(shè)置幀 移動(dòng)幀 選中一個(gè)或多個(gè)幀，按住鼠標(biāo)，移動(dòng)所選幀到目標(biāo)位置。在移動(dòng)過程中，如果按住Alt鍵，會(huì)在目標(biāo)位置上復(fù)制出所選的幀。 刪除幀 用鼠標(biāo)右鍵單擊要?jiǎng)h除的幀，在彈出的菜單中選擇“清除幀”命令。選中要?jiǎng)h除的普通幀，按Shift+F5組合鍵，刪除幀。選中要?jiǎng)h除的關(guān)鍵幀，按Shift+F6組合鍵，刪除關(guān)鍵幀。 7.1.6在時(shí)間軸面板中設(shè)置幀 移動(dòng)幀 課堂案例制作小松鼠動(dòng)畫幀動(dòng)畫 逐幀動(dòng)畫簡單形狀補(bǔ)間動(dòng)畫應(yīng)用變形提示創(chuàng)建傳統(tǒng)補(bǔ)間色彩變化動(dòng)畫測(cè)試動(dòng)畫“影片

8、瀏覽器”面板的功能7.2動(dòng)畫的創(chuàng)建課堂案例制作小松鼠動(dòng)畫7.2動(dòng)畫的創(chuàng)建使用“導(dǎo)入到舞臺(tái)”命令，導(dǎo)入松鼠的序列圖；使用“時(shí)間軸”面板，制作逐幀動(dòng)畫；使用“創(chuàng)建傳統(tǒng)補(bǔ)間”命令，制作松鼠運(yùn)動(dòng)效果；使用“變形”面板，改變圖形的大小。效果圖 7.2.1課堂案例制作小松鼠動(dòng)畫使用“導(dǎo)入到舞臺(tái)”命令，導(dǎo)入松鼠的序列圖；使用“時(shí)間軸”面板第1幀 7.2.2幀 畫 第5幀 第10幀 第15幀 時(shí)間軸面板中設(shè)置關(guān)鍵幀的狀態(tài) 第1幀 7.2.2幀 畫 第5幀 第10幀 第1幀 7.2.3逐幀動(dòng)畫 第2幀 第3幀 第4幀 時(shí)間軸面板中設(shè)置關(guān)鍵幀的狀態(tài) 第1幀 7.2.3逐幀動(dòng)畫 第2幀 第3幀 7.2.4簡單形狀補(bǔ)

9、間動(dòng)畫 第1幀 第3幀 第5幀 第7幀 第10幀時(shí)間軸面板中設(shè)置關(guān)鍵幀的狀態(tài) 7.2.4簡單形狀補(bǔ)間動(dòng)畫 第1幀 使用變形提示，可以讓原圖形上的某一點(diǎn)變換到目標(biāo)圖形的某一點(diǎn)上。應(yīng)用變形提示可以制作出各種復(fù)雜的變形效果。 系統(tǒng)自動(dòng)生成的圖形變化過程 7.2.5應(yīng)用變形提示 在提示點(diǎn)的作用下生成的圖形變化過程 使用變形提示，可以讓原圖形上的某一點(diǎn)變換到目標(biāo)圖形的某一點(diǎn)上第1幀中圖形效果 7.2.6創(chuàng)建傳統(tǒng)補(bǔ)間在時(shí)間軸面板中設(shè)置動(dòng)作補(bǔ)間動(dòng)畫 最后1幀中圖形效果 每幀中的圖形變化效果 第1幀中圖形效果 7.2.6創(chuàng)建傳統(tǒng)補(bǔ)間在時(shí)間軸面板中在不同的關(guān)鍵幀中，玫瑰花的顏色變化效果 7.2.7色彩變化動(dòng)畫

10、時(shí)間軸面板中的設(shè)置 在不同的關(guān)鍵幀中，玫瑰花的顏色變化效果 7.2.7色彩變?cè)谥谱魍瓿蓜?dòng)畫后，要對(duì)其進(jìn)行測(cè)試。可以通過多種方法來測(cè)試動(dòng)畫。 7.2.8測(cè)試動(dòng)畫 應(yīng)用控制器面板 選擇“窗口 工具欄 控制器”命令，彈出“控制器”面板。 應(yīng)用播放命令 選擇“控制 播放”命令，或按Enter鍵，可以對(duì)當(dāng)前舞臺(tái)中的動(dòng)畫進(jìn)行瀏覽。在“時(shí)間軸”面板中，可以看見播放頭在運(yùn)動(dòng)，隨著播放頭的運(yùn)動(dòng)，舞臺(tái)中顯示出播放頭所經(jīng)過的幀上的內(nèi)容。 在制作完成動(dòng)畫后，要對(duì)其進(jìn)行測(cè)試。可以通過多種方法來測(cè)試動(dòng)畫7.2.8測(cè)試動(dòng)畫 應(yīng)用測(cè)試影片命令 選擇“控制 測(cè)試影片”命令，或按Ctrl+Enter組合鍵，可以進(jìn)入動(dòng)畫測(cè)試窗口，

11、對(duì)動(dòng)畫作品的多個(gè)場景進(jìn)行連續(xù)的測(cè)試。 應(yīng)用測(cè)試場景命令 選擇“控制 測(cè)試場景”命令，或按Ctrl+Alt+Enter組合鍵，可以進(jìn)入動(dòng)畫測(cè)試窗口，測(cè)試當(dāng)前舞臺(tái)窗口中顯示的場景或元件中的動(dòng)畫。7.2.8測(cè)試動(dòng)畫 應(yīng)用測(cè)試影片命令 “影片瀏覽器”面板，可以將Flash CS6文件組成樹型關(guān)系圖，方便用戶進(jìn)行動(dòng)畫分析、管理或修改。在其中可以查看每一個(gè)元件，熟悉幀與幀之間的關(guān)系，查看動(dòng)作腳本等，也可快速查找需要的對(duì)象。選擇“窗口 影片瀏覽器”命令，彈出“影片瀏覽器”面板。 “影片瀏覽器”面板7.2.9“影片瀏覽器”面板的功能 “影片瀏覽器”面板，可以將Flash CS6文件組成樹型關(guān)系7.3 Deco工具創(chuàng)建藤蔓藤蔓屬性7.3 Deco工具創(chuàng)建藤蔓選擇“Deco”工具 ，將鼠標(biāo)移到舞臺(tái)上，鼠標(biāo)指針變成 形狀，在舞臺(tái)上單擊鼠標(biāo)左鍵，即可看到藤蔓生長的效果，在生長的藤蔓圖形上再次單擊鼠標(biāo)左鍵，即可停止當(dāng)前藤蔓圖形的生長。過程圖 7.3.1創(chuàng)建藤蔓選擇“Deco”工具 ，將鼠標(biāo)移到舞臺(tái)上，鼠標(biāo)指針變成 形狀選擇“Deco”工具 ，選擇“窗口 屬性”命令，彈出Deco工具的“屬性”面板。在Deco工具“屬性”面板中可以更改藤蔓的屬性?！皩傩浴泵姘?.3.2藤蔓屬性選擇“Deco”工具 ，選擇“窗口 屬性”命令，彈出De使用“文本”工具，輸入文