flash基本動(dòng)畫制作教案

1、 形狀補(bǔ)間動(dòng)畫與動(dòng)作補(bǔ)間動(dòng)畫的區(qū)別。教學(xué)方法與手段：講授法，多媒體展示（一）創(chuàng)設(shè)意境，導(dǎo)入新課（設(shè)疑法、提問法）教師展示幾個(gè)Flash實(shí)例，然后引導(dǎo)學(xué)生一個(gè)一個(gè)親自動(dòng)手制作。（二）新課教學(xué)（講解法、提問法、示范法、實(shí)驗(yàn)法） 本次課開始學(xué)習(xí)用Flash制作動(dòng)畫效果，在Flash中共有5種動(dòng)畫形式：逐幀動(dòng)畫、 形狀補(bǔ)間動(dòng)畫、動(dòng)作補(bǔ)間動(dòng)畫、遮罩動(dòng)畫、引導(dǎo)路徑動(dòng)畫。逐幀動(dòng)畫是一種常見的動(dòng)畫手法，它的原理是在“連續(xù)的關(guān)鍵幀”中分解動(dòng)畫動(dòng)作， 也就是每一幀中的內(nèi)容不同，連續(xù)播放而成的一種動(dòng)畫。優(yōu)點(diǎn)：與電影播放模式相似，適合于表演很細(xì)膩的動(dòng)畫，如3D動(dòng)畫、人物或動(dòng)物急劇 缺點(diǎn)：每一幀的序列內(nèi)容都不一樣，增加

2、制作負(fù)擔(dān)，文件存儲(chǔ)容量過大。一、逐幀動(dòng)畫的概念和在時(shí)間幀上的表現(xiàn)形式在時(shí)間幀上逐幀繪制幀內(nèi)容稱為逐幀動(dòng)畫，由于是一幀一幀的畫，所以逐幀動(dòng)畫具有 非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容。逐幀動(dòng)畫在時(shí)間幀上表現(xiàn)為連續(xù)出現(xiàn)的關(guān)鍵幀，如圖7-3-1所示。 二、創(chuàng)建逐幀動(dòng)畫的幾種方法1用導(dǎo)入的靜態(tài)圖片建立逐幀動(dòng)畫用jpg、png等格式的靜態(tài)圖片連續(xù)導(dǎo)入Flash中，就會(huì)建立一段逐幀動(dòng)畫。2繪制矢量逐幀動(dòng)畫用鼠標(biāo)或壓感筆在場景中一幀一幀地畫出每一幀內(nèi)容。3. 文字逐幀動(dòng)畫用文字作幀中的元件，實(shí)現(xiàn)文字跳躍、旋轉(zhuǎn)等特效。4. 導(dǎo)入序列圖像 等）產(chǎn)生的動(dòng)畫序列。三、繪圖紙功能繪圖紙是一個(gè)幫助定位和編輯動(dòng)畫

3、的輔助功能，這個(gè)功能對(duì)制作逐幀動(dòng)畫特別有用。 通常情況下， Flash 在舞臺(tái)中一次只能顯示動(dòng)畫序列的單個(gè)幀。使用繪圖紙功能后，你就 可以在舞臺(tái)中一次查看兩個(gè)或多個(gè)幀了。如下圖所示是使用繪圖紙功能后的場景，可以看出，當(dāng)前幀中內(nèi)容用全彩色顯示，其 它幀內(nèi)容以半透明顯示，它使我們看起來好像所有幀內(nèi)容是畫在一張半透明的繪圖紙上，這些內(nèi)容相互層疊在一起。當(dāng)然，這時(shí)你只能編輯當(dāng)前幀的內(nèi)容。2繪圖紙各個(gè)按鈕的介紹 紙外觀標(biāo)記。拉動(dòng)外觀標(biāo)記的兩端，可以擴(kuò)大或縮小顯示范圍。 填充色消失，特別適合觀察對(duì)象輪廓，另外可以節(jié)省系統(tǒng)資源，加快顯示過程。 “多幀同時(shí)編輯”。 “總是顯示標(biāo)記”選項(xiàng)會(huì)在時(shí)間軸標(biāo)題中顯示繪圖

