第19章網(wǎng)頁(yè)設(shè)計(jì)與制作應(yīng)用教程

網(wǎng)頁(yè)設(shè)計(jì)與制作應(yīng)用教程（第2版）機(jī)械工業(yè)出版社同名教材配套電子課件主要內(nèi)容第一部分網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)第二部分AdobeDreamweaverCS5網(wǎng)頁(yè)制作第三部分AdobeFireworksCS5網(wǎng)頁(yè)圖片處理第四部分AdobeFlashCS5網(wǎng)頁(yè)動(dòng)畫(huà)制作2第19章Flash根本動(dòng)畫(huà)的制作19.1元件和實(shí)例19.2使用“庫(kù)”19.3動(dòng)畫(huà)基礎(chǔ)19.4使用反向運(yùn)動(dòng)19.5邊學(xué)邊做（制作“開(kāi)卷有益”動(dòng)畫(huà)）319.1元件和實(shí)例元件又稱(chēng)符號(hào)，元件是指創(chuàng)建一次即可多次重復(fù)使用的圖形、按鈕、影片剪輯或文本。根據(jù)元件所屬的不同類(lèi)型，任何一個(gè)創(chuàng)建的元件都將自動(dòng)成為“庫(kù)”的一部分。合理使用元件可以縮短動(dòng)畫(huà)制作的時(shí)間，減少文件的數(shù)據(jù)量，使制作出來(lái)的動(dòng)畫(huà)能夠在網(wǎng)絡(luò)上傳輸更加迅速，從而大大提高工作效率。419.1.1創(chuàng)立和編輯元件1.元件類(lèi)型圖形元件

：可用于靜態(tài)圖像，并可用來(lái)創(chuàng)建連接到主時(shí)間軸的可重用動(dòng)畫(huà)片段。按鈕元件

：可以創(chuàng)建響應(yīng)鼠標(biāo)點(diǎn)擊、滑過(guò)或其他動(dòng)作的交互式按鈕。影片剪輯元件

