設(shè)計(jì)網(wǎng)頁動(dòng)畫

1、網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)第第5章章 設(shè)計(jì)網(wǎng)頁動(dòng)畫設(shè)計(jì)網(wǎng)頁動(dòng)畫第1頁本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)本章概述本章概述l在網(wǎng)站開發(fā)過程中，經(jīng)常利用在網(wǎng)站開發(fā)過程中，經(jīng)常利用Flash設(shè)計(jì)制作網(wǎng)設(shè)計(jì)制作網(wǎng)頁動(dòng)畫。頁動(dòng)畫。Flash是專業(yè)的矢量網(wǎng)頁動(dòng)畫制作軟件是專業(yè)的矢量網(wǎng)頁動(dòng)畫制作軟件，利用，利用Flash制作的動(dòng)畫文件體積小，能邊下載制作的動(dòng)畫文件體積小，能邊下載邊播放，且具有較強(qiáng)的交互性，用戶可以自由控邊播放，且具有較強(qiáng)的交互性，用戶可以自由控制動(dòng)畫的播放。因此將制動(dòng)畫的播放。因此將Flash動(dòng)畫運(yùn)用到網(wǎng)頁中動(dòng)畫運(yùn)用到網(wǎng)頁中將會(huì)使網(wǎng)

2、頁有極豐富的表現(xiàn)力。本章主要介紹將會(huì)使網(wǎng)頁有極豐富的表現(xiàn)力。本章主要介紹Flash CC中繪圖工具的使用方法，繪制圖形和編中繪圖工具的使用方法，繪制圖形和編輯圖形的技巧，制作基礎(chǔ)動(dòng)畫的方法，動(dòng)畫腳本輯圖形的技巧，制作基礎(chǔ)動(dòng)畫的方法，動(dòng)畫腳本的基礎(chǔ)知識(shí)，及交互動(dòng)畫的制作方法等。的基礎(chǔ)知識(shí)，及交互動(dòng)畫的制作方法等。第2頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)本章的學(xué)習(xí)目標(biāo)本章的學(xué)習(xí)目標(biāo)l掌握繪制和編輯圖形掌握繪制和編輯圖形l了解時(shí)間軸的概念了解時(shí)間軸的概念l掌握元件和實(shí)例的應(yīng)用掌握元件和實(shí)例的應(yīng)用l掌握庫的使用方法掌握庫的使用方法l掌握編輯幀和圖層掌握編輯幀和圖層l掌握基礎(chǔ)動(dòng)畫的制作方法掌握

3、基礎(chǔ)動(dòng)畫的制作方法l掌握交互動(dòng)畫的制作方法掌握交互動(dòng)畫的制作方法第3頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容5.1Flash繪圖繪圖5.2Flash網(wǎng)頁動(dòng)畫網(wǎng)頁動(dòng)畫5.3Flash交互動(dòng)畫交互動(dòng)畫5.4本章小結(jié)本章小結(jié)第4頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)5.1 Flash繪圖繪圖lFlash文檔的操作文檔的操作新建文檔新建文檔保存文檔保存文檔打開文檔打開文檔設(shè)置文檔的屬性設(shè)置文檔的屬性l繪制矢量圖形繪制矢量圖形l文本和位圖的應(yīng)用文本和位圖的應(yīng)用第5頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)Flash文檔的操作文檔的操作新建文檔新建文檔保存文檔保存文檔打開

4、文檔打開文檔設(shè)置文檔的屬性設(shè)置文檔的屬性設(shè)置文本格式設(shè)置文本格式第6頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)繪制矢量圖形繪制矢量圖形Flash提供了多種繪圖和填充工具，可以用來繪提供了多種繪圖和填充工具，可以用來繪制直線、形狀和路徑及編輯操作。制直線、形狀和路徑及編輯操作。繪圖模式繪圖模式繪圖工具箱與屬性面板繪圖工具箱與屬性面板繪制基本幾何形狀繪制基本幾何形狀繪制復(fù)雜圖形繪制復(fù)雜圖形設(shè)計(jì)圖形色彩設(shè)計(jì)圖形色彩編輯圖形編輯圖形第7頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)文本和位圖的應(yīng)用文本和位圖的應(yīng)用文本是動(dòng)畫重要的組成部分，在文本是動(dòng)畫重要的組成部分，在Flash中可以利中可以利用文