4、紙外觀標(biāo)記，無論繪圖紙外觀 “錨定繪圖紙”選項(xiàng)會(huì)將繪圖紙外觀標(biāo)記鎖定在它們?cè)跁r(shí)間軸標(biāo)題中的當(dāng)前位 置。通常情況下，繪圖紙外觀范圍是和當(dāng)前幀的指針以及繪圖紙外觀標(biāo)記相關(guān) 的。通過錨定繪圖紙外觀標(biāo)記，可以防止它們隨當(dāng)前幀的指針移動(dòng)。 上面，我們?nèi)娼榻B了逐幀動(dòng)畫的特點(diǎn)和創(chuàng)建方法，現(xiàn)在，我們來動(dòng)手制作兩個(gè)逐幀 動(dòng)畫實(shí)例，以加深對(duì)逐幀動(dòng)畫的認(rèn)識(shí)?！緦?shí)戰(zhàn)練習(xí)】閃動(dòng)的小球（1）新建一個(gè)文件，背景色為黑色。（2）在第1幀內(nèi)繪制一個(gè)黑色到綠色放射漸變的小球，調(diào)整到合適的大小與位置。（3）在第2幀插入關(guān)鍵幀，將小球的大小、位置、顏色都調(diào)整到合適的情況。 最終時(shí)間軸如下圖所示。（5）測試存盤 一、形狀補(bǔ)間動(dòng)畫概述

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

6、的形 狀，一般一幀中以一個(gè)對(duì)象為好，在動(dòng)畫結(jié)束處創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置要變成的形 狀，再單擊開始幀，在【屬性】面板上單擊【補(bǔ)間】旁邊的小三角形，在彈出的菜單中選 擇【形狀】，此時(shí)，時(shí)間軸上就出現(xiàn)一個(gè)淡綠色的形變動(dòng)畫效果，一個(gè)形狀補(bǔ)間動(dòng)畫就創(chuàng) 5.認(rèn)識(shí)形狀補(bǔ)間動(dòng)畫的屬性面板Flash的【屬性】面板隨鼠標(biāo)選定的對(duì)象不同而發(fā)生相應(yīng)的改變。當(dāng)我們建立了一個(gè)形狀補(bǔ)間動(dòng)畫后，點(diǎn)擊時(shí)間幀，【屬性】面板如下圖所示?！緦?shí)戰(zhàn)練習(xí)】小球與文字的相互轉(zhuǎn)變（1）創(chuàng)建新文檔 后，點(diǎn)擊【確定】按鈕，新建一個(gè)影片文檔，在【屬性】面板上設(shè)置文件大小為550*400 象素，【背景顏色】為黑色。（2）創(chuàng)建一個(gè)小球 ，去掉邊線，

7、去掉邊線 ，在場景中畫一個(gè)橢圓，調(diào)整到合適的大小與位置。（3）創(chuàng)建文字“變”在第20幀處插入一個(gè)關(guān)鍵幀，選擇“刷子”工具，設(shè)置需要的顏色效果，然后書寫一（4）設(shè)置小球到文字的形狀補(bǔ)間動(dòng)畫單擊第1幀，在【屬性】面板中將【補(bǔ)間】設(shè)置為【形狀】。（5）設(shè)置文字再到另一個(gè)小球的形狀補(bǔ)間動(dòng)畫用同樣的方法制作文字到另一個(gè)小球的形狀補(bǔ)間動(dòng)畫。（6）測試存盤 意，按需要將其保存為“變形的小球.fla”文件或者導(dǎo)出為“變形的小球.swf”文件。如下圖是其中幾個(gè)變形過渡幀。1動(dòng)作補(bǔ)間動(dòng)畫的概念在Flash的時(shí)間幀面板上，在一個(gè)時(shí)間點(diǎn)（關(guān)鍵幀）放置一個(gè)元件，然后在另一個(gè)時(shí) 幀的值創(chuàng)建的動(dòng)畫被稱為動(dòng)作補(bǔ)間動(dòng)畫。2構(gòu)成

8、動(dòng)作補(bǔ)間動(dòng)畫的元素構(gòu)成動(dòng)作補(bǔ)間動(dòng)畫的元素是元件，包括影片剪輯、圖形元件、按鈕等等，除了元件,其 他元素比如位圖、文本等等都不能直接創(chuàng)建補(bǔ)間動(dòng)畫，必須首先將它們轉(zhuǎn)換成元件才行， 換句話說，只有把這些形狀“組合”或者轉(zhuǎn)換成“元件”后才可以制作“動(dòng)作補(bǔ)間動(dòng) 3動(dòng)作補(bǔ)間動(dòng)畫在時(shí)間幀面板上的表現(xiàn)動(dòng)作補(bǔ)間動(dòng)畫建立后，時(shí)間幀面板的背景色變?yōu)榈仙谄鹗紟徒Y(jié)束幀之間有一個(gè)長長的箭頭，如下圖所示。4形狀補(bǔ)間動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫的區(qū)別形狀補(bǔ)間動(dòng)畫和動(dòng)作補(bǔ)間動(dòng)畫都屬于補(bǔ)間動(dòng)畫，前后都各有一個(gè)起始幀和結(jié)束幀。二 者之間的區(qū)別如下表所示。表 5-1 形狀補(bǔ)間動(dòng)畫與動(dòng)作補(bǔ)間動(dòng)畫的區(qū)別 形狀補(bǔ)間動(dòng)畫動(dòng)作補(bǔ)間動(dòng)畫5創(chuàng)建動(dòng)作

