第4章 動(dòng)畫制作

編著魯曉陽(yáng)幻燈制作魯曉陽(yáng)電子工業(yè)出版社《多媒體技術(shù)應(yīng)用》

電子教案中等職業(yè)學(xué)校電子信息類教材（計(jì)算機(jī)技術(shù)專業(yè)）第4章動(dòng)畫制作動(dòng)畫是多媒體產(chǎn)品中最具吸引力的素材，具有表現(xiàn)力豐富、直觀、易于理解、風(fēng)趣幽默、引人入勝等特點(diǎn)。4.1項(xiàng)目11：獲取動(dòng)畫4.2項(xiàng)目12：制作Flash動(dòng)畫——四海電器電機(jī)網(wǎng)站主頁(yè)動(dòng)畫4.3項(xiàng)目13：使用Animator制作GIF動(dòng)畫）4.1項(xiàng)目11：獲取動(dòng)畫根據(jù)動(dòng)畫來(lái)源、動(dòng)畫類型的不同，動(dòng)畫獲取的方法也有一些差異。目前用得較多的獲取方法有網(wǎng)上下載，從動(dòng)畫庫(kù)光盤獲取。4.1.1網(wǎng)上下載4.1.2從現(xiàn)有的動(dòng)畫庫(kù)中獲取4.1.3了解動(dòng)畫制作4.1.1網(wǎng)上下載1.GIF動(dòng)畫的下載打開IE瀏覽器，查找所需要的動(dòng)畫素材。在所需的GIF動(dòng)畫素材上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“圖片另存為”命令，彈出“保存文件”對(duì)話框，進(jìn)行GIF動(dòng)畫保存。2.SWF動(dòng)畫的下載?安裝FlashCapturev1.5軟件的計(jì)算機(jī)，打開IE瀏覽器后，在工具欄中已經(jīng)多出了一個(gè)圖標(biāo)。?單擊“FlashCapture”按鈕，彈出“SaveSelectedFlashes”對(duì)話框，在“CurrentPage”選項(xiàng)卡中選擇需下載Flash動(dòng)畫上的復(fù)選框，單擊“Save”按鈕，即可保存多個(gè)Flash動(dòng)畫文件。

4.1.2從現(xiàn)有的動(dòng)畫庫(kù)中獲取一般市場(chǎng)上銷售的動(dòng)畫庫(kù)都以光盤形式存在，一個(gè)動(dòng)畫就是一個(gè)文件，可以根據(jù)動(dòng)畫格式分類，也可以根據(jù)表達(dá)內(nèi)容分類。步驟：①在計(jì)算機(jī)上新建一個(gè)動(dòng)畫目錄（如anima），用于存放獲取的素材。②將素材光盤插入到光驅(qū)中。③從光盤當(dāng)中選取需要的動(dòng)畫文件（可以用看圖軟件幫助進(jìn)行動(dòng)畫文件的選取，如ACDSee），并復(fù)制到動(dòng)畫目錄中去（anima）。4.1.3了解動(dòng)畫制作動(dòng)畫制作軟件種類繁多，一般可分為二維和三維動(dòng)畫制作軟件。二維動(dòng)畫的軟件主要有Flash,gifAnimator等。三維動(dòng)畫的軟件主要有3DStudioMAX,Cool3D,Maya等。軟

件

名

稱生

產(chǎn)

廠

商FlashMicroMediaGIFAnimatorUleadUleadCool3DUleadPoserMetaCreations3DStudioMAXAutodeskMayaAliasl

Wavefront運(yùn)動(dòng)捕捉的動(dòng)畫制作系統(tǒng)

