網(wǎng)頁(yè)制作技術(shù)(第二版)-07任務(wù)七 制作高級(jí)動(dòng)畫(huà)

1、網(wǎng)頁(yè)制作技術(shù)（第二版）主編 許莉 中國(guó)水利水電出版社網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)七 制作高級(jí)動(dòng)畫(huà)學(xué)習(xí)目標(biāo) 理解引導(dǎo)層、遮罩層的概念 理解反向運(yùn)動(dòng)的概念 掌握引導(dǎo)層動(dòng)畫(huà)的創(chuàng)建方法 掌握遮罩動(dòng)畫(huà)的創(chuàng)建方法 掌握骨骼動(dòng)畫(huà)的創(chuàng)建方法 掌握聲音的添加方法 掌握發(fā)布動(dòng)畫(huà)的方法任務(wù)七 制作高級(jí)動(dòng)畫(huà)目錄：知識(shí)1 引導(dǎo)層 知識(shí)2 遮罩層 知識(shí)3 反向運(yùn)動(dòng) 知識(shí)4 聲音文件的導(dǎo)入 知識(shí)5 動(dòng)畫(huà)的發(fā)布 任務(wù)1 創(chuàng)建引導(dǎo)層動(dòng)畫(huà) 任務(wù)2 創(chuàng)建遮罩層動(dòng)畫(huà) 任務(wù)3 創(chuàng)建反向運(yùn)動(dòng)效果 任務(wù)4 為按鈕添加聲音任務(wù)七 制作高級(jí)動(dòng)畫(huà)知識(shí)1 引導(dǎo)層 引導(dǎo)層是用來(lái)定義物體運(yùn)動(dòng)路徑的層。引導(dǎo)層分為“普通引導(dǎo)層”和“運(yùn)動(dòng)引導(dǎo)層”兩種。其中“普通引導(dǎo)

2、層”只起到輔助定位的作用，多用于版式，而“運(yùn)動(dòng)引導(dǎo)層”是引導(dǎo)物體沿著特定的路徑運(yùn)動(dòng)。如果將多個(gè)層鏈接到一個(gè)運(yùn)動(dòng)引導(dǎo)層，那么多個(gè)對(duì)象就將沿同一條路徑運(yùn)動(dòng)。知識(shí)1 引導(dǎo)層 1.創(chuàng)建引導(dǎo)層和被引導(dǎo)層一個(gè)最基本“引導(dǎo)路徑動(dòng)畫(huà)”由兩個(gè)圖層組成，上面一層是“引導(dǎo)層”，下面一層是“被引導(dǎo)層”，同普通圖層一樣。在普通圖層上點(diǎn)右鍵，選擇“添加傳統(tǒng)運(yùn)動(dòng)引導(dǎo)層”，該層的上面就會(huì)添加一個(gè)引導(dǎo)層，同時(shí)該普通層縮進(jìn)成為“被引導(dǎo)層”，如圖所示，“圖層1”是被引導(dǎo)層，而“圖層3”是普通圖層。知識(shí)1 引導(dǎo)層 2.引導(dǎo)層和被引導(dǎo)層中的對(duì)象引導(dǎo)層是用來(lái)指示元件運(yùn)行路徑的，所以“引導(dǎo)層”中的內(nèi)容可以是用鋼筆、鉛筆、線條、橢圓工具、矩