5、本工具創(chuàng)建各種藝術(shù)字的效果。用文本工具創(chuàng)建各種藝術(shù)字的效果。Flash中的中的文本分為靜態(tài)文本、動(dòng)態(tài)文本和輸入文本文本分為靜態(tài)文本、動(dòng)態(tài)文本和輸入文本3種類種類型。型。創(chuàng)建文本創(chuàng)建文本編輯文本編輯文本文本效果的制作文本效果的制作文本濾鏡文本濾鏡應(yīng)用位圖應(yīng)用位圖第8頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)文本和位圖的應(yīng)用文本和位圖的應(yīng)用例例5-1 漸變填充效果。漸變填充效果。例例5-2 空心字效果?？招淖中Ч?。例例5-3 位圖填充效果。位圖填充效果。第9頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)文本和位圖的應(yīng)用文本和位圖的應(yīng)用例例5-4 扭曲文字效果。扭曲文字效果。例例5-5 文本濾鏡

6、效果實(shí)例文本濾鏡效果實(shí)例投影字。投影字。例例5-6 文本濾鏡效果實(shí)例文本濾鏡效果實(shí)例立體字。立體字。第10頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容5.1Flash繪圖繪圖5.2Flash網(wǎng)頁動(dòng)畫網(wǎng)頁動(dòng)畫5.3Flash交互動(dòng)畫交互動(dòng)畫5.4本章小結(jié)本章小結(jié)第11頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)5.2 Flash網(wǎng)頁動(dòng)畫網(wǎng)頁動(dòng)畫l時(shí)間軸與幀時(shí)間軸與幀l元件、實(shí)例和庫元件、實(shí)例和庫l基礎(chǔ)動(dòng)畫設(shè)計(jì)基礎(chǔ)動(dòng)畫設(shè)計(jì)lFlash中的聲音中的聲音第12頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)時(shí)間軸與幀時(shí)間軸與幀認(rèn)識(shí)時(shí)間軸認(rèn)識(shí)時(shí)間軸時(shí)間軸是動(dòng)畫制作的核心，用于組織和控制

7、一定時(shí)間內(nèi)的圖層和時(shí)間軸是動(dòng)畫制作的核心，用于組織和控制一定時(shí)間內(nèi)的圖層和幀中的文檔內(nèi)容。時(shí)間軸的主要組件是圖層、幀和播放頭。與膠幀中的文檔內(nèi)容。時(shí)間軸的主要組件是圖層、幀和播放頭。與膠片一樣，片一樣，F(xiàn)lash文檔也將時(shí)長分為幀。圖層就像堆疊在一起的多張文檔也將時(shí)長分為幀。圖層就像堆疊在一起的多張幻燈膠片一樣，每個(gè)圖層都包含一個(gè)顯示在舞臺(tái)中的不同圖像?；脽裟z片一樣，每個(gè)圖層都包含一個(gè)顯示在舞臺(tái)中的不同圖像。幀類型幀類型關(guān)鍵幀：在動(dòng)畫的制作過程中，角色或者物體運(yùn)動(dòng)或變化中的關(guān)關(guān)鍵幀：在動(dòng)畫的制作過程中，角色或者物體運(yùn)動(dòng)或變化中的關(guān)鍵動(dòng)作所處的幀稱為關(guān)鍵幀。實(shí)心黑色圓圈表示的是關(guān)鍵幀。鍵動(dòng)作所處

