網(wǎng)頁動(dòng)畫制作

網(wǎng)頁動(dòng)畫制作多媒體網(wǎng)頁設(shè)計(jì)教程》第一頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》內(nèi)容概要Flash的基本概念與術(shù)語1Flash的界面2簡單的Flash動(dòng)畫3第二頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》Flash的啟動(dòng)界面舞臺(tái)主工具欄時(shí)間軸第三頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》幀F(xiàn)lash的動(dòng)畫是由幀組成，“幀”指的是每一個(gè)時(shí)刻該層所示畫面的狀態(tài)。在Flash中動(dòng)畫制作中有三種重要的幀：空白幀、關(guān)鍵幀和空白關(guān)鍵幀。第四頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》關(guān)鍵幀關(guān)鍵幀是這樣一個(gè)幀：您在其中定義了對動(dòng)畫的對象屬性所做的更改，或者包含了ActionScript代碼以控制文檔的某些方面。Flash可以在您定義的關(guān)鍵幀之間補(bǔ)間或自動(dòng)填充幀，從而生成流暢的動(dòng)畫。因?yàn)殛P(guān)鍵幀可以使您不用畫出每個(gè)幀就可以生成動(dòng)畫，所以使您能夠更輕松地創(chuàng)建動(dòng)畫?？梢酝ㄟ^在時(shí)間軸中拖動(dòng)關(guān)鍵幀來輕松更改補(bǔ)間動(dòng)畫的長度。第五頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》普通幀普通幀只能將關(guān)鍵幀的狀態(tài)進(jìn)行延續(xù)，一般是用來將元素保持在場景中。而過渡幀是將過渡幀前后的兩個(gè)關(guān)鍵幀進(jìn)行計(jì)算得到，它所包含的元素屬性的變化是計(jì)算得來的。第六頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》圖層圖層就像透明的幻燈膠片一樣，在舞臺(tái)上一層層地向上疊加。圖層可以幫助您組織文檔中的插圖?？梢栽趫D層上繪制和編輯對象，而不會(huì)影響其它圖層上的對象。如果一個(gè)圖層上沒有內(nèi)容，那么就可以透過它看到下面的圖層。要繪制、上色或者對圖層或文件夾進(jìn)行修改，需要在時(shí)間軸中選擇該圖層以激活它。時(shí)間軸中圖層或文件夾名稱旁邊的鉛筆圖標(biāo)表示該圖層或文件夾處于活動(dòng)狀態(tài)。一次只能有一個(gè)圖層處于活動(dòng)狀態(tài)（盡管一次可以選擇多個(gè)圖層）。第七頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》時(shí)間軸時(shí)間軸，它是Flash中的一個(gè)位置，用于確定Flash應(yīng)何時(shí)將特定媒體對象顯示在舞臺(tái)上。時(shí)間軸類似于一個(gè)時(shí)間從左向右推移的電子表格，它用列表示時(shí)間，用行表示圖層。在舞臺(tái)上，較高圖層中的內(nèi)容顯示在較低圖層中的內(nèi)容的上面。第八頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》時(shí)間軸時(shí)間軸用于組織和控制文檔內(nèi)容在一定時(shí)間內(nèi)播放的圖層數(shù)和幀數(shù)。時(shí)間軸頂部的時(shí)間軸標(biāo)題指示幀編號(hào)。播放頭指示當(dāng)前在舞臺(tái)中顯示的幀。時(shí)間軸狀態(tài)顯示在時(shí)間軸的底部，它指示所選的幀編號(hào)、當(dāng)前幀頻以及到當(dāng)前幀為止的運(yùn)行時(shí)間。第九頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》舞臺(tái)舞臺(tái)是您在創(chuàng)建Flash文檔時(shí)放置圖形內(nèi)容的矩形區(qū)域，這些圖形內(nèi)容包括矢量插圖、文本框、按鈕、導(dǎo)入的位圖圖形或視頻剪輯，諸如此類。Flash創(chuàng)作環(huán)境中的舞臺(tái)相當(dāng)于MacromediaFlashPlayer或Web瀏覽器窗口中在回放期間顯示Flash文檔的矩形空間。您可以在工作時(shí)放大和縮小以更改舞臺(tái)的視圖。第十頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》“庫”面板（圖符庫）庫"面板是存儲(chǔ)和組織在Flash中創(chuàng)建的各種元件的地方，它還用于存儲(chǔ)和組織導(dǎo)入的文件，包括位圖圖形、聲音文件和視頻剪輯。

