學(xué)習(xí)目標(biāo)第7講制作引導(dǎo)層動畫掌握引導(dǎo)層動畫模擬籃球運動的效果

。掌握引導(dǎo)層動畫制作氣泡飄動的效果

。掌握使用引導(dǎo)層動畫表達(dá)藝術(shù)創(chuàng)意的方法

。

掌握使用多層引導(dǎo)動畫模擬魚兒游動的效果

。

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第1頁!7.1引導(dǎo)層動畫原理7.2引導(dǎo)層動畫提高7.3課后作業(yè)本章大綱flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第2頁!7.1引導(dǎo)層動畫原理7.1.1知識點講解引導(dǎo)層動畫的創(chuàng)建方法和原理都是十分簡單的，只要通過下面的學(xué)習(xí)，讀者可以輕松掌握。圖7-1兩個圖層的引

一、創(chuàng)建引導(dǎo)層和被引導(dǎo)層。圖7-2創(chuàng)建引導(dǎo)層

圖7-3多層被引導(dǎo)flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第3頁!二、引導(dǎo)層動畫原理。圖7-4所示為被引導(dǎo)層上小球在第1幀和第50幀處的位置。圖7-5所示為小球的全部運動軌跡，通過觀察可以很清晰地發(fā)現(xiàn)引導(dǎo)層的引導(dǎo)功能小球在第1幀的位置

小球在第50幀的位置

圖7-4設(shè)置小球起始位置

圖7-5小球的運動

引導(dǎo)層上的路徑在發(fā)布后，并不會顯示出來，只是作為被引導(dǎo)元素的運動軌跡。在被引導(dǎo)層上被引導(dǎo)的圖形必須是元件，而且必須創(chuàng)建動作補間動畫，同時還需要將元件在關(guān)鍵幀處的“變形中心”設(shè)置到引導(dǎo)層上的路徑上，才能成功創(chuàng)建引導(dǎo)層動畫。flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第4頁!3、在“圖層1”的第80幀處插入幀。4、新建圖層并重名為“圖層2”，并將其拖到“圖層1”的下面。5、將【庫】面板中的“汽車1”元件拖動到舞臺中，并設(shè)置其位置如圖7-7所示。變形中心整體效果

放大圖圖7-7放置汽車元件

6、在“圖層2”的第80幀處插入關(guān)鍵幀，設(shè)置第80幀處汽車元件的位置如圖7-8所示。

變形中心圖7-8放置汽車位置

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第5頁!7.1.3范例解析（二）──制作“街頭籃球”籃球是目前世界上最受歡迎的體育項目之一，相信讀者對其也十分熟悉。利用動畫來制作投籃效果就需要使用引導(dǎo)層動畫來完成，其設(shè)計思路及效果如圖7-11所示

。圖7-11設(shè)計思路及效果

1、打開模板進(jìn)行分析。

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第6頁!雙擊場景中的“男孩”元件進(jìn)入其元件內(nèi)部，觀察前5幀的動畫，如圖7-13所示。可以發(fā)現(xiàn)，當(dāng)在第4幀時，男孩手中的籃球消失了，在第5幀處，男孩做出了一個投籃的動作，從而可以推斷出，引導(dǎo)層動畫應(yīng)該從第4幀開始，并且籃球的位置要根據(jù)第4幀男孩的手的位置來確定

。第1幀

第2幀

第3幀

第4幀

第5幀

圖7-13男孩元件的前5幀動畫

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第7頁!2、制作引導(dǎo)層動畫。（1）將所有圖層鎖定，在“籃板”圖層之上新建圖層并重命名為“引導(dǎo)層”，根據(jù)前面的分析，在時間軸的第4幀處插入關(guān)鍵幀，如圖7-15所示。（2）在“引導(dǎo)層”的第4幀處，利用【直線】工具和【選擇】工具繪制出籃球運動的軌跡如圖7-16所示。讀者在繪制籃球路徑曲線時，應(yīng)盡量發(fā)揮想象，將籃球的真實飛行軌跡描繪出來。

圖7-15新建引導(dǎo)層