：可以創(chuàng)建可重用的動(dòng)畫(huà)片段。影片剪輯擁有它們自己的獨(dú)立于主時(shí)間軸的多幀時(shí)間軸。519.1.1創(chuàng)立和編輯元件2.創(chuàng)建新元件619.1.1創(chuàng)立和編輯元件3.將選定元素轉(zhuǎn)換為元件在舞臺(tái)上選擇一個(gè)或多個(gè)元素。然后選擇主菜單【修改】/【轉(zhuǎn)換為元件】命令（或者將選中元素拖到“庫(kù)”面板上，還可以通過(guò)單擊右鍵，從菜單中選擇“轉(zhuǎn)換為元件”命令）。719.1.1創(chuàng)立和編輯元件4.創(chuàng)建按鈕元件按鈕實(shí)際上是四幀的交互影片剪輯。當(dāng)為元件選擇按鈕行為時(shí)，F(xiàn)lash會(huì)切換到元件編輯模式。窗口內(nèi)顯示一個(gè)四幀的時(shí)間，軸時(shí)間軸的標(biāo)題為四個(gè)標(biāo)簽：“彈起”、“指針經(jīng)過(guò)”、“按下”和“點(diǎn)擊”的連續(xù)幀. 819.1.2創(chuàng)立和編輯實(shí)例實(shí)例是指位于舞臺(tái)上或嵌套在另一個(gè)元件內(nèi)的元件副本。實(shí)例可以與它的元件在顏色、大小和功能上有差別，編輯元件會(huì)更新它的所有實(shí)例，但對(duì)元件的一個(gè)實(shí)例應(yīng)用效果則只更新該實(shí)例。919.1.2創(chuàng)立和編輯實(shí)例實(shí)例是指位于舞臺(tái)上或嵌套在另一個(gè)元件內(nèi)的元件副本。實(shí)例可以與它的元件在顏色、大小和功能上有差別，編輯元件會(huì)更新它的所有實(shí)例，但對(duì)元件的一個(gè)實(shí)例應(yīng)用效果則只更新該實(shí)例。1019.2使用“庫(kù)〞Flash文檔中的“庫(kù)”可存儲(chǔ)為在Flash文檔中使用而創(chuàng)建或?qū)氲拿襟w資源?！皫?kù)”可存儲(chǔ)導(dǎo)入的文件（如視頻剪輯、聲音剪輯、位圖）、導(dǎo)入的矢量插圖和元件。1119.2使用“庫(kù)〞“庫(kù)”面板1219.2使用“庫(kù)〞“公用庫(kù)”面板1319.3動(dòng)畫(huà)根底19.3.1基本知識(shí)19.3.2逐幀動(dòng)畫(huà)19.3.3補(bǔ)間動(dòng)畫(huà)19.3.4傳統(tǒng)補(bǔ)間動(dòng)畫(huà)19.3.5補(bǔ)間形狀動(dòng)畫(huà)19.3.6遮罩動(dòng)畫(huà)1419.3.1根本知識(shí)1.動(dòng)畫(huà)類(lèi)型逐幀動(dòng)畫(huà)逐幀動(dòng)畫(huà)可以為時(shí)間軸中的每個(gè)幀指定不同的藝術(shù)作品，創(chuàng)建與快速連續(xù)播放的影片幀類(lèi)似的效果。補(bǔ)間動(dòng)畫(huà)對(duì)于由對(duì)象的連續(xù)運(yùn)動(dòng)或變形構(gòu)成的動(dòng)畫(huà)，補(bǔ)間動(dòng)畫(huà)很有用。補(bǔ)間動(dòng)畫(huà)功能強(qiáng)大，易于創(chuàng)建。傳統(tǒng)補(bǔ)間傳統(tǒng)補(bǔ)間允許一些特定的動(dòng)畫(huà)效果，使用基于范圍的補(bǔ)間不能實(shí)現(xiàn)這些效果。補(bǔ)間形狀Flash將內(nèi)插中間的幀的中間形狀，創(chuàng)建一個(gè)形狀變形為另一個(gè)形狀的動(dòng)畫(huà)。反向運(yùn)動(dòng)姿勢(shì)反向運(yùn)動(dòng)姿勢(shì)用于伸展和彎曲形狀對(duì)象以及鏈接元件實(shí)例組，使它們以自然方式一起移動(dòng)。1519.3.1根本知識(shí)2.幀頻幀頻是動(dòng)畫(huà)播放的速度，以每秒播放的幀數(shù)(fps)為度量單位。幀頻太慢會(huì)使動(dòng)畫(huà)看起來(lái)一頓一頓的，幀頻太快會(huì)使動(dòng)畫(huà)的細(xì)節(jié)變得模糊。24fps的幀速率是新Flash文檔的默認(rèn)設(shè)置，通常在Web上提供最佳效果。標(biāo)準(zhǔn)的動(dòng)畫(huà)速率也是24fps。1619.3.1根本知識(shí)3.在時(shí)間軸中標(biāo)識(shí)動(dòng)畫(huà)Flash通過(guò)在包含內(nèi)容的每個(gè)幀中顯示不同的指示符來(lái)區(qū)分時(shí)間軸中的逐幀動(dòng)畫(huà)和補(bǔ)間動(dòng)畫(huà)。1719.3.2逐幀動(dòng)畫(huà)例19_11)新建一個(gè)Flash文檔并保存為“例1-計(jì)時(shí).fla”，在“屬性”面板中將舞臺(tái)大小設(shè)置為200×200像素，背景顏色設(shè)置為淡藍(lán)色（#66CCCC），設(shè)置幀頻率為1.0fps，如圖19-14所示。182)當(dāng)前“時(shí)間軸”窗口中，播放頭位于“圖層1”的第1幀上，選中工具箱中“橢圓”工具，在舞臺(tái)中間繪制一個(gè)白色環(huán)形作為動(dòng)畫(huà)背景。3)單擊時(shí)間軸底部的“插入圖層”按鈕，新建“圖層2”，單擊“圖層2”的第1幀使之成為當(dāng)前的關(guān)鍵幀。4)使用“文本”工具在當(dāng)前幀上創(chuàng)建文本。在舞臺(tái)中的圓圈內(nèi)單擊鼠標(biāo)，輸入數(shù)字“9”，并確認(rèn)。5)單擊下一幀，然后單擊右鍵，從彈出的快捷菜單中選擇“插入關(guān)鍵幀”，添加一個(gè)新的關(guān)鍵幀，并且內(nèi)容和第一個(gè)關(guān)鍵幀內(nèi)容一樣。6)使用“文本”工具在舞臺(tái)中改變?cè)搸膬?nèi)容為數(shù)字“8”。7)按照步驟5)~6)，繼續(xù)完成第3到第10幀的動(dòng)畫(huà)序列，分別對(duì)應(yīng)數(shù)字“7”到“0”。8)按“Enter”鍵測(cè)試動(dòng)畫(huà)序列，會(huì)看到窗口中顯示出按照讀秒的速度變化著的倒計(jì)時(shí)數(shù)字效果。1919.3.2逐幀動(dòng)畫(huà)19.3.3補(bǔ)間動(dòng)畫(huà)利用動(dòng)畫(huà)預(yù)設(shè)創(chuàng)建補(bǔ)間動(dòng)畫(huà)例19_2描述：在舞臺(tái)上，先后分別出現(xiàn)三個(gè)小球，其中一個(gè)從左到右在舞臺(tái)上進(jìn)行波形往返運(yùn)動(dòng)，第二個(gè)稍后會(huì)由虛漸實(shí)出現(xiàn)在舞臺(tái)的右下角，第三個(gè)再?gòu)挠蚁蜃笠迫胛枧_(tái)上方位置，最終三個(gè)小球在舞臺(tái)左側(cè)垂直對(duì)齊。2019.3.3補(bǔ)間動(dòng)畫(huà)1）創(chuàng)建一個(gè)新的Flash文檔，并保存文件為“例2-小球.fla”。2）按下“Ctrl+F8”鍵，彈出“創(chuàng)建新元件”對(duì)話框，將影片剪輯命名為“ball”，單擊“確定”按鈕。3）在元件“ball”的舞臺(tái)上中心點(diǎn)創(chuàng)建一個(gè)具有綠色漸變填充的小球，小球外觀及屬性如圖19-15所示。2119.3.3補(bǔ)間動(dòng)畫(huà)4) 切換回“場(chǎng)景1”，打開(kāi)“庫(kù)”面板，將元件“ball”拖拽到舞臺(tái)中左側(cè)位置。此時(shí)，時(shí)間軸第1幀產(chǎn)生一個(gè)關(guān)鍵幀。5）執(zhí)行主菜單【窗口】/【動(dòng)畫(huà)預(yù)設(shè)】命令，打開(kāi)“動(dòng)畫(huà)預(yù)設(shè)”面板，展開(kāi)“默認(rèn)預(yù)設(shè)”文件夾，共有32個(gè)項(xiàng)目，選擇其中的“波形”，在“預(yù)覽”窗格中可以看到動(dòng)畫(huà)預(yù)覽效果。“動(dòng)畫(huà)預(yù)設(shè)”面板如圖19-16所示。6)單擊“動(dòng)畫(huà)預(yù)設(shè)”面板底部的“應(yīng)用”按鈕。則舞臺(tái)上影片剪輯實(shí)例上出現(xiàn)一個(gè)綠色的運(yùn)動(dòng)軌跡標(biāo)識(shí)，時(shí)間軸上也對(duì)應(yīng)自動(dòng)產(chǎn)生一個(gè)70幀的補(bǔ)間狀態(tài)，第1幀是一個(gè)黑色圓形關(guān)鍵幀，第35幀和第70幀處分別有一個(gè)黑色菱形的屬性關(guān)鍵幀。第一個(gè)小球的補(bǔ)間動(dòng)畫(huà)創(chuàng)建完成。2219.3.3補(bǔ)間動(dòng)畫(huà)7) 創(chuàng)建一個(gè)新圖層，在第10幀處插入一個(gè)空白關(guān)鍵幀，然后將“庫(kù)”面板中的元件拖拽到舞臺(tái)的右下角位置，再應(yīng)用“動(dòng)畫(huà)預(yù)設(shè)”功能，動(dòng)畫(huà)預(yù)設(shè)為“2D放大”設(shè)置。8) 創(chuàng)建一個(gè)新圖層，在第20幀處插入一個(gè)空白關(guān)鍵幀，然后將“庫(kù)”面板中的元件拖拽到舞臺(tái)的上方偏左的位置，再應(yīng)用“動(dòng)畫(huà)預(yù)設(shè)”功能，動(dòng)畫(huà)預(yù)設(shè)為“從右邊飛入”設(shè)置。9) 在第70幀處，補(bǔ)齊三個(gè)圖層的普通幀，時(shí)間軸如圖19-17所示。按“Ctrl+Enter”鍵，導(dǎo)出并觀看動(dòng)畫(huà)效果。232419.3.3補(bǔ)間動(dòng)畫(huà)例19_3描述：創(chuàng)建一個(gè)文本動(dòng)畫(huà)，文本從舞臺(tái)頂部移入到中央位置，稍作停滯，然后再向左側(cè)移出舞臺(tái)。1）創(chuàng)建一個(gè)新的Flash文檔，文檔大小為500×200像素，舞臺(tái)顏色為黑色，并保存文件為“例3-文字.fla”。2）在工具箱中選擇“文本”工具，輸入一行文本信息，文本顏色為淺黃色，華文行楷，字號(hào)40點(diǎn)，并將文本移至舞臺(tái)上方的外部，如圖19-18所示。253）在舞臺(tái)上選擇要補(bǔ)間的“文本”對(duì)象。右鍵單擊文本區(qū)（或當(dāng)前幀），在彈出的快捷菜單中選擇“創(chuàng)建補(bǔ)間動(dòng)畫(huà)”。即可看到時(shí)間軸窗口發(fā)生的變化，“圖層1”的圖標(biāo)由常規(guī)圖層類(lèi)型變?yōu)檠a(bǔ)間圖層類(lèi)型，如圖19-19所示。而且，時(shí)間軸一側(cè)自動(dòng)插入到第24幀，補(bǔ)間范圍的長(zhǎng)度等于一秒的持續(xù)時(shí)間（幀速率是24幀/秒）。2619.3.3補(bǔ)間動(dòng)畫(huà)4）在時(shí)間軸中拖動(dòng)補(bǔ)間范圍的右端，延長(zhǎng)補(bǔ)間范圍到第60幀，如圖19-20所示。5）將動(dòng)畫(huà)添加到補(bǔ)間。將播放頭放在補(bǔ)間范圍內(nèi)的第25幀上，然后將舞臺(tái)上的“文本”對(duì)象垂直向下拖到舞臺(tái)正中位置。此時(shí)，舞臺(tái)上顯示的運(yùn)動(dòng)路徑顯示從補(bǔ)間范圍的第一幀中的位置到新位置的路徑。時(shí)間軸顯示添加了屬性關(guān)鍵幀，屬性關(guān)鍵幀在補(bǔ)間范圍中顯示為小菱形。舞臺(tái)及時(shí)間軸內(nèi)容如圖19-21所示。2719.3.3補(bǔ)間動(dòng)畫(huà)6) 將播放頭放在補(bǔ)間范圍內(nèi)的第35幀上，并單擊右鍵，在彈出的快捷菜單中選擇【插入關(guān)鍵幀】/【位置】命令，則添加一個(gè)新的屬性關(guān)鍵幀。第25幀到第35幀中的文本位置保持不動(dòng)，為了在舞臺(tái)中清晰顯示文本。7) 按照步驟6）在第60幀處添加新的屬性關(guān)鍵幀，并將文本水平向左移出舞臺(tái)，如圖19-22所示。2819.3.3補(bǔ)間動(dòng)畫(huà)創(chuàng)立緩動(dòng)補(bǔ)間動(dòng)畫(huà)

