網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 第 5章 設(shè)計網(wǎng)頁動畫 第 1頁 本章概述 本章的學(xué)習(xí)目標(biāo) 主要內(nèi)容 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 本章概述 在網(wǎng)站開發(fā)過程中，經(jīng)常利用 用 邊下載邊播放，且具有較強(qiáng)的交互性，用戶可以自由控制動畫的播放。因此將 章主要介紹制圖形和編輯圖形的技巧，制作基礎(chǔ)動畫的方法，動畫腳本的基礎(chǔ)知識，及交互動畫的制作方法等。 第 2頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 本章的學(xué)習(xí)目標(biāo) 掌握繪制和編輯圖形 了解時間軸的概念 掌握元件和實例的應(yīng)用 掌握庫的使用方法 掌握編輯幀和圖層 掌握基礎(chǔ)動畫的制作方法 掌握交互動畫的制作方法 第 3頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 章小結(jié) 第 4頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 新建文檔 保存文檔 打開文檔 設(shè)置文檔的屬性 繪制矢量圖形 文本和位圖的應(yīng)用 第 5頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 新建文檔 保存文檔 打開文檔 設(shè)置文檔的屬性 設(shè)置文本格式 第 6頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 繪制矢量圖形 以用來繪制直線、形狀和路徑及編輯操作。 繪圖模式 繪圖工具箱與屬性面板 繪制基本幾何形狀 繪制復(fù)雜圖形 設(shè)計圖形色彩 編輯圖形 第 7頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 文本和位圖的應(yīng)用 文本是動畫重要的組成部分，在 態(tài)文本和輸入文本 3種類型。 創(chuàng)建文本 編輯文本 文本效果的制作 文本濾鏡 應(yīng)用位圖 第 8頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 文本和位圖的應(yīng)用 例 5漸變填充效果。 例 5空心字效果。 例 5位圖填充效果。 第 9頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 文本和位圖的應(yīng)用 例 5扭曲文字效果。 例 5文本濾鏡效果實例 投影字。 例 5文本濾鏡效果實例 立體字。 第 10頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 章小結(jié) 第 11頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 時間軸與幀 元件、實例和庫 基礎(chǔ)動畫設(shè)計 第 12頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 時間軸與幀 認(rèn)識時間軸 時間軸是動畫制作的核心，用于組織和控制一定時間內(nèi)的圖層和幀中的文檔內(nèi)容。時間軸的主要組件是圖層、幀和播放頭。與膠片一樣， 層就像堆疊在一起的多張幻燈膠片一樣，每個圖層都包含一個顯示在舞臺中的不同圖像。 幀類型 關(guān)鍵幀：在動畫的制作過程中，角色或者物體運(yùn)動或變化中的關(guān)鍵動作所處的幀稱為關(guān)鍵幀。實心黑色圓圈表示的是關(guān)鍵幀。 普通幀：也稱為靜態(tài)幀，就是不起關(guān)鍵作用的幀。關(guān)鍵幀后面的灰色方塊就是普通幀，用于實現(xiàn)關(guān)鍵幀的延續(xù)或兩個關(guān)鍵幀之間的緩慢過渡。有內(nèi)容的普通幀是灰色方塊；無內(nèi)容的普通幀是空白方塊。 第 13頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 時間軸與幀 編輯幀 選擇幀 插入幀 刪除幀 清除幀 移動幀 復(fù)制幀 關(guān)鍵幀和普通幀的轉(zhuǎn)換 翻轉(zhuǎn)幀 第 14頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 時間軸與幀 編輯圖層 圖層就像一張張透明的紙，每張紙中放置不同的內(nèi)容，把這些內(nèi)容組合在一起即形成完整的畫面?？梢栽趫D層上繪制和編輯對象，而不會影響其他圖層上的對象。上方圖層的對象位于下方圖層對象之上，在圖層上沒有內(nèi)容的舞臺區(qū)域中，可以透過該圖層看到下面的圖層。 圖層包括普通圖層、引導(dǎo)層和遮罩層 3種類型。普通圖層具備圖層的基本功能和作用；引導(dǎo)層用來幫助其他圖層中的對象進(jìn)行運(yùn)動定位；遮罩層用來制作一些復(fù)雜的動畫效果。 第 15頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 元件、實例和庫 元件是 常將需要重復(fù)出現(xiàn)的圖形、動畫片段、按鈕制作成元件，存放在 “庫”面板中。每個元件都有自己的時間軸，可以將幀、關(guān)鍵幀和層添加到元件的時間軸中。 實例是元件在舞臺上或者嵌套在另一個元件中的元件副本。將一個元件從 “庫”面板中拖動到舞臺上就創(chuàng)建了該元件的一個實例。一個元件可以創(chuàng)建多個實例，但一個實例只對應(yīng)一個元件。編輯元件會更新所有的實例，但對一個實例應(yīng)用效果不會影響元件。 “庫”面板用于存儲和組織在 創(chuàng)建的各種元件，其還用于存儲和組織導(dǎo)入的文件，包括位圖圖形、聲音文件和視頻剪輯。 第 16頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 元件、實例和庫 創(chuàng)建和使用元件 將圖形轉(zhuǎn)換為元件 創(chuàng)建圖形元件 使用影片剪輯元件 新建按鈕元件 創(chuàng)建和編輯實例 成功創(chuàng)建元件后，元件被保存在 “庫”面板中，將元件從 “庫”面板拖放到舞臺上就為該元件創(chuàng)建了一個實例。 編輯實例的屬性 更改實例的行為 元件的交換 分離實例 第 17頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 元件、實例和庫 庫 每個 圖、聲音和視頻文件等內(nèi)容的庫，利用庫可以很方便地查看和組織這些內(nèi)容。 庫面板 共享庫元件 第 18頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 基礎(chǔ)動畫設(shè)計 逐幀動畫 逐幀動畫是最傳統(tǒng)的動畫形式，逐幀動畫在每一幀中都會更改舞臺內(nèi)容，其最適合于圖像在每一幀中都在變化的復(fù)雜動畫。逐幀動畫中每一幀都是關(guān)鍵幀，都是一個單獨(dú)的畫面，整個動畫過程都是通過這些關(guān)鍵幀連續(xù)變換而形成的。 逐幀動畫的創(chuàng)建方法有兩種：一種是將每個幀都定義為關(guān)鍵幀，然后為每個幀創(chuàng)建不同的內(nèi)容；另一種是通過導(dǎo)入圖像序列來創(chuàng)建動畫。 第 19頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 基礎(chǔ)動畫設(shè)計 例 5制作逐幀動畫“倒計時”。 第 20頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 基礎(chǔ)動畫設(shè)計 補(bǔ)間動畫 補(bǔ)間動畫是通過為不同幀的對象屬性指定不同的值而創(chuàng)建的動畫。該類型的動畫制作中有如下 3個需要解釋的概念。 補(bǔ)間范圍：是時間軸中的一組幀，其中的某個對象具有一個或多個隨時間變化的屬性。補(bǔ)間范圍在時間軸中顯示為具有藍(lán)色背景的單個圖層中的一組幀。 目標(biāo)對象：在每個補(bǔ)間范圍中，只能對舞臺上的一個對象進(jìn)行動畫處理。此對象稱為補(bǔ)間范圍的目標(biāo)對象。 屬性關(guān)鍵幀：是在補(bǔ)間范圍中為補(bǔ)間目標(biāo)對象顯式定義一個或多個屬性值的幀。這些屬性可能包括位置、 明度 )、色調(diào)等。 第 21頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 基礎(chǔ)動畫設(shè)計 創(chuàng)建補(bǔ)間動畫 例 5制作補(bǔ)間動畫“彈跳的小球”。 創(chuàng)建補(bǔ)間形狀動畫 例 5創(chuàng)建補(bǔ)間形狀動畫。 第 22頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 基礎(chǔ)動畫設(shè)計 例 5數(shù)字變形實例。 創(chuàng)建傳統(tǒng)補(bǔ)間動畫 例 5創(chuàng)建傳統(tǒng)補(bǔ)間動畫。 第 23頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 基礎(chǔ)動畫設(shè)計 圖層動畫 引導(dǎo)層動畫 引導(dǎo)層是一種特殊的圖層，在此圖層中繪制的內(nèi)容具有輔助設(shè)計的功能，且不會在發(fā)布的動畫中顯示。引導(dǎo)層包括普通引導(dǎo)層和運(yùn)動引導(dǎo)層。普通引導(dǎo)層起輔助靜態(tài)對象定位的作用，運(yùn)動引導(dǎo)層用來繪制對象的運(yùn)動軌跡。 遮罩層動畫 遮罩層是一種特殊的圖層，當(dāng)某一圖層創(chuàng)建為遮罩層后，其相鄰下面的圖層自動轉(zhuǎn)換為被遮罩層。遮罩層內(nèi)一般繪制一些簡單的圖形、文字或漸變圖形等，這些對象將變?yōu)橥该鲄^(qū)域，被遮罩層中的元素遮住的部分顯示出來，沒有被遮住的部分無法顯示。 第 24頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 基礎(chǔ)動畫設(shè)計 例 5普通引導(dǎo)層應(yīng)用實例。 例 5制作運(yùn)動引導(dǎo)層動畫“飛機(jī)”。 第 25頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 基礎(chǔ)動畫設(shè)計 例 5制作簡單遮罩效果。 例 5遮罩層動畫實例 1。 例 5遮罩層動畫實例 2。 第 26頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 可以使聲音獨(dú)立于時間軸連續(xù)播放，或使用時間軸將動畫與音軌保持同步。向按鈕添加聲音可以使按鈕具有更強(qiáng)的互動性，通過聲音淡入淡出還可以使動畫更加優(yōu)美。 導(dǎo)入聲音 編輯聲音 在 “屬性”面板中編輯 利用聲音編輯控件 同步選項 壓縮聲音 第 27頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 例 5音樂按鈕的制作。 第 28頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 章小結(jié) 第 29頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 動畫腳本基礎(chǔ) 播放和停止動畫 按鈕事件 第 30頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 動畫腳本基礎(chǔ) 針對 在 據(jù)處理以及其他許多功能。 含多個 滿足各類開發(fā)人員和回放硬件的需要。 動作面板： 行 “窗口” |“動作”命令或者按 處理對象 個對象都是由類定義的。事實上，在 設(shè)已定義一個影片剪輯元件 (假設(shè)它是一幅矩形的圖畫 )，并且已將它的一個副本放在舞臺上。從嚴(yán)格意義上來說，該影片剪輯元件也是 第 31頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 動畫腳本基礎(chǔ) 例 5制作鼠標(biāo)經(jīng)過時物體變大的效果。 第 32頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 播放和停止動畫 常用的時間軸控制命令 第 33頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 播放和停止動畫 例 5制作播放和停止動畫。 第 34頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 按鈕事件 在 何對象都可以通過監(jiān)聽器的設(shè)置來監(jiān)控對于對象的鼠標(biāo)操作，與鼠標(biāo)相關(guān)的操作事件都屬于 對象發(fā)生單擊鼠標(biāo)的動作時。 對象發(fā)生雙擊鼠標(biāo)的動作時。 對象發(fā)生按鼠標(biāo)的動作時。 鼠標(biāo)指針在對象范圍內(nèi)移動時。 鼠標(biāo)指針移開對象的范圍時。 鼠標(biāo)指針移入對象的范圍時。 對象發(fā)生放開鼠標(biāo)的動作時。 對象發(fā)生鼠標(biāo)滾輪滾動的動作時。 第 35頁 網(wǎng)頁設(shè)計與制