flash基礎(chǔ)動畫全解課件

1、Flash cs5 動畫制作案例教程 第五模塊 基礎(chǔ)動畫第1頁，共35頁。認識計算機案例10 頑皮的猴子逐幀動畫 案例11 神奇的夜晚補間形狀 案例12 秋天來了認識元件案例13 童年的記憶傳統(tǒng)補間動畫案例14 海底世界補間動畫第2頁，共35頁。案例10 頑皮的猴子逐幀動畫圖5-1 “頑皮的猴子”效果圖 案例10 頑皮的猴子逐幀動畫案例描述 用逐幀動畫打造頑皮的猴子效果，如圖5-1所示。第3頁，共35頁。案例10 頑皮的猴子逐幀動畫操作步驟 1、啟動CS5，新建一個3.0文檔，保存為“頑皮的猴子”2、把“圖層1”改名為“椰子樹”，執(zhí)行“文件導(dǎo)入導(dǎo)入到舞臺”，選擇“椰子樹”3、復(fù)制7棵椰子樹4、

2、使用“選擇工具”和“變形”按鈕，將“縮放寬度”、“縮放高度”均設(shè)為50%，調(diào)整位置如圖第4頁，共35頁。案例10 頑皮的猴子逐幀動畫5、選擇右下方的椰子樹，執(zhí)行“修改變形水平翻轉(zhuǎn)”6、新建一個圖層，命名為“猴子”7、執(zhí)行“文件導(dǎo)入導(dǎo)入到舞臺”，選擇“猴子1”，放到合適位置8、在“猴子”圖層的第10幀單擊右鍵選擇“空白關(guān)鍵幀”（或按F7），執(zhí)行“文件導(dǎo)入導(dǎo)入到舞臺”，選擇“猴子2”，導(dǎo)入舞臺。9、用同樣的方法在第20幀、30幀分別導(dǎo)入“猴子3”、“猴子4”10、調(diào)整“猴子1”到“猴子4”四張圖片的大小和位置11、按Ctrl+S保存，按Ctrl+Enter測試第5頁，共35頁。案例分析利用“變形工

3、具”對提供的椰子樹和猴子的圖片進行一系列的調(diào)整。制作關(guān)鍵幀，利用“變形工具”和“編輯多個幀”逐幀調(diào)整猴子的位置和大小，實現(xiàn)頑皮猴子 的效果。 5.1 時間軸的基本操作案例10 頑皮的猴子逐幀動畫1. 時間軸的基本操作(1) 更改時間軸中的幀顯示第6頁，共35頁。(2) 繪圖紙外觀通常情況，在某個時間舞臺上僅顯示動畫序列的一個幀。為便于定位和編輯逐幀動畫，可以在舞臺上一次查看多個幀，播放頭下面的幀彩色不透明顯示，而其它幀是暗淡透明顯示。 在舞臺上同時查看動畫的多個幀。 控制繪圖紙外觀的顯示。 更改繪圖紙標記的5種形式。2. 播放頭 播放頭是在“時間軸”面板上用于指示動畫播放的指針。要轉(zhuǎn)到某幀，可

4、單擊該幀在時間軸標題中的位置，或?qū)⒉シ蓬^拖到所需的位置。 要使時間軸以當(dāng)前幀為中心，單擊時間軸底部的“幀居中”按鈕。 3圖層 圖層可以幫助組織文檔中的插圖，可以在圖層上繪制和編輯對象，而不會影響其它圖層上的對象。在圖層上沒有內(nèi)容的舞臺區(qū)域中，可以透過該圖層看到下面的圖層。對圖層的相關(guān)操作 （1）創(chuàng)建圖層和圖層文件夾（2）編輯圖層（3）查看圖層案例10 頑皮的猴子逐幀動畫第7頁，共35頁。4幀。幀分為普通幀、關(guān)鍵幀和過渡幀三種類型，可以對幀進行如下修改。 （1）選擇幀（2）插入幀（3）復(fù)制或粘貼幀（4）刪除幀（5）移動關(guān)鍵幀及其內(nèi)容（6）將關(guān)鍵幀轉(zhuǎn)換為幀案例10 頑皮的猴子逐幀動畫第8頁，共35

