網(wǎng)頁(yè)中動(dòng)畫的高級(jí)應(yīng)用

第15章網(wǎng)頁(yè)中動(dòng)畫的高級(jí)應(yīng)用在網(wǎng)頁(yè)中動(dòng)畫必不可少，而且被大量的使用著，這就要求我們?cè)趯W(xué)習(xí)網(wǎng)頁(yè)制作過(guò)程中重點(diǎn)掌握的其中一塊內(nèi)容就是動(dòng)畫。關(guān)于動(dòng)畫的制作及相關(guān)內(nèi)容，在前面的章節(jié)中已經(jīng)有所涉及，這里針對(duì)動(dòng)畫的一些較復(fù)雜的內(nèi)容的制作方法和應(yīng)用進(jìn)行介紹。1可編輯版15.1復(fù)雜元件保持一個(gè)開放的思想，同時(shí)為了實(shí)現(xiàn)你的思想不斷地探索新的方式，這是對(duì)于動(dòng)畫制作的善于創(chuàng)新的要求。對(duì)于可視化你要做的東西，試驗(yàn)不同的角度和方式，嘗試不同方式的組合，這就要求你事先作好計(jì)劃。然后，就是查看下載大小和渲染速度，并了解你的觀眾。這些是動(dòng)畫制作的要點(diǎn)，在上述內(nèi)容的基礎(chǔ)上，我們可以更深層次的進(jìn)行動(dòng)畫制作了。2可編輯版15.1.1復(fù)雜元件的制作制作應(yīng)用于網(wǎng)頁(yè)中的動(dòng)畫，往往需要有構(gòu)成動(dòng)畫的元件。元件制作的成功與否，直接關(guān)系到動(dòng)畫效果的好壞，因此對(duì)于它的制作非常重要。其實(shí)，元件有時(shí)是很簡(jiǎn)單就能實(shí)現(xiàn)的，比如由圓、線和色彩等一些元素組成。但是，如果想將它創(chuàng)建的成功，就需要費(fèi)思量了。尤其，元素可以構(gòu)成簡(jiǎn)單的元件，也可以構(gòu)成復(fù)雜的。同樣是元件，復(fù)雜程度同樣決定著動(dòng)畫的動(dòng)態(tài)應(yīng)用后的效果。如圖所示，分別是關(guān)于元件的截圖。