"庫"面板使您可以組織文件夾中的庫項(xiàng)目，查看項(xiàng)目在文檔中使用的頻率，并按類型對項(xiàng)目排序。第十一頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》元件動(dòng)畫設(shè)計(jì)時(shí)可以將相對獨(dú)立的部分制成元件（符號(hào)）存放在元件庫中，需要使用時(shí)再從元件庫中拖放到場景，拖放到場景中的對象稱為實(shí)體（實(shí)例），一個(gè)元件可以被多次拖放而形成多個(gè)不同的實(shí)體（實(shí)例）。元件既可以自制，也可以從外部導(dǎo)入，還可從別人的作品中分離出有用的元件加以利用。第十二頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》創(chuàng)建元件創(chuàng)建元件時(shí)，指定以下其中一個(gè)元件行為：圖形影片剪輯按鈕第十三頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》使用面板面板可幫助您查看、組織和更改文檔中的元素。面板中的可用選項(xiàng)控制著元件、實(shí)例、顏色、類型、幀和其它元素的特征?？梢酝ㄟ^顯示特定任務(wù)所需的面板并隱藏其它面板來自定義Flash界面。第十四頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》動(dòng)畫基礎(chǔ)動(dòng)畫是指物體在一定的時(shí)間內(nèi)發(fā)生的變化過程，包括動(dòng)作、位置、顏色、形狀、角度等等的變化，在電腦中用一幅幅的圖片來表現(xiàn)這一段時(shí)間內(nèi)物體的變化，每一幅圖片稱為一幀（以后我們就用幀表示圖片），當(dāng)這些圖片以一定的速度連續(xù)播放時(shí)，就會(huì)給人以動(dòng)畫的感覺，而靜止的物體則用一幅幅相同的圖片來表示，在電腦中只要告訴Flash動(dòng)畫的第一幅和最后一幅圖片，而中間的變化電腦會(huì)自動(dòng)生成，大大減輕了動(dòng)畫創(chuàng)作的負(fù)擔(dān)，使得動(dòng)畫創(chuàng)作由傳統(tǒng)的手工制作，轉(zhuǎn)變?yōu)殡娔X合成，從而為動(dòng)畫制作開創(chuàng)一個(gè)新的天地。第十五頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》第一個(gè)動(dòng)畫移動(dòng)的小車第十六頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》Flash動(dòng)畫的分類逐幀動(dòng)畫補(bǔ)間動(dòng)畫