3、形工具或畫(huà)筆工具等繪制出的線段。而“被引導(dǎo)層”中的對(duì)象是跟著引導(dǎo)線走的，可以使用影片剪輯、圖形元件、按鈕、文字等，但不能應(yīng)用形狀。由于引導(dǎo)線是一種運(yùn)動(dòng)軌跡，不難想象，“被引導(dǎo)”層中最常用的動(dòng)畫(huà)形式是傳統(tǒng)補(bǔ)間動(dòng)畫(huà)，當(dāng)播放動(dòng)畫(huà)時(shí)，一個(gè)或數(shù)個(gè)元件將沿著運(yùn)動(dòng)路徑移動(dòng)。知識(shí)1 引導(dǎo)層 3.向被引導(dǎo)層中添加元件“引導(dǎo)動(dòng)畫(huà)”最基本的操作就是使一個(gè)運(yùn)動(dòng)動(dòng)畫(huà)“附著”在“引導(dǎo)線”上。所以操作時(shí)特別得注意“引導(dǎo)線”的兩端，被引導(dǎo)的對(duì)象起始、終點(diǎn)的2個(gè)“中心點(diǎn)”一定要對(duì)準(zhǔn)“引導(dǎo)線”的2個(gè)端頭，如圖所示。知識(shí)1 引導(dǎo)層 4.應(yīng)用引導(dǎo)層的技巧“被引導(dǎo)層”中的對(duì)象在被引導(dǎo)運(yùn)動(dòng)時(shí)，還可作更細(xì)致的設(shè)置，比如運(yùn)動(dòng)方向，在“屬性”

4、面板上，選中“調(diào)整到路徑”復(fù)選框，對(duì)象的基線就會(huì)調(diào)整到運(yùn)動(dòng)路徑，對(duì)象在運(yùn)動(dòng)時(shí)兩保持與路徑的切線夾角不變。而如果選中“貼緊”復(fù)選框，元件的注冊(cè)點(diǎn)就會(huì)與運(yùn)動(dòng)路徑對(duì)齊。引導(dǎo)層中的內(nèi)容在播放時(shí)是看不見(jiàn)的，利用這一特點(diǎn)，可以單獨(dú)定義一個(gè)不含“被引導(dǎo)層”的“引導(dǎo)層”，該引導(dǎo)層中可以放置一些文字說(shuō)明、元件位置參考等。在做引導(dǎo)路徑動(dòng)畫(huà)時(shí)，按下工具箱中的“對(duì)齊對(duì)象”按鈕，可以使“對(duì)象附著于引導(dǎo)線”的操作更容易成功，拖動(dòng)對(duì)象時(shí)，對(duì)象的中心會(huì)自動(dòng)吸附到路徑端點(diǎn)上。過(guò)于陡峭的引導(dǎo)線可能使引導(dǎo)動(dòng)畫(huà)失敗，而平滑圓潤(rùn)的線段有利于引導(dǎo)動(dòng)畫(huà)成功制作。向被引導(dǎo)層中放入元件時(shí)，在動(dòng)畫(huà)開(kāi)始和結(jié)束的關(guān)鍵幀上，一定要讓元件的注冊(cè)點(diǎn)對(duì)準(zhǔn)線

5、段的開(kāi)始和結(jié)束的端點(diǎn)，否則無(wú)法引導(dǎo)，如果元件為不規(guī)則形，可以點(diǎn)擊工具箱中的“任意變形工具”，調(diào)整注冊(cè)點(diǎn)。如果想解除引導(dǎo)，可以把被引導(dǎo)層拖離“引導(dǎo)層”，或在圖層區(qū)的引導(dǎo)層上單擊右鍵，在彈出的菜單上選擇“屬性”，在對(duì)話框中選擇“一般”，作為一般圖層類(lèi)型。如果想讓對(duì)象作圓周運(yùn)動(dòng)，可以在“引導(dǎo)層”畫(huà)一根圓形線條，再用【橡皮擦工具】擦去一小段，使圓形線段出現(xiàn)2個(gè)端點(diǎn)，再把對(duì)象的起始、終點(diǎn)分別對(duì)準(zhǔn)端點(diǎn)即可。引導(dǎo)線允許重疊，比如螺旋狀引導(dǎo)線，但在重疊處的線段必需保持圓潤(rùn)，讓Flash能辨認(rèn)出線段走向，否則會(huì)使引導(dǎo)失敗。知識(shí)2 遮罩層 遮罩層上的對(duì)象可以看作是孔，透過(guò)孔可以看見(jiàn)被遮罩的層。1.創(chuàng)建遮罩層和被遮