在表演動(dòng)畫系統(tǒng)中，表演者根據(jù)劇情做出各種動(dòng)作和表情，運(yùn)動(dòng)捕捉系統(tǒng)將這些動(dòng)作和表情捕捉并記錄下來(lái)，然后通過(guò)動(dòng)畫軟件，用這些動(dòng)作和表情驅(qū)動(dòng)角色模型，角色模型就能做出與表演者一樣的動(dòng)作和表情，并生成最終所見的三維動(dòng)畫。運(yùn)動(dòng)捕捉實(shí)現(xiàn)三維動(dòng)畫4.2項(xiàng)目12：制作Flash動(dòng)畫

——四海電器電機(jī)網(wǎng)站主頁(yè)動(dòng)畫4.2.1認(rèn)識(shí)FlashMX——繪制圖形4.2.2制作逐幀動(dòng)畫——制作產(chǎn)品介紹動(dòng)畫4.2.3制作關(guān)鍵幀動(dòng)畫——?jiǎng)幼鲃?dòng)畫與形變動(dòng)畫4.2.4簡(jiǎn)單應(yīng)用ActionScript——制作“Skip”按鈕4.2.5添加聲音——?jiǎng)赢嫳尘耙魳?lè)4.2.6輸出動(dòng)畫——發(fā)布動(dòng)畫4.2.1認(rèn)識(shí)FlashMX——繪制圖形①FlashMX②打開“屬性”面板，單擊“尺寸設(shè)置”按鈕彈出“影片屬性”對(duì)話框，設(shè)置影片尺寸為“730×320”，背景顏色為“橙黃色”（＃FF9933），幀頻為“12”等。③按快捷鍵“Ctrl+F8”創(chuàng)建一個(gè)圖形元件，并且命名為“邊框”。元件有三類，影片剪輯、按鈕、圖形元件可以在影片中重復(fù)使用，從而使文件的尺寸縮小，影片的播放速度也可以加快。使用元件還可以讓設(shè)計(jì)者在Flash影片之間共享圖像和其他元素，如電影剪輯、聲音等④進(jìn)入編輯區(qū)后，選擇“矩形工具”，設(shè)置填充色為無(wú)填充色。⑤使用“矩形工具”在工作區(qū)的中央畫一個(gè)矩形，框選矩形后，如圖4.12所示。在屬性面板中顯示矩形的寬度為“207.0”，高度為“123.0”，如圖4.13所示。⑥選擇線條工具，在矩形的左上角畫一條合適長(zhǎng)度和傾斜度的直線，繪制后的效果⑦選中步驟⑥所畫的直線，使用快捷鍵“Ctrl+C”和“Ctrl+V”復(fù)制一條新的直線，并移動(dòng)該直線至右下角⑧這樣矩形就被分割成了三個(gè)區(qū)域，用箭頭工具將無(wú)用的部分選中（左上角和右下角多出來(lái)的直角），按“Delete”鍵刪除。⑨單擊“文件”菜單中的“另存為”命令將文件保存為“四海電器.fla”4.2.2制作逐幀動(dòng)畫

