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

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

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

：可以創(chuàng)建響應鼠標點擊、滑過或其他動作的交互式按鈕。影片剪輯元件

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

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