8、的幀稱為關(guān)鍵幀。實(shí)心黑色圓圈表示的是關(guān)鍵幀。普通幀：也稱為靜態(tài)幀，就是不起關(guān)鍵作用的幀。關(guān)鍵幀后面的普通幀：也稱為靜態(tài)幀，就是不起關(guān)鍵作用的幀。關(guān)鍵幀后面的灰色方塊就是普通幀，用于實(shí)現(xiàn)關(guān)鍵幀的延續(xù)或兩個(gè)關(guān)鍵幀之間灰色方塊就是普通幀，用于實(shí)現(xiàn)關(guān)鍵幀的延續(xù)或兩個(gè)關(guān)鍵幀之間的緩慢過渡。有內(nèi)容的普通幀是灰色方塊；無內(nèi)容的普通幀是空的緩慢過渡。有內(nèi)容的普通幀是灰色方塊；無內(nèi)容的普通幀是空白方塊。白方塊。第13頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)時(shí)間軸與幀時(shí)間軸與幀編輯幀編輯幀選擇幀選擇幀插入幀插入幀刪除幀刪除幀清除幀清除幀移動(dòng)幀移動(dòng)幀復(fù)制幀復(fù)制幀關(guān)鍵幀和普通幀的轉(zhuǎn)換關(guān)鍵幀和普通幀的轉(zhuǎn)換翻轉(zhuǎn)幀翻

9、轉(zhuǎn)幀第14頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)時(shí)間軸與幀時(shí)間軸與幀編輯圖層編輯圖層 圖層就像一張張透明的紙，每張紙中放置不同圖層就像一張張透明的紙，每張紙中放置不同的內(nèi)容，把這些內(nèi)容組合在一起即形成完整的的內(nèi)容，把這些內(nèi)容組合在一起即形成完整的畫面。可以在圖層上繪制和編輯對(duì)象，而不會(huì)畫面?？梢栽趫D層上繪制和編輯對(duì)象，而不會(huì)影響其他圖層上的對(duì)象。上方圖層的對(duì)象位于影響其他圖層上的對(duì)象。上方圖層的對(duì)象位于下方圖層對(duì)象之上，在圖層上沒有內(nèi)容的舞臺(tái)下方圖層對(duì)象之上，在圖層上沒有內(nèi)容的舞臺(tái)區(qū)域中，可以透過該圖層看到下面的圖層。區(qū)域中，可以透過該圖層看到下面的圖層。 圖層包括普通圖層、引導(dǎo)層和遮

10、罩層圖層包括普通圖層、引導(dǎo)層和遮罩層3種類型。種類型。普通圖層具備圖層的基本功能和作用；引導(dǎo)層普通圖層具備圖層的基本功能和作用；引導(dǎo)層用來幫助其他圖層中的對(duì)象進(jìn)行運(yùn)動(dòng)定位；遮用來幫助其他圖層中的對(duì)象進(jìn)行運(yùn)動(dòng)定位；遮罩層用來制作一些復(fù)雜的動(dòng)畫效果。罩層用來制作一些復(fù)雜的動(dòng)畫效果。第15頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)元件、實(shí)例和庫元件、實(shí)例和庫l元件是元件是Flash中可重復(fù)使用的對(duì)象。通常將需要重復(fù)出現(xiàn)的圖中可重復(fù)使用的對(duì)象。通常將需要重復(fù)出現(xiàn)的圖形、動(dòng)畫片段、按鈕制作成元件，存放在形、動(dòng)畫片段、按鈕制作成元件，存放在 “庫庫”面板中。每個(gè)面板中。每個(gè)元件都有自己的時(shí)間軸，可以將

11、幀、關(guān)鍵幀和層添加到元件的元件都有自己的時(shí)間軸，可以將幀、關(guān)鍵幀和層添加到元件的時(shí)間軸中。時(shí)間軸中。l實(shí)例是元件在舞臺(tái)上或者嵌套在另一個(gè)元件中的元件副本。將實(shí)例是元件在舞臺(tái)上或者嵌套在另一個(gè)元件中的元件副本。將一個(gè)元件從一個(gè)元件從 “庫庫”面板中拖動(dòng)到舞臺(tái)上就創(chuàng)建了該元件的一個(gè)面板中拖動(dòng)到舞臺(tái)上就創(chuàng)建了該元件的一個(gè)實(shí)例。一個(gè)元件可以創(chuàng)建多個(gè)實(shí)例，但一個(gè)實(shí)例只對(duì)應(yīng)一個(gè)元實(shí)例。一個(gè)元件可以創(chuàng)建多個(gè)實(shí)例，但一個(gè)實(shí)例只對(duì)應(yīng)一個(gè)元件。編輯元件會(huì)更新所有的實(shí)例，但對(duì)一個(gè)實(shí)例應(yīng)用效果不會(huì)件。編輯元件會(huì)更新所有的實(shí)例，但對(duì)一個(gè)實(shí)例應(yīng)用效果不會(huì)影響元件。影響元件。l “庫庫”面板用于存儲(chǔ)和組織在面板用于存儲(chǔ)和組

