1、,第7講 制作引導層動畫,掌握引導層動畫模擬籃球運動的效果 。 掌握引導層動畫制作氣泡飄動的效果 。 掌握使用引導層動畫表達藝術創意的方法 。 掌握使用多層引導動畫模擬魚兒游動的效果 。,1,調研學習,7.1 引導層動畫原理 7.2 引導層動畫提高 7.3 課后作業,本章大綱,2,調研學習,7.1 引導層動畫原理,7.1.1 知識點講解,引導層動畫的創建方法和原理都是十分簡單的，只要通過下面的學習，讀者可以輕松掌握 。,圖7-1 兩個圖層的引,一、創建引導層和被引導層。,圖7-2 創建引導層,圖7-3 多層被引導,3,調研學習,二、引導層動畫原理。 圖7-4所示為被引導層上小球在第1幀和第50
2、幀處的位置。圖7-5所示為小球的全部運動軌跡，通過觀察可以很清晰地發現引導層的引導功能,小球在第1幀的位置,小球在第50幀的位置,圖7-4 設置小球起始位置,圖7-5 小球的運動,引導層上的路徑在發布后，并不會顯示出來，只是作為被引導元素的運動軌跡。在被引導層上被引導的圖形必須是元件，而且必須創建動作補間動畫，同時還需要將元件在關鍵幀處的“變形中心”設置到引導層上的路徑上，才能成功創建引導層動畫。,4,調研學習,7.1.2 范例解析（一）創建引導層動畫練習,請同學們在老師的帶領下進行創建引導層動畫練習，并完成以下操作 。,1、打開教學資源中的“素材第7講創建引導層動畫練習賽車.fla”文件。
3、2、在默認“圖層1”中繪制如圖7-6所示的路徑。,圖7-6 繪制路徑,5,調研學習,3、在“圖層1”的第80幀處插入幀。 4、新建圖層并重名為“圖層2”，并將其拖到“圖層1”的下面。 5、將【庫】面板中的“汽車1”元件拖動到舞臺中，并設置其位置如圖7-7所示 。,變形中心,整體效果,放大圖,圖7-7 放置汽車元件,6、在“圖層2”的第80幀處插入關鍵幀，設置第80幀處汽車元件的位置如圖7-8所示。,變形中心,圖7-8 放置汽車位置,6,調研學習,7、在“圖層2”的第1幀第80幀之間創建動作補間動畫。 8、用鼠標右鍵單擊“圖層1”，在彈出的快捷菜單中選擇【引導層】命令，將“圖層1”轉化為引導層，
4、然后將“圖層2”拖到“圖層1”的下面，將其轉化為被引導層，此時圖層效果如圖7-9所示。,圖7-9 創建引導層動畫,9、按Ctrl+Enter快捷鍵，測試播放影片，發現汽車的運動效果是錯誤的。 10、關閉測試播放器，然后選中“圖層2”的第1幀，在【屬性】面板中勾選【調整到路徑】選項，如圖7-10所示。再測試播放影片，發現汽車的運動效果正確 。,圖7-10 勾選【調整到路徑】選項,7,調研學習,7.1.3 范例解析（二）制作“街頭籃球”,籃球是目前世界上最受歡迎的體育項目之一，相信讀者對其也十分熟悉。利用動畫來制作投籃效果就需要使用引導層動畫來完成，其設計思路及效果如圖7-11所示 。,圖7-11
5、 設計思路及效果,1、打開模板進行分析。,8,調研學習,（1）由于本案例講解的重點是引導層動畫，所以該動畫中的場景、道具、人物等都由本書提供，并給出制作模板，讀者只需完成引導層動畫的相關部分。打開教學資源中的“素材第7講街頭籃球街頭籃球.fla”文件，效果如圖7-12所示 。,圖7-12 打開模板,9,調研學習,雙擊場景中的“男孩”元件進入其元件內部，觀察前5幀的動畫，如圖7-13所示。可以發現，當在第4幀時，男孩手中的籃球消失了，在第5幀處，男孩做出了一個投籃的動作，從而可以推斷出，引導層動畫應該從第4幀開始，并且籃球的位置要根據第4幀男孩的手的位置來確定 。,第1幀,第2幀,第3幀,第4幀
6、,第5幀,圖7-13 男孩元件的前5幀動畫,10,調研學習,（2）返回主場景，觀察整個舞臺如圖7-14所示，可以發現籃球在運動過程中，要經過“男孩的手”、“籃筐”、“球網”這3個圖形。所以根據視角分析，可以判定引導層應該創建在“男孩”、“籃筐前沿”、“球網”這3個元件所在圖層的下面，而在“籃板”、“地板”、“籃筐后沿”這3個元件所在圖層的上面 。,男孩的手,籃筐前沿,球網,籃板,籃筐后沿,圖7-14 圖層分析,11,調研學習,2、制作引導層動畫。 （1）將所有圖層鎖定，在“籃板”圖層之上新建圖層并重命名為“引導層”，根據前面的分析，在時間軸的第4幀處插入關鍵幀，如圖7-15所示。 （2）在“引
7、導層”的第4幀處，利用【直線】工具和【選擇】工具繪制出籃球運動的軌跡如圖7-16所示。,讀者在繪制籃球路徑曲線時，應盡量發揮想象，將籃球的真實飛行軌跡描繪出來。,圖7-15 新建引導層,圖7-16 繪制引導線,12,調研學習,（3）在“引導層”圖層下面新建圖層并重命名為“籃球”層，在第4幀處插入關鍵幀，然后將“籃球”元件從【庫】面板中拖動到“籃球”圖層上，如圖7-17所示 。,籃球,圖層效果,拖入籃球,圖7-17 創建籃球圖層,（4）在“籃球”圖層的第30幀處插入關鍵幀，在第4幀第30幀之間創建動作補間動畫。,13,調研學習,（5）將【貼近至對象】按鈕按下，利用【選擇】工具設置籃球在第4幀的位
8、置到引導線的最左端，設置第30幀的位置到引導線的最右端，并確保“籃球”元件的“變形中心”一定要在引導線上，效果如圖7-18所示。 （6）用鼠標右鍵單擊“引導層”圖層，在彈出的快捷菜單中選擇 【引導層】命令，將其轉化為引導層。 （7）將“籃球”圖層拖動到“引導層”圖層的下面，當“引導層”圖層的圖標由變為狀態時釋放，將其轉化為被引導層，效果如圖7-19所示 。,第4幀處籃球的位置,第30幀處籃球的位置,圖7-18 設置籃球的位置,圖7-19 創建引導層動畫,14,調研學習,創建引導層動畫完畢，測試影片如果發現籃球并未按照引導層上的路徑運動，則可以重點檢查“籃球”元件的“變形中心”是否在引導線上 。
9、,3、完善引導層動畫。 （1）按Ctrl+Enter快捷鍵測試觀看影片，發現籃球的運動過程顯得十分僵硬，沒有速率變化，和真實的籃球運動差別很大，需要對其進行緩動設置。 （2）選中“籃球”圖層上的第4幀，在【屬性】面板中單擊按鈕，如圖7-20所示，打開【自定義緩入/緩出】對話框，將曲線調整至如圖 7-21所示的效果,圖7-20 幀【屬性】面板,圖7-21 調整籃球運動速率,15,調研學習,（3）通常情況下，籃球在被投射出去之后，還會具有相對于投球人手的反轉運動，所以在【屬性】面板中設置【旋轉】屬性為“逆時針”，【次】為“5”，如圖7-22所示。,圖7-22 設置旋轉動畫,（4）再次測試觀看影片，
10、籃球的運動真實了，但是發現籃球在穿越“球網”的時候球網沒有任何的動作，這是不符合實際情況的，如圖7-23所示。,第13幀處籃球的位置,第14幀處籃球的位置,圖7-23 籃球穿越效果,16,調研學習,（5）通常情況下，球在穿越球網的時候，球網都會由于慣性和自身彈性反彈起來。所以需要在“球網”圖層的第13幀、第14幀和第15幀處插入關鍵幀，并調整第14幀處的球網形狀，最后得到如圖7-24所示的效果。,第13幀處球網的形狀,第14幀處球網的形狀,第15幀處球網的形狀,圖7-24 球網動態效果,（6）保存測試影片，可以看到一個十分真實、完美的街頭籃球效果制作完成。,17,調研學習,7.1.4 課堂練習
11、制作“花朵氣泡”,請同學們使用引導層動畫制作一個花朵氣泡隨風飛舞的動畫效果，如圖7-25所示 。,1、導入素材布置場景 。,圖7-25 最終設計效果,18,調研學習,（2）執行【文件】/【導入】/【打開外部庫】菜單命令，打開教學資源中的“素材第7講花朵氣泡花朵氣泡.fla”文件，將其中的所有內容都復制粘貼到當前的【庫】面板中，如圖7-26所示。 （3）新建圖層并重命名圖層，并在所有圖層的第120幀處插入幀，直至圖層效果如圖7-27所示。,圖7-26 打開外部庫,圖7-27 圖層效果,19,調研學習,（4）將“背景.png”拖入到“背景”圖層上，設置其位置坐標x、y都為“0”，寬高為“800px
12、518px”，如圖7-28所示。 （5）將“前景.png”拖入到“前景”圖層上，設置其位置坐標x、y分別為“25”、“250”，寬高為“”如圖7-29所示。,圖7-28 設置背景圖片,圖7-29 設置前景圖片,2、制作氣泡飄動效果。 （1）為了操作方便，將“前景”圖層隱藏，然后在“氣泡1路徑”和“氣泡2路徑”圖層上繪制如圖7-30所示的引導線 。,氣泡1引導線,氣泡2引導線,圖7-30 繪制路徑曲線,20,調研學習,（2）將“氣泡1”和“氣泡2”元件分別拖入到“氣泡1”和“氣泡2”圖層上，并設置其第1幀的位置分別如圖7-31所示。 （3）在“氣泡1”和“氣泡2”圖層的第12
13、0幀處插入關鍵幀，并設置該幀處“氣泡1”和“氣泡2”元件的位置如圖7-32所示,圖7-31 設置氣泡在第1幀的位置,圖7-32 設置氣泡在第120幀的位置,21,調研學習,（4）分別在“氣泡1”和“氣泡2”圖層的第1幀第120幀之間創建動作補間動畫，將“氣泡1路徑”和“氣泡2路徑”圖層轉化為引導層，再將“氣泡1”和“氣泡2”圖層分別轉化為其被引導層，圖層效果如圖 7-33所示。,圖7-33 創建引導層動畫,（5）保存測試影片，一個美麗夢幻的花朵氣泡動畫效果制作完成。,22,調研學習,7.2 引導層動畫提高,通過前面一節課的學習，相信同學們已經掌握了引導層動畫的創建方法和設計原理，在本小節中，將
14、使用多層引導層動畫來制作復雜的Flash動畫 。,7.2.1 知識點講解,觀察生活中可以用引導層動畫來表達創意的事物。 使用引導層動畫來模擬表達您的創意。 收集素材豐富您的作品。 在制作過程中不斷完善自己的作品。,23,調研學習,7.2.2 范例解析制作“蜓橋相會”,在中國流傳著一個神話隔著長長的銀河住著美麗的織女和忠厚的牛郎。他們彼此深愛對方，但每年只能通過喜鵲搭橋才能見一面。為了他們能多見上一面，可愛的蜻蜓也搭起了一座“蜓橋”，這樣就成就了另一個神話“蜓橋相會”！使用Flash制作該效果的設計思路及效果如圖7-34所示 。,圖7-34 思路及效果,24,調研學習,1、導入素材制作背景。 （
15、1）新建一個Flash文檔，設置文檔【尺寸】為“”，【幀頻】為“24fps”，其他屬性保持默認參數。 （2）執行【文件】/【導入】/【打開外部庫】菜單命令，打開教學資源中的“素材第7講蜓橋相會蜓橋相會.fla”文件，如圖7-35所示。將其中的影片剪輯元件“背景”、“牛郎”、“蜻蜓”、“織女”復制粘貼到當前的【庫】面板中。 （3）將默認“圖層1”重命名為“背景”層，將“背景”元件拖入舞臺，并確認其寬高為“”，位置坐標x、y都為“0”，如圖7-36所示。,圖7-35 打開外部庫,圖7-36 拖入背景,25,調研學習,2、制作飛舞效果。 （1）在“背景”圖層上
16、新建圖層并重命名為“蜓橋”，在其上繪制如圖 7-37所示的引導線。,圖7-37 繪制引導線,該路徑的重要特點是曲線的開始部分和結尾部分都是直線，而中間在場景中的部分為曲線，這樣繪制的好處在于能更好的控制被引導元件的旋轉方向。,26,調研學習,（2）選中繪制的引導線，按住Ctrl鍵再復制出兩條，得到如圖7-38所示的效果。 （3）選中3條曲線，按F8快捷鍵將其轉化為影片剪輯元件，并重命名為“飛舞”。 （4）單擊 按鈕進入元件內部進行編輯，選中舞臺中最下面的曲線，將其分散到圖層，再選中中間的曲線，將其分散到圖層。 （5）依次從上到下重命名圖層為“路徑上”層、“路徑中”層、“路徑下”層，并在3個圖層
17、的第220幀處插入幀，圖層效果如圖7-39所 示。,圖7-38 復制線條,圖7-39 設置圖層,27,調研學習,（6）這里設計讓蜻蜓分三路進入舞臺，其中“路徑上”和“路徑下”的“蜻蜓”從舞臺左邊向右邊飛，而“路徑中”的“蜻蜓”從舞臺右邊向左邊飛。 （40在“路徑中”圖層上面新建圖層并重命名為“蜻蜓上”層，將“蜻蜓”元件拖入到“蜻蜓上”圖層上，并設置其第1幀的位置如圖7-40所示。 （80在“蜻蜓上”層的第220幀處插入關鍵幀，并設置其位置到曲線的最右端，如圖7-41所示 。,圖7-40 設置第1幀蜻蜓的位置,圖7-41 設置第220幀蜻蜓的位置,28,調研學習,（9）在“蜻蜓上”圖層的第1幀第
18、220幀之間創建動作補間動畫，并將“路徑上”圖層轉化為引導層，將“蜻蜓上”圖層轉化為其被引導層。 （10）選中“蜻蜓上”圖層的第1幀，在【屬性】面板中勾選【調整到路徑】選項。 （11）至此“蜻蜓上”的引導層動畫就制作完成了，使用同樣的方法制作“蜻蜓中”和“蜻蜓下”的動畫。,設置元件位置的時候一定要注意將元件的“變形中心”放到路徑上，如圖7-40和圖7-41所示。如果變形中心未在路徑上，引導層動畫將創建失敗。,29,調研學習,3、制作蜓橋效果。 （1）返回主場景，選中“飛舞”元件，如圖7-42所示，按F8快捷鍵將其轉化為影片剪輯元件并命名為“蜓橋”。 （2）雙擊“蜓橋”元件進入元件內部進行編輯，
19、在“圖層1”的第200幀處插入幀。,圖7-42 選中“飛舞”元件,（3）選中“飛舞”元件，按Ctrl+C快捷鍵復制該元件，在第20幀處插入關鍵幀，并在該幀處按Ctrl+Shift+V快捷鍵粘貼該元件，使用相同方法，每隔20幀插入關鍵幀并粘貼該元件直到第200幀，圖層效果如圖7-43所示 。,30,調研學習,（4）選擇第200幀，按F9快捷鍵打開【動作幀】面板，輸入代碼“stop();”，如圖7-44所示 。,圖7-43 圖層效果一,圖7-44 輸入代碼,31,調研學習,（5）返回主場景，按Ctrl+Enter快捷鍵測試觀察影片，一個美麗的蜓橋效果就完成了 。,圖7-45 制作蜓橋,4、制作牛郎
20、織女動畫。 （1）在“蜓橋”圖層上面新建圖層并重命名圖層，在所有圖層的第320幀處插入幀，得到如圖7-46所示的效果。 （2）在“人物路徑”圖層上繪制一條和“蜓橋”曲線相似的引導線如圖7-47所示 。,32,調研學習,（3）在“牛郎”和“織女”圖層上的第220幀處插入關鍵幀，將【庫】面板中的“牛郎”和“織女”元件分別拖入到“牛郎”和“織女”圖層上，并設置其位置如圖7-48所示 。,圖7-46 圖層效果二,圖7-47 繪制人物路徑,圖7-48 設置“牛郎”和“織女”第220幀的位置,33,調研學習,（4）在圖層的第320幀處插入關鍵幀，并設置“牛郎”和“織女”在該幀的位置如圖7-49所示 。,圖
21、7-49 設置“牛郎”和“織女”第320幀的位置,（5）在“牛郎”和“織女”圖層上的第220幀第320幀之間創建動作補間動畫，再將“人物路徑”圖層轉化為引導層，將“牛郎”和“織女”圖層轉化為其被引導層。 （6）選中“牛郎”圖層的第320幀，按F9快捷鍵打開【動作幀】面板，輸入代碼“stop();”。 （7）測試觀看影片，一個“蜓橋相會”的美麗動畫就制作完成了。,34,調研學習,7.2.3 課堂練習制作“魚兒荷間戲 ”,請同學們跟隨本例使用多層引導動畫來創造一副“魚兒荷間戲”的動人畫面，動畫效果如圖7-50所示。,1、新建一個Flash文檔，設置文檔【尺寸】為“”，【幀頻】為
22、“30fps”，其他屬性保持默認參數 。,圖7-50 最終設計效果,35,調研學習,（2）執行【文件】/【導入】/【打開外部庫】命令將教學資源中的“素材第7講魚兒荷間戲魚兒荷間戲-素材.fla”文件打開，如圖7-51所示。并將其中的影片剪輯元件“鰭”、“身”、“頭”以及圖片“荷塘-背景.jpg”、“荷塘-前景.jpg”復制粘貼到當前的【庫】面板中。 （3）將“荷塘-背景.jpg”拖入到舞臺中，設置圖片大小為“”，相對舞臺居中對齊，效果如圖7-52所示。 （4）繪制如圖7-53所示的路徑 。,結束端,起始端,圖7-51 打開外部庫,圖7-52 導入背景,圖7-53 引導路徑,
23、36,調研學習,5、利用【庫】面板中的“鰭”、“身”“、頭”3個元件在引導線的起始端，制作出魚的效果如圖7-54所示。,魚兒的身體由18個“身”元件和3個“鰭”元件構成，元件的【寬度】和【長度】以及【Alpha】值都有個遞減的效果，讀者可以按照自己的觀點來進行變化，制作出自己喜歡的“魚兒”。,整體觀察,放大觀察,圖7-54 起始位置,37,調研學習,6、魚兒制作完成后，將構成魚兒的元件全部分散到圖層。 7、在第600幀處插入關鍵幀，并將“魚兒”移動到引導線的末端，效果如圖7-55所示。,整體觀察,放大觀察,圖7-55 結束位置,8、為組成“魚兒”的元件添加引導層動畫，圖層效果如圖7-56所示
24、。,圖7-56 圖層效果三,38,調研學習,9、為組成魚兒的元件設置“調整到路徑”，效果如圖7-57所示。,調整前,調整后,圖7-57 動畫效果,10、利用【庫】中的“荷塘-前景.png”圖片來添加前景。 11、保存測試影片，一個魚兒穿梭于荷間的動畫就制作完成了。,39,調研學習,7.3 課后作業,一、操作題 1、制作如圖7-58所示的沿路經不斷跳動的小球動畫 。,2、請同學們根據范例講解制作“街頭籃球”的制作思路，制作發射炮彈的效果，如圖7-59所示 。,圖7-58 跳動的效果,圖7-59 大炮效果,40,調研學習,二、思考題 1、引導層動畫的原理是什么？ 2、制作引導層動畫至少需要幾個圖層？ 3、勾選【調整到路徑】選項對引導層動畫有什么影響？,3、制作秋天黃葉被風吹落的動畫，如圖7-60所示 。,圖7-60 秋天黃葉被風吹落的動畫效果,41,調研學習,