圖7-16繪制引導(dǎo)線flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第8頁!（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ǎo)層”圖層的下面，當(dāng)“引導(dǎo)層”圖層的圖標(biāo)由變?yōu)闋顟B(tài)時釋放，將其轉(zhuǎn)化為被引導(dǎo)層，效果如圖7-19所示

。

第4幀處籃球的位置

第30幀處籃球的位置

圖7-18設(shè)置籃球的位置圖7-19創(chuàng)建引導(dǎo)層動畫

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第9頁!（3）通常情況下，籃球在被投射出去之后，還會具有相對于投球人手的反轉(zhuǎn)運動，所以在【屬性】面板中設(shè)置【旋轉(zhuǎn)】屬性為“逆時針”，【次】為“5”，如圖7-22所示。

圖7-22設(shè)置旋轉(zhuǎn)動畫

（4）再次測試觀看影片，籃球的運動真實了，但是發(fā)現(xiàn)籃球在穿越“球網(wǎng)”的時候球網(wǎng)沒有任何的動作，這是不符合實際情況的，如圖7-23所示。

第13幀處籃球的位置

第14幀處籃球的位置

圖7-23籃球穿越效果

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第10頁!7.1.4課堂練習(xí)──制作“花朵氣泡”請同學(xué)們使用引導(dǎo)層動畫制作一個花朵氣泡隨風(fēng)飛舞的動畫效果，如圖7-25所示。1、導(dǎo)入素材布置場景

。圖7-25最終設(shè)計效果

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第11頁!（4）將“背景.png”拖入到“背景”圖層上，設(shè)置其位置坐標(biāo)x、y都為“0”，寬高為“800px×518px”，如圖7-28所示。（5）將“前景.png”拖入到“前景”圖層上，設(shè)置其位置坐標(biāo)x、y分別為“－25”、“250”，寬高為“933px×250px”如圖7-29所示。

圖7-28設(shè)置背景圖片

圖7-29設(shè)置前景圖片2、制作氣泡飄動效果。（1）為了操作方便，將“前景”圖層隱藏，然后在“氣泡1路徑”和“氣泡2路徑”圖層上繪制如圖7-30所示的引導(dǎo)線。氣泡1引導(dǎo)線氣泡2引導(dǎo)線圖7-30繪制路徑曲線

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第12頁!（4）分別在“氣泡1”和“氣泡2”圖層的第1幀～第120幀之間創(chuàng)建動作補間動畫，將“氣泡1路徑”和“氣泡2路徑”圖層轉(zhuǎn)化為引導(dǎo)層，再將“氣泡1”和“氣泡2”圖層分別轉(zhuǎn)化為其被引導(dǎo)層，圖層效果如圖7-33所示。

圖7-33創(chuàng)建引導(dǎo)層動畫

（5）保存測試影片，一個美麗夢幻的花朵氣泡動畫效果制作完成。flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第13頁!7.2.2范例解析──制作“蜓橋相會”在中國流傳著一個神話——隔著長長的銀河住著美麗的織女和忠厚的牛郎。他們彼此深愛對方，但每年只能通過喜鵲搭橋才能見一面。為了他們能多見上一面，可愛的蜻蜓也搭起了一座“蜓橋”，這樣就成就了另一個神話——“蜓橋相會”！使用Flash制作該效果的設(shè)計思路及效果如圖7-34所示

。圖7-34思路及效果

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第14頁!2、制作飛舞效果。（1）在“背景”圖層上新建圖層并重命名為“蜓橋”，在其上繪制如圖7-37所示的引導(dǎo)線。

圖7-37繪制引導(dǎo)線

該路徑的重要特點是曲線的開始部分和結(jié)尾部分都是直線，而中間在場景中的部分為曲線，這樣繪制的好處在于能更好的控制被引導(dǎo)元件的旋轉(zhuǎn)方向。flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第15頁!（6）這里設(shè)計讓蜻蜓分三路進(jìn)入舞臺，其中“路徑上”和“路徑下”的“蜻蜓”從舞臺左邊向右邊飛，而“路徑中”的“蜻蜓”從舞臺右邊向左邊飛。（40在“路徑中”圖層上面新建圖層并重命名為“蜻蜓上”層，將“蜻蜓”元件拖入到“蜻蜓上”圖層上，并設(shè)置其第1幀的位置如圖7-40所示。（80在“蜻蜓上”層的第220幀處插入關(guān)鍵幀，并設(shè)置其位置到曲線的最右端，如圖7-41所示。圖7-40設(shè)置第1幀蜻蜓的位置