12、織在 Flash 中創(chuàng)建的各種元件，其還中創(chuàng)建的各種元件，其還用于存儲(chǔ)和組織導(dǎo)入的文件，包括位圖圖形、聲音文件和視頻用于存儲(chǔ)和組織導(dǎo)入的文件，包括位圖圖形、聲音文件和視頻剪輯。剪輯。 第16頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)元件、實(shí)例和庫元件、實(shí)例和庫l創(chuàng)建和使用元件創(chuàng)建和使用元件將圖形轉(zhuǎn)換為元件將圖形轉(zhuǎn)換為元件創(chuàng)建圖形元件創(chuàng)建圖形元件使用影片剪輯元件使用影片剪輯元件新建按鈕元件新建按鈕元件l創(chuàng)建和編輯實(shí)例創(chuàng)建和編輯實(shí)例成功創(chuàng)建元件后，元件被保存在成功創(chuàng)建元件后，元件被保存在 “庫庫”面板中，將元件從面板中，將元件從 “庫庫”面板拖放到舞臺(tái)上就為該元件創(chuàng)建了一個(gè)實(shí)例。面板拖放到舞臺(tái)

13、上就為該元件創(chuàng)建了一個(gè)實(shí)例。編輯實(shí)例的屬性編輯實(shí)例的屬性更改實(shí)例的行為更改實(shí)例的行為元件的交換元件的交換分離實(shí)例分離實(shí)例第17頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)元件、實(shí)例和庫元件、實(shí)例和庫l庫庫每個(gè)每個(gè)Flash文件都有用來存放元件、位圖、聲音和視頻文件等內(nèi)容文件都有用來存放元件、位圖、聲音和視頻文件等內(nèi)容的庫，利用庫可以很方便地查看和組織這些內(nèi)容。的庫，利用庫可以很方便地查看和組織這些內(nèi)容。庫面板庫面板共享庫元件共享庫元件第18頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)基礎(chǔ)動(dòng)畫設(shè)計(jì)基礎(chǔ)動(dòng)畫設(shè)計(jì)l逐幀動(dòng)畫逐幀動(dòng)畫逐幀動(dòng)畫是最傳統(tǒng)的動(dòng)畫形式，逐幀動(dòng)畫在每一幀中都會(huì)更改舞逐幀動(dòng)畫是

14、最傳統(tǒng)的動(dòng)畫形式，逐幀動(dòng)畫在每一幀中都會(huì)更改舞臺(tái)內(nèi)容，其最適合于圖像在每一幀中都在變化的復(fù)雜動(dòng)畫。逐幀臺(tái)內(nèi)容，其最適合于圖像在每一幀中都在變化的復(fù)雜動(dòng)畫。逐幀動(dòng)畫中每一幀都是關(guān)鍵幀，都是一個(gè)單獨(dú)的畫面，整個(gè)動(dòng)畫過程動(dòng)畫中每一幀都是關(guān)鍵幀，都是一個(gè)單獨(dú)的畫面，整個(gè)動(dòng)畫過程都是通過這些關(guān)鍵幀連續(xù)變換而形成的。都是通過這些關(guān)鍵幀連續(xù)變換而形成的。逐幀動(dòng)畫的創(chuàng)建方法有兩種：一種是將每個(gè)幀都定義為關(guān)鍵幀，逐幀動(dòng)畫的創(chuàng)建方法有兩種：一種是將每個(gè)幀都定義為關(guān)鍵幀，然后為每個(gè)幀創(chuàng)建不同的內(nèi)容；另一種是通過導(dǎo)入圖像序列來創(chuàng)然后為每個(gè)幀創(chuàng)建不同的內(nèi)容；另一種是通過導(dǎo)入圖像序列來創(chuàng)建動(dòng)畫。建動(dòng)畫。第19頁網(wǎng)頁設(shè)計(jì)與