——制作產(chǎn)品介紹動(dòng)畫①啟動(dòng)FlashMX，單擊“文件”菜單中的“打開”命令，打開4.2.1節(jié)中所完成的Flash文件。②按快捷鍵“Ctrl+F8”，彈出“創(chuàng)建新元件”對(duì)話框，創(chuàng)建一個(gè)圖形元件，并且命名為“圖片1”。③按快捷鍵“Ctrl+L”打開元件庫(kù)，將圖形元件“邊框”拖曳到圖形元件“圖片1”的編輯區(qū)的中央。④單擊“文件”菜單中的“導(dǎo)入”命令，彈出“導(dǎo)入”對(duì)話框，選擇導(dǎo)入文件（例如選擇素材光盤中“flash_picture”文件夾中的“1.jpg”文件），單擊“確定”按鈕，將準(zhǔn)備好的圖片導(dǎo)入到編輯區(qū)中。使用“自由轉(zhuǎn)換工具”調(diào)整圖片的大小，并調(diào)整圖片的位置。⑤選中圖片，按快捷鍵“Ctrl+B”將圖片打散。⑥在工具欄中選擇套索工具，再在選項(xiàng)欄中選擇“魔術(shù)棒”工具單擊選中圖片的白色背景，按“Delete”鍵把白色的背景刪除。⑦返回主場(chǎng)景，在第31幀處按快捷鍵“F6”插入一個(gè)關(guān)鍵幀，并把元件“圖片1”拖曳到場(chǎng)景中。⑧按快捷鍵“Ctrl+B”兩次，把“圖片1”打散。⑨選中顏料桶工具在顏色欄中選擇填充色為“白色”，把圖片和邊框間的區(qū)域的顏色填充為白色⑩按快捷鍵“F6”，從32～35幀插入4個(gè)關(guān)鍵幀，重復(fù)步驟⑨，把第35幀的填充色改為棕色。⑾按快捷鍵“F6”，從36～39幀插入4個(gè)關(guān)鍵幀，重復(fù)步驟⑨，把第39幀的填充色改為咖啡色（＃CE9A31）⑿按快捷鍵“F6”，從40～42幀插入3個(gè)關(guān)鍵幀，最后的時(shí)間軸如圖所示。

⒀重復(fù)步驟②～⑾

使用素材光盤中flash_picture文件夾中的“2.jpg”,“3.jpg”,“4.jpg”,“5.jpg”文件，可制作另外四件產(chǎn)品的圖片的動(dòng)態(tài)效果。第2張圖片的動(dòng)畫做在第43～54幀間，第3張圖片的動(dòng)畫做在第55～66幀間，第4張圖片的動(dòng)畫做在第67～78幀間，第5張圖片的動(dòng)畫做在第79～90幀間。

按快捷鍵“F6”，插入關(guān)鍵幀第91幀，框選圖片后按“Delete”鍵將其刪除，用快捷鍵“Ctrl+S”保存文件，并用快捷鍵“Ctrl+Enter”觀看影片效果。4.2.3制作關(guān)鍵幀動(dòng)畫

——?jiǎng)幼鲃?dòng)畫與形變動(dòng)畫1.制作動(dòng)作動(dòng)畫①打開4.2.2節(jié)中所完成的Flash影片。②單擊“插入圖層”按鈕，新建一個(gè)圖層，并命名為“標(biāo)志”。

③選中第一幀，執(zhí)行“文件”菜單中的“導(dǎo)入”命令，將素材光盤中“flash_picture”文件夾中的“8.jpg”,“9.jpg”兩張圖片分別導(dǎo)入到場(chǎng)景中。⑤在第15幀處按快捷鍵“F6”插入一個(gè)關(guān)鍵幀。⑥選中第15幀，把圖片的位置往下移一定的距離，在“圖形”屬性面板中將顏色設(shè)為“Alpha”，值設(shè)置為“0%”，令它完全透明。⑦在第1幀的“幀”屬性面板的“中間”列表框中選擇“移動(dòng)”選項(xiàng)，設(shè)置移動(dòng)漸變動(dòng)畫。

⑧在時(shí)間軸上第1幀與第15幀之間顯示移動(dòng)動(dòng)畫標(biāo)志線。⑨用快捷鍵“Ctrl+S”保存文件，并用快捷鍵“Ctrl+Enter”觀看影片效果。注意只有在元件對(duì)象之間或者經(jīng)過(guò)組合的對(duì)象之間才能制作動(dòng)作動(dòng)畫