圖7-41設(shè)置第220幀蜻蜓的位置

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第16頁!3、制作蜓橋效果。（1）返回主場景，選中“飛舞”元件，如圖7-42所示，按F8快捷鍵將其轉(zhuǎn)化為影片剪輯元件并命名為“蜓橋”。（2）雙擊“蜓橋”元件進(jìn)入元件內(nèi)部進(jìn)行編輯，在“圖層1”的第200幀處插入幀。

圖7-42選中“飛舞”元件

（3）選中“飛舞”元件，按Ctrl+C快捷鍵復(fù)制該元件，在第20幀處插入關(guān)鍵幀，并在該幀處按Ctrl+Shift+V快捷鍵粘貼該元件，使用相同方法，每隔20幀插入關(guān)鍵幀并粘貼該元件直到第200幀，圖層效果如圖7-43所示。flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第17頁!（5）返回主場景，按Ctrl+Enter快捷鍵測試觀察影片，一個美麗的蜓橋效果就完成了。圖7-45制作蜓橋

4、制作牛郎織女動畫。（1）在“蜓橋”圖層上面新建圖層并重命名圖層，在所有圖層的第320幀處插入幀，得到如圖7-46所示的效果。（2）在“人物路徑”圖層上繪制一條和“蜓橋”曲線相似的引導(dǎo)線如圖7-47所示。flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第18頁!（4）在圖層的第320幀處插入關(guān)鍵幀，并設(shè)置“牛郎”和“織女”在該幀的位置如圖7-49所示。圖7-49設(shè)置“牛郎”和“織女”第320幀的位置

（5）在“牛郎”和“織女”圖層上的第220幀～第320幀之間創(chuàng)建動作補間動畫，再將“人物路徑”圖層轉(zhuǎn)化為引導(dǎo)層，將“牛郎”和“織女”圖層轉(zhuǎn)化為其被引導(dǎo)層。（6）選中“牛郎”圖層的第320幀，按F9快捷鍵打開【動作—幀】面板，輸入代碼“stop();”。（7）測試觀看影片，一個“蜓橋相會”的美麗動畫就制作完成了。flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第19頁!（2）執(zhí)行【文件】/【導(dǎo)入】/【打開外部庫】命令將教學(xué)資源中的“素材\第7講\魚兒荷間戲\魚兒荷間戲-素材.fla”文件打開，如圖7-51所示。并將其中的影片剪輯元件“鰭”、“身”、“頭”以及圖片“荷塘-背景.jpg”、“荷塘-前景.jpg”復(fù)制粘貼到當(dāng)前的【庫】面板中。（3）將“荷塘-背景.jpg”拖入到舞臺中，設(shè)置圖片大小為“520px×740px”，相對舞臺居中對齊，效果如圖7-52所示。（4）繪制如圖7-53所示的路徑。結(jié)束端起始端圖7-51打開外部庫

圖7-52導(dǎo)入背景

圖7-53引導(dǎo)路徑

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第20頁!6、魚兒制作完成后，將構(gòu)成魚兒的元件全部分散到圖層。7、在第600幀處插入關(guān)鍵幀，并將“魚兒”移動到引導(dǎo)線的末端，效果如圖7-55所示。整體觀察放大觀察圖7-55結(jié)束位置

8、為組成“魚兒”的元件添加引導(dǎo)層動畫，圖層效果如圖7-56所示。圖7-56圖層效果三

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第21頁!7.3課后作業(yè)一、操作題1、制作如圖7-58所示的沿路經(jīng)不斷跳動的小球動畫

。2、請同學(xué)們根據(jù)范例講解——制作“街頭籃球”的制作思路，制作發(fā)射炮彈的效果，如圖7-59所示。圖7-58跳動的效果

