知識(shí)講解：制作引導(dǎo)層動(dòng)畫

1、學(xué)習(xí)目標(biāo) 制作引導(dǎo)層動(dòng)畫掌握引導(dǎo)層動(dòng)畫模擬籃球運(yùn)動(dòng)的效果 。掌握引導(dǎo)層動(dòng)畫制作氣泡飄動(dòng)的效果 。掌握使用引導(dǎo)層動(dòng)畫表達(dá)藝術(shù)創(chuàng)意的方法 。 掌握使用多層引導(dǎo)動(dòng)畫模擬魚兒游動(dòng)的效果 。 1 引導(dǎo)層動(dòng)畫原理 2 引導(dǎo)層動(dòng)畫提高3 課后作業(yè)本章大綱1 引導(dǎo)層動(dòng)畫原理 1.1 知識(shí)點(diǎn)講解 引導(dǎo)層動(dòng)畫的創(chuàng)建方法和原理都是十分簡單的，只要通過下面的學(xué)習(xí)，讀者可以輕松掌握 。圖7-1 兩個(gè)圖層的引 導(dǎo) 一、創(chuàng)建引導(dǎo)層和被引導(dǎo)層。 圖7-2 創(chuàng)建引導(dǎo)層 圖7-3 多層被引導(dǎo) 二、引導(dǎo)層動(dòng)畫原理。 圖7-4所示為被引導(dǎo)層上小球在第1幀和第50幀處的位置。圖7-5所示為小球的全部運(yùn)動(dòng)軌跡，通過觀察可以很清晰地發(fā)現(xiàn)引

2、導(dǎo)層的引導(dǎo)功能小球在第1幀的位置 小球在第50幀的位置 圖7-4 設(shè)置小球起始位置 圖7-5 小球的運(yùn)動(dòng) 引導(dǎo)層上的路徑在發(fā)布后，并不會(huì)顯示出來，只是作為被引導(dǎo)元素的運(yùn)動(dòng)軌跡。在被引導(dǎo)層上被引導(dǎo)的圖形必須是元件，而且必須創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫，同時(shí)還需要將元件在關(guān)鍵幀處的“變形中心”設(shè)置到引導(dǎo)層上的路徑上，才能成功創(chuàng)建引導(dǎo)層動(dòng)畫。1.2 范例解析（一）創(chuàng)建引導(dǎo)層動(dòng)畫練習(xí) 請同學(xué)們在老師的帶領(lǐng)下進(jìn)行創(chuàng)建引導(dǎo)層動(dòng)畫練習(xí)，并完成以下操作 。1、打開教學(xué)資源中的“素材第7講創(chuàng)建引導(dǎo)層動(dòng)畫練習(xí)賽車.fla”文件。2、在默認(rèn)“圖層1”中繪制如圖7-6所示的路徑。圖7-6 繪制路徑 3、在“圖層1”的第80幀處插

3、入幀。4、新建圖層并重名為“圖層2”，并將其拖到“圖層1”的下面。5、將【庫】面板中的“汽車1”元件拖動(dòng)到舞臺(tái)中，并設(shè)置其位置如圖7-7所示 。變形中心整體效果 放大圖圖7-7 放置汽車元件 6、在“圖層2”的第80幀處插入關(guān)鍵幀，設(shè)置第80幀處汽車元件的位置如圖7-8所示。 變形中心圖7-8 放置汽車位置 7、在“圖層2”的第1幀第80幀之間創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫。8、用鼠標(biāo)右鍵單擊“圖層1”，在彈出的快捷菜單中選擇【引導(dǎo)層】命令，將“圖層1”轉(zhuǎn)化為引導(dǎo)層，然后將“圖層2”拖到“圖層1”的下面，將其轉(zhuǎn)化為被引導(dǎo)層，此時(shí)圖層效果如圖7-9所示。 圖7-9 創(chuàng)建引導(dǎo)層動(dòng)畫 9、按Ctrl+Enter快