2.制作形變動(dòng)畫①打開前面完成的Flash影片文件。②選中“標(biāo)志”圖層，在第16幀處按快捷鍵“F7”插入一個(gè)空白關(guān)鍵幀。③在第16幀，選擇“矩形工具”，在“顏色欄”中設(shè)置“描繪顏色”為無(wú)“填充顏色”為淺黃色（＃FFCC33）。④畫一個(gè)無(wú)邊框的、填充色為淺黃色的矩形，使用“箭頭工具”選取該矩形，在“形狀”屬性面板中設(shè)置寬度W為1.0，并將其拖曳于場(chǎng)景正中。⑤在第30幀處按快捷鍵“F6”插入一個(gè)關(guān)鍵幀，用自由轉(zhuǎn)換工具調(diào)整矩形的大小，使矩形充滿整個(gè)背景的右半邊。⑥在第16幀的“幀”屬性面板的“中間”列表框中選擇“形狀”，設(shè)置形狀漸變動(dòng)畫。⑦選中第31幀后，按住“Shift”鍵，再選擇最后一幀，選中第31幀到結(jié)束的所有幀，按快捷鍵“Shift+F5”把這些幀移除，完成后的時(shí)間軸如圖所示。⑧用快捷鍵“Ctrl+S”保存文件，并用快捷鍵“Ctrl+Enter”觀看影片效果。注意：只有在矢量圖之間或者被打散的對(duì)象之間才能制作形變動(dòng)畫。4.2.4簡(jiǎn)單應(yīng)用ActionScript

——制作“Skip”按鈕①打開前面完成的Flash影片。②按快捷鍵“Ctrl+F8”，創(chuàng)建一個(gè)按鈕元件，并且命名為“skip”。③選中文本工具，在Up幀中輸入文本“Skip”，選中文本框內(nèi)的文字，在“文本”屬性面板中設(shè)置字體為“Arial”，字號(hào)為“15”，顏色為“黑色”等④在“鼠標(biāo)經(jīng)過(guò)”幀處按快捷鍵“F6”插入關(guān)鍵幀，選擇文字“Skip”，在“文本”屬性面板中設(shè)置文字顏色為“白色”，如圖4.38所示。再用快捷鍵“Ctrl+B”把這兩幀中的文字打散。⑤返回主場(chǎng)景，單擊“插入圖層”按鈕，新建一個(gè)圖層，并且命名為“按鈕”，如圖4.39所示。⑥按快捷鍵“Ctrl+L”打開元件庫(kù)，將按鈕元件“Skip”拖曳到“按鈕”圖層的第1幀中，放置在場(chǎng)景的左下角，如圖所示。⑦選中“Skip”按鈕，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“動(dòng)作”命令，彈出“動(dòng)作－按鈕”對(duì)話框。⑧打開“Actions”→“MovieControl”菜單，雙擊“on”命令，在右側(cè)對(duì)話框中選擇“點(diǎn)擊”選項(xiàng)，取消對(duì)“釋放”選項(xiàng)的選擇。

⑨打開“Actions”→“Browser/Network”菜單，雙擊“getURL”命令，在出現(xiàn)的“URL”文本框中輸入網(wǎng)址“http:///about.htm”。⑩使用快捷鍵“Ctrl+S”保存文件，并用快捷鍵“Ctrl+Enter”觀看影片效果

