Flash項(xiàng)目六-制作引導(dǎo)層動(dòng)畫教案

1、教案（2012 至2013 學(xué)年第二 學(xué)期）課程名稱：Flash授課教師：葉演習(xí)授課班級(jí)：xxx教研組： 計(jì)電組項(xiàng)目六制作引導(dǎo)層動(dòng)畫章下項(xiàng)目六周次第11周日期5月7日課題制作引導(dǎo)層動(dòng)畫課時(shí)總課時(shí) 6節(jié)，其中：理論 2節(jié) ；實(shí)訓(xùn)4節(jié) 。授課 方式講授、演示、練習(xí)作業(yè)題數(shù)3擬用 時(shí)間270分鐘教學(xué) 目的1、掌握使用引導(dǎo)層動(dòng)畫制作路徑動(dòng)畫的方法。2、掌握綜合應(yīng)研種圖層動(dòng)畫進(jìn)行設(shè)計(jì)的方法。3、會(huì)制作“街頭籃球”動(dòng)畫。4、會(huì)制作“魚兒荷間戲”動(dòng)畫。5、會(huì)制作“蝴蝶戲花”動(dòng)畫。選用教 具掛圖教 學(xué) 重 占 八、教學(xué)重點(diǎn)：添加引導(dǎo)線，調(diào)整引導(dǎo)線， 設(shè)置關(guān)鍵幀解決措施：講授、演示、實(shí)踐操作教 學(xué) 難 點(diǎn) 八、

2、教學(xué)難點(diǎn)：添加引導(dǎo)線，調(diào)整引導(dǎo)線， 設(shè)置關(guān)鍵幀解決措施：講授、演示、實(shí)踐操作教學(xué) 回顧本課主要是在前面學(xué)習(xí)的基礎(chǔ)上，進(jìn)一步加深對(duì)Flash的學(xué)習(xí)，增加引導(dǎo)圖層的使用及 設(shè)置，重點(diǎn)在于對(duì)圖層中關(guān)鍵幀的幀數(shù)窗口部分選項(xiàng)的設(shè)置，如“貼緊對(duì)象”、“變化” 和“使路徑適應(yīng)”等選項(xiàng)的設(shè)置。一部分同學(xué)對(duì)引導(dǎo)線理解不夠，導(dǎo)致物體不能隨著曲 線運(yùn)動(dòng)，教師可對(duì)引導(dǎo)線的概念重點(diǎn)強(qiáng)調(diào)，同時(shí)強(qiáng)調(diào)物體的起點(diǎn)和終點(diǎn)的設(shè)置。說 明審閱簽名：年 月 日教學(xué)過程教學(xué)內(nèi)容教學(xué)方 法組織教學(xué) _5_分鐘上課禮儀，清點(diǎn)人數(shù)，集中學(xué)生注意力復(fù)習(xí) _5_分鐘放映上一節(jié)課同學(xué)們的作品“建筑物過光效果”，先讓同學(xué)們互評(píng)， 老帥再做點(diǎn)評(píng)?；?動(dòng)

3、、點(diǎn)評(píng)導(dǎo)入_5_分鐘放映前面做過的籃球運(yùn)動(dòng)動(dòng)畫。提出問題引入新課：前面學(xué)習(xí)的動(dòng)畫是讓籃球在一條直線上運(yùn)動(dòng)，那么我們 能不能讓籃球沿我們自己設(shè)計(jì)的任意曲線運(yùn)動(dòng)呢？放映動(dòng) 畫放映動(dòng)畫會(huì)制作“街頭籃球”動(dòng)畫、“魚兒荷間戲”動(dòng)畫、“蝴 蝶戲花” “蜓橋相會(huì)”動(dòng)畫、“文字軌跡” “花朵氣泡”動(dòng)畫、 “圓周運(yùn)動(dòng)”動(dòng)畫等豐富有趣漂亮的動(dòng)畫效果。學(xué)習(xí)完引導(dǎo)層動(dòng)畫后，我們同樣可以制作出精美的作品！ （5分鐘）在開始對(duì)引導(dǎo)層動(dòng)畫進(jìn)行典型案例分析之前，首先來學(xué)習(xí)引導(dǎo)層動(dòng) 畫的創(chuàng)建方法及其原理，為后續(xù)的提高打下理論基礎(chǔ)。一、引導(dǎo)層原理（10分鐘）如上圖所示為被引導(dǎo)層上小球在第1幀和第50幀處的位置， 如下圖所示，為小