補(bǔ)間動(dòng)畫補(bǔ)間形狀第十七頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》逐幀動(dòng)畫K字書寫第十八頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》形變動(dòng)畫（補(bǔ)間形狀）滾動(dòng)的小球（滾動(dòng)過程當(dāng)中顏色也發(fā)生了變化）第十九頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》運(yùn)動(dòng)動(dòng)畫（補(bǔ)間動(dòng)畫）移動(dòng)的小車就是一種運(yùn)動(dòng)動(dòng)畫第二十頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》補(bǔ)間動(dòng)畫實(shí)例--滾動(dòng)的笑臉第二十一頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》上機(jī)作業(yè)1、3.1實(shí)驗(yàn)1--制作一個(gè)運(yùn)動(dòng)動(dòng)畫（移動(dòng)的小車或飄動(dòng)的白云或斜面上滑下的小木塊)—交作業(yè)系統(tǒng)2、制作一個(gè)變形動(dòng)畫（滾動(dòng)的小球或方塊與圓的轉(zhuǎn)換)—交作業(yè)系統(tǒng)3、制作一個(gè)逐幀動(dòng)畫（書寫K字）4、3.1實(shí)驗(yàn)2—轉(zhuǎn)動(dòng)的花瓣5、3.1實(shí)驗(yàn)3—跳動(dòng)的心第二十二頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》內(nèi)容概要Flash界面再熟悉1多層動(dòng)畫制作2引導(dǎo)線動(dòng)畫3第二十三頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》幀的分類與編輯FLASH中最小的時(shí)間單位是幀。根據(jù)幀的作用區(qū)分，可以將幀分為以下三類，如圖。

A、普通幀：包括普通幀和空幀。

B、關(guān)鍵幀：包裝關(guān)鍵幀和空白關(guān)鍵幀。

C、過渡幀：包括形狀過渡幀和運(yùn)動(dòng)過渡幀。

第二十四頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》關(guān)鍵幀關(guān)鍵幀是這樣一個(gè)幀：您在其中定義了對動(dòng)畫的對象屬性所做的更改，或者包含了ActionScript代碼以控制文檔的某些方面。Flash可以在您定義的關(guān)鍵幀之間補(bǔ)間或自動(dòng)填充幀，從而生成流暢的動(dòng)畫。因?yàn)殛P(guān)鍵幀可以使您不用畫出每個(gè)幀就可以生成動(dòng)畫，所以使您能夠更輕松地創(chuàng)建動(dòng)畫。可以通過在時(shí)間軸中拖動(dòng)關(guān)鍵幀來輕松更改補(bǔ)間動(dòng)畫的長度。第二十五頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》普通幀普通幀只能將關(guān)鍵幀的狀態(tài)進(jìn)行延續(xù)，一般是用來將元素保持在場景中。而過渡幀是將過渡幀前后的兩個(gè)關(guān)鍵幀進(jìn)行計(jì)算得到，它所包含的元素屬性的變化是計(jì)算得來的。第二十六頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》圖層圖層就像透明的幻燈膠片一樣，在舞臺(tái)上一層層地向上疊加。圖層可以幫助您組織文檔中的插圖?？梢栽趫D層上繪制和編輯對象，而不會(huì)影響其它圖層上的對象。如果一個(gè)圖層上沒有內(nèi)容，那么就可以透過它看到下面的圖層。要繪制、上色或者對圖層或文件夾進(jìn)行修改，需要在時(shí)間軸中選擇該圖層以激活它。時(shí)間軸中圖層或文件夾名稱旁邊的鉛筆圖標(biāo)表示該圖層或文件夾處于活動(dòng)狀態(tài)。一次只能有一個(gè)圖層處于活動(dòng)狀態(tài)（盡管一次可以選擇多個(gè)圖層）。第二十七頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》圖層的類型A、普通層：就是我們通常制作動(dòng)畫、安排元素所使用的圖層，和PS中的層是類似的概念和功能。B、遮罩層：只用遮罩層的可顯示區(qū)域來顯示被遮罩層的內(nèi)容，與PS中的遮罩類似。C、運(yùn)動(dòng)引導(dǎo)層：運(yùn)動(dòng)引導(dǎo)層包含的是一條路徑，運(yùn)動(dòng)引導(dǎo)線所引導(dǎo)的層的運(yùn)動(dòng)過渡動(dòng)畫將會(huì)按照這條路徑進(jìn)行運(yùn)動(dòng)。

注釋說明層：這是FLASH