3可編輯版對(duì)于簡(jiǎn)單的元件制作前面的章節(jié)中已經(jīng)有所涉及，這里針對(duì)一些較復(fù)雜的元件，通過(guò)具體實(shí)例來(lái)向大家介紹它的實(shí)現(xiàn)與操作方法。1．Deco工具簡(jiǎn)單應(yīng)用Flash制作有關(guān)的動(dòng)畫，需要先制作元件，元件的制作方法不止一種，你可以借助它的工具，結(jié)合屬性來(lái)實(shí)現(xiàn)的。首先，這里介紹的是Deco工具，以及它的相關(guān)應(yīng)用。如圖所示，是一實(shí)現(xiàn)的模仿星空的效果截圖。4可編輯版（1）藤蔓式填充效果Deco工具被經(jīng)常用來(lái)制作一些復(fù)雜形狀的元件。它主要有如下效果：藤蔓式填充、網(wǎng)格填充、對(duì)稱刷子、3D刷子、建筑物刷子、裝飾性刷子、火焰動(dòng)畫、火焰刷子、花刷子、閃電刷子、粒子系統(tǒng)、煙動(dòng)畫、樹刷子。關(guān)于藤蔓式填充效果它的操作方法，具體如下：（A）工具（B）繪制效果（C）高級(jí)選項(xiàng)5可編輯版（2）網(wǎng)格填充效果在工具面板中，同樣使用Deco工具。接著，對(duì)該工具的屬性面板中的相應(yīng)的內(nèi)容進(jìn)行設(shè)置。選擇“繪制效果”為網(wǎng)格填充，分別對(duì)其中的平鋪選項(xiàng)進(jìn)行顏色調(diào)整，并對(duì)“高級(jí)選項(xiàng)”進(jìn)行變更，如圖是應(yīng)用網(wǎng)格填充實(shí)現(xiàn)的繪制效果。6可編輯版（3）對(duì)稱刷子效果對(duì)稱刷子效果，它的實(shí)現(xiàn)方法是，使用Deco工具，在屬性面板中，選擇“繪制效果”為對(duì)稱刷子，同時(shí)調(diào)整合適的顏色，并對(duì)“高級(jí)選項(xiàng)”進(jìn)行設(shè)置，即可應(yīng)用。如圖是應(yīng)用對(duì)稱刷子實(shí)現(xiàn)的繪制效果。7可編輯版2．時(shí)鐘元件制作在了解了Flash中相關(guān)工具的應(yīng)用與效果實(shí)現(xiàn)理論后，下面，通過(guò)一個(gè)簡(jiǎn)單的元件制作的操作方法的介紹，來(lái)幫助進(jìn)一步掌握。關(guān)于時(shí)鐘元件，就是應(yīng)用了“對(duì)稱刷子”效果，再輔以簡(jiǎn)單的操作實(shí)現(xiàn)的。其詳細(xì)內(nèi)容如下：首先，在工具面板中選擇“Deco工具”，同時(shí)選擇屬性面板中的繪制效果為“對(duì)稱刷子”。在舞臺(tái)繪制圖案，可得如圖所示的效果。8可編輯版接著，在上述完成圖案的基礎(chǔ)上，在工具面板中選擇“文本”，分別在十二個(gè)點(diǎn)的下方添加數(shù)字1~12，標(biāo)注時(shí)鐘刻度，如圖所示。9可編輯版最后，在工具面板中選擇直線，分別在時(shí)間刻度的相應(yīng)位置，進(jìn)行鐘表中分針和時(shí)針的繪制。這里在繪制過(guò)程中因?yàn)榉昼娨L(zhǎng)于時(shí)針，可以通過(guò)橡皮擦進(jìn)行的長(zhǎng)短調(diào)整。最終繪制完成后，可得如圖所示的效果。10可編輯版15.1.2復(fù)雜元件的添加復(fù)雜元件的添加，只是元件的復(fù)雜程度加深了，也就是制作難度增加了，它的添加方法還是一樣的。具體參照前面章的動(dòng)畫中的元件添加方法。11可編輯版15.2創(chuàng)建復(fù)雜動(dòng)畫Flash用于創(chuàng)建動(dòng)畫，大家都已經(jīng)認(rèn)可它了。但是，因?yàn)閯?dòng)畫效果實(shí)現(xiàn)的需要，有時(shí)動(dòng)畫創(chuàng)意在設(shè)計(jì)時(shí)比較復(fù)雜，連帶的它的創(chuàng)建方法也就相較于要復(fù)雜的多。這一節(jié)，將詳細(xì)介紹有關(guān)復(fù)雜的動(dòng)畫的相關(guān)內(nèi)容以及制作。12可編輯版15.2.1關(guān)于動(dòng)畫制作計(jì)算機(jī)動(dòng)畫有不同的形式，但大致可以分為二維動(dòng)畫和三維動(dòng)畫兩種。如圖所示，是一動(dòng)畫截圖，在接下來(lái)的內(nèi)容中，將通過(guò)幾個(gè)實(shí)例，講述有關(guān)于具體的動(dòng)的實(shí)現(xiàn)效果的相關(guān)操作。13可編輯版15.2.2引導(dǎo)層效果的實(shí)例應(yīng)用一個(gè)基本“引導(dǎo)層路徑動(dòng)畫”由兩個(gè)圖層組成，上面一層是“引導(dǎo)層”，引導(dǎo)線是一種運(yùn)動(dòng)軌跡，下面一層是“被引導(dǎo)層”中的對(duì)象可以是影片剪輯、圖形元件、按鈕、文字等，但不能是形狀，圖標(biāo)與普通圖層一樣。這里通過(guò)一實(shí)例，詳細(xì)介紹引導(dǎo)層在動(dòng)畫效果中的具體應(yīng)用與操作方法。14可編輯版如圖所示，是應(yīng)用引導(dǎo)層制作完成的Flash動(dòng)畫效果。這里通過(guò)小球圍繞大球轉(zhuǎn)動(dòng)的效果，常被用于帶有運(yùn)動(dòng)軌跡的這一類動(dòng)畫的操作與控制方法。它的實(shí)現(xiàn)，正好體現(xiàn)了引導(dǎo)層的相關(guān)作用以及所涉及的內(nèi)容。1．大球的制作2．小球的制作3．引導(dǎo)層15可編輯版15.2.3遮罩層效果的實(shí)例應(yīng)用遮罩動(dòng)畫是Flash中的一個(gè)很重要的動(dòng)畫類型，很多效果豐富的動(dòng)畫都是通過(guò)遮罩動(dòng)畫來(lái)完成的。在Flash的圖層中有一個(gè)遮罩圖層類型，為了得到特殊的顯示效果，可以在遮罩層上創(chuàng)建一個(gè)任意形狀的“視窗”，遮罩層下方的對(duì)象可以通過(guò)該“視窗”顯示出來(lái)，而“視窗”之外的對(duì)象將不會(huì)顯示。運(yùn)用遮罩制作而成的動(dòng)畫。遮罩層中的內(nèi)容在動(dòng)，而被遮罩層中的內(nèi)容保持靜止。下面還是通過(guò)一應(yīng)用實(shí)例，來(lái)作具體的分析。16可編輯版如圖所示，是根據(jù)字幕的遮罩顯示實(shí)現(xiàn)的效果。其主要內(nèi)容是，通過(guò)動(dòng)畫效果，將文字通過(guò)一定的方式進(jìn)行展示。1．文字制作2．元件制作3.遮罩效果4．鼠標(biāo)移動(dòng)遮罩效果17可編輯版15.2.4復(fù)雜逐幀效果的實(shí)例應(yīng)用在Flash動(dòng)畫尤其是短片的制作中或多或少都要表現(xiàn)一些較復(fù)雜的動(dòng)作，而Flash本身功能的限制使我們?cè)谥谱鲃?dòng)畫時(shí)感到手腳受到牽制，或者為此付出過(guò)多的時(shí)間和精力。逐幀動(dòng)畫表現(xiàn)方方法技巧、以及充分利用Flash的變形功能制作動(dòng)畫的表現(xiàn)技巧，針對(duì)這些內(nèi)容，我們通過(guò)一個(gè)應(yīng)用實(shí)例的具體制作來(lái)進(jìn)行了解。如圖所示，是一逐幀動(dòng)畫的實(shí)現(xiàn)的效果。18可編輯版關(guān)于該動(dòng)畫的制作方法如下：1．創(chuàng)建設(shè)置舞臺(tái)背景為白色。在工具面板中選擇“橢圓”按鈕，同時(shí)設(shè)置填充色為“紅色”，通過(guò)鼠標(biāo)拖動(dòng)，在舞臺(tái)的左側(cè)位置，創(chuàng)建一大小適中的圓，如圖所示。19可編輯版2．動(dòng)畫實(shí)現(xiàn)圖形創(chuàng)建完成后，在時(shí)間軸的1-15幀的位置，分別逐一創(chuàng)建“關(guān)鍵幀”。最終得到如圖所示的時(shí)間軸效果。到這里該逐幀動(dòng)畫也就實(shí)現(xiàn)了。20可編輯版15.3動(dòng)畫的軌道、時(shí)間軸及其它內(nèi)容在動(dòng)畫的制作過(guò)程中，軌道、時(shí)間軸、幀、圖層和場(chǎng)景等內(nèi)容是我們常常接觸，也需要頻繁使用的。在接下來(lái)的內(nèi)容中，著重關(guān)于它們的相關(guān)的應(yīng)用及操作方面來(lái)作為切入點(diǎn)。主要通過(guò)Flash簡(jiǎn)單實(shí)例的制作與講解，來(lái)進(jìn)行相應(yīng)的介紹。21可編輯版15.3.1幀幀是進(jìn)行flash動(dòng)畫制作的最基本的單位，每一個(gè)精彩的flash動(dòng)畫都是由很多個(gè)精心雕琢的幀構(gòu)成的，在時(shí)間軸上的每一幀都可以包含需要顯示的所有內(nèi)容，包括圖形、聲音、各種素材和其他多種對(duì)象幀有關(guān)鍵幀、空白關(guān)鍵幀和普通幀之分。下面對(duì)其一些相關(guān)內(nèi)容著重進(jìn)行介紹。22可編輯版1．幀的區(qū)別它們之間的區(qū)別在于：（1）關(guān)鍵幀在時(shí)間軸上顯示為實(shí)心的圓點(diǎn)，空白關(guān)鍵幀在時(shí)間軸上顯示為空心的圓點(diǎn)，普通幀在時(shí)間軸上顯示為灰色填充的小方格。（2）同一層中，在前一個(gè)關(guān)鍵幀的后面任一幀處插入關(guān)鍵幀，是復(fù)制前一個(gè)關(guān)鍵幀上的對(duì)象，并可對(duì)其進(jìn)行編輯操作；如果插入普通幀，是延續(xù)前一個(gè)關(guān)鍵幀上的內(nèi)容，不可對(duì)其進(jìn)行編輯操作；插入空白關(guān)鍵幀，可清除該幀后面的延續(xù)內(nèi)容，可以在空白關(guān)鍵幀上添加新的實(shí)例對(duì)象。（3）關(guān)鍵幀和空白關(guān)鍵幀上都可以添加幀動(dòng)作腳本，普通幀上則不能。23可編輯版2．幀的操作幀應(yīng)用于動(dòng)畫，實(shí)現(xiàn)了逐幀動(dòng)畫和補(bǔ)間動(dòng)畫的相應(yīng)效果。補(bǔ)間動(dòng)畫，有動(dòng)畫補(bǔ)間和形狀補(bǔ)間二種形式。關(guān)于幀的操作，下面的內(nèi)容中將對(duì)其進(jìn)行介紹。（1）幀的創(chuàng)建與轉(zhuǎn)換（2）幀的選擇與移動(dòng)（3）幀的復(fù)制、剪切和粘貼（4）幀的翻轉(zhuǎn)與查看（5）幀的顯示狀態(tài)與幀頻設(shè)置24可編輯版（6）幀應(yīng)用在了解了上述幀的相關(guān)內(nèi)容之后，如圖所示的效果，是進(jìn)行相應(yīng)應(yīng)用的結(jié)果。25可編輯版15.3.2軌跡有需要才有應(yīng)用，有應(yīng)用才有軌跡。用這句話，能很貼切形容其作用。在我們制作Flash動(dòng)畫時(shí)，為了想讓元件或類似的物體，根據(jù)我們自己設(shè)定的內(nèi)容運(yùn)動(dòng)，也就有了軌跡。它往往反映的是不歸則物體、不規(guī)律運(yùn)動(dòng)方式的相關(guān)效果。這里讓我們通過(guò)一個(gè)實(shí)例來(lái)進(jìn)一步的幫助掌握。如圖所示，是一個(gè)簡(jiǎn)單圖形。我們通過(guò)應(yīng)用不同的運(yùn)動(dòng)軌跡，就能讓它在Flash中呈現(xiàn)不同的美的效果。26可編輯版對(duì)于不同效果的實(shí)現(xiàn)，具體內(nèi)容如下：首先，在場(chǎng)景中通過(guò)“矩形”工具繪制如圖所示的內(nèi)容。完成后，將其轉(zhuǎn)換為“元件”。27可編輯版這里，通過(guò)如圖1不同的幀的設(shè)置，可以得到如圖2所示的效果。圖1圖228可編輯版下面，我們可以借助flash逐幀“軌跡”的技巧，“移動(dòng)”動(dòng)畫時(shí)選擇更長(zhǎng)的幀距。最后得出更美的圖案。具體方法是，通過(guò)“繪圖紙外觀”、“繪圖紙邊框”、“編輯多幀”等形式，顯示圖形的不同的美的圖形旋轉(zhuǎn)軌跡。如圖所示，就是其中的實(shí)現(xiàn)效果。29可編輯版15.3.3時(shí)間軸時(shí)間軸特效功能經(jīng)常用于以模板的形式制作一些復(fù)雜而重復(fù)的動(dòng)畫，如模糊、位移等。恰當(dāng)合理地運(yùn)用Flash內(nèi)建的時(shí)間軸特效功能，可以為自己平淡的動(dòng)畫添加一些閃光的動(dòng)感。時(shí)間軸特效可以應(yīng)用到的對(duì)象有文本、圖形（包括形狀、組和圖形元件）、位圖圖像、按鈕元件等。當(dāng)將時(shí)間軸特效應(yīng)用于影片剪輯時(shí)，F(xiàn)lash將把特效嵌套在影片剪輯中。30可編輯版這里通過(guò)一具體實(shí)例來(lái)幫助大家認(rèn)識(shí)時(shí)間軸。如圖所示，是借助時(shí)間軸中，相應(yīng)的效果設(shè)置實(shí)現(xiàn)的，動(dòng)態(tài)文字仿脈博跳動(dòng)形式的運(yùn)動(dòng)畫面。31可編輯版15.3.4場(chǎng)景FLASH動(dòng)畫的各個(gè)對(duì)象的位置關(guān)系是按照一定的層狀結(jié)構(gòu)來(lái)呈現(xiàn)的。他的根是場(chǎng)景。有多個(gè)場(chǎng)景的情況，實(shí)際上每個(gè)場(chǎng)景是獨(dú)立的動(dòng)畫，F(xiàn)LASH是通過(guò)設(shè)置各個(gè)場(chǎng)景播放順序來(lái)把各個(gè)場(chǎng)景的動(dòng)畫逐個(gè)連接起來(lái)，因而我們看到的動(dòng)畫播放是連續(xù)的。32可編輯版對(duì)于具體的某一個(gè)場(chǎng)景來(lái)說(shuō)，和其他場(chǎng)景的結(jié)構(gòu)是一樣的。都包含一個(gè)或多個(gè)圖層（lawyer），每一個(gè)圖層中的關(guān)鍵楨可以由一層或很多層（level）組成。如圖所示，是一可以作為動(dòng)畫場(chǎng)景的效果截圖。33可編輯版15.3.5圖層Flash對(duì)對(duì)象實(shí)行分層管理，即將不同的對(duì)象放置在不同的圖層中，這樣在修改其中一個(gè)對(duì)象時(shí)不會(huì)影響到其他的對(duì)象?？梢孕蜗蟮乩斫鉃?，圖層就是透明的玻璃紙，不同的對(duì)象繪制在不同的玻璃紙上，它們相互重疊以顯示整體的內(nèi)容，但在修改某一對(duì)象時(shí)其他對(duì)象不受影響。對(duì)于圖層的操作在時(shí)間軸的“圖層編輯區(qū)”中實(shí)現(xiàn)。1．創(chuàng)建圖層2．圖層改名3．刪除圖層4．隱藏圖層5．鎖定圖層34可編輯版15.3.6實(shí)例應(yīng)用在對(duì)上述內(nèi)容有了相關(guān)認(rèn)識(shí)之后，接下來(lái)