(完整word版)flash基本動畫制作的教案

1、第 7 章 Flash 8 基礎(chǔ)與實(shí)例（ 2 ）常見動畫的制作知識點(diǎn)：1 、逐幀動畫的制作。2 、形狀補(bǔ)間動畫的制作。3 、動作補(bǔ)間動畫的制作。4 、遮罩動畫的制作。5 、引導(dǎo)路徑動畫的制作。學(xué)時(shí)分配： 2 學(xué)時(shí)教學(xué)內(nèi)容：6 、逐幀動畫的制作。7 、形狀補(bǔ)間動畫的制作。8 、動作補(bǔ)間動畫的制作。9 、遮罩動畫的制作。10 、引導(dǎo)路徑動畫的制作。教學(xué)重點(diǎn)：11 、形狀補(bǔ)間動畫的制作。12 、動作補(bǔ)間動畫的制作。13 、遮罩動畫的制作。14 、引導(dǎo)路徑動畫的制作。教學(xué)難點(diǎn)：形狀補(bǔ)間動畫與動作補(bǔ)間動畫的區(qū)別。教學(xué)方法與手段：講授法，多媒體展示教學(xué)過程：（一）創(chuàng)設(shè)意境，導(dǎo)入新課（設(shè)疑法、提問法）導(dǎo)入：

2、教師展示幾個(gè)Flash 實(shí)例，然后引導(dǎo)學(xué)生一個(gè)一個(gè)親自動手制作。引入新課程：（二）新課教學(xué)（講解法、提問法、示范法、實(shí)驗(yàn)法）本次課開始學(xué)習(xí)用 Flash制作動畫效果，在Flash中共有5種動畫形式：逐幀動畫、形 狀補(bǔ)間動畫、動作補(bǔ)間動畫、遮罩動畫、引導(dǎo)路徑動畫。逐幀動畫的制作逐幀動畫是一種常見的動畫手法，它的原理是在“連續(xù)的關(guān)鍵幀”中分解動畫動作，也就是每一幀中的內(nèi)容不同，連續(xù)播放而成的一種動畫。優(yōu)點(diǎn)：與電影播放模式相似，適合于表演很細(xì)膩的動畫，如 3D動畫、人物或動物急劇 轉(zhuǎn)身等效果。缺點(diǎn)：每一幀的序列內(nèi)容都不一樣，增加制作負(fù)擔(dān)，文件存儲容量過大。一、逐幀動畫的概念和在時(shí)間幀上的表現(xiàn)形式在時(shí)

3、間幀上逐幀繪制幀內(nèi)容稱為逐幀動畫，由于是一幀一幀的畫， 所以逐幀動畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容。逐幀動畫在時(shí)間幀上表現(xiàn)為連續(xù)出現(xiàn)的關(guān)鍵幀，如圖 7-3-1所示。未命名T*圖7-3-1 逐幀動畫二、創(chuàng)建逐幀動畫的幾種方法1 .用導(dǎo)入的靜態(tài)圖片建立逐幀動畫用jpg、png等格式的靜態(tài)圖片連續(xù)導(dǎo)入Flash中，就會建立一段逐幀動畫。2 .繪制矢量逐幀動畫用鼠標(biāo)或壓感筆在場景中一幀一幀地畫出每一幀內(nèi)容。3 .文字逐幀動畫用文字作幀中的元件，實(shí)現(xiàn)文字跳躍、旋轉(zhuǎn)等特效。4 .導(dǎo)入序列圖像可以導(dǎo)入gif序列圖像、swf動畫文件或者利用第三方軟件（如 swish、swift 3D 等）