MX以后新增加的一個(gè)功能，本質(zhì)上是一個(gè)運(yùn)動(dòng)引導(dǎo)層。可以在其中增加一些說明性文字，而輸出的時(shí)候?qū)又兴膬?nèi)容將不被輸出。第二十八頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》圖層示范遮罩層引導(dǎo)層第二十九頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》時(shí)間軸時(shí)間軸用于組織和控制文檔內(nèi)容在一定時(shí)間內(nèi)播放的圖層數(shù)和幀數(shù)。時(shí)間軸頂部的時(shí)間軸標(biāo)題指示幀編號(hào)。播放頭指示當(dāng)前在舞臺(tái)中顯示的幀。時(shí)間軸狀態(tài)顯示在時(shí)間軸的底部，它指示所選的幀編號(hào)、當(dāng)前幀頻以及到當(dāng)前幀為止的運(yùn)行時(shí)間。第三十頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》舞臺(tái)舞臺(tái)位于工作界面的正中間的矩形部分，是放置動(dòng)畫內(nèi)容的區(qū)域。這些內(nèi)容包括矢量插圖、文本框、按鈕、導(dǎo)入的位圖圖形或視頻剪輯等。第三十一頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》元件動(dòng)畫設(shè)計(jì)時(shí)可以將相對獨(dú)立的部分制成元件（符號(hào)）存放在元件庫中，需要使用時(shí)再從元件庫中拖放到場景，拖放到場景中的對象稱為實(shí)體（實(shí)例），一個(gè)元件可以被多次拖放而形成多個(gè)不同的實(shí)體（實(shí)例）。元件既可以自制，也可以從外部導(dǎo)入，還可從別人的作品中分離出有用的元件加以利用。第三十二頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》元件類型

元件分為三種類型，影片剪輯、按鈕和圖形，不同的元件類型有不同的使用特點(diǎn)。

（1）影片剪輯元件是位于影片中的小片斷，影片剪輯的運(yùn)行獨(dú)立于主要影片的時(shí)間線，相當(dāng)于是影片中的影片。

（2）圖形元件主要適用于靜態(tài)圖片和通過主圖片的時(shí)間線來控制的簡單動(dòng)畫。在圖形元件中不能使用交互和聲音。

（3）按鈕元件用于創(chuàng)建交互式按鈕，可以響應(yīng)鼠標(biāo)動(dòng)作，當(dāng)創(chuàng)建的時(shí)間線變成四種不同的幀，分別是彈起、指針經(jīng)過、按下和點(diǎn)擊。第三十三頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》制作動(dòng)畫的一般過程

制作動(dòng)畫的一般過程都包含了動(dòng)畫的構(gòu)思、動(dòng)畫的設(shè)計(jì)和動(dòng)畫的制作過程。

1．動(dòng)畫的構(gòu)思

2．動(dòng)畫的設(shè)計(jì)

3．動(dòng)畫的制作第三十四頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》多層動(dòng)畫實(shí)例—上升的水泡第三十五頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》上升的水泡關(guān)鍵步驟1、制作背景

a、設(shè)置文檔大?。?00*420px)，修改背景為藍(lán)色

b、繪制一個(gè)無邊框的矩形，填充為藍(lán)白漸變2、新建水泡影片剪輯元件

a、新建4個(gè)圖層

b、在第1層“圖層1”繪制一個(gè)小球逐漸變大的動(dòng)畫