4、捷鍵，測試播放影片，發(fā)現(xiàn)汽車的運(yùn)動(dòng)效果是錯(cuò)誤的。10、關(guān)閉測試播放器，然后選中“圖層2”的第1幀，在【屬性】面板中勾選【調(diào)整到路徑】選項(xiàng)，如圖7-10所示。再測試播放影片，發(fā)現(xiàn)汽車的運(yùn)動(dòng)效果正確 。 圖7-10 勾選【調(diào)整到路徑】選項(xiàng) 1.3 范例解析（二）制作“街頭籃球” 籃球是目前世界上最受歡迎的體育項(xiàng)目之一，相信讀者對其也十分熟悉。利用動(dòng)畫來制作投籃效果就需要使用引導(dǎo)層動(dòng)畫來完成，其設(shè)計(jì)思路及效果如圖7-11所示 。圖7-11 設(shè)計(jì)思路及效果 1、打開模板進(jìn)行分析。 （1）由于本案例講解的重點(diǎn)是引導(dǎo)層動(dòng)畫，所以該動(dòng)畫中的場景、道具、人物等都由本書提供，并給出制作模板，讀者只需完成引導(dǎo)層動(dòng)

5、畫的相關(guān)部分。打開教學(xué)資源中的“素材第7講街頭籃球街頭籃球.fla”文件，效果如圖7-12所示 。 圖7-12 打開模板 雙擊場景中的“男孩”元件進(jìn)入其元件內(nèi)部，觀察前5幀的動(dòng)畫，如圖7-13所示。可以發(fā)現(xiàn)，當(dāng)在第4幀時(shí)，男孩手中的籃球消失了，在第5幀處，男孩做出了一個(gè)投籃的動(dòng)作，從而可以推斷出，引導(dǎo)層動(dòng)畫應(yīng)該從第4幀開始，并且籃球的位置要根據(jù)第4幀男孩的手的位置來確定 。第1幀 第2幀 第3幀 第4幀 第5幀 圖7-13 男孩元件的前5幀動(dòng)畫 （2）返回主場景，觀察整個(gè)舞臺(tái)如圖7-14所示，可以發(fā)現(xiàn)籃球在運(yùn)動(dòng)過程中，要經(jīng)過“男孩的手”、“籃筐”、“球網(wǎng)”這3個(gè)圖形。所以根據(jù)視角分析可以判定引

6、導(dǎo)層應(yīng)該創(chuàng)建在“男孩”、“籃筐前沿”、“球網(wǎng)”這3個(gè)元件所在圖層的下面，而在“籃板”、“地板”、“籃筐后沿”這3個(gè)元件所在圖層的上面 。男孩的手籃筐前沿球網(wǎng)籃板籃筐后沿圖7-14 圖層分析 2、制作引導(dǎo)層動(dòng)畫。（1）將所有圖層鎖定，在“籃板”圖層之上新建圖層并重命名為“引導(dǎo)層”，根據(jù)前面的分析，在時(shí)間軸的第4幀處插入關(guān)鍵幀，如圖7-15所示。（2）在“引導(dǎo)層”的第4幀處，利用【直線】工具和【選擇】工具繪制出籃球運(yùn)動(dòng)的軌跡如圖7-16所示。 讀者在繪制籃球路徑曲線時(shí)，應(yīng)盡量發(fā)揮想象，將籃球的真實(shí)飛行軌跡描繪出來。 圖7-15 新建引導(dǎo)層 圖7-16 繪制引導(dǎo)線 （3）在“引導(dǎo)層”圖層下面新建圖層