圖7-59大炮效果

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第22頁!7.1.2范例解析（一）──創(chuàng)建引導(dǎo)層動畫練習(xí)請同學(xué)們在老師的帶領(lǐng)下進(jìn)行創(chuàng)建引導(dǎo)層動畫練習(xí)，并完成以下操作。1、打開教學(xué)資源中的“素材\第7講\創(chuàng)建引導(dǎo)層動畫練習(xí)\賽車.fla”文件。2、在默認(rèn)“圖層1”中繪制如圖7-6所示的路徑。圖7-6繪制路徑flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第23頁!7、在“圖層2”的第1幀～第80幀之間創(chuàng)建動作補間動畫。8、用鼠標(biāo)右鍵單擊“圖層1”，在彈出的快捷菜單中選擇【引導(dǎo)層】命令，將“圖層1”轉(zhuǎn)化為引導(dǎo)層，然后將“圖層2”拖到“圖層1”的下面，將其轉(zhuǎn)化為被引導(dǎo)層，此時圖層效果如圖7-9所示。

圖7-9創(chuàng)建引導(dǎo)層動畫

9、按Ctrl+Enter快捷鍵，測試播放影片，發(fā)現(xiàn)汽車的運動效果是錯誤的。10、關(guān)閉測試播放器，然后選中“圖層2”的第1幀，在【屬性】面板中勾選【調(diào)整到路徑】選項，如圖7-10所示。再測試播放影片，發(fā)現(xiàn)汽車的運動效果正確。圖7-10勾選【調(diào)整到路徑】選項

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第24頁!（1）由于本案例講解的重點是引導(dǎo)層動畫，所以該動畫中的場景、道具、人物等都由本書提供，并給出制作模板，讀者只需完成引導(dǎo)層動畫的相關(guān)部分。打開教學(xué)資源中的“素材\第7講\街頭籃球\街頭籃球.fla”文件，效果如圖7-12所示

。

圖7-12打開模板

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第25頁!（2）返回主場景，觀察整個舞臺如圖7-14所示，可以發(fā)現(xiàn)籃球在運動過程中，要經(jīng)過“男孩的手”、“籃筐”、“球網(wǎng)”這3個圖形。所以根據(jù)視角分析，可以判定引導(dǎo)層應(yīng)該創(chuàng)建在“男孩”、“籃筐前沿”、“球網(wǎng)”這3個元件所在圖層的下面，而在“籃板”、“地板”、“籃筐后沿”這3個元件所在圖層的上面。男孩的手籃筐前沿球網(wǎng)籃板籃筐后沿圖7-14圖層分析

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第26頁!（3）在“引導(dǎo)層”圖層下面新建圖層并重命名為“籃球”層，在第4幀處插入關(guān)鍵幀，然后將“籃球”元件從【庫】面板中拖動到“籃球”圖層上，如圖7-17所示。籃球圖層效果

拖入籃球

圖7-17創(chuàng)建籃球圖層

（4）在“籃球”圖層的第30幀處插入關(guān)鍵幀，在第4幀～第30幀之間創(chuàng)建動作補間動畫。

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第27頁!創(chuàng)建引導(dǎo)層動畫完畢，測試影片如果發(fā)現(xiàn)籃球并未按照引導(dǎo)層上的路徑運動，則可以重點檢查“籃球”元件的“變形中心”是否在引導(dǎo)線上。3、完善引導(dǎo)層動畫。（1）按Ctrl+Enter快捷鍵測試觀看影片，發(fā)現(xiàn)籃球的運動過程顯得十分僵硬，沒有速率變化，和真實的籃球運動差別很大，需要對其進(jìn)行緩動設(shè)置。（2）選中“籃球”圖層上的第4幀，在【屬性】面板中單擊按鈕，如圖7-20所示，打開【自定義緩入/緩出】對話框，將曲線調(diào)整至如圖7-21所示的效果

圖7-20幀【屬性】面板

圖7-21調(diào)整籃球運動速率flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第28頁!（5）通常情況下，球在穿越球網(wǎng)的時候，球網(wǎng)都會由于慣性和自身彈性反彈起來。所以需要在“球網(wǎng)”圖層的第13幀、第14幀和第15幀處插入關(guān)鍵幀，并調(diào)整第14幀處的球網(wǎng)形狀，最后得到如圖7-24所示的效果。

第13幀處球網(wǎng)的形狀

第14幀處球網(wǎng)的形狀