9、補(bǔ)間動(dòng)畫的方法在時(shí)間軸面板上動(dòng)畫開始播放的地方創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置一個(gè)元件，一幀中只能 放一個(gè)項(xiàng)目，在動(dòng)畫要結(jié)束的地方創(chuàng)建或選擇一個(gè)關(guān)鍵幀并設(shè)置該元件的屬性，再單擊開 始幀，在【屬性面板】上單擊【補(bǔ)間】旁邊的“小三角形”，在彈出的菜單中選擇【動(dòng) 作】，或者直接右擊，在彈出的菜單中選擇【新建補(bǔ)間動(dòng)畫】，就建立了“動(dòng)作補(bǔ)間動(dòng) 畫”6.認(rèn)識(shí)動(dòng)作補(bǔ)間動(dòng)畫的屬性面板在時(shí)間線“動(dòng)作補(bǔ)間動(dòng)畫”的起始幀上單擊，幀屬性面板會(huì)變成如下圖所示?！緦?shí)戰(zhàn)練習(xí)】制作一個(gè)小球由大逐步變小的動(dòng)畫。 （2） 新建一個(gè)圖形元件，繪制一個(gè)小球。（3） 將元件庫中的元件“小球”拖到舞臺(tái)上，根據(jù)需要改變其實(shí)例大小。 （5） 打開

10、第1 幀的屬性面板，設(shè)置補(bǔ)間方式為“動(dòng)作”，創(chuàng)建動(dòng)作補(bǔ)間動(dòng)畫。 【實(shí)戰(zhàn)練習(xí)】讓小球產(chǎn)生旋轉(zhuǎn)及淡出的效果。 （2） 選中舞臺(tái)上的“小球” 實(shí)例，將小球調(diào)大；設(shè)置實(shí)例的透明度（即調(diào)整顏色屬性Alpha值）為0。 【提示】與“形狀補(bǔ)間動(dòng)畫”不同的是，“動(dòng)作補(bǔ)間動(dòng)畫”的對(duì)象必須是庫中的“元件”。其 它的位圖、文本等都必須要轉(zhuǎn)換成元件，才可以生成“動(dòng)作補(bǔ)間動(dòng)畫”。 遮罩動(dòng)畫是Flash中的一個(gè)很重要的動(dòng)畫類型，很多效果豐富的動(dòng)畫都是通過遮罩動(dòng) 畫來完成的。在Flash的圖層中有一個(gè)遮罩圖層類型，為了得到特殊的顯示效果，可以在 遮罩層上創(chuàng)建一個(gè)任意形狀的“視窗”，遮罩層下方的對(duì)象可以通過該“視窗”顯示出

11、來，而“視窗”之外的對(duì)象將不會(huì)顯示。在Flash動(dòng)畫中，“遮罩”主要有兩個(gè)用途：第一個(gè)作用是用在整個(gè)場景或一個(gè)特定 區(qū)域，使場景外的對(duì)象或特定區(qū)域外的對(duì)象不可見，第二個(gè)作用是用來遮罩住某一元件的 一部分，從而實(shí)現(xiàn)一些特殊的效果。3.應(yīng)用遮罩時(shí)的技巧 遮罩層的基本原理是：能夠透過該圖層中的對(duì)象看到“被遮罩層”中的對(duì)象及其屬性（包括它們的變形效果），但是遮罩層中對(duì)象的許多屬性如漸變色、透明 度、顏色和線條樣式等卻是被忽略的。比如，我們不能通過遮罩層的漸變色來實(shí) 現(xiàn)被遮罩層的漸變色變化。 要在場景中顯示遮罩效果，可以鎖定遮罩層和被遮罩層。 可以用“Actions”動(dòng)作語句建立遮罩，但這種情況下只能有

12、一個(gè)“被遮罩層”，同時(shí)，不能設(shè)置Alpha屬性。 不能用一個(gè)遮罩層試圖遮蔽另一個(gè)遮罩層。 遮罩可以應(yīng)用在gif動(dòng)畫上。 在制作過程中，遮罩層經(jīng)常擋住下層的元件，影響視線，無法編輯，可以按下遮罩層時(shí)間軸面板的顯示圖層輪廓按鈕罩層時(shí)間軸面板的顯示圖層輪廓按鈕 ，使之變成 ，使遮罩層只顯示邊框形狀，在種情況下，你還可以拖動(dòng)邊框調(diào)整遮罩圖形的外形和位置。 在被遮罩層中不能放置動(dòng)態(tài)文本?！緦?shí)戰(zhàn)練習(xí)】監(jiān)控的小球（望遠(yuǎn)鏡）（1）新建一個(gè)文件，在圖層1的第1幀中插入一幅背景圖片，并將其設(shè)置為與屏幕一（2）新建一個(gè)“望遠(yuǎn)鏡”圖形元件，用去掉邊框的橢圓工具繪制一個(gè)橢圓，并復(fù)制粘 貼出另外一個(gè)，將兩個(gè)圓重疊一部分放