c、把“圖層1”當(dāng)中的所有幀復(fù)制到2、3、4圖層3、切換回場景1a、把元件拖動(dòng)到場景上，制作很多水泡第三十六頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》多層動(dòng)畫實(shí)例—多彩的文字飄動(dòng)的多彩文字第三十七頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》多彩的文字關(guān)鍵步驟1、分別創(chuàng)建四個(gè)文字元件，每個(gè)文字都是一個(gè)元件，每個(gè)文字的顏色都不一樣2、創(chuàng)建四個(gè)圖層，把文字元件拖動(dòng)到四個(gè)圖層當(dāng)中（第1幀）3、分別都創(chuàng)建補(bǔ)間動(dòng)畫4、使用“變形”轉(zhuǎn)變文字當(dāng)中的大小第三十八頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》圖文混和動(dòng)畫實(shí)例走遍中國主頁動(dòng)畫第三十九頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》關(guān)鍵步驟1、導(dǎo)入圖片2、創(chuàng)建文字元件3、拖動(dòng)文字，設(shè)置文字顏色alpha為0%第四十頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》沿著路徑運(yùn)動(dòng)動(dòng)畫實(shí)例—小球第四十一頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》沿著路徑運(yùn)動(dòng)動(dòng)畫實(shí)例—曲線飛行的文字第四十二頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》沿著路徑運(yùn)動(dòng)動(dòng)畫實(shí)例—地球繞太陽第四十三頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》地球繞太陽關(guān)鍵步驟1、在“圖層1”上畫一個(gè)橢圓，把里面的填充色刪除2、使用“變形”把橢圓轉(zhuǎn)成傾斜，隱藏和鎖定“圖層1”3、添加一個(gè)地球元件（插入->新建元件）,繪制一個(gè)地球4、添加“圖層2”，把地球元件拖動(dòng)到圖層2當(dāng)中5、添加一個(gè)引導(dǎo)層，使得能夠引導(dǎo)圖層26、把圖層1上的橢圓復(fù)制到“引導(dǎo)層：圖層2”當(dāng)中的第1幀7、用橡皮把橢圓擦出一個(gè)缺口8、給所有圖層創(chuàng)建關(guān)鍵幀9、給“圖層2”創(chuàng)建補(bǔ)間動(dòng)畫，把地球元件拖動(dòng)到橢圓缺口的兩端10、顯示所有圖層第四十四頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》沿著路徑運(yùn)動(dòng)動(dòng)畫實(shí)例—沿曲線轉(zhuǎn)動(dòng)的風(fēng)車第四十五頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》曲線運(yùn)動(dòng)的風(fēng)車關(guān)鍵步驟1、創(chuàng)建影片剪輯，實(shí)現(xiàn)會(huì)轉(zhuǎn)的風(fēng)車2、創(chuàng)建沿著曲線運(yùn)動(dòng)的動(dòng)畫第四十六頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》上機(jī)作業(yè)上機(jī)作業(yè)

1、上升的水泡--交作業(yè)系統(tǒng)

2、飄彩的文字--交作業(yè)系統(tǒng)

3、圖文混合動(dòng)畫（實(shí)驗(yàn)指導(dǎo)3.2實(shí)驗(yàn)4）--交多媒體練習(xí)平臺(tái)

4、地球繞太陽--交作業(yè)系統(tǒng)

5、沿曲線運(yùn)動(dòng)的風(fēng)車--交作業(yè)系統(tǒng)第四十七頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》內(nèi)容概要Flash術(shù)語1多層動(dòng)畫制作2遮罩層動(dòng)畫3第四十八頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》關(guān)鍵幀關(guān)鍵幀是這樣一個(gè)幀：您在其中定義了對動(dòng)畫的對象屬性所做的更改，或者包含了ActionScript代碼以控制文檔的某些方面。Flash可以在您定義的關(guān)鍵幀之間補(bǔ)間或自動(dòng)填充幀，從而生成流暢的動(dòng)畫。因?yàn)殛P(guān)鍵幀可以使您不用畫出每個(gè)幀就可以生成動(dòng)畫，所以使您能夠更輕松地創(chuàng)建動(dòng)畫?？梢酝ㄟ^在時(shí)間軸中拖動(dòng)關(guān)鍵幀來輕松更改補(bǔ)間動(dòng)畫的長度。第四十九頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》圖層的類型A、普通層：就是我們通常制作動(dòng)畫、安排元素所使用的圖層，和PS中的層是類似的概念和功能。B、遮罩層：只用遮罩層的可顯示區(qū)域來顯示被遮罩層的內(nèi)容，與PS中的遮罩類似。C、運(yùn)動(dòng)引導(dǎo)層：運(yùn)動(dòng)引導(dǎo)層包含的是一條路徑，運(yùn)動(dòng)引導(dǎo)線所引導(dǎo)的層的運(yùn)動(dòng)過渡動(dòng)畫將會(huì)按照這條路徑進(jìn)行運(yùn)動(dòng)。