4、產(chǎn)生的動畫序列。三、繪圖紙功能1 .繪圖紙的功能繪圖紙是一個(gè)幫助定位和編輯動畫的輔助功能， 這個(gè)功能對制作逐幀動畫特別有用。 通 常情況下，F(xiàn)lash在舞臺中一次只能顯示動畫序列的單個(gè)幀。 使用繪圖紙功能后， 你就可以 在舞臺中一次查看兩個(gè)或多個(gè)幀了。如下圖所示是使用繪圖紙功能后的場景， 可以看出，當(dāng)前幀中內(nèi)容用全彩色顯示， 其它 幀內(nèi)容以半透明顯示， 它使我們看起來好像所有幀內(nèi)容是畫在一張半透明的繪圖紙上， 這些 內(nèi)容相互層疊在一起。當(dāng)然，這時(shí)你只能編輯當(dāng)前幀的內(nèi)容。I I2 .繪圖紙各個(gè)按鈕的介紹(1) 司【繪圖紙外觀】按鈕：按下此按鈕后，在時(shí)間幀的上方，出現(xiàn) 跑 繪圖 紙外觀標(biāo)記。拉動外

5、觀標(biāo)記的兩端，可以擴(kuò)大或縮小顯示范圍。(2) M繪圖紙外觀輪廓】按鈕：按下此按鈕后，場景中顯示各幀內(nèi)容的輪廓線，填 充色消失，特別適合觀察對象輪廓，另外可以節(jié)省系統(tǒng)資源，加快顯示過程。(3) :"【編輯多個(gè)幀】 按鈕：按下此按鈕后，可以顯示全部幀內(nèi)容， 并且可以進(jìn)行“多 幀同時(shí)編輯”。(4) 1曰【修改繪圖紙標(biāo)記】按鈕：按下此按鈕后，彈出菜單，菜單中有以下五個(gè)選項(xiàng)：“總是顯示標(biāo)記”選項(xiàng)會在時(shí)間軸標(biāo)題中顯示繪圖紙外觀標(biāo)記，無論繪圖紙外觀 是否打開?！板^定繪圖紙”選項(xiàng)會將繪圖紙外觀標(biāo)記鎖定在它們在時(shí)間軸標(biāo)題中的當(dāng)前位置。 通常情況下，繪圖紙外觀范圍是和當(dāng)前幀的指針以及繪圖紙外觀標(biāo)記相關(guān)的

6、。通 過錨定繪圖紙外觀標(biāo)記，可以防止它們隨當(dāng)前幀的指針移動?！袄L圖紙2 ”選項(xiàng)會在當(dāng)前幀的兩邊顯示兩個(gè)幀?！袄L圖紙5 ”選項(xiàng)會在當(dāng)前幀的兩邊顯示五個(gè)幀?！袄L制全部”選項(xiàng)會在當(dāng)前幀的兩邊顯示全部幀。上面，我們?nèi)娼榻B了逐幀動畫的特點(diǎn)和創(chuàng)建方法，現(xiàn)在，我們來動手制作兩個(gè)逐幀動畫實(shí)例，以加深對逐幀動畫的認(rèn)識?！緦?shí)戰(zhàn)練習(xí)】閃動的小球(1)新建一個(gè)文件，背景色為黑色。(2)在第1幀內(nèi)繪制一個(gè)黑色到綠色放射漸變的小球，調(diào)整到合適的大小與位置。(3)在第2幀插入關(guān)鍵幀，將小球的大小、位置、顏色都調(diào)整到合適的情況。(4)同樣制作其第3幀到第6幀。最終時(shí)間軸如下圖所示。,時(shí)閏軸|信場景1|一 IHHIIHIia

7、p illHI HHI I | I I P II *圖口 151015202;日4曰血 一舊力E 112.0 f(5)測試存盤執(zhí)行【控制】|【測試影片】命令，觀察本例 swf文件生成的動畫有無問題，如果滿意， 執(zhí)行【文件】|【保存】命令，將文件保存成“閃動的小球.fla ”文件進(jìn)行存盤，如果要導(dǎo)出Flash的播放文件，執(zhí)行【導(dǎo)出】|【導(dǎo)出影片】命令保存成“閃動的小球.swf ”文件。形狀補(bǔ)間動畫一、形狀補(bǔ)間動畫概述1 .形狀補(bǔ)間動畫的概念在Flash的時(shí)間幀面板上，在一個(gè)時(shí)間點(diǎn)(關(guān)鍵幀)繪制一個(gè)形狀，然后在另一個(gè)時(shí)間點(diǎn)(關(guān)鍵幀)更改該形狀或繪制另一個(gè)形狀，F(xiàn)lash根據(jù)二者之間的幀的值或形狀來