6、罩層在Flash中沒(méi)有一個(gè)專(zhuān)門(mén)的按鈕來(lái)創(chuàng)建遮罩層，遮罩層其實(shí)是由普通圖層轉(zhuǎn)化的。你只要在某個(gè)圖層上單擊右鍵，在彈出菜單中選擇“遮罩層”，使命令的左邊出現(xiàn)一個(gè)小勾，該圖層就會(huì)生成遮罩層，“層圖標(biāo)”就會(huì)從普通層圖標(biāo)變?yōu)檎谡謱訄D標(biāo)，系統(tǒng)會(huì)自動(dòng)把遮罩層下面的一層關(guān)聯(lián)為“被遮罩層”，在縮進(jìn)的同時(shí)圖標(biāo)變?yōu)?。如圖所示，其中“圖層2”為遮罩層，“圖層1”為被遮罩層，“圖層3”為普通圖層。知識(shí)2 遮罩層 2.構(gòu)成遮罩和被遮罩層的元素遮罩層中的圖形對(duì)象在播放時(shí)是看不到的，遮罩層中的內(nèi)容可以是按鈕、影片剪輯、圖形、位圖、文字等，但不能使用線條，如果一定要用線條，可以將線條轉(zhuǎn)化為“填充”。被遮罩層中的對(duì)象只能透過(guò)遮罩

7、層中的對(duì)象被看到。在被遮罩層，可以使用按鈕，影片剪輯，圖形，位圖，文字，線條。3.遮罩中可以使用的動(dòng)畫(huà)形式可以在遮罩層、被遮罩層中分別或同時(shí)使用補(bǔ)間形狀動(dòng)畫(huà)、傳統(tǒng)補(bǔ)間動(dòng)畫(huà)、補(bǔ)間動(dòng)畫(huà)等動(dòng)畫(huà)手段，從而使遮罩動(dòng)畫(huà)變成一個(gè)可以施展無(wú)限想象力的創(chuàng)作空間。知識(shí)2 遮罩層4.應(yīng)用遮罩層的技巧遮罩層的基本原理是：能夠透過(guò)該圖層中的對(duì)象看到“被遮罩層”中的對(duì)象及其屬性（包括它們的變形效果），但是遮罩層中的對(duì)象中的許多屬性如漸變色、透明度、顏色和線條樣式等卻是被忽略的。比如，我們不能通過(guò)遮罩層的漸變色來(lái)實(shí)現(xiàn)被遮罩層的漸變色變化。要在場(chǎng)景中顯示遮罩效果，可以鎖定遮罩層和被遮罩層。不能用一個(gè)遮罩層試圖遮蔽另一個(gè)遮罩層

8、。在制作過(guò)程中，遮罩層經(jīng)常擋住下層的元件，影響視線，無(wú)法編輯，可以按下遮罩層時(shí)間軸面板的顯示圖層輪廓按鈕，使之變成，使遮罩層只顯示邊框形狀，在種情況下，還可以拖動(dòng)邊框調(diào)整遮罩圖形的外形和位置。知識(shí)3 反向運(yùn)動(dòng) 反向運(yùn)動(dòng) (IK) 是一種使用骨骼的有關(guān)節(jié)結(jié)構(gòu)對(duì)一個(gè)對(duì)象或彼此相關(guān)的一組對(duì)象進(jìn)行動(dòng)畫(huà)處理的方法。使用骨骼，元件實(shí)例和形狀對(duì)象可以按復(fù)雜而自然的方式移動(dòng)，只需做很少的設(shè)計(jì)工作。例如，通過(guò)反向運(yùn)動(dòng)可以更加輕松地創(chuàng)建人物動(dòng)畫(huà)，如胳膊、腿和面部表情。骨骼鏈稱(chēng)為骨架。在父子層次結(jié)構(gòu)中，骨架中的骨骼彼此相連。骨架可以是線性的或分支的。源于同一骨骼的骨架分支稱(chēng)為同級(jí)。骨骼之間的連接點(diǎn)稱(chēng)為關(guān)節(jié)。在 Fl