例19_4描述：在制作汽車(chē)經(jīng)過(guò)舞臺(tái)的動(dòng)畫(huà)時(shí)，如果讓汽車(chē)從停止開(kāi)始緩慢加速，然后在舞臺(tái)的另一端緩慢停止，則動(dòng)畫(huà)會(huì)顯得更逼真。291．傳統(tǒng)補(bǔ)間動(dòng)畫(huà)的概念在Flash的“時(shí)間軸〞面板上，在一個(gè)時(shí)間點(diǎn)〔關(guān)鍵幀〕放置一個(gè)元件，然后在另一個(gè)時(shí)間點(diǎn)〔關(guān)鍵幀〕改變這個(gè)元件的大小、顏色、位置、透明度等，F(xiàn)lash根據(jù)二者之間的幀值創(chuàng)立的動(dòng)畫(huà)稱(chēng)為動(dòng)作漸變動(dòng)畫(huà)。2．構(gòu)成傳統(tǒng)補(bǔ)間動(dòng)畫(huà)的元素構(gòu)成動(dòng)作補(bǔ)間動(dòng)畫(huà)的元素是元件，包括影片剪輯、圖形元件、按鈕等除了元件，其他元素包括文本都不能創(chuàng)立補(bǔ)間動(dòng)畫(huà)其他的位圖、文本等都必須要轉(zhuǎn)換成元件才行，只有把形狀“組合〞或者轉(zhuǎn)換成“元件〞后才可以做“動(dòng)作補(bǔ)間動(dòng)畫(huà)〞。19.3.4傳統(tǒng)補(bǔ)間動(dòng)畫(huà)3．傳統(tǒng)補(bǔ)間動(dòng)畫(huà)在時(shí)間軸面板上的表現(xiàn)動(dòng)作補(bǔ)間動(dòng)畫(huà)建立后，“時(shí)間幀〞面板的背景色變?yōu)榈{(lán)色，在起始幀和結(jié)束幀之間有一個(gè)長(zhǎng)長(zhǎng)的箭頭。4．正確運(yùn)用運(yùn)動(dòng)漸變需要滿足的條件運(yùn)動(dòng)漸變只能用于元件實(shí)例。假設(shè)要對(duì)形狀、組合、位圖或文本對(duì)象應(yīng)用運(yùn)動(dòng)漸變，必須先將這些對(duì)象轉(zhuǎn)換成元件。運(yùn)動(dòng)漸變中的元件只能是一對(duì)一的漸變，對(duì)多一或一對(duì)多均會(huì)導(dǎo)致漸變失敗。運(yùn)動(dòng)漸變中的對(duì)象只能在同一圖層19.3.4傳統(tǒng)補(bǔ)間動(dòng)畫(huà)4．正確運(yùn)用運(yùn)動(dòng)漸變需要滿足的條件運(yùn)動(dòng)漸變只能用于元件實(shí)例。假設(shè)要對(duì)形狀、組合、位圖或文本對(duì)象應(yīng)用運(yùn)動(dòng)漸變，必須先將這些對(duì)象轉(zhuǎn)換成元件。運(yùn)動(dòng)漸變中的元件只能是一對(duì)一的漸變，對(duì)多一或一對(duì)多均會(huì)導(dǎo)致漸變失敗。運(yùn)動(dòng)漸變中的對(duì)象只能在同一圖層19.3.4傳統(tǒng)補(bǔ)間動(dòng)畫(huà)19.3.4傳統(tǒng)補(bǔ)間動(dòng)畫(huà)例19_5描述：制作“彈跳娃娃”的實(shí)例操作介紹運(yùn)動(dòng)補(bǔ)間動(dòng)畫(huà)效果的制作方法33引導(dǎo)層動(dòng)畫(huà)是在制作Flash動(dòng)畫(huà)影片時(shí)經(jīng)常應(yīng)用的一種動(dòng)畫(huà)方式。使用引導(dǎo)層，可以使指定的元件沿引導(dǎo)層中的路徑運(yùn)動(dòng)。一條引導(dǎo)路徑可以對(duì)多個(gè)對(duì)象同時(shí)作用，一個(gè)影片中也可以存在多個(gè)引導(dǎo)圖層，引導(dǎo)圖層中的內(nèi)容在最后輸出的影片文件中不可見(jiàn)。將一個(gè)或多個(gè)層鏈接到一個(gè)運(yùn)動(dòng)引導(dǎo)層，使一個(gè)或多個(gè)對(duì)象沿同一條路徑運(yùn)動(dòng)的動(dòng)畫(huà)形式被稱(chēng)為“引導(dǎo)路徑動(dòng)畫(huà)〞。這種動(dòng)畫(huà)可以使一個(gè)或多個(gè)元件完成曲線或不規(guī)那么運(yùn)動(dòng)19.3.4傳統(tǒng)補(bǔ)間動(dòng)畫(huà)19.3.4傳統(tǒng)補(bǔ)間動(dòng)畫(huà)例19_6描述：一個(gè)小球環(huán)繞不倒翁旋轉(zhuǎn)的實(shí)例，介紹引導(dǎo)層動(dòng)畫(huà)的創(chuàng)作方法。35形狀漸變動(dòng)畫(huà)的概念在Flash的“時(shí)間軸〞面板上，在一個(gè)時(shí)間點(diǎn)〔關(guān)鍵幀〕繪制一個(gè)形狀，然后在另一個(gè)時(shí)間點(diǎn)〔關(guān)鍵幀〕更改該形狀或繪制另一個(gè)形狀，F(xiàn)lash根據(jù)二者之間的幀的值或形狀來(lái)創(chuàng)立的動(dòng)畫(huà)被稱(chēng)為“形狀漸變動(dòng)畫(huà)〞。19.3.4補(bǔ)間形狀動(dòng)畫(huà)19.3.4補(bǔ)間形狀動(dòng)畫(huà)例19_7描述：一個(gè)“晝夜轉(zhuǎn)換”的實(shí)例來(lái)介紹補(bǔ)間形狀動(dòng)畫(huà)的制作過(guò)程。371．遮罩動(dòng)畫(huà)的概念〔1〕什么是遮罩“遮罩〞，顧名思義就是遮擋住下面的對(duì)象。遮罩動(dòng)畫(huà)〞是通過(guò)“遮罩層〞實(shí)現(xiàn)有“選擇地顯示位于其下方的“被遮罩層〞中的內(nèi)容，在一個(gè)遮罩動(dòng)畫(huà)中，“遮罩層〞只有一個(gè)，“被遮罩層〞可以有任意多個(gè)。〔2〕遮罩的用途一個(gè)作用是用在整個(gè)場(chǎng)景或一個(gè)特定區(qū)域，使場(chǎng)景外的對(duì)象或特定區(qū)域外的對(duì)象不可見(jiàn)另一個(gè)作用是用來(lái)遮罩住某一元件的一局部，從而實(shí)現(xiàn)一些特殊的效果。19.3.6遮罩動(dòng)畫(huà)19.3.6遮罩動(dòng)畫(huà)例19_8描述：制作一個(gè)“滾動(dòng)字幕”的實(shí)例介紹遮罩動(dòng)畫(huà)的創(chuàng)作方法。3919.4使用反向運(yùn)動(dòng)反向運(yùn)動(dòng)(IK)是一種使用骨骼的有關(guān)節(jié)結(jié)構(gòu)對(duì)一個(gè)對(duì)象或彼此相關(guān)的一組對(duì)象