4.2.5添加聲音——?jiǎng)赢嫳尘耙魳?lè)1.給Flash影片加上背景音樂(lè)①打開4.2.4節(jié)中完成的Flash影片文件。②單擊“文件”菜單中的“導(dǎo)入”命令，把素材光盤中“flash_picture”文件夾中的、“streamsound1.wav”文件導(dǎo)入到元件庫(kù)中，然后按快捷鍵“Ctrl+L”打開元件庫(kù)。③單擊“插入圖層”按鈕，新建一個(gè)圖層并將其命名為“背景音樂(lè)”，把聲音元件“streamsound1.wav”拖到場(chǎng)景中，時(shí)間軸“背景音樂(lè)”圖層顯示聲音元件被加入④選中該圖層的第1幀，設(shè)置“幀”屬性面板，如圖4.47所示。⑤用快捷鍵“Ctrl+S”保存文件，并用快捷鍵“Ctrl+Enter”觀看影片效果。2.給按鈕加上聲音①打開前面完成的Flash影片。②單擊“文件”菜單中的“導(dǎo)入”命令，把素材光盤中“flash_picture”文件夾中的“sound1.wav”文件導(dǎo)入到元件庫(kù)中，然后按快捷鍵“Ctrl+L”打開元件庫(kù)，如圖所示。③雙擊元件庫(kù)中的按鈕元件“Skip”，進(jìn)入按鈕元件的編輯工作區(qū)。④選擇“鼠標(biāo)經(jīng)過(guò)”幀，將聲音元件“sound1.wav”拖到“鼠標(biāo)經(jīng)過(guò)”幀中，完成后的時(shí)間軸如圖所示。⑤用快捷鍵“Ctrl+S”保存文件，并用快捷鍵“Ctrl+Enter”觀看影片效果。4.2.6輸出動(dòng)畫——發(fā)布動(dòng)畫1.保存為可供修改的.fla格式的文件2.保存為制作網(wǎng)頁(yè)所需的.swf格式的文件快捷鍵“Ctrl+Enter”測(cè)試影片，自動(dòng)生成一個(gè)相同文件名的.swf

格式文件3.保存成帶播放器的.exe格式的文件打開.swf

格式的文件，F(xiàn)lashPlayer播放器進(jìn)行動(dòng)畫播放，單擊“文件”菜單中的“創(chuàng)建播放器”命令，彈出“另存為”對(duì)話框，選擇文件保存的位置，輸入文件名，單擊“保存”按鈕，即可生成.exe格式的動(dòng)畫。4.3項(xiàng)目13：使用Animator制作GIF動(dòng)畫由于這些文件的小巧，使GIF成為Internet上應(yīng)用最廣泛的圖像格式4.3.1啟動(dòng)Animator——?jiǎng)?chuàng)建動(dòng)畫文件4.3.2使用Animator制作網(wǎng)頁(yè)橫幅——制作四海電器電機(jī).gif4.3.3制作多幅圖像按照一定的順序播放動(dòng)畫——制作產(chǎn)品介紹動(dòng)畫4.3.4優(yōu)化動(dòng)畫——縮小GIF動(dòng)畫文件4.3.1啟動(dòng)Animator——?jiǎng)?chuàng)建動(dòng)畫文件啟動(dòng)GIFAnimator4.0，彈出“啟動(dòng)向?qū)А睂?duì)話框。單擊“啟動(dòng)向?qū)А睂?duì)話框中的“關(guān)閉”按鈕，出現(xiàn)“GIFAnimator4.0”主界面。

4.3.2使用Animator制作網(wǎng)頁(yè)橫幅

——制作四海電器電機(jī).gif①單擊“新建”按鈕，新建一個(gè)空白的動(dòng)畫，在“動(dòng)畫屬性”面板中取消對(duì)“自動(dòng)”選項(xiàng)的選擇，設(shè)置動(dòng)畫的尺寸，寬為“280”，高為“60”，背景為“白色”。

②單擊“圖層”→“添加橫幅文字”菜單中的“動(dòng)畫”命令，彈出“添加動(dòng)畫文字”對(duì)話框，在“文字風(fēng)格”選項(xiàng)卡中設(shè)置“橫幅文字”為“四海電器電機(jī)”，“字體”為“隸書”，“大小”為“40”，“字體屬性”為“加粗”，“文字顏色”為“黑色”③單擊“效果”選項(xiàng)卡，設(shè)置“移入效果”、“移出效果”均為“漸隱”。④單擊“橫幅設(shè)置”按鈕，彈出“動(dòng)畫橫幅設(shè)置”對(duì)話框，進(jìn)行動(dòng)畫橫幅設(shè)置，

