07_制作引導層動畫.ppt

1、,第7講 制作引導層動畫,掌握引導層動畫模擬籃球運動的效果 。 掌握引導層動畫制作氣泡飄動的效果 。 掌握使用引導層動畫表達藝術(shù)創(chuàng)意的方法 。 掌握使用多層引導動畫模擬魚兒游動的效果 。,7.1 引導層動畫原理 7.2 引導層動畫提高 7.3 課后作業(yè),本章大綱,7.1 引導層動畫原理,7.1.1 知識點講解,引導層動畫的創(chuàng)建方法和原理都是十分簡單的，只要通過下面的學習，讀者可以輕松掌握 。,圖7-1 兩個圖層的引 導,一、創(chuàng)建引導層和被引導層。,圖7-2 創(chuàng)建引導層,圖7-3 多層被引導,二、引導層動畫原理。 圖7-4所示為被引導層上小球在第1幀和第50幀處的位置。圖7-5所示為小球的全部運

2、動軌跡，通過觀察可以很清晰地發(fā)現(xiàn)引導層的引導功能,小球在第1幀的位置,小球在第50幀的位置,圖7-4 設置小球起始位置,圖7-5 小球的運動,引導層上的路徑在發(fā)布后，并不會顯示出來，只是作為被引導元素的運動軌跡。在被引導層上被引導的圖形必須是元件，而且必須創(chuàng)建動作補間動畫，同時還需要將元件在關(guān)鍵幀處的“變形中心”設置到引導層上的路徑上，才能成功創(chuàng)建引導層動畫。,7.1.2 范例解析（一）創(chuàng)建引導層動畫練習,請同學們在老師的帶領下進行創(chuàng)建引導層動畫練習，并完成以下操作 。,1、打開教學資源中的“素材第7講創(chuàng)建引導層動畫練習賽車.fla”文件。 2、在默認“圖層1”中繪制如圖7-6所示的路徑。,圖

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

4、所示。,圖7-9 創(chuàng)建引導層動畫,9、按Ctrl+Enter快捷鍵，測試播放影片，發(fā)現(xiàn)汽車的運動效果是錯誤的。 10、關(guān)閉測試播放器，然后選中“圖層2”的第1幀，在【屬性】面板中勾選【調(diào)整到路徑】選項，如圖7-10所示。再測試播放影片，發(fā)現(xiàn)汽車的運動效果正確 。,圖7-10 勾選【調(diào)整到路徑】選項,7.1.3 范例解析（二）制作“街頭籃球”,籃球是目前世界上最受歡迎的體育項目之一，相信讀者對其也十分熟悉。利用動畫來制作投籃效果就需要使用引導層動畫來完成，其設計思路及效果如圖7-11所示 。,圖7-11 設計思路及效果,1、打開模板進行分析。,（1）由于本案例講解的重點是引導層動畫，所以該動畫中

5、的場景、道具、人物等都由本書提供，并給出制作模板，讀者只需完成引導層動畫的相關(guān)部分。打開教學資源中的“素材第7講街頭籃球街頭籃球.fla”文件，效果如圖7-12所示 。,圖7-12 打開模板,雙擊場景中的“男孩”元件進入其元件內(nèi)部，觀察前5幀的動畫，如圖7-13所示?？梢园l(fā)現(xiàn)，當在第4幀時，男孩手中的籃球消失了，在第5幀處，男孩做出了一個投籃的動作，從而可以推斷出，引導層動畫應該從第4幀開始，并且籃球的位置要根據(jù)第4幀男孩的手的位置來確定 。,第1幀,第2幀,第3幀,第4幀,第5幀,圖7-13 男孩元件的前5幀動畫,（2）返回主場景，觀察整個舞臺如圖7-14所示，可以發(fā)現(xiàn)籃球在運動過程中，要經(jīng)

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

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

8、擇 【引導層】命令，將其轉(zhuǎn)化為引導層。 （7）將“籃球”圖層拖動到“引導層”圖層的下面，當“引導層”圖層的圖標由變?yōu)闋顟B(tài)時釋放，將其轉(zhuǎn)化為被引導層，效果如圖7-19所示 。,第4幀處籃球的位置,第30幀處籃球的位置,圖7-18 設置籃球的位置,圖7-19 創(chuàng)建引導層動畫,創(chuàng)建引導層動畫完畢，測試影片如果發(fā)現(xiàn)籃球并未按照引導層上的路徑運動，則可以重點檢查“籃球”元件的“變形中心”是否在引導線上 。,3、完善引導層動畫。 （1）按Ctrl+Enter快捷鍵測試觀看影片，發(fā)現(xiàn)籃球的運動過程顯得十分僵硬，沒有速率變化，和真實的籃球運動差別很大，需要對其進行緩動設置。 （2）選中“籃球”圖層上的第4幀，