8、創(chuàng)建的動畫被稱為“形狀補(bǔ)間動畫”。2 .構(gòu)成形狀補(bǔ)間動畫的元素形狀補(bǔ)間動畫可以實(shí)現(xiàn)兩個(gè)圖形之間顏色、形狀、大小、位置的相互變化，其變形的靈活性介于逐幀動畫和動作補(bǔ)間動畫二者之間，使用的元素多為用鼠標(biāo)或壓感筆繪制出的形狀，如果使用圖形元件、按鈕、文字，則必先“打散”再變形。3 .形狀補(bǔ)間動畫在時(shí)間幀面板上的表現(xiàn)形狀補(bǔ)間動畫建好后，時(shí)間幀面板的背景色變?yōu)榈G色，在起始幀和結(jié)束幀之間有一個(gè)長長的箭頭，如下圖所示。工間軸 酉婕1部圖口15 I口 心 航 鋁 卻 注 4045 Ms5Mju4 .創(chuàng)建形狀補(bǔ)間動畫的方法在時(shí)間軸面板上動畫開始播放的地方創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置要開始變形的形狀，一般一幀中以

9、一個(gè)對象為好， 在動畫結(jié)束處創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置要變成的形狀，再單擊開始幀，在【屬性】面板上單擊【補(bǔ)間】旁邊的小三角形，在彈出的菜單中選擇【形狀】， 此時(shí)，時(shí)間軸上就出現(xiàn)一個(gè)淡綠色的形變動畫效果，一個(gè)形狀補(bǔ)間動畫就創(chuàng)建完畢。5 .認(rèn)識形狀補(bǔ)間動畫的屬性面板Flash的【屬性】面板隨鼠標(biāo)選定的對象不同而發(fā)生相應(yīng)的改變。當(dāng)我們建立了一個(gè)形狀補(bǔ)間動畫后，點(diǎn)擊時(shí)間幀，【屬性】面板如下圖所示。哥i話搓1線【實(shí)戰(zhàn)練習(xí)】小球與文字的相互轉(zhuǎn)變制作步驟如下：(1)創(chuàng)建新文檔執(zhí)行【文件】【新建】命令，在彈出的面板中選擇【常規(guī)】 |【Flash文檔】選項(xiàng)后， 點(diǎn)擊【確定】按鈕，新建一個(gè)影片文檔，在【屬性】面板

10、上設(shè)置文件大小為550*400象素,【背景顏色】為黑色。(2)創(chuàng)建一個(gè)小球在圖層1的第1幀創(chuàng)建一個(gè)黑色到綠色放射漸變的小球。選擇工具欄上的橢圓工具10 ,去掉邊線 ”上 ,在場景中畫一個(gè)橢圓，調(diào)整到合適的大小與位置。(3)創(chuàng)建文字“變”在第20幀處插入一個(gè)關(guān)鍵幀，選擇“刷子”工具，設(shè)置需要的顏色效果，然后書寫 個(gè)文字“變”。(4)設(shè)置小球到文字的形狀補(bǔ)間動畫單擊第1幀，在【屬性】面板中將【補(bǔ)間】設(shè)置為【形狀】。(5)設(shè)置文字再到另一個(gè)小球的形狀補(bǔ)間動畫用同樣的方法制作文字到另一個(gè)小球的形狀補(bǔ)間動畫。(6)測試存盤執(zhí)行【控制】|【測試影片】命令，觀察本例swf文件生成的動畫有無問題，如果滿意,按

11、需要將其保存為“變形的小球.fla ”文件或者導(dǎo)出為“變形的小球 .swf ”文件。如下圖是其中幾個(gè)變形過渡幀。動作補(bǔ)間動畫1 .動作補(bǔ)間動畫的概念在Flash的時(shí)間幀面板上，在一個(gè)時(shí)間點(diǎn) (關(guān)鍵幀)放置一個(gè)元件，然后在另一個(gè)時(shí)間 點(diǎn)(關(guān)鍵幀)改變這個(gè)元件的大小、顏色、位置、透明度等等，F(xiàn)lash根據(jù)二者之間的幀的值創(chuàng)建的動畫被稱為動作補(bǔ)間動畫。2 .構(gòu)成動作補(bǔ)間動畫的元素構(gòu)成動作補(bǔ)間動畫的元素是元件，包括影片剪輯、圖形元件、按鈕等等，除了元件，其他元素比如位圖、文本等等都不能直接創(chuàng)建補(bǔ)間動畫，必須首先將它們轉(zhuǎn)換成元件才行，換句話說，只有把這些形狀“組合”或者轉(zhuǎn)換成“元件”后才可以制作“動作補(bǔ)

