網(wǎng)頁中動畫的高級應(yīng)用

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

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