5、頁。5.2 創(chuàng)建逐幀動畫 逐幀動畫是一種常見的動畫手法，其原理是在“連續(xù)的關(guān)鍵幀”中分解動畫動作，即每一幀中的內(nèi)容不同，連續(xù)播放而成動畫。由于逐幀動畫的幀序列內(nèi)容不同，不僅增加制作負擔(dān)而且最終輸出的文件量也很大，但逐幀動畫的優(yōu)勢也很明顯，其與電影播放模式相似，很適合于表現(xiàn)細膩的動畫，如3D效果、人物或動物急劇轉(zhuǎn)身等等效果。案例10 頑皮的猴子逐幀動畫1逐幀動畫的概念和在時間幀上的表現(xiàn)形式2創(chuàng)建逐幀動畫的方法 用導(dǎo)入的靜態(tài)圖片建立逐幀動畫第9頁，共35頁。案例11神奇的夜晚補間形狀案例描述制作補間形狀動畫，實現(xiàn)從圖5-2到圖5-3的變形效果 圖5-2案例11神奇的夜晚補間形狀圖5-3第10頁，共

6、35頁。案例11神奇的夜晚補間形狀案例分析初步認識形狀補間的應(yīng)用對象。熟悉繪制簡單形狀。學(xué)習(xí)“翻轉(zhuǎn)幀”功能的用法。操作步驟 1、啟動CS5，打開“神奇的夜晚”，“圖層1”命名為“黑夜背景”。新建一個圖層，命名為“月亮”。選擇“橢圓工具”，筆觸顏色設(shè)為無，填充顏色設(shè)為黃色：FFFF33，單擊“月亮”圖層的第1幀，在舞臺左上角畫一個圓，如圖。鎖定“黑夜背景”圖層第11頁，共35頁。案例11神奇的夜晚補間形狀2、在“月亮”圖層的第20幀單擊右鍵選擇“插入關(guān)鍵幀”命令，使用“選擇工具”改變月亮的形狀，如上圖3、繼續(xù)調(diào)整月亮的形狀，將月亮的兩段調(diào)尖。將鼠標移動到月亮的上尖角處，按Ctrl 鍵同時拖動鼠標

7、，調(diào)整月亮的兩端如下圖第12頁，共35頁。案例11神奇的夜晚補間形狀4、單擊“月亮”圖層的第20幀，將月亮圖形拖動舞臺右邊，如圖15、將鼠標置于“月亮”圖層第120幀的位置上，單擊右鍵，選擇“創(chuàng)建補間形狀”如圖26、在“月亮”圖層第25幀處單擊右鍵，選擇“插入幀”命令，或按F5，如下圖3圖2圖1圖3第13頁，共35頁。案例11神奇的夜晚補間形狀7、選擇“月亮”圖層的第125幀，單擊右鍵，選擇“復(fù)制幀”，在第26幀處單擊右鍵，選擇“粘貼幀”命令，如下圖所示8、選擇“月亮”圖層的第2650幀，單擊右鍵，選擇“翻轉(zhuǎn)幀”命令。9、按Ctrl+S保存文件，按Ctrl+Enter測試第14頁，共35頁。5

8、.4 補間形狀制作1補間形狀的特點（1）組成元素（2）在時間軸面板上的表現(xiàn)形式 案例11神奇的夜晚補間形狀圖5-4形狀補間在時間軸上的表現(xiàn) 2補間形狀的制作方法 （1）準備工作（2）創(chuàng)建補間形狀圖5-5變形的過程 第15頁，共35頁。5.5 使用形狀提示1形狀提示的作用案例11神奇的夜晚補間形狀圖5-6起始形狀和結(jié)束形狀中的形狀提示2使用形狀提示應(yīng)遵循的準則 在復(fù)雜的補間形狀中，需要創(chuàng)建中間形狀然后再進行補間，而不要只定義起始和結(jié)束的 形狀。確保形狀提示是符合邏輯的。例如，在一個三角形中使用三個形狀提示，則在原始三角形和要補間的三角形中它們的順序應(yīng)相同。按逆時針順序從形狀的左上角開始放置形狀提