注釋說明層：這是FLASH

MX以后新增加的一個(gè)功能，本質(zhì)上是一個(gè)運(yùn)動(dòng)引導(dǎo)層?？梢栽谄渲性黾右恍┱f明性文字，而輸出的時(shí)候?qū)又兴膬?nèi)容將不被輸出。第五十頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》圖層示范遮罩層引導(dǎo)層第五十一頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》元件類型

元件分為三種類型，影片剪輯、按鈕和圖形，不同的元件類型有不同的使用特點(diǎn)。

（1）影片剪輯元件是位于影片中的小片斷，影片剪輯的運(yùn)行獨(dú)立于主要影片的時(shí)間線，相當(dāng)于是影片中的影片。

（2）圖形元件主要適用于靜態(tài)圖片和通過主圖片的時(shí)間線來控制的簡單動(dòng)畫。在圖形元件中不能使用交互和聲音。

（3）按鈕元件用于創(chuàng)建交互式按鈕，可以響應(yīng)鼠標(biāo)動(dòng)作，當(dāng)創(chuàng)建的時(shí)間線變成四種不同的幀，分別是彈起、指針經(jīng)過、按下和點(diǎn)擊。第五十二頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》多層動(dòng)畫實(shí)例—日出動(dòng)畫第五十三頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》日出動(dòng)畫關(guān)鍵步驟1、制作元件（山峰、太陽、背景）2、在場景上添加3個(gè)圖層3、把三個(gè)元件分別拖動(dòng)到三個(gè)圖層4、元件的顏色亮度5、太陽上升前，黑色比較深，太陽升起后，黑色變淡第五十四頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》遮罩層對于遮罩層的理解可以將其看作是普通層的反轉(zhuǎn)，其中，有對象存在位置為透明，空白區(qū)域則不透明。遮罩層只能對之相連的層起作用。Flash的遮罩功能只需要設(shè)置一個(gè)遮罩層，就可以遮蓋視線中的某些區(qū)域或空間，遮罩層，是顯示指定范圍內(nèi)的內(nèi)容?？梢园褦z像機(jī)理解為遮罩特效，在電視里看見的只能是攝像機(jī)拍攝的畫面，而不能看見攝像機(jī)本身和鏡頭以外的景象。第五十五頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》簡單的遮罩效果第五十六頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》簡單的遮罩效果操作步驟1、導(dǎo)入一張背景圖像，作為聚光燈照射對象。

2、執(zhí)行“插入”→“創(chuàng)建新元件”命令，創(chuàng)建“聚光燈”元件，在元件編輯區(qū)域內(nèi)，繪制橢圓形狀的聚光燈鏡頭。

3、導(dǎo)入背景圖片到被遮罩層4、添加“聚光燈”元件到遮罩層。5、為遮罩層的“聚光燈”元件創(chuàng)建補(bǔ)間動(dòng)畫

第五十七頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》遮罩動(dòng)畫實(shí)例--文字遮蓋圖像動(dòng)畫第五十八頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》遮罩層關(guān)鍵步驟1、導(dǎo)入一張背景圖像，作為聚光燈照射對象。

2、執(zhí)行“插入”→“創(chuàng)建新元件”命令，創(chuàng)建“文字遮蓋”元件，注意：需要打散文字。

