flash教程之骨骼動(dòng)畫

1、項(xiàng)目七 創(chuàng)建高級(jí)動(dòng)畫,創(chuàng)建路徑引導(dǎo)動(dòng)畫 創(chuàng)建骨骼動(dòng)畫 場(chǎng)景和動(dòng)畫預(yù)設(shè),任務(wù)二 創(chuàng)建路徑引導(dǎo)動(dòng)畫,任務(wù)說明,路徑引導(dǎo)動(dòng)畫也是Flash常用的動(dòng)畫制作手法之一，利用它可以使對(duì)象沿制作者繪制的引導(dǎo)線移動(dòng)（引導(dǎo)線的作用與補(bǔ)間動(dòng)畫中的運(yùn)動(dòng)路徑相似，但只能作用于傳統(tǒng)補(bǔ)間動(dòng)畫）。本任務(wù)將帶領(lǐng)讀者學(xué)習(xí)創(chuàng)建路徑引導(dǎo)動(dòng)畫的方法。,預(yù)備知識(shí),路徑引導(dǎo)動(dòng)畫由“引導(dǎo)層”和“被引導(dǎo)層”組成。制作路徑引導(dǎo)動(dòng)畫時(shí)，需要在“引導(dǎo)層”上繪制引導(dǎo)對(duì)象運(yùn)動(dòng)的引導(dǎo)線（利

2、用鋼筆、鉛筆、線條、橢圓或矩形工具等繪制的線條），然后將“被引導(dǎo)層”上的對(duì)象吸附到引導(dǎo)線上（“被引導(dǎo)層”中必須是傳統(tǒng)補(bǔ)間動(dòng)畫）。播放動(dòng)畫時(shí)，“引導(dǎo)層”上的內(nèi)容不會(huì)被顯示。,,路徑引導(dǎo)動(dòng)畫,下面通過一個(gè)簡(jiǎn)單實(shí)例，介紹路徑引導(dǎo)動(dòng)畫的創(chuàng)建方法。,,,新建圖層并拖入“飛機(jī)”圖形元件,創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫,1.打開素材文檔，在“背景”圖層上方新建一個(gè)圖層并將其命名為“飛機(jī)”，然后將“庫”面板中的“飛機(jī)”圖形元件拖到“飛機(jī)”圖層舞臺(tái)右側(cè)外 。,2.在所

3、有圖層的第40幀插入普通幀，在“飛機(jī)”圖層的第40幀插入關(guān)鍵幀，然后將“飛機(jī)”圖層第40幀中的“飛機(jī)”元件實(shí)例移動(dòng)到舞臺(tái)左側(cè)外，并在“飛機(jī)”圖層第1幀與第40幀之間創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫 。,,創(chuàng)建“引導(dǎo)層,繪制引導(dǎo)線,,3.在“飛機(jī)”圖層的圖層名稱上右擊，在彈出的快捷菜單中選擇“添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層”菜單，在“飛機(jī)”圖層上方創(chuàng)建一個(gè)引導(dǎo)層，此時(shí)“飛機(jī)”圖層自動(dòng)變?yōu)楸灰龑?dǎo)層 。,4.使用“鉛筆工具”和“選擇工具”在“引導(dǎo)層”上繪制一條引導(dǎo)線。,

4、,,,將變形中心點(diǎn)對(duì)齊到引導(dǎo)線,勾選“調(diào)整到路徑”復(fù)選項(xiàng),5.使用“選擇工具”調(diào)整“飛機(jī)”圖層第1幀和第40幀中“飛機(jī)”元件實(shí)例的位置，使其變形中心點(diǎn)對(duì)齊到引導(dǎo)線 。,6.選中“飛機(jī)”圖層的第1幀，然后在“屬性”面板中勾選“調(diào)整到路徑”復(fù)選項(xiàng) 。,調(diào)整到路徑：勾選該復(fù)選項(xiàng)，可使“被引導(dǎo)層”上的對(duì)象在沿引導(dǎo)線移動(dòng)的同時(shí)，還可以根據(jù)引導(dǎo)線的切線方向調(diào)整其自身的方向（如果不勾選該復(fù)選項(xiàng)，對(duì)象在沿引導(dǎo)線運(yùn)動(dòng)時(shí)只是平移，與引導(dǎo)線的切線方向沒有關(guān)系