7、并重命名為“籃球”層，在第4幀處插入關(guān)鍵幀，然后將“籃球”元件從【庫】面板中拖動(dòng)到“籃球”圖層上，如圖7-17所示 ?；@球圖層效果 拖入籃球 圖7-17 創(chuàng)建籃球圖層 （4）在“籃球”圖層的第30幀處插入關(guān)鍵幀，在第4幀第30幀之間創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫。 （5）將【貼近至對象】按鈕按下，利用【選擇】工具設(shè)置籃球在第4幀的位置到引導(dǎo)線的最左端，設(shè)置第30幀的位置到引導(dǎo)線的最右端，并確?！盎@球”元件的“變形中心”一定要在引導(dǎo)線上，效果如圖7-18所示。（6）用鼠標(biāo)右鍵單擊“引導(dǎo)層”圖層，在彈出的快捷菜單中選擇【引導(dǎo)層】命令，將其轉(zhuǎn)化為引導(dǎo)層。（7）將“籃球”圖層拖動(dòng)到“引導(dǎo)層”圖層的下面，當(dāng)“引導(dǎo)層”

8、圖層的圖標(biāo)由變?yōu)闋顟B(tài)時(shí)釋放，將其轉(zhuǎn)化為被引導(dǎo)層，效果如圖7-19所示 。 第4幀處籃球的位置 第30幀處籃球的位置 圖7-18 設(shè)置籃球的位置 圖7-19 創(chuàng)建引導(dǎo)層動(dòng)畫 創(chuàng)建引導(dǎo)層動(dòng)畫完畢，測試影片如果發(fā)現(xiàn)籃球并未按照引導(dǎo)層上的路徑運(yùn)動(dòng)，則可以重點(diǎn)檢查“籃球”元件的“變形中心”是否在引導(dǎo)線上 。3、完善引導(dǎo)層動(dòng)畫。（1）按Ctrl+Enter快捷鍵測試觀看影片，發(fā)現(xiàn)籃球的運(yùn)動(dòng)過程顯得十分僵硬，沒有速率變化，和真實(shí)的籃球運(yùn)動(dòng)差別很大，需要對其進(jìn)行緩動(dòng)設(shè)置。（2）選中“籃球”圖層上的第4幀，在【屬性】面板中單擊按鈕，如圖7-20所示打開【自定義緩入/緩出】對話框，將曲線調(diào)整至如圖7-21所示的效

9、果 圖7-20 幀【屬性】面板 圖7-21 調(diào)整籃球運(yùn)動(dòng)速率 （3）通常情況下，籃球在被投射出去之后，還會(huì)具有相對于投球人手的反轉(zhuǎn)運(yùn)動(dòng)，所以在【屬性】面板中設(shè)置【旋轉(zhuǎn)】屬性為“逆時(shí)針”，【次】為“5”如圖7-22所示。 圖7-22 設(shè)置旋轉(zhuǎn)動(dòng)畫 （4）再次測試觀看影片，籃球的運(yùn)動(dòng)真實(shí)了，但是發(fā)現(xiàn)籃球在穿越“球網(wǎng)”的時(shí)候球網(wǎng)沒有任何的動(dòng)作，這是不符合實(shí)際情況的，如圖7-23所示。 第13幀處籃球的位置 第14幀處籃球的位置 圖7-23 籃球穿越效果 （5）通常情況下，球在穿越球網(wǎng)的時(shí)候，球網(wǎng)都會(huì)由于慣性和自身彈性反彈起來。所以需要在“球網(wǎng)”圖層的第13幀、第14幀和第15幀處插入關(guān)鍵幀，并調(diào)整第