第15幀處球網(wǎng)的形狀

圖7-24球網(wǎng)動態(tài)效果

（6）保存測試影片，可以看到一個十分真實、完美的街頭籃球效果制作完成。

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第29頁!（2）執(zhí)行【文件】/【導(dǎo)入】/【打開外部庫】菜單命令，打開教學(xué)資源中的“素材\第7講\花朵氣泡\花朵氣泡.fla”文件，將其中的所有內(nèi)容都復(fù)制粘貼到當(dāng)前的【庫】面板中，如圖7-26所示。（3）新建圖層并重命名圖層，并在所有圖層的第120幀處插入幀，直至圖層效果如圖7-27所示。

圖7-26打開外部庫

圖7-27圖層效果flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第30頁!（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幀的位置

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第31頁!7.2引導(dǎo)層動畫提高通過前面一節(jié)課的學(xué)習(xí)，相信同學(xué)們已經(jīng)掌握了引導(dǎo)層動畫的創(chuàng)建方法和設(shè)計原理，在本小節(jié)中，將使用多層引導(dǎo)層動畫來制作復(fù)雜的Flash動畫

。7.2.1知識點講解觀察生活中可以用引導(dǎo)層動畫來表達(dá)創(chuàng)意的事物。使用引導(dǎo)層動畫來模擬表達(dá)您的創(chuàng)意。收集素材豐富您的作品。在制作過程中不斷完善自己的作品。

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第32頁!1、導(dǎo)入素材制作背景。（1）新建一個Flash文檔，設(shè)置文檔【尺寸】為“700px×400px”，【幀頻】為“24fps”，其他屬性保持默認(rèn)參數(shù)。（2）執(zhí)行【文件】/【導(dǎo)入】/【打開外部庫】菜單命令，打開教學(xué)資源中的“素材\第7講\蜓橋相會\蜓橋相會.fla”文件，如圖7-35所示。將其中的影片剪輯元件“背景”、“牛郎”、“蜻蜓”、“織女”復(fù)制粘貼到當(dāng)前的【庫】面板中。（3）將默認(rèn)“圖層1”重命名為“背景”層，將“背景”元件拖入舞臺，并確認(rèn)其寬高為“700px×400px”，位置坐標(biāo)x、y都為“0”，如圖7-36所示。圖7-35打開外部庫

圖7-36拖入背景

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第33頁!（2）選中繪制的引導(dǎo)線，按住Ctrl鍵再復(fù)制出兩條，得到如圖7-38所示的效果。（3）選中3條曲線，按F8快捷鍵將其轉(zhuǎn)化為影片剪輯元件，并重命名為“飛舞”。（4）單擊按鈕進(jìn)入元件內(nèi)部進(jìn)行編輯，選中舞臺中最下面的曲線，將其分散到圖層，再選中中間的曲線，將其分散到圖層。（5）依次從上到下重命名圖層為“路徑上”層、“路徑中”層、“路徑下”層，并在3個圖層的第220幀處插入幀，圖層效果如圖7-39所示。

圖7-38復(fù)制線條

圖7-39設(shè)置圖層

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第34頁!（9）在“蜻蜓上”圖層的第1幀～第220幀之間創(chuàng)建動作補間動畫，并將“路徑上”圖層轉(zhuǎn)化為引導(dǎo)層，將“蜻蜓上”圖層轉(zhuǎn)化為其被引導(dǎo)層。（10）選中“蜻蜓上”圖層的第1幀，在【屬性】面板中勾選【調(diào)整到路徑】選項。（11）至此“蜻蜓上”的引導(dǎo)層動畫就制作完成了，使用同樣的方法制作“蜻蜓中”和“蜻蜓下”的動畫。設(shè)置元件位置的時候一定要注意將元件的“變形中心”放到路徑上，如圖7-40和圖7-41所示。如果變形中心未在路徑上，引導(dǎo)層動畫將創(chuàng)建失敗。

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第35頁!（4）選擇第200幀，按F9快捷鍵打開【動作—幀】面板，輸入代碼“stop();”，如圖7-44所示。圖7-43圖層效果一

圖7-44輸入代碼

flash基礎(chǔ)教程第七章共41頁，您現(xiàn)在瀏覽的是第