15、制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)基礎(chǔ)動(dòng)畫設(shè)計(jì)基礎(chǔ)動(dòng)畫設(shè)計(jì)l例例5-7 制作逐幀動(dòng)畫制作逐幀動(dòng)畫“倒計(jì)時(shí)倒計(jì)時(shí)”。第20頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)基礎(chǔ)動(dòng)畫設(shè)計(jì)基礎(chǔ)動(dòng)畫設(shè)計(jì)l補(bǔ)間動(dòng)畫補(bǔ)間動(dòng)畫補(bǔ)間動(dòng)畫是通過為不同幀的對(duì)象屬性指定不同的值而創(chuàng)建的動(dòng)畫。補(bǔ)間動(dòng)畫是通過為不同幀的對(duì)象屬性指定不同的值而創(chuàng)建的動(dòng)畫。該類型的動(dòng)畫制作中有如下該類型的動(dòng)畫制作中有如下3個(gè)需要解釋的概念。個(gè)需要解釋的概念。補(bǔ)間范圍：是時(shí)間軸中的一組幀，其中的某個(gè)對(duì)象具有一個(gè)或多補(bǔ)間范圍：是時(shí)間軸中的一組幀，其中的某個(gè)對(duì)象具有一個(gè)或多個(gè)隨時(shí)間變化的屬性。補(bǔ)間范圍在時(shí)間軸中顯示為具有藍(lán)色背景個(gè)隨時(shí)間變化的屬性。補(bǔ)

16、間范圍在時(shí)間軸中顯示為具有藍(lán)色背景的單個(gè)圖層中的一組幀。的單個(gè)圖層中的一組幀。目標(biāo)對(duì)象：在每個(gè)補(bǔ)間范圍中，只能對(duì)舞臺(tái)上的一個(gè)對(duì)象進(jìn)行動(dòng)目標(biāo)對(duì)象：在每個(gè)補(bǔ)間范圍中，只能對(duì)舞臺(tái)上的一個(gè)對(duì)象進(jìn)行動(dòng)畫處理。此對(duì)象稱為補(bǔ)間范圍的目標(biāo)對(duì)象。畫處理。此對(duì)象稱為補(bǔ)間范圍的目標(biāo)對(duì)象。屬性關(guān)鍵幀：是在補(bǔ)間范圍中為補(bǔ)間目標(biāo)對(duì)象顯式定義一個(gè)或多屬性關(guān)鍵幀：是在補(bǔ)間范圍中為補(bǔ)間目標(biāo)對(duì)象顯式定義一個(gè)或多個(gè)屬性值的幀。這些屬性可能包括位置、個(gè)屬性值的幀。這些屬性可能包括位置、Alpha(透明度透明度)、色調(diào)等。、色調(diào)等。第21頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)基礎(chǔ)動(dòng)畫設(shè)計(jì)基礎(chǔ)動(dòng)畫設(shè)計(jì)l創(chuàng)建補(bǔ)間動(dòng)畫創(chuàng)建補(bǔ)間動(dòng)畫l

17、例例5-8 制作補(bǔ)間動(dòng)畫制作補(bǔ)間動(dòng)畫“彈跳的小球彈跳的小球”。l創(chuàng)建補(bǔ)間形狀動(dòng)畫創(chuàng)建補(bǔ)間形狀動(dòng)畫l例例5-9 創(chuàng)建補(bǔ)間形狀動(dòng)畫。創(chuàng)建補(bǔ)間形狀動(dòng)畫。第22頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)基礎(chǔ)動(dòng)畫設(shè)計(jì)基礎(chǔ)動(dòng)畫設(shè)計(jì)l例例5-10 數(shù)字變形實(shí)例。數(shù)字變形實(shí)例。l創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫l例例5-11 創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫。創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫。第23頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)基礎(chǔ)動(dòng)畫設(shè)計(jì)基礎(chǔ)動(dòng)畫設(shè)計(jì)l圖層動(dòng)畫圖層動(dòng)畫引導(dǎo)層動(dòng)畫引導(dǎo)層動(dòng)畫引導(dǎo)層是一種特殊的圖層，在此圖層中繪制的內(nèi)容具有輔助設(shè)計(jì)引導(dǎo)層是一種特殊的圖層，在此圖層中繪制的內(nèi)容具有輔助設(shè)計(jì)的功能，且不會(huì)在發(fā)布的