3、導(dǎo)入背景圖片到被遮罩層4、添加“聚光燈”元件到遮罩層。5、為被遮罩層的背景圖片創(chuàng)建補(bǔ)間動(dòng)畫第五十九頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》遮罩層動(dòng)畫實(shí)例—放大鏡效果第六十頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》探照燈效果第六十一頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》探照燈效果關(guān)鍵步驟1、繪制放大鏡元件2、創(chuàng)建放大鏡圖層的補(bǔ)間動(dòng)畫3、創(chuàng)建“背景色”圖層，畫出一個(gè)矩形框，使用漸變填充背景4、創(chuàng)建“背景文字”圖層，在該圖層上輸入文字，設(shè)置相應(yīng)字體顏色5、繪制鏡頭元件，創(chuàng)建鏡頭圖層，把鏡頭元件拖動(dòng)到鏡頭圖層上，并創(chuàng)建相應(yīng)補(bǔ)間動(dòng)畫6、創(chuàng)建“照射后的文字”圖層，復(fù)制“背景文字”圖層上的文字到該圖層7、修改“鏡頭”圖層為遮罩圖層第六十二頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》放大鏡效果關(guān)鍵步驟1、為放大后的效果建立大字遮罩層的遮罩對象（一個(gè)大圓）元件2、為原來文字創(chuàng)建沒有被放大的文字顯示遮罩對象（一個(gè)長條，挖除一個(gè)大圓）元件注意：1、2步驟所創(chuàng)建的2個(gè)元件應(yīng)該能夠剛好組合成一個(gè)完整的長條3、建立四個(gè)圖層，分別為大字遮罩層，大字層，小字遮罩層，小字層（從上到下）4、在大字層輸入放大后的文字5、在小字層輸入原來的文字6、把大字遮罩對象（大圓）元件，拖動(dòng)到大字遮罩層當(dāng)中7、把小字遮罩對象（長條，挖除大圓）元件，拖動(dòng)到小字遮罩層當(dāng)中8、分別為大字遮罩層和小字遮罩層創(chuàng)建補(bǔ)間動(dòng)畫9、創(chuàng)建一個(gè)放大鏡圖形的補(bǔ)間動(dòng)畫第六十三頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》遮罩層動(dòng)畫實(shí)例—閃光的五角星第六十四頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》閃光的五角星關(guān)鍵步驟1、繪制五角星元件2、制作五角星旋轉(zhuǎn)的補(bǔ)間動(dòng)畫3、繪制射線元件4、繪制射線的遮罩動(dòng)畫第六十五頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》上機(jī)作業(yè)上機(jī)作業(yè)

1、我形我秀圖片疊加動(dòng)畫--交多媒體練習(xí)平臺(tái)

2、閃光的五角星--交作業(yè)系統(tǒng)

3、放大鏡特效--交作業(yè)系統(tǒng)

4、完成其他作業(yè)第六十六頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》課后作業(yè)：閱讀《網(wǎng)頁教程》第3章3.4節(jié)閱讀《應(yīng)用基礎(chǔ)》第5章第5小節(jié)注意：《網(wǎng)頁教程》即《多媒體網(wǎng)頁設(shè)計(jì)教程》《應(yīng)用基礎(chǔ)》即《大學(xué)計(jì)算機(jī)應(yīng)用基礎(chǔ)教程》第六十七頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》內(nèi)容概要按鈕元件的制作1影片剪輯的應(yīng)用2Flash中聲音的應(yīng)用3Flash動(dòng)作4Flash的優(yōu)化與輸出5第六十八頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》按鈕元件的制作按鈕元件是Flash的基本元件之一，它具有多種狀態(tài)，并且會(huì)響應(yīng)鼠標(biāo)事件，執(zhí)行指定的動(dòng)作，是實(shí)現(xiàn)動(dòng)畫交互效果的關(guān)鍵對象。第六十九頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》Flash動(dòng)畫按鈕—按鈕Flash動(dòng)畫按鈕

彈起狀態(tài)

指針經(jīng)過狀態(tài)