4、球的全部運(yùn)動(dòng)軌跡。講授新課65 分 鐘演示操作實(shí)例：“小球做曲線運(yùn)動(dòng)”講授新課65 分 鐘演示操作實(shí)例：“小球做曲線運(yùn)動(dòng)”講授、演 示二、創(chuàng)建引導(dǎo)層。（35分鐘）1、用鼠標(biāo)右鍵創(chuàng)建引導(dǎo)層創(chuàng)建引導(dǎo)層：新建一個(gè)圖層，鼠標(biāo)右擊 圖層，選擇引導(dǎo)層。反之，可取消引導(dǎo)層。2、【圖層屬性】對(duì)話框，選擇引導(dǎo)層或被引導(dǎo)層演示操作實(shí)例：“賽車”要點(diǎn)提示：引導(dǎo)層上的路徑在發(fā)布后，并不會(huì)顯示出來，只是 作為被引導(dǎo)圖形的運(yùn)動(dòng)軌跡。在被引導(dǎo)層上被引導(dǎo)的圖形必須是元 件，而且必須創(chuàng)建補(bǔ)間動(dòng)畫，同時(shí)還需要將元件在關(guān)鍵幀處的“變 形中心”設(shè)置到引導(dǎo)層上的路徑上，這樣才能成功創(chuàng)建引導(dǎo)層動(dòng) 畫。3、被引導(dǎo)層里的對(duì)象可以建立動(dòng)畫。播

5、放動(dòng)畫實(shí)例：圓周運(yùn)動(dòng)、魚在游。5、編輯引導(dǎo)層：建立引導(dǎo)層后，引導(dǎo)層與被引導(dǎo)層都處于鎖定狀 態(tài)，不能被編輯?？蓡螕魧?duì)應(yīng)圖層的鎖定狀態(tài)來解除鎖定。解除鎖 定后可在該層的合適位置創(chuàng)建路徑，對(duì)被引導(dǎo)層進(jìn)行引導(dǎo)。三、多層引導(dǎo)動(dòng)畫（15分鐘）將普通圖層拖動(dòng)到引導(dǎo)層或被引導(dǎo)層的下面，即可將普通圖層轉(zhuǎn)化 為其被引導(dǎo)層，在一組引導(dǎo)中，引導(dǎo)層只能有一個(gè)，而被引導(dǎo)層可 以有多個(gè)，那就是多層引導(dǎo)。演示操作實(shí)例：“文字軌跡”要點(diǎn)提示：1、軌跡運(yùn)動(dòng)中，運(yùn)動(dòng)對(duì)象的中心點(diǎn)要與軌跡的起點(diǎn)和終點(diǎn)重合，否 則不能沿軌跡運(yùn)動(dòng)2、可利用“磁鐵”工具實(shí)現(xiàn)對(duì)象與軌跡之間的精確對(duì)齊3、軌跡必須是非閉合曲線，若是閉合曲線要擦去一個(gè)小缺口，作為

6、 運(yùn)動(dòng)的起始點(diǎn)4、若要使物體運(yùn)動(dòng)沿著路徑自動(dòng)改變方向，則須在屬性面版勾取 “調(diào)整到路徑”選項(xiàng)小結(jié)_5_分鐘1、在做引導(dǎo)層動(dòng)畫時(shí)，為何運(yùn)動(dòng)對(duì)象會(huì)出現(xiàn)直線運(yùn)動(dòng)而不是按引 導(dǎo)層的軌跡運(yùn)動(dòng)？2、首尾兩個(gè)關(guān)鍵幀的中心點(diǎn)必須與引導(dǎo)線的端點(diǎn)對(duì)齊，可利用磁 鐵工具方便對(duì)齊。提問、討 論、回答布置作業(yè) 分鐘預(yù)習(xí)P142到P145制作“蝴蝶戲花”提示：兩只蝴蝶的運(yùn)動(dòng)分別要用兩個(gè)引導(dǎo)線。板書設(shè)計(jì)【實(shí)訓(xùn)教案】項(xiàng)目名稱制作“蝴蝶戲花”動(dòng)畫學(xué)時(shí)1實(shí)訓(xùn)目的本案例通過制作一個(gè)蝴蝶飛舞的效果掌握：使用引導(dǎo)層動(dòng)畫制作隨機(jī)飛 舞的動(dòng)畫效果。教學(xué)準(zhǔn)備教師機(jī)1臺(tái)、學(xué)生機(jī)若干、多媒體演示與控制系統(tǒng)、課件、FLASH教材、素材上課禮儀，清