10、14幀處的球網(wǎng)形狀，最后得到如圖7-24所示的效果。 第13幀處球網(wǎng)的形狀 第14幀處球網(wǎng)的形狀 第15幀處球網(wǎng)的形狀 圖7-24 球網(wǎng)動(dòng)態(tài)效果 （6）保存測試影片，可以看到一個(gè)十分真實(shí)、完美的街頭籃球效果制作完成。 1.4 課堂練習(xí)制作“花朵氣泡” 請同學(xué)們使用引導(dǎo)層動(dòng)畫制作一個(gè)花朵氣泡隨風(fēng)飛舞的動(dòng)畫效果，如圖7-25所示 。1、導(dǎo)入素材布置場景 。圖7-25 最終設(shè)計(jì)效果 （2）執(zhí)行【文件】/【導(dǎo)入】/【打開外部庫】菜單命令，打開教學(xué)資源中的“素材第7講花朵氣泡花朵氣泡.fla”文件，將其中的所有內(nèi)容都復(fù)制粘貼到當(dāng)前的【庫】面板中，如圖7-26所示。（3）新建圖層并重命名圖層，并在所有圖層

11、的第120幀處插入幀，直至圖層效果如圖7-27所示。 圖7-26 打開外部庫 圖7-27 圖層效果 （4）將“背景.png”拖入到“背景”圖層上，設(shè)置其位置坐標(biāo)x、y都為“0”，寬高為“800px518px”，如圖7-28所示。（5）將“前景.png”拖入到“前景”圖層上，設(shè)置其位置坐標(biāo)x、y分別為“25”、“250”，寬高為“933px250px”如圖7-29所示。 圖7-28 設(shè)置背景圖片 圖7-29 設(shè)置前景圖片 2、制作氣泡飄動(dòng)效果。（1）為了操作方便，將“前景”圖層隱藏，然后在“氣泡1路徑”和“氣泡2路徑”圖層上繪制如圖7-30所示的引導(dǎo)線 。氣泡1引導(dǎo)線氣泡2引導(dǎo)線圖7-30 繪制

12、路徑曲線 （2）將“氣泡1”和“氣泡2”元件分別拖入到“氣泡1”和“氣泡2”圖層上，并設(shè)置其第1幀的位置分別如圖7-31所示。（3）在“氣泡1”和“氣泡2”圖層的第120幀處插入關(guān)鍵幀，并設(shè)置該幀處“氣泡1”和“氣泡2”元件的位置如圖7-32所示 圖7-31 設(shè)置氣泡在第1幀的位置 圖7-32 設(shè)置氣泡在第120幀的位置 （4）分別在“氣泡1”和“氣泡2”圖層的第1幀第120幀之間創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫，將“氣泡1路徑”和“氣泡2路徑”圖層轉(zhuǎn)化為引導(dǎo)層，再將“氣泡1”和“氣泡2”圖層分別轉(zhuǎn)化為其被引導(dǎo)層圖層效果如圖7-33所示。 圖7-33 創(chuàng)建引導(dǎo)層動(dòng)畫 （5）保存測試影片，一個(gè)美麗夢幻的花朵氣泡

13、動(dòng)畫效果制作完成。2 引導(dǎo)層動(dòng)畫提高 通過前面一節(jié)課的學(xué)習(xí)，相信同學(xué)們已經(jīng)掌握了引導(dǎo)層動(dòng)畫的創(chuàng)建方法和設(shè)計(jì)原理，在本小節(jié)中，將使用多層引導(dǎo)層動(dòng)畫來制作復(fù)雜的Flash動(dòng)畫 。2.1 知識(shí)點(diǎn)講解觀察生活中可以用引導(dǎo)層動(dòng)畫來表達(dá)創(chuàng)意的事物。使用引導(dǎo)層動(dòng)畫來模擬表達(dá)您的創(chuàng)意。收集素材豐富您的作品。在制作過程中不斷完善自己的作品。 2.2 范例解析制作“蜓橋相會(huì)” 在中國流傳著一個(gè)神話隔著長長的銀河住著美麗的織女和忠厚的牛郎他們彼此深愛對方，但每年只能通過喜鵲搭橋才能見一面為了他們能多見上一面，可愛的蜻蜓也搭起了一座“蜓橋”，這樣就成就了另一個(gè)神話“蜓橋相會(huì)”！使用Flash制作該效果的設(shè)計(jì)思路及效果