12、間動畫”。3 .動作補(bǔ)間動畫在時(shí)間幀面板上的表現(xiàn)動作補(bǔ)間動畫建立后，時(shí)間幀面板的背景色變?yōu)榈仙?，在起始幀和結(jié)束幀之間有一個(gè) 長長的箭頭，如下圖所示。4 .形狀補(bǔ)間動畫和動作補(bǔ)間動畫的區(qū)別前后都各有一個(gè)起始幀和結(jié)束幀。二者形狀補(bǔ)間動畫和動作補(bǔ)間動畫都屬于補(bǔ)間動畫, 之間的區(qū)別如下表所示。表5-1形狀補(bǔ)間動畫與動作補(bǔ)間動畫的區(qū)別區(qū)別之處形狀補(bǔ)間動畫動作補(bǔ)間動畫在時(shí)間軸上的表現(xiàn)淡綠色背景加長箭頭淡紫色背景加長箭頭組成元素形狀，如果使用圖形元件、按鈕、文字，則必先打散再變形。影片剪輯、圖形元件、按鈕，不能是形狀作用實(shí)現(xiàn)二個(gè)形狀之間的變化，或一個(gè)形狀的大小、位置、顏色等的變化。實(shí)現(xiàn)一個(gè)元件的大小、位置

13、、顏色、透明度等的變化。5 .創(chuàng)建動作補(bǔ)間動畫的方法在時(shí)間軸面板上動畫開始播放的地方創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置一個(gè)元件，一幀中只能放一個(gè)項(xiàng)目，在動畫要結(jié)束的地方創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置該元件的屬性，再單擊開始幀,在【屬性面板】上單擊【補(bǔ)間】旁邊的“小三角形”，在彈出的菜單中選擇【動作】，或者直接右擊，在彈出的菜單中選擇【新建補(bǔ)間動畫】，就建立了 “動作補(bǔ)間動畫”6 .認(rèn)識動作補(bǔ)間動畫的屬性面板在時(shí)間線“動作補(bǔ)間動畫”的起始幀上單擊，幀屬性面板會變成如下圖所示。【實(shí)戰(zhàn)練習(xí)】制作一個(gè)小球由大逐步變小的動畫。操作步驟：(1) 新建一個(gè)動畫文件。(2) 新建一個(gè)圖形元件，繪制一個(gè)小球。(3) 將元件

14、庫中的元件“小球”拖到舞臺上，根據(jù)需要改變其實(shí)例大小。(4) 在第30幀處插入關(guān)鍵幀，并將實(shí)例“小球”縮小。(5) 打開第1幀的屬性面板，設(shè)置補(bǔ)間方式為“動作”，創(chuàng)建動作補(bǔ)間動畫。(6) 然后按Ctrl +【Enter】測試動畫，效果如何？試試看吧。最后將文件存盤?！緦?shí)戰(zhàn)練習(xí)】讓小球產(chǎn)生旋轉(zhuǎn)及淡出的效果。操作步驟：(1) 打開前一實(shí)例文件，在時(shí)間軸第55幀插入關(guān)鍵幀。(2) 選中舞臺上的“小球”實(shí)例，將小球調(diào)大；設(shè)置實(shí)例的透明度(即調(diào)整顏色屬性Alpha值)為0。在第30關(guān)鍵幀與第55關(guān)鍵幀之間建立“動作補(bǔ)間動畫”。(3) 設(shè)置第30幀(關(guān)鍵幀)的屬性為：順時(shí)針旋轉(zhuǎn)3次。(4) 按【Ctrl】