7、點(diǎn)人數(shù)，集中學(xué)生注意力組織教學(xué)（5 分鐘）制作思路及效果:組織教學(xué)（5 分鐘）制作思路及效果:示范演示（7分鐘）1、導(dǎo)入素材布置場(chǎng)景。（1）新建一個(gè)Flash文檔。（2）新建并重命名圖層，設(shè)置圖層的效果。（3）選擇【文件】/【導(dǎo)入】/【打開外部庫】命令，將教學(xué)素材中的“素材項(xiàng)目六蝴蝶戲花素材.fla”文件打開。（4）關(guān)閉外部庫，將“花草”元件拖入到“花草”圖層上釋放，并相 對(duì)舞臺(tái)居中對(duì)齊，使其剛好覆蓋整個(gè)舞臺(tái)，設(shè)置完成后將“花草”圖層 鎖定。（5）將“前面花”元件拖入到“前花”圖層上釋放，調(diào)整其位置。設(shè) 置完成后將“前花”圖層鎖定。至此場(chǎng)景的搭建就完成了。2、制作蝴蝶飛舞效果。（1）在“蝴蝶1

8、路徑”圖層上繪制的路徑。（2）將“蝴蝶1”元件拖入到“蝴蝶1”圖層上釋放，利用【任意變形】 工具設(shè)置其“變形中心”到蝴蝶頭部位置。（3）利用【選擇】工具，將“蝴蝶1”元件移動(dòng)到“蝴蝶1路徑”的最 右端。（4）在所有圖層的第170幀處插入幀，在“蝴蝶1”圖層的第100幀處 插入關(guān)鍵幀，并在第100幀處放置“蝴蝶1”元件位置。（5）在第120幀處插入關(guān)鍵幀，在第170幀處插入關(guān)鍵幀，并設(shè)置“蝴 蝶1”在第170幀的位置和大小。（6）“蝴蝶1”元件飛舞的幾個(gè)重要位置就設(shè)置完成了，在“蝴蝶1” 圖層的第1幀第100幀之間創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫，在第120幀第170 幀之間創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫。（7）將“蝴蝶1路

9、徑”圖層轉(zhuǎn)換為引導(dǎo)層，將“蝴蝶1”圖層轉(zhuǎn)換為其 被引導(dǎo)層。測(cè)試影片，可以看到“蝴蝶1”的飛舞動(dòng)畫就制作完成了。（8）“蝴蝶2”元件的制作和“蝴蝶1”元件的制作方法完全相同，這 里給出“蝴蝶2”元件的飛舞路徑和“蝴蝶2”元件在關(guān)鍵幀處的位置， 由讀者獨(dú)立完成其制作。（9）保存測(cè)試影片，一個(gè)美麗的蝴蝶戲花的效果制作完成。巡回指導(dǎo)（30分鐘）部分同學(xué)出現(xiàn)引導(dǎo)線交叉的錯(cuò)誤，通過個(gè)別指導(dǎo)之后都能順利完成作品結(jié)束指導(dǎo)（3分鐘）本案例通過制作一個(gè)蝴蝶飛舞的效果掌握使用引導(dǎo)層動(dòng)畫制作隨機(jī)飛舞的動(dòng)畫效果。對(duì)學(xué)生作業(yè)進(jìn)行抽查，表揚(yáng)做的比較優(yōu)秀的同學(xué)，同時(shí)對(duì)一些做的不夠 好的效果的作品進(jìn)行改正【實(shí)訓(xùn)教案】項(xiàng)目名稱制