18、動(dòng)畫中顯示。引導(dǎo)層包括普通引導(dǎo)層和的功能，且不會(huì)在發(fā)布的動(dòng)畫中顯示。引導(dǎo)層包括普通引導(dǎo)層和運(yùn)動(dòng)引導(dǎo)層。普通引導(dǎo)層起輔助靜態(tài)對(duì)象定位的作用，運(yùn)動(dòng)引導(dǎo)運(yùn)動(dòng)引導(dǎo)層。普通引導(dǎo)層起輔助靜態(tài)對(duì)象定位的作用，運(yùn)動(dòng)引導(dǎo)層用來繪制對(duì)象的運(yùn)動(dòng)軌跡。層用來繪制對(duì)象的運(yùn)動(dòng)軌跡。遮罩層動(dòng)畫遮罩層動(dòng)畫遮罩層是一種特殊的圖層，當(dāng)某一圖層創(chuàng)建為遮罩層后，其相鄰遮罩層是一種特殊的圖層，當(dāng)某一圖層創(chuàng)建為遮罩層后，其相鄰下面的圖層自動(dòng)轉(zhuǎn)換為被遮罩層。遮罩層內(nèi)一般繪制一些簡單的下面的圖層自動(dòng)轉(zhuǎn)換為被遮罩層。遮罩層內(nèi)一般繪制一些簡單的圖形、文字或漸變圖形等，這些對(duì)象將變?yōu)橥该鲄^(qū)域，被遮罩層圖形、文字或漸變圖形等，這些對(duì)象將變?yōu)橥该鲄^(qū)域

19、，被遮罩層中的元素遮住的部分顯示出來，沒有被遮住的部分無法顯示。中的元素遮住的部分顯示出來，沒有被遮住的部分無法顯示。第24頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)基礎(chǔ)動(dòng)畫設(shè)計(jì)基礎(chǔ)動(dòng)畫設(shè)計(jì)l例例5-12 普通引導(dǎo)層應(yīng)用實(shí)例。普通引導(dǎo)層應(yīng)用實(shí)例。l例例5-14 制作運(yùn)動(dòng)引導(dǎo)層動(dòng)畫制作運(yùn)動(dòng)引導(dǎo)層動(dòng)畫“飛機(jī)飛機(jī)”。第25頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)基礎(chǔ)動(dòng)畫設(shè)計(jì)基礎(chǔ)動(dòng)畫設(shè)計(jì)l例例5-15 制作簡單遮罩效果。制作簡單遮罩效果。l例例5-16 遮罩層動(dòng)畫實(shí)例遮罩層動(dòng)畫實(shí)例1。l例例5-17 遮罩層動(dòng)畫實(shí)例遮罩層動(dòng)畫實(shí)例2。第26頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)Flas

20、h中的聲音中的聲音lAdobe Flash Professional CC提供多種使用聲音的方式提供多種使用聲音的方式。 可以使聲音獨(dú)立于時(shí)間軸連續(xù)播放，或使用時(shí)間軸將可以使聲音獨(dú)立于時(shí)間軸連續(xù)播放，或使用時(shí)間軸將動(dòng)畫與音軌保持同步。向按鈕添加聲音可以使按鈕具有更動(dòng)畫與音軌保持同步。向按鈕添加聲音可以使按鈕具有更強(qiáng)的互動(dòng)性，通過聲音淡入淡出還可以使動(dòng)畫更加優(yōu)美。強(qiáng)的互動(dòng)性，通過聲音淡入淡出還可以使動(dòng)畫更加優(yōu)美。l導(dǎo)入聲音導(dǎo)入聲音l編輯聲音編輯聲音在在 “屬性屬性”面板中編輯面板中編輯利用聲音編輯控件利用聲音編輯控件同步選項(xiàng)同步選項(xiàng)壓縮聲音壓縮聲音第27頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作