9、ash 中可以按兩種方式使用 IK。第一種方式是，通過(guò)添加將每個(gè)實(shí)例與其他實(shí)例連接在一起的骨骼，用關(guān)節(jié)連接一系列的元件實(shí)例。第二種方式是向形狀對(duì)象的內(nèi)部添加骨架?？梢栽诤喜⒗L制模式或?qū)ο罄L制模式中創(chuàng)建形狀。通過(guò)骨骼，可以移動(dòng)形狀的各個(gè)部分并對(duì)其進(jìn)行動(dòng)畫(huà)處理，而無(wú)需繪制形狀的不同版本或創(chuàng)建補(bǔ)間形狀。知識(shí)4 聲音文件的導(dǎo)入 2.編輯聲音文件 操作步驟如下：1）將聲音文件導(dǎo)入到Flash文件中。2）打開(kāi)屬性面板，單擊面板中的聲音選擇框，選擇要編輯的聲音文件“snow.mp3”。3）單擊面板上的“編輯聲音封套”按鈕，彈出如圖所示對(duì)話框，窗口的第1個(gè)框?yàn)樽舐暤啦ㄐ螆D編輯區(qū)，第2個(gè)框?yàn)橛衣暤缊D編輯區(qū)。 知

10、識(shí)4 聲音文件的導(dǎo)入 4）在對(duì)話框最上方的“效果”選項(xiàng)框中選擇編輯效果，有8個(gè)選項(xiàng)：無(wú)：不播放任何聲音。左聲道“只有左聲道播放聲音。右聲道：只有右聲道播放聲音。從左到右淡出：聲音從左聲道開(kāi)始播放，并慢慢轉(zhuǎn)移到右聲道，最后消失。從右到左淡出：聲音從右聲道開(kāi)始播放，并慢慢轉(zhuǎn)移到左聲道，最后消失。淡入：音量從低到高。淡出：音量從高到低。自定義：根據(jù)自己需要對(duì)音量進(jìn)行調(diào)整。5）拖動(dòng)聲音的開(kāi)始控制點(diǎn)和結(jié)束控制點(diǎn)來(lái)改變聲音播放長(zhǎng)度。6）拖動(dòng)聲音的幅度控制來(lái)改變聲音大小或增加聲音幅度控制點(diǎn)創(chuàng)建復(fù)雜聲音效果。7）編輯完后，單擊“確定”按鈕回到屬性面板。知識(shí)4 聲音文件的導(dǎo)入 8）在屬性面板中，“同步”選項(xiàng)框用

11、來(lái)選擇一種聲音播放的時(shí)段，有4種聲音方式：事件：播放不受時(shí)間軸的限制，即使是影片播放完畢，聲音還在繼續(xù)，直到自身文件播放完畢為止。開(kāi)始：和事件類(lèi)似，不同的是，事件方式的聲音在遇見(jiàn)新的聲音文件時(shí)，仍然不會(huì)停止，繼續(xù)播放，而開(kāi)始方式的聲音則會(huì)停止，播放新的聲音文件。停止：是聲音文件停止播放。數(shù)據(jù)流：聲音文件一邊下載，一邊播放，當(dāng)影片播放完畢，聲音也隨之結(jié)束。這是一種常用于網(wǎng)絡(luò)播放的聲音方式，主要用于制作背景音樂(lè)。9）在“重復(fù)”輸入框中輸入聲音播放的循環(huán)次數(shù)。知識(shí)5 動(dòng)畫(huà)的發(fā)布 1.動(dòng)畫(huà)的測(cè)試對(duì)作品的測(cè)試可以隨時(shí)查看制作效果、檢驗(yàn)影片是否存在錯(cuò)誤，還可以檢驗(yàn)影片是否播放流暢，所以測(cè)試是制作Flash