10、作“街頭籃球”動(dòng)畫學(xué)時(shí)實(shí)訓(xùn)目的掌握引導(dǎo)層動(dòng)畫制作原理以及路徑的調(diào)整教學(xué)準(zhǔn)備組織教學(xué)（_5_分鐘）項(xiàng)目名稱制作“街頭籃球”動(dòng)畫學(xué)時(shí)實(shí)訓(xùn)目的掌握引導(dǎo)層動(dòng)畫制作原理以及路徑的調(diào)整教學(xué)準(zhǔn)備組織教學(xué)（_5_分鐘）教師機(jī)1臺(tái)、學(xué)生機(jī)若干、多媒體演示與控制系統(tǒng)、課件、FLASH教材、素材上課禮儀，清點(diǎn)人數(shù)，集中學(xué)生注意力1、打開素材文檔進(jìn)行分析。（1）雙擊場(chǎng)景中的“男孩”元件進(jìn)入其元件內(nèi)部，觀察前5幀的動(dòng)畫，如圖所示?？?以發(fā)現(xiàn)，當(dāng)在第4幀時(shí)，男孩手中的籃球消失了，在第5幀處，男孩做出了一個(gè)投籃的 動(dòng)作，從而可以推斷出，引導(dǎo)層動(dòng)畫應(yīng)該從第4幀開始，并且籃球的位置要根據(jù)第4 幀男孩的手的位置來確定。示范演示（

11、10分鐘）示范演示（10分鐘）（2）返回主場(chǎng)景，觀察整個(gè)舞臺(tái)如下圖所示，可以發(fā)現(xiàn)籃球在運(yùn)動(dòng)過程中，要經(jīng)過“男 孩的手”、“籃筐”、“球網(wǎng)”這3個(gè)圖形。所以根據(jù)視角分析，可以判定引導(dǎo)層應(yīng)該創(chuàng)建 在“男孩”、“籃筐前沿”、“球網(wǎng)”這3個(gè)元件所在圖層的下面，而在“籃板”,“地板”、“籃筐后沿”這3個(gè)元件所在圖層的上面。曲四口衛(wèi)男孩*旦然曲四口衛(wèi)男孩*旦然麾前沿*口與建網(wǎng)，引導(dǎo)層f * 0籃板*指墻體*2、制作引導(dǎo)層動(dòng)畫。（1）將所有圖層鎖定，在“籃板”圖層之上新建圖層并重命名為“引導(dǎo)層”根據(jù)前面 的分析，在時(shí)間軸的第4幀處插入關(guān)鍵幀，如圖所示。Mal（2）在“引導(dǎo)層”的第4幀處，利用【直線】工具和【

12、選擇】工具繪制出籃球運(yùn)動(dòng)的 軌跡如圖所示。（在繪制籃球路徑曲線時(shí)，應(yīng)盡量發(fā)揮想象，將籃球的真實(shí)飛行軌跡描 繪出來。）不:言:毒依患1匕0 不:言:毒依患1匕0 fs（3）在“引導(dǎo)層”圖層下面新建圖層并重命名為“籃球”層，在第幀處插入關(guān)鍵幀， 然后將“籃球”元件從【庫】面板中拖動(dòng)到“籃球”圖層上，如下圖所示。R同軸x. 犢口口 TOC o 1-5 h z U里雅白印盤WHiEm二I曰時(shí):河二I口引導(dǎo)居吊籃或(4)在“籃球”圖層的第30幀處插入關(guān)鍵幀，在第4幀第30幀之間創(chuàng)建動(dòng)作補(bǔ)間 動(dòng)畫。(5)將【貼近至對(duì)象】按鈕按下，利用【選擇】工具設(shè)置籃球在第4幀的位置到引導(dǎo) 線的最左端，設(shè)置第30幀的位置

13、到引導(dǎo)線的最右端，并確?！盎@球”元件的“變形中 心”一定要在引導(dǎo)線上，效果如下圖所示。(6)用鼠標(biāo)右鍵單擊“引導(dǎo)層”圖層，在彈出的快捷菜單中選擇【引導(dǎo)層】命令，將其轉(zhuǎn)化為引導(dǎo)層。(7)將“籃球”圖層拖動(dòng)到“引導(dǎo)層”圖層的下面，當(dāng)“引導(dǎo)層”圖層的圖標(biāo)由變?yōu)?狀態(tài)時(shí)釋放，將其轉(zhuǎn)化為被引導(dǎo)層，效果如圖所示。3、完善引導(dǎo)層動(dòng)畫。(1)按Ctrl+Enter快捷鍵測(cè)試觀看影片，發(fā)現(xiàn)籃球的運(yùn)動(dòng)過程顯得十分僵硬，沒有速 率變化，和真實(shí)的籃球運(yùn)動(dòng)差別很大，需要對(duì)其進(jìn)行緩動(dòng)設(shè)置。(2)選中“籃球”圖層上的第4幀，在【屬性】面板中單擊按鈕，如圖7-20所示打開【自定義緩入/緩出】對(duì)話框，將曲線調(diào)整至如圖所示的效果