14、如圖7-34所示 。圖7-34 思路及效果 1、導(dǎo)入素材制作背景。（1）新建一個(gè)Flash文檔，設(shè)置文檔【尺寸】為“700px400px”，【幀頻】為“24fps”，其他屬性保持默認(rèn)參數(shù)。（2）執(zhí)行【文件】/【導(dǎo)入】/【打開外部庫】菜單命令，打開教學(xué)資源中的“素材第7講蜓橋相會(huì)蜓橋相會(huì).fla”文件，如圖7-35所示。將其中的影片剪輯元件“背景”、“牛郎”、“蜻蜓”、“織女”復(fù)制粘貼到當(dāng)前的【庫】面板中。（3）將默認(rèn)“圖層1”重命名為“背景”層，將“背景”元件拖入舞臺(tái)，并確認(rèn)其寬高為“700px400px”，位置坐標(biāo)x、y都為“0”，如圖7-36所示。圖7-35 打開外部庫 圖7-36 拖入背

15、景 2、制作飛舞效果。（1）在“背景”圖層上新建圖層并重命名為“蜓橋”，在其上繪制如圖7-37所示的引導(dǎo)線。 圖7-37 繪制引導(dǎo)線 該路徑的重要特點(diǎn)是曲線的開始部分和結(jié)尾部分都是直線，而中間在場景中的部分為曲線，這樣繪制的好處在于能更好的控制被引導(dǎo)元件的旋轉(zhuǎn)方向。（2）選中繪制的引導(dǎo)線，按住Ctrl鍵再復(fù)制出兩條，得到如圖7-38所示的效果。（3）選中3條曲線，按F8快捷鍵將其轉(zhuǎn)化為影片剪輯元件，并重命名為“飛舞”（4）單擊 按鈕進(jìn)入元件內(nèi)部進(jìn)行編輯，選中舞臺(tái)中最下面的曲線，將其分散到圖層，再選中中間的曲線，將其分散到圖層。（5）依次從上到下重命名圖層為“路徑上”層、“路徑中”層、“路徑下”

16、層并在3個(gè)圖層的第220幀處插入幀，圖層效果如圖7-39所示。 圖7-38 復(fù)制線條 圖7-39 設(shè)置圖層 （6）這里設(shè)計(jì)讓蜻蜓分三路進(jìn)入舞臺(tái)，其中“路徑上”和“路徑下”的“蜻蜓”從舞臺(tái)左邊向右邊飛，而“路徑中”的“蜻蜓”從舞臺(tái)右邊向左邊飛。（40在“路徑中”圖層上面新建圖層并重命名為“蜻蜓上”層，將“蜻蜓”元件拖入到“蜻蜓上”圖層上，并設(shè)置其第1幀的位置如圖7-40所示。（80在“蜻蜓上”層的第220幀處插入關(guān)鍵幀，并設(shè)置其位置到曲線的最右端，如圖7-41所示 。圖7-40 設(shè)置第1幀蜻蜓的位置 圖7-41 設(shè)置第220幀蜻蜓的位置 （9）在“蜻蜓上”圖層的第1幀第220幀之間創(chuàng)建動(dòng)作補(bǔ)間動(dòng)

17、畫，并將“路徑上”圖層轉(zhuǎn)化為引導(dǎo)層，將“蜻蜓上”圖層轉(zhuǎn)化為其被引導(dǎo)層。（10）選中“蜻蜓上”圖層的第1幀，在【屬性】面板中勾選【調(diào)整到路徑】選項(xiàng)。（11）至此“蜻蜓上”的引導(dǎo)層動(dòng)畫就制作完成了，使用同樣的方法制作“蜻蜓中”和“蜻蜓下”的動(dòng)畫。設(shè)置元件位置的時(shí)候一定要注意將元件的“變形中心”放到路徑上，如圖7-40和圖7-41所示。如果變形中心未在路徑上，引導(dǎo)層動(dòng)畫將創(chuàng)建失敗。 3、制作蜓橋效果。（1）返回主場景，選中“飛舞”元件，如圖7-42所示，按F8快捷鍵將其轉(zhuǎn)化為影片剪輯元件并命名為“蜓橋”。（2）雙擊“蜓橋”元件進(jìn)入元件內(nèi)部進(jìn)行編輯，在“圖層1”的第200幀處插入幀。 圖7-42 選中