⑤按“確定”按鈕關(guān)閉對(duì)話框。單擊“啟動(dòng)預(yù)覽”按鈕，即可在“添加動(dòng)畫文字”對(duì)話框中觀看動(dòng)畫效果。⑥覺(jué)得動(dòng)畫效果滿意后，單擊“停止預(yù)覽”按鈕，停止預(yù)覽文字動(dòng)畫，再單擊“確定”按鈕，即完成了動(dòng)畫文字的制作。⑦單擊“文件”菜單中的“保存”命令，彈出“另存為”對(duì)話框，在文件名文本框中輸入“網(wǎng)頁(yè)橫幅”，選擇“保存前優(yōu)化”使用設(shè)置選項(xiàng)，單擊“保存”按鈕，將文件保存為“網(wǎng)頁(yè)橫幅.gif”，如圖4.58所示。4.3.3制作多幅圖像按照一定的順序

播放動(dòng)畫——制作產(chǎn)品介紹動(dòng)畫①首先把需要用到的五張圖像保存到一個(gè)便于找到的文件夾中，最好按查看的次序保存它們，依次命名為“1.jpg”,“2.jpg”,“3.jpg”,“4.jpg”,“5.jpg”。②選擇“文件”菜單中的“動(dòng)畫向?qū)А泵?，彈出“?dòng)畫向?qū)?選擇文件”對(duì)話框。③單擊“添加圖像”按鈕，彈出“打開”對(duì)話框，選中圖像文件1.jpg后，在對(duì)話框的下方將出現(xiàn)圖像的預(yù)覽，單擊“打開”按鈕完成圖像添加的任務(wù)。④重復(fù)步驟③，把其他的四張圖片也添加到“動(dòng)畫向?qū)?選擇文件”對(duì)話框中。⑤單擊“下一步”按鈕，彈出“動(dòng)畫向?qū)?來(lái)源類型”對(duì)話框，選擇“照片導(dǎo)向（p）（抖動(dòng)）”選項(xiàng)。⑥單擊“下一步”按鈕，彈出“動(dòng)畫向?qū)?幀持續(xù)時(shí)間”對(duì)話框，設(shè)置幀持續(xù)時(shí)間，根據(jù)需要設(shè)置“延遲時(shí)間”為“100”，“指定幀速率”為“1”。⑦單擊“下一步”按鈕，彈出“動(dòng)畫向?qū)?完成”對(duì)話框，單擊“完成”按鈕結(jié)束動(dòng)畫的設(shè)置。

⑧在工作區(qū)中單擊“預(yù)覽”選項(xiàng)卡，觀察完成的動(dòng)畫效果。⑨在工作區(qū)中單擊“編輯”選項(xiàng)卡，選中圖像2.jpg，單擊“工作區(qū)”右側(cè)的“調(diào)整大小”按鈕，彈出“調(diào)整大小”對(duì)話框，取消對(duì)“保持比例”的選擇，在“單位”下拉框中選擇“像素”，將“寬度”設(shè)為“228”，高度設(shè)為“145”，選中“應(yīng)用于所有圖層”選項(xiàng)。⑩單擊“確定”按鈕，完成設(shè)置。在工作區(qū)中單擊“預(yù)覽”選項(xiàng)卡，觀察完成的動(dòng)畫效果。單擊“文件”菜單中的“保存”命令，將動(dòng)畫文件保存為“動(dòng)畫.gif”。注意①步驟③和步驟④可以合二為一，在“打開”文件對(duì)話框中可以同時(shí)框選多個(gè)文件。②可以使用工具欄中的“添加圖像”按鈕來(lái)插入圖像，然后再根據(jù)需要對(duì)圖像進(jìn)行設(shè)置。4.3.4優(yōu)化動(dòng)畫——縮小GIF動(dòng)畫文件①打開4.3.3節(jié)中保存的“動(dòng)畫.gif”。②單擊“文件”菜單中的“優(yōu)化向?qū)А泵?，彈出“?yōu)化向?qū)А睂?duì)話框，選擇“是（Y）（推薦）”選項(xiàng)。③單擊“下一步”按鈕，在彈出的對(duì)話框中設(shè)置顏