14、（3）通常情況下，籃球在被投射出去之后，還會(huì)具有相對(duì)于投球人手的反轉(zhuǎn)運(yùn)動(dòng)，所 以在【屬性】面板中設(shè)置【旋轉(zhuǎn)】屬性為“逆時(shí)針”，【次】為“5”，如圖所示。（4）再次測(cè)試觀看影片，籃球的運(yùn)動(dòng)真實(shí)了，但是發(fā)現(xiàn)籃球在穿越“球網(wǎng)”的時(shí)候球 網(wǎng)沒有任何的動(dòng)作，這是不符合實(shí)際情況的，如圖所示。（5）通常情況下，球在穿越球網(wǎng)的時(shí)候，球網(wǎng)都會(huì)由于慣性和自身彈性反彈起來。所 以需要在“球網(wǎng)”圖層的第13幀、第14幀和第15幀處插入關(guān)鍵幀，并調(diào)整第14幀處 的球網(wǎng)形狀，最后得到如圖所示的效果。（6）保存測(cè)試影片，可以看到一個(gè)十分真實(shí)、完美的街頭籃球效果制作完成。巡回指 導(dǎo)（27 分鐘）案例相對(duì)比較簡(jiǎn)單，基本上都能順

15、利做出來。結(jié)束指 導(dǎo) （3 分鐘）對(duì)學(xué)生作業(yè)進(jìn)行抽查，表揚(yáng)做的比較優(yōu)秀的同學(xué)，同時(shí)對(duì)一些做的不夠好的 效果的作品進(jìn)行改正【實(shí)訓(xùn)教案】項(xiàng)目名稱制作“魚兒荷間戲”動(dòng)畫學(xué)時(shí)2實(shí)訓(xùn)目的掌握多層引導(dǎo)動(dòng)畫效果制作教學(xué)準(zhǔn)備教師機(jī)1臺(tái)、學(xué)生機(jī)若干、多媒體演示與控制系統(tǒng)、課件、FLASH教材、素材組織教學(xué)（5 分鐘）上課禮儀，清點(diǎn)人數(shù)，集中學(xué)生注意力示范演示（20分 鐘）最終設(shè)計(jì)效果：&步&*A1、新建一個(gè)Flash文檔，設(shè)置文檔【尺寸】為 520pxX740px，【幀頻】為 “30fps”，其他屬性保持默認(rèn)參數(shù)。2、執(zhí)行【文件】/【導(dǎo)入】/【打開外部庫】命令將教學(xué)資源中的“素材第7講 魚兒荷間戲魚兒荷間戲-素

16、材.fla”文件打開，如圖所示。并將其中的影片剪輯 元件“鰭”、“身”、“頭”以及圖片“荷塘-背景.jpg”、“荷塘-前景.jpg” 復(fù)制粘貼到當(dāng)前的【庫】面板中。,5-0碘B杷T：寞cu 巴|0榭料理=.國*0I *n N Ljns Ciffl 史上細(xì)a 徽片營n 至片司情3、將“荷塘-背景.jpg”拖入到舞臺(tái)中，設(shè)置圖片大小為“520pxX740Px，相 對(duì)舞臺(tái)居中對(duì)齊，效果如圖所示。(4、繪制如圖所示的路徑。4、繪制如圖所示的路徑。5、利用【庫】面板中的“鰭”、“身” “、頭”3個(gè)元件在引導(dǎo)線的起始端，制 作出魚的效果如圖所示。要點(diǎn)提示：魚兒的身體由18個(gè)“身”元件和3個(gè)“鰭”元件構(gòu)成，元件的【寬度】和【長 度】以及【Alpha】值都有個(gè)遞減的效果，讀者可以按照自己的觀點(diǎn)來進(jìn)行變化， 制作出自己喜歡的“魚兒”。6、魚兒制作完成后，將構(gòu)成魚兒的元件全部分散到圖層。7、在第600幀處插入關(guān)鍵幀，并將“魚兒”移動(dòng)到引導(dǎo)線的末端，效果如圖所示。8、為組成“