12、動(dòng)畫(huà)的重要環(huán)節(jié)。可以使用【控制】|【測(cè)試影片】或【控制】|【測(cè)試場(chǎng)景】命令菜單建立不同的測(cè)試環(huán)境。【控制】|【測(cè)試影片】命令：使影片在測(cè)試環(huán)境中完成播放?！究刂啤縷【測(cè)試場(chǎng)景】命令：只能在測(cè)試環(huán)境中測(cè)試當(dāng)前場(chǎng)景或場(chǎng)景中的遇見(jiàn)，而不能測(cè)試整個(gè)影片。知識(shí)5 動(dòng)畫(huà)的發(fā)布 2.動(dòng)畫(huà)的導(dǎo)出1）導(dǎo)出文件按照輸出作品的不同，可以分為導(dǎo)出動(dòng)畫(huà)作品和輸出靜態(tài)圖像兩種。操作方法如下：執(zhí)行【導(dǎo)出】|【導(dǎo)出圖像】菜單命令或【導(dǎo)出】|【導(dǎo)出影片】菜單命令。 在彈出“導(dǎo)出圖像”或“導(dǎo)出影片”對(duì)話框中設(shè)置導(dǎo)出作品的格式、名稱(chēng)和位置，再單擊“保存”按鈕。 隨后又會(huì)彈出對(duì)話框，在其中設(shè)置該作品格式下的參數(shù)。最后單擊“確定”按鈕

13、結(jié)束設(shè)置。知識(shí)5 動(dòng)畫(huà)的發(fā)布 2）設(shè)置導(dǎo)出文件格式Flash Player(*.swf)文件Window AVI(*.avi)文件 QuickTime(*.mov)文件GIF動(dòng)畫(huà)(*.gif)文件、GIF序列(*.gif)文件和GIF圖像 WAV音頻(*.wav)文件EMF序列和增加元文件(*.emf) WMF序列、Windows元文件(*.wmf) EPS 3.0序列、EPS 3.0 (*.eps)文件 Adobe Illustrator序列(*.ai)文件 DXF序列(*.dxf)文件和AutoCAD DXF圖像 位圖序列（*.bmp）文件和位圖文件 JPEG序列(*.jpg)文件和JPE

14、G圖像PNG序列(*.png)文件和PNG圖像 知識(shí)5 動(dòng)畫(huà)的發(fā)布 3.動(dòng)畫(huà)的發(fā)布1）文件發(fā)布預(yù)覽作品在發(fā)布前，最好先預(yù)覽以下剛設(shè)置好的參數(shù)是否合適，如果不合適，可以返回發(fā)布設(shè)置對(duì)話框再重新進(jìn)行設(shè)置。執(zhí)行【文件】|【發(fā)布預(yù)覽】菜單命令，可以使用選定的發(fā)布格式和設(shè)置來(lái)預(yù)覽Flash SWF文件。使用此命令的同時(shí)會(huì)導(dǎo)出文件，并在默認(rèn)瀏覽器上打開(kāi)。2）發(fā)布設(shè)置執(zhí)行【文件】|【發(fā)布設(shè)置】命令，將彈出如圖所示對(duì)話框。知識(shí)5 動(dòng)畫(huà)的發(fā)布 3.動(dòng)畫(huà)的發(fā)布1）文件發(fā)布預(yù)覽執(zhí)行【文件】|【發(fā)布預(yù)覽】菜單命令，可以使用選定的發(fā)布格式和設(shè)置來(lái)預(yù)覽Flash SWF文件。使用此命令的同時(shí)會(huì)導(dǎo)出文件，并在默認(rèn)瀏覽器上打開(kāi)。2）發(fā)布設(shè)置執(zhí)行【文件】|【發(fā)布設(shè)置】命令，將彈出如圖所示對(duì)話框。在格式標(biāo)簽的類(lèi)型項(xiàng)中選擇所要發(fā)布的作品類(lèi)型，并在相應(yīng)的標(biāo)簽中對(duì)發(fā)布作品的格式進(jìn)行設(shè)定。單擊“發(fā)布”按鈕，則所發(fā)布的格式將以同名文件的形式（擴(kuò)展名不同）存儲(chǔ)在與所打開(kāi)Flash文件相同的目錄下。 知識(shí)5 動(dòng)畫(huà)的發(fā)布 設(shè)置SWF動(dòng)畫(huà)格式該格式是Flash動(dòng)畫(huà)播放作品格式，要想觀看Flash作品，就必須選擇該格式。打開(kāi)“Flash”格式設(shè)置對(duì)話框，如圖所示。知識(shí)5 動(dòng)畫(huà)的發(fā)