13、置，做成一個(gè)望遠(yuǎn)鏡的樣子。注意：這里望遠(yuǎn)鏡的顏色無所謂。（3）新建一個(gè)圖層2，將“望遠(yuǎn)鏡”圖形元件拖放一個(gè)實(shí)例到其第一幀中，調(diào)整到合 適的大小，放置在合適的位置。（4）分別在圖層2的第20幀、第40幀和第60幀插入關(guān)鍵幀，并調(diào)整這三個(gè)關(guān)鍵幀 中“望遠(yuǎn)鏡”的位置，然后分別將該圖層的第1幀、第20幀、第40幀和第60幀設(shè)置補(bǔ)間 （6）在圖層2的名字上右擊鼠標(biāo)，選擇“遮罩層”命令即可。最終時(shí)間軸如下圖所示。（7）測試影片，觀看效果，如果發(fā)現(xiàn)動(dòng)畫效果不太滿意的話，再按自己的意愿進(jìn)行修改，最后將文件保存起來。1創(chuàng)建引導(dǎo)層和被引導(dǎo)層一個(gè)最基本的“引導(dǎo)路徑動(dòng)畫”是由兩個(gè)圖層組成的，上面一層是“引導(dǎo)層”，它的

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

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

16、勾，元件的注冊(cè)點(diǎn)就會(huì)與運(yùn)動(dòng)路徑對(duì)齊，如下圖所示。2引導(dǎo)層中的內(nèi)容在播放時(shí)是看不見的，利用這一特點(diǎn)，可以單獨(dú)定義一個(gè)不包含“被引導(dǎo)層”的“引導(dǎo)層”，該引導(dǎo)層中可以放置一些文字說明、元件位置參考等，此時(shí)，引導(dǎo)層的圖標(biāo)為時(shí)，引導(dǎo)層的圖標(biāo)為 。3在做引導(dǎo)路徑動(dòng)畫時(shí)，按下工具欄上的【對(duì)齊對(duì)象】功能按鈕3在做引導(dǎo)路徑動(dòng)畫時(shí)，按下工具欄上的【對(duì)齊對(duì)象】功能按鈕 ，可以使“對(duì)象附著于引導(dǎo)線”的操作更容易成功。4過于陡峭的引導(dǎo)線可能使引導(dǎo)動(dòng)畫失敗，而平滑圓潤的線段有利于引導(dǎo)動(dòng)畫的成功 5被引導(dǎo)對(duì)象的中心對(duì)齊場景中的十字星，也有助于引導(dǎo)動(dòng)畫的成功。6向被引導(dǎo)層中放入元件時(shí)，在動(dòng)畫開始和結(jié)束的關(guān)鍵幀上，一定要讓元件

17、的注冊(cè)點(diǎn)對(duì)準(zhǔn)線段的開始和結(jié)束的端點(diǎn)，否則無法正確引導(dǎo)，如果元件為不規(guī)則形，可以按下工具欄上的任意變形工具欄上的任意變形工具 ，調(diào)整注冊(cè)點(diǎn)。7如果想解除引導(dǎo)，可以把被引導(dǎo)層拖離“引導(dǎo)層”，或在圖層區(qū)的引導(dǎo)層上右擊， 在彈出的菜單上選擇【屬性】，在對(duì)話框中選擇“正?！弊鳛閳D層類型，如下圖所示。8如果想讓對(duì)象作圓周運(yùn)動(dòng)，可以在“引導(dǎo)層”畫個(gè)圓形線條，再用橡皮擦去一小 段，使圓形線段出現(xiàn)兩個(gè)端點(diǎn)，再把對(duì)象的起點(diǎn)、終點(diǎn)分別對(duì)準(zhǔn)兩個(gè)端點(diǎn)即可。9引導(dǎo)線允許重疊，比如螺旋狀引導(dǎo)線，但在重疊處的線段必需保持圓潤，讓Flash 能辨認(rèn)出線段走向，否則會(huì)使引導(dǎo)失敗。【實(shí)戰(zhàn)練習(xí)】四處碰壁的小球（1）創(chuàng)建影片文檔新建一個(gè)影片文檔，設(shè)置舞臺(tái)尺寸為550400像素，【背景色】為白色。在圖層1的第1幀處