按下狀態(tài)第七十頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》笑臉按鈕關(guān)鍵步驟1、創(chuàng)建按鈕元件2、分別在“彈起”、“指針經(jīng)過”和“按下”幀繪制相應(yīng)的圖形3、拖動(dòng)元件到場景上第七十一頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》Flash聲音的導(dǎo)入在Flash中不僅可以制作動(dòng)畫，還可以處理豐富的聲音效果。

Flash提供了多種聲音的使用方法，既可以使用聲音獨(dú)立于時(shí)間軸連續(xù)播放，也可以使聲音和動(dòng)畫保持同步播放。在Flash中有兩種類型聲音：事件聲音和流式聲音：第七十二頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》Flash中的聲音事件聲音：在播放前必須下載完全，它可以連續(xù)播放直到有明確的命令來停止播放，多是應(yīng)用在按鈕或是固定動(dòng)作中。l

流式聲音：在下載了前幾幀后，只要數(shù)據(jù)足夠，它就可以開始播放，而且它可以做到和WEB上播放的時(shí)間同步，一般應(yīng)用于背景音樂，或是不需要與場景內(nèi)容配合的情況。第七十三頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》Flash中聲音的應(yīng)用一般情況下，在Flash中應(yīng)用聲音主要包括以下幾個(gè)重要內(nèi)容：導(dǎo)入聲音、引用聲音、編輯聲音、壓縮聲音。

1．

導(dǎo)入聲音

2．引用聲音

3．編輯聲音

4．給按鈕加上聲效

5．壓縮聲音第七十四頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》交互動(dòng)畫所謂交互動(dòng)畫是指動(dòng)畫瀏覽者可使用鍵盤，鼠標(biāo)操作來控制動(dòng)畫的播放，或調(diào)轉(zhuǎn)到影片的其它部份，移動(dòng)對像，在表格里填寫數(shù)據(jù)及執(zhí)行其它的各種操作。交互動(dòng)畫是通過動(dòng)作腳本語言（Actionscript）設(shè)置動(dòng)作來產(chǎn)生的，交互動(dòng)畫的基本要素是場景，幀，時(shí)間和動(dòng)作腳本語法和其它腳本撰寫語言一樣動(dòng)作腳本遵循自己的語法規(guī)則，保留關(guān)鍵字，提供運(yùn)算符，并且允許使用變量存儲(chǔ)和獲取信息，動(dòng)作腳本包含大量的對像和函數(shù)，并允許創(chuàng)建自己的對像各函數(shù)第七十五頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》動(dòng)作Flash8.0的ActionScript是2.0版，它支持更多的功能，如類、繼承等。不過作為動(dòng)作腳本，最基本的功能變化不大。第七十六頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》動(dòng)作范例—超鏈按鈕

按鈕“彈起”狀態(tài)圖形形狀按鈕“經(jīng)過”狀態(tài)圖形形狀第七十七頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》超級(jí)鏈接按鈕關(guān)鍵步驟1、創(chuàng)建“友情鏈接”按鈕元件2、拖動(dòng)“友情鏈接”按鈕元件到場景上3、選擇“友情鏈接”按鈕實(shí)例，單擊“動(dòng)作”面板4、輸入代碼第七十八頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》動(dòng)作范例—按鈕控制影片播放和停止第七十九頁，共八十七頁，編輯于2023年，星期一多媒體網(wǎng)頁設(shè)計(jì)教程》按鈕控制影片播放和停止關(guān)鍵步驟1、創(chuàng)建“照片”圖形元件（可以導(dǎo)入圖片，也可以繪制圖形）2、創(chuàng)建“旋轉(zhuǎn)”和“停止”按鈕元件3、創(chuàng)建2個(gè)圖層分別為“按鈕層”，“照片層”4、拖動(dòng)“旋轉(zhuǎn)”和“停止”按鈕元件到“按鈕層”，拖動(dòng)照片元件