9、示，補間的效果最好。 3使用形狀提示的方法第16頁，共35頁。圖5-7起始形狀提示 圖5-8結(jié)束形狀提示 圖5-9提示點分布案例11神奇的夜晚補間形狀第17頁，共35頁。4查看所有形狀提示5刪除形狀提示案例11神奇的夜晚補間形狀第18頁，共35頁。案例12 秋天來了認識元件案例12 秋天來了認識元件案例描述使用元件，創(chuàng)建如圖5-10所示的不停擺動的小草的效果。圖5-10“秋天來了”動畫效果 第19頁，共35頁。案例分析通過調(diào)用影片剪輯元件，從而體會到元件的在動畫制作中起到的作用。通過改變元件實例的“色調(diào)”、“大小”等屬性，練習(xí)元件屬性的初步設(shè)置。案例12 秋天來了認識元件5.6元件的分類與創(chuàng)建

10、1.元件概念圖5-11“庫”中的元件第20頁，共35頁。2.元件的分類在FLASH中，有“圖形元件”、“影片剪輯元件”和“按鈕元件”三種元件類型。3.創(chuàng)建元件（1）直接創(chuàng)建影片剪輯元件 案例12 秋天來了認識元件圖5-12創(chuàng)建元件對話框 圖5-13元件編輯模式 練一練 創(chuàng)建“小草”影片剪輯 繪制小草圖形制作擺動的小草第21頁，共35頁。4.轉(zhuǎn)換元件（1）將現(xiàn)有對象轉(zhuǎn)換為影片剪輯（2）將現(xiàn)有對象轉(zhuǎn)換為按鈕元件（3）將現(xiàn)有對象轉(zhuǎn)換為圖形元件5.編輯元件通過以下方式編輯元件：（1）在當(dāng)前位置編輯元件案例12 秋天來了認識元件圖5-14“在當(dāng)前位置編輯”的顯示效果（2）在新窗口中編輯元件 （3）在元件

11、編輯模式下編輯元件圖5-15元件編輯模式窗口第22頁，共35頁。案例12 秋天來了認識元件5.7使用庫面板1.“庫”面板概述圖5-16“庫”面板2.調(diào)整庫面板大小3.更改列寬4.排序庫項目 5.重命名庫項目6.復(fù)制庫中的元件第23頁，共35頁。7.使用文件夾8.更新庫中的導(dǎo)入文件9.刪除庫項目10.使用庫項目 圖5-17打開文件夾 圖5-18“更新”面板圖 11.使用公用庫 案例12 秋天來了認識元件第24頁，共35頁。案例12 秋天來了認識元件圖5-19將“公用庫”項目buttons.fla拖入到當(dāng)前庫5.8.元件的實例1. 創(chuàng)建實例 圖5-20用同一元件創(chuàng)建的多個小草實例第25頁，共35頁

12、。案例12 秋天來了認識元件2. 設(shè)置實例的屬性為實例命名更改實例類型 更改實例顏色應(yīng)用混合模式 交換實例5.9 影片剪輯與圖形元件的關(guān)系1.二者的關(guān)系在Flash的元件中，圖形元件和影片剪輯元件都可以包含動畫片段，二者也可以相互嵌套、轉(zhuǎn)換類型和相互交換實例，但它們之間也存在很多的差別 2.驗證方法圖5-21實例的屬性和時間軸第26頁，共35頁。案例描述 制作傳統(tǒng)補間動畫，實現(xiàn)照片的透明度及形狀的變化如圖5-22所示。案例13童年的記憶傳統(tǒng)補間動畫圖5-22童年的記憶第27頁，共35頁。案例13童年的記憶傳統(tǒng)補間動畫案例分析制作傳統(tǒng)補間動畫實現(xiàn)照片的透明度及形狀的變化。在傳統(tǒng)補間動畫“屬性面板