15、+【Enter】測試影片，效果如何？【提示】與“形狀補(bǔ)間動畫”不同的是，“動作補(bǔ)間動畫”的對象必須是庫中的“元件”。其它的位圖、文本等都必須要轉(zhuǎn)換成元件，才可以生成“動作補(bǔ)間動畫”。遮罩動畫1 .遮罩的概念遮罩動畫是Flash中的一個(gè)很重要的動畫類型，很多效果豐富的動畫都是通過遮罩動畫來完成的。在Flash的圖層中有一個(gè)遮罩圖層類型，為了得到特殊的顯示效果，可以在遮罩 層上創(chuàng)建一個(gè)任意形狀的“視窗”，遮罩層下方的對象可以通過該“視窗”顯示出來，而“視 窗”之外的對象將不會顯示。2 .遮罩的作用在Flash動畫中，“遮罩”主要有兩個(gè)用途：第一個(gè)作用是用在整個(gè)場景或一個(gè)特定區(qū)域，使場景外的對象或特

16、定區(qū)域外的對象不可見，第二個(gè)作用是用來遮罩住某一元件的一部分，從而實(shí)現(xiàn)一些特殊的效果。3 .應(yīng)用遮罩時(shí)的技巧遮罩層的基本原理是：能夠透過該圖層中的對象看到“被遮罩層”中的對象及其屬性（包括它們的變形效果），但是遮罩層中對象的許多屬性如漸變色、透明度、顏色和線條樣式等卻是被忽略的。比如，我們不能通過遮罩層的漸變色來實(shí)現(xiàn)被 遮罩層的漸變色變化。要在場景中顯示遮罩效果，可以鎖定遮罩層和被遮罩層。可以用“ Actions ”動作語句建立遮罩，但這種情況下只能有一個(gè)“被遮罩層”， 同時(shí)，不能設(shè)置 Alpha屬性。不能用一個(gè)遮罩層試圖遮蔽另一個(gè)遮罩層。遮罩可以應(yīng)用在gif動畫上。在制作過程中，遮罩層經(jīng)常擋

17、住下層的元件，影響視線，無法編輯，可以按下遮罩層時(shí)間軸面板的顯示圖層輪廓按鈕 ,使之變成口，使遮罩層只顯示邊框形狀， 在種情況下，你還可以拖動邊框調(diào)整遮罩圖形的外形和位置。在被遮罩層中不能放置動態(tài)文本。【實(shí)戰(zhàn)練習(xí)】監(jiān)控的小球（望遠(yuǎn)鏡）（1）新建一個(gè)文件，在圖層 1的第1幀中插入一幅背景圖片，并將其設(shè)置為與屏幕一 樣大小，在第70幀處插入幀。(2)新建一個(gè)“望遠(yuǎn)鏡”圖形元件，用去掉邊框的橢圓工具繪制一個(gè)橢圓，并復(fù)制粘 貼出另外一個(gè)，將兩個(gè)圓重疊一部分放置，做成一個(gè)望遠(yuǎn)鏡的樣子。注意：這里望遠(yuǎn)鏡的顏色無所謂。(3)適的大小,放置在合適的位置。新建一個(gè)圖層2,將“望遠(yuǎn)鏡”圖形元件拖放一個(gè)實(shí)例到其第一

18、幀中，調(diào)整到合(4)“望遠(yuǎn)鏡”分別在圖層2的第20幀、第40幀和第60幀插入關(guān)鍵幀，并調(diào)整這三個(gè)關(guān)鍵幀中的位置，然后分別將該圖層的第1幀、第20幀、第40幀和第60幀設(shè)置補(bǔ)間動 畫為“動作”。(5)在圖層2的第70幀插入幀。(6)在圖層2的名字上右擊鼠標(biāo)，選擇“遮罩層”命令即可。最終時(shí)間軸如下圖所示。fl'JiXItt巧劃* LM 昌 口 151 015 TU君>兩。 <5 M 55 M *1匣互金/ , *J. . 一R E1.* *t(7)測試影片，觀看效果，如果發(fā)現(xiàn)動畫效果不太滿意的話，再按自己的意愿進(jìn)行修 改，最后將文件保存起來。引導(dǎo)路徑動畫1 .創(chuàng)建引導(dǎo)層和被引導(dǎo)