18、“飛舞”元件 （3）選中“飛舞”元件，按Ctrl+C快捷鍵復(fù)制該元件，在第20幀處插入關(guān)鍵幀，并在該幀處按Ctrl+Shift+V快捷鍵粘貼該元件，使用相同方法，每隔20幀插入關(guān)鍵幀并粘貼該元件直到第200幀，圖層效果如圖7-43所示 。（4）選擇第200幀，按F9快捷鍵打開【動(dòng)作幀】面板，輸入代碼“stop();”，如圖7-44所示 。圖7-43 圖層效果一 圖7-44 輸入代碼 （5）返回主場景，按Ctrl+Enter快捷鍵測試觀察影片，一個(gè)美麗的蜓橋效果就完成了 。圖7-45 制作蜓橋 4、制作牛郎織女動(dòng)畫。（1）在“蜓橋”圖層上面新建圖層并重命名圖層，在所有圖層的第320幀處插入幀，得

19、到如圖7-46所示的效果。（2）在“人物路徑”圖層上繪制一條和“蜓橋”曲線相似的引導(dǎo)線如圖7-47所示 。（3）在“牛郎”和“織女”圖層上的第220幀處插入關(guān)鍵幀，將【庫】面板中的“牛郎”和“織女”元件分別拖入到“牛郎”和“織女”圖層上，并設(shè)置其位置如圖7-48所示 。圖7-46 圖層效果二 圖7-47 繪制人物路徑 圖7-48 設(shè)置“牛郎”和“織女”第220幀的位置 （4）在圖層的第320幀處插入關(guān)鍵幀，并設(shè)置“牛郎”和“織女”在該幀的位置如圖7-49所示 。圖7-49 設(shè)置“牛郎”和“織女”第320幀的位置 （5）在“牛郎”和“織女”圖層上的第220幀第320幀之間創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫，再將“

20、人物路徑”圖層轉(zhuǎn)化為引導(dǎo)層，將“牛郎”和“織女”圖層轉(zhuǎn)化為其被引導(dǎo)層。（6）選中“牛郎”圖層的第320幀，按F9快捷鍵打開【動(dòng)作幀】面板，輸入代碼“stop();”。（7）測試觀看影片，一個(gè)“蜓橋相會(huì)”的美麗動(dòng)畫就制作完成了。 2.3 課堂練習(xí)制作“魚兒荷間戲 ” 請同學(xué)們跟隨本例使用多層引導(dǎo)動(dòng)畫來創(chuàng)造一副“魚兒荷間戲”的動(dòng)人畫面，動(dòng)畫效果如圖7-50所示。1、新建一個(gè)Flash文檔，設(shè)置文檔【尺寸】為“520px740px”，【幀頻】為“30fps”，其他屬性保持默認(rèn)參數(shù) 。圖7-50 最終設(shè)計(jì)效果 （2）執(zhí)行【文件】/【導(dǎo)入】/【打開外部庫】命令將教學(xué)資源中的“素材第7講魚兒荷間戲魚兒荷間戲-素材.fla”文件打開，如圖7-51所示。并將其中的影片剪輯元件“鰭”、“身”、“頭”以及圖片“荷塘-背景.jpg”、“荷塘-前景.jpg”復(fù)制粘貼到當(dāng)前的【庫】面板中。（3）將“荷塘-背景.jpg”拖入到舞臺(tái)中，設(shè)置圖片大小為“520px740px”，相對舞臺(tái)居中對齊，效果如圖7-5