21、基礎(chǔ)Flash中的聲音中的聲音l例例5-18 音樂按鈕的制作。音樂按鈕的制作。第28頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)主要內(nèi)容主要內(nèi)容5.1Flash繪圖繪圖5.2Flash網(wǎng)頁動(dòng)畫網(wǎng)頁動(dòng)畫5.3Flash交互動(dòng)畫交互動(dòng)畫5.4本章小結(jié)本章小結(jié)第29頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)5.3 Flash交互動(dòng)畫交互動(dòng)畫l動(dòng)畫腳本基礎(chǔ)動(dòng)畫腳本基礎(chǔ)l播放和停止動(dòng)畫播放和停止動(dòng)畫l按鈕事件按鈕事件第30頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)動(dòng)畫腳本基礎(chǔ)動(dòng)畫腳本基礎(chǔ)lActionScript與動(dòng)作面板與動(dòng)作面板ActionScript：是針對(duì)：是針對(duì)Adobe Flash

22、 Player運(yùn)行時(shí)環(huán)境的編程語運(yùn)行時(shí)環(huán)境的編程語言，其在言，其在Flash內(nèi)容和應(yīng)用程序中實(shí)現(xiàn)了交互性、數(shù)據(jù)處理以及其內(nèi)容和應(yīng)用程序中實(shí)現(xiàn)了交互性、數(shù)據(jù)處理以及其他許多功能。他許多功能。Flash 包含多個(gè)包含多個(gè)ActionScript版本，以滿足各類開版本，以滿足各類開發(fā)人員和回放硬件的需要。發(fā)人員和回放硬件的需要。 動(dòng)作面板：動(dòng)作面板：Flash提供了一個(gè)專門處理腳本的編輯環(huán)境就是動(dòng)作面提供了一個(gè)專門處理腳本的編輯環(huán)境就是動(dòng)作面板，執(zhí)行板，執(zhí)行 “窗口窗口”| “動(dòng)作動(dòng)作”命令或者按命令或者按F9鍵即可打開動(dòng)作面板。鍵即可打開動(dòng)作面板。l處理對(duì)象處理對(duì)象ActionScript是一種面

23、向?qū)ο蟮木幊陶Z言，每個(gè)對(duì)象都是由類定是一種面向?qū)ο蟮木幊陶Z言，每個(gè)對(duì)象都是由類定義的。事實(shí)上，在義的。事實(shí)上，在Flash中對(duì)元件的處理就是處理對(duì)象。假設(shè)已定中對(duì)元件的處理就是處理對(duì)象。假設(shè)已定義一個(gè)影片剪輯元件義一個(gè)影片剪輯元件(假設(shè)它是一幅矩形的圖畫假設(shè)它是一幅矩形的圖畫)，并且已將它的，并且已將它的一個(gè)副本放在舞臺(tái)上。從嚴(yán)格意義上來說，該影片剪輯元件也是一個(gè)副本放在舞臺(tái)上。從嚴(yán)格意義上來說，該影片剪輯元件也是ActionScript中的一個(gè)對(duì)象，即中的一個(gè)對(duì)象，即MovieClip類的一個(gè)實(shí)例。類的一個(gè)實(shí)例。第31頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)動(dòng)畫腳本基礎(chǔ)動(dòng)畫腳本基礎(chǔ)l例

24、例5-19 制作鼠標(biāo)經(jīng)過時(shí)物體變大的效果。制作鼠標(biāo)經(jīng)過時(shí)物體變大的效果。第32頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)播放和停止動(dòng)畫播放和停止動(dòng)畫l常用的時(shí)間軸控制命令常用的時(shí)間軸控制命令第33頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)播放和停止動(dòng)畫播放和停止動(dòng)畫l例例5-20 制作播放和停止動(dòng)畫。制作播放和停止動(dòng)畫。第34頁網(wǎng)頁設(shè)計(jì)與制作教程第1章 網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)按鈕事件按鈕事件l在在ActionScript 3.0中，任何對(duì)象都可以通過監(jiān)聽器的設(shè)中，任何對(duì)象都可以通過監(jiān)聽器的設(shè)置來監(jiān)控對(duì)于對(duì)象的鼠標(biāo)操作，與鼠標(biāo)相關(guān)的操作事件都置來監(jiān)控對(duì)于對(duì)象的鼠標(biāo)操作，與鼠標(biāo)相關(guān)的操作事件都屬于屬于MouseEvent類。類。 CLICK：當(dāng)對(duì)象發(fā)生單