19、層一個(gè)最基本的“引導(dǎo)路徑動畫”是由兩個(gè)圖層組成的，上面一層是“引導(dǎo)層”， 它的圖 層圖標(biāo)為J飛，下面一層是“被引導(dǎo)層”，其圖標(biāo)為 力，同普通圖層圖標(biāo)一樣。在普通圖層上點(diǎn)擊時(shí)間軸面板的“添加引導(dǎo)層"按鈕,該層的上面就會添加一個(gè)引 導(dǎo)層,同時(shí)該普通層縮進(jìn)成為“被引導(dǎo)層”，如下圖所示。2 .引導(dǎo)層和被引導(dǎo)層中的對象引導(dǎo)層是用來指示元件運(yùn)行路徑的，所以“引導(dǎo)層”中的內(nèi)容可以是用鋼筆、鉛筆、線條、橢圓工具、矩形工具或畫筆工具等繪制出的線段。而“被引導(dǎo)層”中的對象是跟著引導(dǎo)線走的，可以使用影片剪輯、圖形元件、按鈕、文 字等，但不能應(yīng)用形狀。由于引導(dǎo)線是一種運(yùn)動軌跡，不難想象，“被引導(dǎo)層”中最常用

20、的動畫形式是動作補(bǔ)間 動畫，當(dāng)播放動畫時(shí)，一個(gè)或數(shù)個(gè)元件將沿著運(yùn)動路徑移動。3 .向被引導(dǎo)層中添加元件“引導(dǎo)路徑動畫”最基本的操作就是使一個(gè)運(yùn)動動畫“附著”在“引導(dǎo)線”上。所以操作時(shí)特別得注意“引導(dǎo)線”的兩端，被引導(dǎo)的對象起始、 終點(diǎn)的兩個(gè)“中心點(diǎn)” 一定要對準(zhǔn)“引導(dǎo)線”的兩個(gè)端點(diǎn)，如下圖所示。在上圖中，我們特地把“元件”的透明度設(shè)為50%使你可以透過元件看到下面的引導(dǎo)線，“元件”中心的十字星正好對著線段的端點(diǎn)，這一點(diǎn)非常重要，它是引導(dǎo)路徑動畫順利運(yùn)行的前提。應(yīng)用引導(dǎo)路徑動畫的技巧1. “被引導(dǎo)層”中的對象在被引導(dǎo)運(yùn)動時(shí)，還可作更細(xì)致的設(shè)置，比如運(yùn)動方向，把 【屬性】面板上的【路徑調(diào)整】前打上

21、勾，對象的基線就會調(diào)整到運(yùn)動路徑。而如果在【對齊】前打勾，元件的注冊點(diǎn)就會與運(yùn)動路徑對齊，如下圖所示。制摘謔_,肺廠觸口* |豆二£建慳：睢里1 :工卡粵翳目/E電？2 .引導(dǎo)層中的內(nèi)容在播放時(shí)是看不見的，利用這一特點(diǎn)，可以單獨(dú)定義一個(gè)不包含“被引導(dǎo)層”的“引導(dǎo)層”， 該引導(dǎo)層中可以放置一些文字說明、元件位置參考等，此時(shí)， 引導(dǎo)層的圖標(biāo)為 用3 .在做引導(dǎo)路徑動畫時(shí)，按下工具欄上的【對齊對象】功能按鈕 施，可以使“對象附 著于引導(dǎo)線”的操作更容易成功。4 .過于陡峭的引導(dǎo)線可能使引導(dǎo)動畫失敗，而平滑圓潤的線段有利于引導(dǎo)動畫的成功 制作。5 .被引導(dǎo)對象的中心對齊場景中的十字星，也有助于引導(dǎo)動畫的成功。6 .向被引導(dǎo)層中放入元件時(shí)，在動畫開始和結(jié)束的關(guān)鍵幀上，一定要讓元件的注冊點(diǎn)對準(zhǔn)線段的開始和結(jié)束的端點(diǎn)，否則無法正確引導(dǎo)，如果元件為不規(guī)則形， 可以按下工具欄 上的任意變形工具臼，調(diào)整注冊點(diǎn)。7 .如果想解除