13、”中設(shè)置順時針旋轉(zhuǎn)效果。5.10 傳統(tǒng)補間動畫制作傳統(tǒng)補間動畫也是Flash中非常重要的表現(xiàn)手段之一，與“形狀補間動畫”不同的是，補間動畫的對象必需是“元件”或“成組對象”。運用補間動畫，可以設(shè)置元件的大小、位置、顏色、透明度、旋轉(zhuǎn)等屬性。1補間動畫的特點 （1）組成元素 （2）在時間軸面板上的表現(xiàn)形式 圖5-23 創(chuàng)建補間動畫 圖5-24 補間沒有成功 第28頁，共35頁。案例13童年的記憶傳統(tǒng)補間動畫2補間形狀和補間動畫的區(qū)別 3補間動畫的制作方法5.11 補間動畫的屬性1補間動畫屬性面板圖5-25 “自定義緩入/緩出”對話框 圖5-26設(shè)置動畫的緩入/緩出值 第29頁，共35頁。案例13

14、童年的記憶傳統(tǒng)補間動畫2.位移動畫圖5-27第1幀花朵位置 圖5-28第30幀花朵位置3.透明度漸變動畫 圖5-29第1幀星星的位置第30頁，共35頁。案例14海底世界補間動畫案例14海底世界補間動畫案例描述制作補間動畫，實現(xiàn)“魚”實例位置與旋轉(zhuǎn)方向的變化如圖5-30所示。圖5-30海底世界第31頁，共35頁。案例14海底世界補間動畫案例分析制作補間動畫實現(xiàn)“魚”圖形實例位置與旋轉(zhuǎn)方向的變化。了解補間動畫與傳統(tǒng)補間動畫的區(qū)別。5.12補間動畫制作 補間動畫功能強大，且易于創(chuàng)建。通過補間動畫可對補間的動畫進行最大程度的控制?？裳a間的對象類型包括影片剪輯、圖形和按鈕元件以及文本字段創(chuàng)建補間動畫（1

15、）創(chuàng)建位置補間動畫（2）創(chuàng)建非位置屬性的補間動畫2.編輯補間的運動路徑圖5-31更改補間對象的位置 圖5-32使用選取工具編輯路徑 第32頁，共35頁。案例14海底世界補間動畫圖5-32更改貝塞爾控制點 圖5-33使用“任意變形”工具編輯運動路徑 3.使用動畫編輯器制作動畫動畫編輯器是對補間動畫進行傾斜、旋轉(zhuǎn)或制作緩動效果的窗口如圖5-34所示. 第33頁，共35頁。案例14海底世界補間動畫5.13 補間動畫與傳統(tǒng)補間動畫的區(qū)別傳統(tǒng)補間使用關(guān)鍵幀，關(guān)鍵幀是顯示對象的新實例的幀。補間動畫只能有一個與之關(guān)聯(lián)的對象實例，使用屬性關(guān)鍵幀而不是關(guān)鍵幀補間動畫在補間范圍內(nèi)由一個目標對象組成。補間動畫與傳統(tǒng)

16、補間都只允許對特定類型的對象進行補間。若應(yīng)用補間動畫則在創(chuàng)建補間時會將所有不允許的對象類型轉(zhuǎn)換為影片剪輯元件，而傳統(tǒng)補間動畫會把不允許的對象類型轉(zhuǎn)換為圖形元件。補間動畫會將文本視為可補間的類型，而不會將文本對象轉(zhuǎn)換為影片剪輯。傳統(tǒng)補間會將文本轉(zhuǎn)換為形狀補間。在補間動畫范圍上不允許幀腳本。傳統(tǒng)補間允許幀腳本。補間目標上的任何對象腳本都無法在補間動畫范圍的進程中更改。能夠在時間軸中對補間動畫范圍進行拉伸和調(diào)整大小，并將它們視為單個對象。傳統(tǒng)補間在時間軸中可通過移動關(guān)鍵幀的位置調(diào)整傳統(tǒng)補間的范圍。若要在補間動畫范圍中選擇單個幀，必需按住 Ctrl鍵單擊幀。對于傳統(tǒng)補間動畫，緩動可應(yīng)用于補間內(nèi)關(guān)鍵幀之間地幀組。對于補間動畫，緩動可應(yīng)用于補間動畫范圍的整個長度。若要僅對補間動畫的特定幀應(yīng)用緩動，則需要創(chuàng)建自定義緩動曲線。