5、）。對(duì)齊：勾選該復(fù)選項(xiàng)后，在將對(duì)象對(duì)齊到引導(dǎo)線時(shí)，可使對(duì)象的變形中心點(diǎn)更容易吸附到引導(dǎo)線上。,任務(wù)實(shí)施——制作翩翩起舞的蝴蝶動(dòng)畫,下面通過制作翩翩起舞的蝴蝶動(dòng)畫效果，學(xué)習(xí)路徑引導(dǎo)動(dòng)畫的應(yīng)用。,制作思路,,翩翩起舞的蝴蝶,本案例主要是通過在兩個(gè)圖層上創(chuàng)建蝴蝶由下向上移動(dòng)的傳統(tǒng)補(bǔ)間動(dòng)畫，再在這兩個(gè)圖層上添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層，并在引導(dǎo)層上繪制引導(dǎo)線，使蝴蝶按照引導(dǎo)線的路徑進(jìn)行運(yùn)動(dòng)來實(shí)現(xiàn)。本例具體操作可參考本書配套視頻“7-2.avi” 。,任

6、務(wù)三 創(chuàng)建骨骼動(dòng)畫,任務(wù)說明,骨骼動(dòng)畫是利用反向運(yùn)動(dòng)工具模擬人體或動(dòng)物骨骼關(guān)節(jié)的運(yùn)動(dòng)。Flash CS5提供的反向運(yùn)動(dòng)工具包括“骨骼工具”和“綁定工具”，本任務(wù)將帶領(lǐng)讀者學(xué)習(xí)它們的使用方法。,預(yù)備知識(shí),一、“骨骼工具”的使用,1．為分離對(duì)象創(chuàng)建骨骼動(dòng)畫,利用“骨骼工具”在分離對(duì)象中添加骨骼后，可以通過旋轉(zhuǎn)或移動(dòng)添加的骨骼來創(chuàng)建骨骼動(dòng)畫。下面通過一個(gè)簡(jiǎn)單實(shí)例，介紹為分離對(duì)象創(chuàng)建骨骼動(dòng)畫的方法。,,繪制矩形,1. 新建一個(gè)Flash（Ac

7、tionScript 3.0）文檔，使用“矩形工具”在舞臺(tái)中繪制一個(gè)矩形 。,,創(chuàng)建第1個(gè)IK骨骼,2.單擊“圖層1”的第1幀選中舞臺(tái)中的矩形，然后單擊工具箱中的“骨骼工具”或者按快捷鍵【M】，將光標(biāo)移動(dòng)到矩形左側(cè)邊緣處，此時(shí)按住鼠標(biāo)左鍵并向右拖動(dòng)，即可在矩形中創(chuàng)建一個(gè)IK（反向運(yùn)動(dòng)學(xué)）骨骼，同時(shí)在“時(shí)間軸”面板中自動(dòng)生成了一個(gè)“骨架_1”圖層，并且矩形自動(dòng)移動(dòng)到“骨架_1”圖層中 。,,創(chuàng)建第2個(gè)和第3個(gè)IK骨骼,3.將光標(biāo)移動(dòng)到第一

8、個(gè)IK骨骼的尾部，按住鼠標(biāo)左鍵并拖動(dòng)，以上一級(jí)IK骨骼的尾端為起點(diǎn)創(chuàng)建下一級(jí)IK骨骼；利用相同的操作再創(chuàng)建1個(gè)IK骨骼 。,,調(diào)整第20幀中矩形的形狀,4.在所有圖層的第40幀處插入普通幀，然后將播放頭跳轉(zhuǎn)到第20幀處，并使用“選擇工具”拖動(dòng)“骨架_1”圖層第20幀中骨骼的相應(yīng)關(guān)節(jié)，調(diào)整其形狀，此時(shí)在“骨架_1”圖層的第20幀處會(huì)自動(dòng)插入一個(gè)姿勢(shì)關(guān)鍵幀。,5.播放頭跳轉(zhuǎn)到第40幀處，并拖動(dòng)“骨架_1”圖層第40幀中的骨骼，調(diào)整其形狀，至

9、此實(shí)例就完成了，按【Enter】鍵可在舞臺(tái)中預(yù)覽動(dòng)畫。,2．為元件實(shí)例創(chuàng)建骨骼動(dòng)畫,利用“骨骼工具”可以將一系列元件實(shí)例通過骨骼連接在一起，然后通過旋轉(zhuǎn)或移動(dòng)相應(yīng)的骨骼或元件實(shí)例來創(chuàng)建不同效果的骨骼動(dòng)畫。下面通過一個(gè)簡(jiǎn)單實(shí)例進(jìn)行說明。,,打開素材文檔,1.打開素材文檔，會(huì)在舞臺(tái)中看到一個(gè)吊車圖形，它的各個(gè)部分都是由圖形元件組成的 。,,,創(chuàng)建第1個(gè)IK骨骼,創(chuàng)建第2個(gè)IK骨骼,2.選擇工具箱中的“骨骼工具”或者按快捷鍵【M】，將光標(biāo)移