9、在【屬性】面板中單擊按鈕，如圖7-20所示，打開【自定義緩入/緩出】對話框，將曲線調(diào)整至如圖 7-21所示的效果,圖7-20 幀【屬性】面板,圖7-21 調(diào)整籃球運動速率,（3）通常情況下，籃球在被投射出去之后，還會具有相對于投球人手的反轉(zhuǎn)運動，所以在【屬性】面板中設置【旋轉(zhuǎn)】屬性為“逆時針”，【次】為“5”，如圖7-22所示。,圖7-22 設置旋轉(zhuǎn)動畫,（4）再次測試觀看影片，籃球的運動真實了，但是發(fā)現(xiàn)籃球在穿越“球網(wǎng)”的時候球網(wǎng)沒有任何的動作，這是不符合實際情況的，如圖7-23所示。,第13幀處籃球的位置,第14幀處籃球的位置,圖7-23 籃球穿越效果,（5）通常情況下，球在穿越球網(wǎng)的時候

10、，球網(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）保存測試影片，可以看到一個十分真實、完美的街頭籃球效果制作完成。,7.1.4 課堂練習制作“花朵氣泡”,請同學們使用引導層動畫制作一個花朵氣泡隨風飛舞的動畫效果，如圖7-25所示 。,1、導入素材布置場景 。,圖7-25 最終設計效果,（2）執(zhí)行【文件】/【導入】/【打開外部庫】菜單命令，打開教學資源中的“素材第7講花朵氣泡花朵氣泡.

11、fla”文件，將其中的所有內(nèi)容都復制粘貼到當前的【庫】面板中，如圖7-26所示。 （3）新建圖層并重命名圖層，并在所有圖層的第120幀處插入幀，直至圖層效果如圖7-27所示。,圖7-26 打開外部庫,圖7-27 圖層效果,（4）將“背景.png”拖入到“背景”圖層上，設置其位置坐標x、y都為“0”，寬高為“800px518px”，如圖7-28所示。 （5）將“前景.png”拖入到“前景”圖層上，設置其位置坐標x、y分別為“25”、“250”，寬高為“933px250px”如圖7-29所示。,圖7-28 設置背景圖片,圖7-29 設置前景圖片,2、制作氣泡飄動效果。 （1）為了操作方便，將“前景

12、”圖層隱藏，然后在“氣泡1路徑”和“氣泡2路徑”圖層上繪制如圖7-30所示的引導線 。,氣泡1引導線,氣泡2引導線,圖7-30 繪制路徑曲線,（2）將“氣泡1”和“氣泡2”元件分別拖入到“氣泡1”和“氣泡2”圖層上，并設置其第1幀的位置分別如圖7-31所示。 （3）在“氣泡1”和“氣泡2”圖層的第120幀處插入關(guān)鍵幀，并設置該幀處“氣泡1”和“氣泡2”元件的位置如圖7-32所示,圖7-31 設置氣泡在第1幀的位置,圖7-32 設置氣泡在第120幀的位置,（4）分別在“氣泡1”和“氣泡2”圖層的第1幀第120幀之間創(chuàng)建動作補間動畫，將“氣泡1路徑”和“氣泡2路徑”圖層轉(zhuǎn)化為引導層，再將“氣泡1”

13、和“氣泡2”圖層分別轉(zhuǎn)化為其被引導層，圖層效果如圖 7-33所示。,圖7-33 創(chuàng)建引導層動畫,（5）保存測試影片，一個美麗夢幻的花朵氣泡動畫效果制作完成。,7.2 引導層動畫提高,通過前面一節(jié)課的學習，相信同學們已經(jīng)掌握了引導層動畫的創(chuàng)建方法和設計原理，在本小節(jié)中，將使用多層引導層動畫來制作復雜的Flash動畫 。,7.2.1 知識點講解,觀察生活中可以用引導層動畫來表達創(chuàng)意的事物。 使用引導層動畫來模擬表達您的創(chuàng)意。 收集素材豐富您的作品。 在制作過程中不斷完善自己的作品。,7.2.2 范例解析制作“蜓橋相會”,在中國流傳著一個神話隔著長長的銀河住著美麗的織女和忠厚的牛郎。他們彼此深愛對方

14、，但每年只能通過喜鵲搭橋才能見一面。為了他們能多見上一面，可愛的蜻蜓也搭起了一座“蜓橋”，這樣就成就了另一個神話“蜓橋相會”！使用Flash制作該效果的設計思路及效果如圖7-34所示 。,圖7-34 思路及效果,1、導入素材制作背景。 （1）新建一個Flash文檔，設置文檔【尺寸】為“700px400px”，【幀頻】為“24fps”，其他屬性保持默認參數(shù)。 （2）執(zhí)行【文件】/【導入】/【打開外部庫】菜單命令，打開教學資源中的“素材第7講蜓橋相會蜓橋相會.fla”文件，如圖7-35所示。將其中的影片剪輯元件“背景”、“牛郎”、“蜻蜓”、“織女”復制粘貼到當前的【庫】面板中。 （3）將默認“圖層

15、1”重命名為“背景”層，將“背景”元件拖入舞臺，并確認其寬高為“700px400px”，位置坐標x、y都為“0”，如圖7-36所示。,圖7-35 打開外部庫,圖7-36 拖入背景,2、制作飛舞效果。 （1）在“背景”圖層上新建圖層并重命名為“蜓橋”，在其上繪制如圖 7-37所示的引導線。,圖7-37 繪制引導線,該路徑的重要特點是曲線的開始部分和結(jié)尾部分都是直線，而中間在場景中的部分為曲線，這樣繪制的好處在于能更好的控制被引導元件的旋轉(zhuǎn)方向。,（2）選中繪制的引導線，按住Ctrl鍵再復制出兩條，得到如圖7-38所示的效果。 （3）選中3條曲線，按F8快捷鍵將其轉(zhuǎn)化為影片剪輯元件，并重命名為“飛

16、舞”。 （4）單擊 按鈕進入元件內(nèi)部進行編輯，選中舞臺中最下面的曲線，將其分散到圖層，再選中中間的曲線，將其分散到圖層。 （5）依次從上到下重命名圖層為“路徑上”層、“路徑中”層、“路徑下”層，并在3個圖層的第220幀處插入幀，圖層效果如圖7-39所 示。,圖7-38 復制線條,圖7-39 設置圖層,（6）這里設計讓蜻蜓分三路進入舞臺，其中“路徑上”和“路徑下”的“蜻蜓”從舞臺左邊向右邊飛，而“路徑中”的“蜻蜓”從舞臺右邊向左邊飛。 （40在“路徑中”圖層上面新建圖層并重命名為“蜻蜓上”層，將“蜻蜓”元件拖入到“蜻蜓上”圖層上，并設置其第1幀的位置如圖7-40所示。 （80在“蜻蜓上”層的第2

17、20幀處插入關(guān)鍵幀，并設置其位置到曲線的最右端，如圖7-41所示 。,圖7-40 設置第1幀蜻蜓的位置,圖7-41 設置第220幀蜻蜓的位置,（9）在“蜻蜓上”圖層的第1幀第220幀之間創(chuàng)建動作補間動畫，并將“路徑上”圖層轉(zhuǎn)化為引導層，將“蜻蜓上”圖層轉(zhuǎn)化為其被引導層。 （10）選中“蜻蜓上”圖層的第1幀，在【屬性】面板中勾選【調(diào)整到路徑】選項。 （11）至此“蜻蜓上”的引導層動畫就制作完成了，使用同樣的方法制作“蜻蜓中”和“蜻蜓下”的動畫。,設置元件位置的時候一定要注意將元件的“變形中心”放到路徑上，如圖7-40和圖7-41所示。如果變形中心未在路徑上，引導層動畫將創(chuàng)建失敗。,3、制作蜓橋效

18、果。 （1）返回主場景，選中“飛舞”元件，如圖7-42所示，按F8快捷鍵將其轉(zhuǎn)化為影片剪輯元件并命名為“蜓橋”。 （2）雙擊“蜓橋”元件進入元件內(nèi)部進行編輯，在“圖層1”的第200幀處插入幀。,圖7-42 選中“飛舞”元件,（3）選中“飛舞”元件，按Ctrl+C快捷鍵復制該元件，在第20幀處插入關(guān)鍵幀，并在該幀處按Ctrl+Shift+V快捷鍵粘貼該元件，使用相同方法，每隔20幀插入關(guān)鍵幀并粘貼該元件直到第200幀，圖層效果如圖7-43所示 。,（4）選擇第200幀，按F9快捷鍵打開【動作幀】面板，輸入代碼“stop();”，如圖7-44所示 。,圖7-43 圖層效果一,圖7-44 輸入代碼,（5）返回