10、動(dòng)到支架的底部，然后按住鼠標(biāo)左鍵并拖動(dòng)到與吊桿結(jié)合的部位，創(chuàng)建一個(gè)IK骨骼 。,3.以上一個(gè)IK骨骼的尾端為起點(diǎn)按住鼠標(biāo)左鍵并拖動(dòng)到吊桿右側(cè)與掛鉤的結(jié)合處，創(chuàng)建第2個(gè)IK骨骼 。,,,調(diào)整第15幀中的吊車形狀,調(diào)整第30幀中的吊車形狀,4.在所有圖層的第40幀插入普通幀，然后將播放頭跳轉(zhuǎn)到第15幀處，選擇“選擇工具”，在按住【Shift】鍵的同時(shí)分別拖動(dòng)舞臺(tái)中吊車的吊桿和掛鉤，調(diào)整其形狀。,5.將播放頭跳轉(zhuǎn)到第15幀處，在按住【Shif

11、t】鍵的同時(shí)使用“選擇工具”分別拖動(dòng)吊車的吊桿和掛鉤，調(diào)整其形狀。至此實(shí)例就完成了，按【Enter】鍵可在舞臺(tái)中預(yù)覽動(dòng)畫。,二、“綁定工具”的使用,“綁定工具”的使用方法可參考以下操作。,,,顯示形狀控制點(diǎn),向選定骨骼添加形狀控制點(diǎn),1.使用“骨骼工具”為分離對(duì)象添加IK骨骼后，單擊選中工具箱中的“綁定工具”或者按快捷鍵【Z】，然后單擊選中任意骨骼，被選中的骨骼會(huì)以紅色高亮顯示，連接到該骨骼的形狀控制點(diǎn)會(huì)以黃色高亮顯示 。,2.若要向選

12、定的骨骼添加控制點(diǎn)（即將該控制點(diǎn)連接到選定的骨骼），可在按住【Shift】鍵的同時(shí)單擊未加亮顯示的控制點(diǎn) 。,為形狀控制點(diǎn)添加骨骼,3.若要從骨骼中刪除控制點(diǎn)（即刪除骨骼與某個(gè)或某幾個(gè)控制點(diǎn)的連接），可在按住【Ctrl】鍵的同時(shí)單擊黃色加亮顯示的控制點(diǎn),4.使用“綁定工具”單擊選中某個(gè)形狀控制點(diǎn)后，選定控制點(diǎn)會(huì)以紅色高亮顯示，已連接到該控制點(diǎn)的骨骼會(huì)以黃色高亮顯示，在按住【Shift】鍵的同時(shí)單擊骨骼，可為選定控制點(diǎn)添加骨骼（即將該控制

13、點(diǎn)連接到某個(gè)骨骼） 。,5.若要從選定的控制點(diǎn)中刪除骨骼，可在按住【Ctrl】鍵的同時(shí)單擊以黃色高光顯示的骨骼。,任務(wù)實(shí)施——制作滑板男孩動(dòng)畫,下面通過制作滑板男孩動(dòng)畫，學(xué)習(xí)骨骼動(dòng)畫的的實(shí)際應(yīng)用。,制作思路,,滑板男孩,打開素材文檔后，進(jìn)入“滑板少年”圖形元件的編輯窗口，利用“骨骼工具”為滑板男孩添加IK骨骼，然后插入普通幀，并通過拖動(dòng)各幀中男孩身體各部分，創(chuàng)建男孩和滑板搖擺的骨骼動(dòng)畫；最后返回主場(chǎng)景，通過創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫，制作滑板少年

14、由遠(yuǎn)到近的動(dòng)畫效果。本例具體操作可參考本書配套視頻“7-3.avi” 。,任務(wù)四 場(chǎng)景和動(dòng)畫預(yù)設(shè),任務(wù)說明,在Flash中，利用場(chǎng)景可以組織復(fù)雜動(dòng)畫；利用“動(dòng)畫預(yù)設(shè)”面板可為元件實(shí)例添加Flash預(yù)設(shè)或用戶自定的動(dòng)畫效果，從而快速制作出精彩的動(dòng)畫特效。本任務(wù)將帶領(lǐng)讀者學(xué)習(xí)場(chǎng)景的基本操作和應(yīng)用動(dòng)畫預(yù)設(shè)的方法。,預(yù)備知識(shí),一、組織多場(chǎng)景動(dòng)畫,Flash在默認(rèn)情況下只使用一個(gè)場(chǎng)景（場(chǎng)景1）來組織動(dòng)畫，但在制作復(fù)雜的動(dòng)畫時(shí)，一個(gè)場(chǎng)景有時(shí)候會(huì)無

15、法滿足要求。遇到此情況時(shí)，我們可以使用多個(gè)場(chǎng)景來組織動(dòng)畫。例如，可以使用不同的場(chǎng)景來組織動(dòng)畫的影片簡(jiǎn)介、影片內(nèi)容、動(dòng)畫預(yù)載等部分 。,,,,多場(chǎng)景動(dòng)畫,下面介紹在Flash CS5中創(chuàng)建及編輯場(chǎng)景的方法。,新建文檔后默認(rèn)會(huì)自動(dòng)創(chuàng)建一個(gè)“場(chǎng)景1”場(chǎng)景，要?jiǎng)?chuàng)建新的場(chǎng)景，可選擇“窗口”>“其他面板”>“場(chǎng)景”菜單，在打開的“場(chǎng)景”面板中單擊“添加場(chǎng)景”按鈕。新建場(chǎng)景后，其默認(rèn)將成為當(dāng)前場(chǎng)景，用戶可以在其中制作動(dòng)畫。要切換到其他場(chǎng)

16、景，可在“場(chǎng)景”面板中單擊相應(yīng)的場(chǎng)景，或單擊舞臺(tái)右上方的“編輯場(chǎng)景”按鈕，在展開的下拉列表中進(jìn)行選擇。,,創(chuàng)建新場(chǎng)景,要更改場(chǎng)景的名稱，只需在“場(chǎng)景”面板中雙擊要改名的場(chǎng)景，使場(chǎng)景名稱變?yōu)榭删庉嫚顟B(tài)，然后輸入新的名稱即可。 要復(fù)制場(chǎng)景，只需在“場(chǎng)景”面板中選中要復(fù)制的場(chǎng)景，然后單擊“直接復(fù)制場(chǎng)景”按鈕即可。此時(shí)原場(chǎng)景中的所有內(nèi)容都將復(fù)制到新場(chǎng)景中。,,復(fù)制場(chǎng)景,在發(fā)布包含多個(gè)場(chǎng)景的Flash文檔時(shí)，這些場(chǎng)景將按照在“場(chǎng)景”面板中的排列

17、順序進(jìn)行播放，要更改場(chǎng)景的播放順序，只需在“場(chǎng)景”面板中將希望改變順序的場(chǎng)景拖拽到相應(yīng)位置即可。要?jiǎng)h除場(chǎng)景，只需在“場(chǎng)景”面板中選中要?jiǎng)h除的場(chǎng)景，然后單擊“刪除場(chǎng)景”按鈕，在彈出的警告對(duì)話框中單擊“確定”按鈕即可。,,,改變場(chǎng)景排列順序,,二、動(dòng)畫預(yù)設(shè)的應(yīng)用,下面通過一個(gè)簡(jiǎn)單實(shí)例介紹動(dòng)畫預(yù)設(shè)的應(yīng)用。,,選中要應(yīng)用動(dòng)畫預(yù)設(shè)的元件實(shí)例,,為所選實(shí)例添加動(dòng)畫預(yù)設(shè),1.打開素材文檔，使用“選擇工具” 選中舞臺(tái)中的“紅心”元件實(shí)例 。,2.選

18、擇“窗口”>“動(dòng)畫預(yù)設(shè)”菜單，打開“動(dòng)畫預(yù)設(shè)”對(duì)話框，雙擊“默認(rèn)預(yù)設(shè)”文件夾，在展開的列表中選擇要應(yīng)用的動(dòng)畫預(yù)設(shè)，如“脈搏”預(yù)設(shè)，然后單擊“應(yīng)用”按鈕，系統(tǒng)會(huì)根據(jù)所選預(yù)設(shè)自動(dòng)為所選元件實(shí)例創(chuàng)建補(bǔ)間動(dòng)畫。,下面通過制作節(jié)約用水的公益廣告動(dòng)畫，練習(xí)遮罩動(dòng)畫與路徑引導(dǎo)動(dòng)畫的實(shí)際應(yīng)用，以及使用多場(chǎng)景組織動(dòng)畫的方法。,,節(jié)約用水,制作思路,打開素材文檔后，首先利用遮罩動(dòng)畫創(chuàng)建波紋和地球浮出水面的效果；然后新建并重命名場(chǎng)景，再在新建的場(chǎng)景中利