《網(wǎng)頁設(shè)計(jì)與制作實(shí)用教程》-第9章

1、第九章 創(chuàng)建網(wǎng)頁動(dòng)畫,本章學(xué)習(xí)目標(biāo),掌握動(dòng)畫的基本原理和網(wǎng)頁動(dòng)畫類型 熟悉Flash MX 2004軟件界面和基本操作 掌握用Flash MX 2004軟件制作網(wǎng)頁動(dòng)畫 的一般方法 掌握制作運(yùn)動(dòng)、形狀、遮罩、曲線動(dòng)畫 的一般方法 了解ImageReady和Swith軟件,1. 動(dòng)畫的基本原理,利用視覺暫留原理，連續(xù)播放一系列靜止的畫面，給人造成連續(xù)變化的效果。,2. 網(wǎng)頁動(dòng)畫,常見的網(wǎng)頁動(dòng)畫格式 Java格式 GIF89a格式 SWF格式 網(wǎng)頁動(dòng)畫設(shè)計(jì)考慮因素 帶寬 下載時(shí)間 流式傳輸 動(dòng)畫格式,3. 創(chuàng)建GIF動(dòng)畫,A：設(shè)置幀延遲。單位為秒，默認(rèn)值為0秒。 B：設(shè)置動(dòng)畫播放的次數(shù)。 C：單擊

2、將第一幀設(shè)置為當(dāng)前幀。 D：單擊將當(dāng)前幀的上一幀設(shè)為當(dāng)前幀。 E：播放/停止動(dòng)畫按鈕。,F：單擊將當(dāng)前幀的下一幀設(shè)為當(dāng)前幀。 G：單擊加入過渡幀。如果想在相鄰的兩幀之間插入動(dòng)畫效果，可用該按鈕在兩幀中間插入過渡幀。 H：復(fù)制當(dāng)前幀。 I：刪除當(dāng)前幀。,3.1面板介紹,3.2 制作gif動(dòng)畫,啟動(dòng)ImageReady，新建一動(dòng)畫文件,設(shè)計(jì)如下圖的圖像內(nèi)容，割去左右部分，單獨(dú)放置在一圖層中。,在背景圖層的左右圖層之間插入一“郵件”圖層。 設(shè)計(jì)動(dòng)畫 第一幀：隱藏“郵件”圖層。 第二幀：點(diǎn)擊“復(fù)制當(dāng)前幀”按鈕，使“郵件”圖層可見，并調(diào)整其位置。 第三幀 / 第四幀 / 第五幀： 方法同前，調(diào)整“郵件”

3、圖層的位置,設(shè)置五幀的延遲時(shí)間均為0.2秒 執(zhí)行【文件】【將優(yōu)化結(jié)果存儲(chǔ)為】菜單命令 ，優(yōu)化并保存動(dòng)畫,4. 創(chuàng)建Flash動(dòng)畫,基本概念 實(shí)例1：Flash圖形繪制 實(shí)例2：創(chuàng)建運(yùn)動(dòng)漸變動(dòng)畫 實(shí)例3：創(chuàng)建形狀漸變動(dòng)畫 實(shí)例4：創(chuàng)建路徑運(yùn)動(dòng)動(dòng)畫 實(shí)例5：創(chuàng)建遮罩動(dòng)畫,4.1 基本概念,分辨率 位圖、矢量圖 圖層 場(chǎng)景 幀、關(guān)鍵幀與時(shí)間軸,4.2 繪制Flash圖形,畫直線 畫圓 畫矩形 使用鋼筆畫曲線 修改圖形 箭頭工具 貝茲工具 套索工具 自由變形工具 著色工具 墨水瓶 油漆桶 吸管 填充轉(zhuǎn)換工具,4.3 實(shí)例2：創(chuàng)建運(yùn)動(dòng)漸變動(dòng)畫,目標(biāo)：創(chuàng)建一個(gè)由小到大的文字運(yùn)動(dòng)漸變動(dòng)畫 步驟：,啟動(dòng)Fla

4、sh MX 2004 ，執(zhí)行【修改】【文檔】菜單命令或按Ctrl+J組合鍵或直接單擊屬性面板中的尺寸右邊的按鈕，打開文檔屬性對(duì)話框。,雙擊時(shí)間線上的文本“圖層1”，將圖層命名為“移動(dòng)文本”,選擇“移動(dòng)文本”圖層上的第一幀，輸入文本“創(chuàng)作運(yùn)動(dòng)漸變動(dòng)畫！”。,選擇第一幀，單擊右鍵，執(zhí)行“創(chuàng)建動(dòng)畫動(dòng)作”命令,鼠標(biāo)單擊第30幀，執(zhí)行【插入】【時(shí)間軸】【關(guān)鍵幀】命令，或者在30幀處單擊鼠標(biāo)右鍵，執(zhí)行“插入關(guān)鍵幀”命令，或者按【F6】快捷鍵，插入關(guān)鍵幀。然后選擇關(guān)鍵幀的內(nèi)容“創(chuàng)作運(yùn)動(dòng)漸變動(dòng)畫！”，對(duì)其屬性進(jìn)行設(shè)置，設(shè)置坐標(biāo)軸X為160，Y為160，其余保持不變。,當(dāng)時(shí)間軸底層顏色變?yōu)樽仙f明動(dòng)畫設(shè)置正確

5、。,選擇動(dòng)畫創(chuàng)作完畢，執(zhí)行【控制】【測(cè)試影片】菜單命令，或按【Ctrl+Enter】組合鍵調(diào)試影片,保存文件，并執(zhí)行【文件】【發(fā)布設(shè)置】菜單命令，進(jìn)入“發(fā)布設(shè)置”界面，如下設(shè)置好后點(diǎn)擊發(fā)布按鈕。,4.4 實(shí)例3：創(chuàng)建形狀漸變動(dòng)畫,目標(biāo)：創(chuàng)建圓變成矩形的形狀漸變動(dòng)畫，在運(yùn)動(dòng)過程中顏色也進(jìn)行相應(yīng)的變化。 步驟：,啟動(dòng)Flash MX 2004 ，新建一空白文檔，設(shè)置文檔的屬性如圖。,雙擊時(shí)間線上的文本“圖層1”，將圖層命名為“形狀變化”。,單擊橢圓工具圖標(biāo) ，在舞臺(tái)工作區(qū)中畫一個(gè)橢圓。通過屬性面板對(duì)橢圓進(jìn)行屬性設(shè)置。,選擇第一幀，在屬性設(shè)置面板中的“中間”下拉列表框中選擇“形狀”，完成第一幀的設(shè)置

6、。,在20幀處插入一關(guān)鍵幀，選擇關(guān)鍵幀，刪除橢圓，單擊工具箱中的矩形工具圖標(biāo) ，畫一個(gè)矩形。設(shè)置其坐標(biāo)軸X為400，Y為180，寬度為110，高度為90，填充色為#666633，邊線顏色為#CC99FF。,選擇動(dòng)畫創(chuàng)作完畢，時(shí)間軸如圖所示。,保存文件，并執(zhí)行【文件】【發(fā)布設(shè)置】菜單命令發(fā)布動(dòng)畫。,4.5 實(shí)例4：路徑運(yùn)動(dòng)動(dòng)畫,目標(biāo)：創(chuàng)建地球繞太陽轉(zhuǎn)動(dòng)的動(dòng)畫 。 步驟：,啟動(dòng)Flash MX 2004 ，新建一空白文檔，設(shè)置影片尺寸為550*400，背景顏色為#333333，幀頻為12，標(biāo)尺單位保持不變 。,雙擊時(shí)間線上的文本“圖層1”，將圖層命名為“太陽”。,單擊橢圓工具圖標(biāo) ，在舞臺(tái)工作區(qū)中

7、畫一個(gè)圓，去掉邊線。設(shè)置其坐標(biāo)軸X為350，Y為160，寬度為70，高度為70。用鼠標(biāo)選擇舞臺(tái)上的橢圓，執(zhí)行【窗口】【設(shè)計(jì)面板】【混色器】菜單命令，打開混色器，選擇“徑向”，設(shè)置漸變色。,鼠標(biāo)選擇第50幀，執(zhí)行【插入】【時(shí)間軸】【幀】，或者按F5快捷鍵。,執(zhí)行【插入】【時(shí)間軸】【圖層】或者直接按時(shí)間軸面板上的“插入圖層”按鈕，新建圖層 ，并將圖層2命名為“地球公轉(zhuǎn)”。,鼠標(biāo)選擇“地球公轉(zhuǎn)”層第一幀，按照上述同樣的方法在舞臺(tái)上畫一個(gè)正圓，去掉邊線，然后設(shè)置其坐標(biāo)軸X為480，Y為180，寬度為35，高度為35。,右擊“地球公轉(zhuǎn)”層第一幀，執(zhí)行“創(chuàng)建補(bǔ)間動(dòng)畫”命令。然后選擇第50幀，插入關(guān)鍵幀。,

8、鼠標(biāo)選擇“地球公轉(zhuǎn)”圖層，執(zhí)行【插入】【時(shí)間軸】【運(yùn)動(dòng)引導(dǎo)層】命令，或單擊右鍵，執(zhí)行“添加引導(dǎo)線”命令，或者直接在時(shí)間線面板上單擊“添加引導(dǎo)圖層”按鈕。,在“引導(dǎo)線：地球公轉(zhuǎn)”圖層上畫一橢圓，去掉填充部分，設(shè)置橢圓邊線坐標(biāo)軸X為10，Y為60，寬度為500，高度為250 。,右擊“地球公轉(zhuǎn)”層第一幀，執(zhí)行“創(chuàng)建補(bǔ)間動(dòng)畫”命令。然后選擇第50幀，插入關(guān)鍵幀。,動(dòng)畫創(chuàng)作完畢，按Ctrl+Enter鍵測(cè)試動(dòng)畫。保存文件并發(fā)布動(dòng)畫。,選擇“地球公轉(zhuǎn)”圖層，分別在第16幀和第33幀插入關(guān)鍵幀，設(shè)置小球的位置如圖,4.6 實(shí)例5：遮罩動(dòng)畫,目標(biāo)：創(chuàng)建探照燈效果的遮罩動(dòng)畫 。 步驟：,啟動(dòng)Flash MX

9、2004 ，新建一空白文檔，設(shè)置影片尺寸為400*200，背景顏色為#333333，幀頻為12，標(biāo)尺單位保持不變 。,雙擊時(shí)間線上的文本“圖層1”，將圖層命名為“背景”。,單擊工具箱中的文本工具圖標(biāo) ，在舞臺(tái)工作區(qū)中輸入文本“FLASH動(dòng)畫”。設(shè)置文本類型為“靜態(tài)文本”，字體為“隸書”，大小為“50”，顏色為#999999，字符間距為2，坐標(biāo)軸X為70，Y為70，其余保持不變。,新建一圖層，并命名為“底層”。,執(zhí)行選擇新建的“底層”為當(dāng)前層，鼠標(biāo)單擊工具箱上矩形工具圖標(biāo)，在舞臺(tái)上畫一矩形，去掉邊線，設(shè)置其坐標(biāo)軸X為0，Y為0，寬度為400，高度為200，背景色為#FFFFFF。,在矩形上方輸入

10、文字“FLASH動(dòng)畫”，設(shè)置文本類型為“靜態(tài)文本”，字體為“方正粗倩簡體”，大小為“50”，顏色為#FF9933，字符間距為2，坐標(biāo)軸X為70，Y為70，其余保持不變。,新建圖層，并命名為“遮罩”。,選中“遮罩”層，在舞臺(tái)工作區(qū)中畫一個(gè)圓，去掉邊線，設(shè)置其坐標(biāo)軸X為5，Y為65，寬度為80，高度為80。,鼠標(biāo)右擊“遮照”層第一幀，執(zhí)行“創(chuàng)建補(bǔ)間動(dòng)畫”命令。然后選擇第35幀，插入關(guān)鍵幀。然后選擇第35關(guān)鍵幀中的圓，設(shè)置坐標(biāo)軸X為315，Y為65。,選擇“背景”和“底層”圖層中的第35幀，按F5鍵，插入幀。,鼠標(biāo)右擊“遮罩”層，執(zhí)行“遮罩層”命令 。,動(dòng)畫創(chuàng)作完畢后時(shí)間軸如圖所示。,舞臺(tái)如圖所示。

11、,動(dòng)畫創(chuàng)作完畢，按Ctrl+Enter鍵測(cè)試動(dòng)畫。保存文件并發(fā)布動(dòng)畫。,5. Swish Max快速制作flash動(dòng)畫,Swish Max界面介紹 時(shí)間線窗口 實(shí)例：用Swish Max快速制作flash動(dòng)畫,Swish在某些特定動(dòng)畫制作方面比Flash更方便、更省時(shí)和更具有特效，特別是制作課件的片頭或網(wǎng)頁的文字動(dòng)畫。,5.1 Swish Max界面介紹,5.2 時(shí)間線窗口,添加腳本按鈕：通過單擊此按鈕可以對(duì)幀、影片控制、精靈等添加腳本。 刪除按鈕：通過單擊刪除按鈕可以刪除選定的效果或腳本。 選項(xiàng)按鈕：通過單擊選項(xiàng)按鈕可以設(shè)置時(shí)間線的顯示狀態(tài)，包括寬、窄、高、矮等。 收縮按鈕：通過單擊收縮按鈕可以控制時(shí)間線左邊按鈕的縮放。,當(dāng)鼠標(biāo)選擇工作區(qū)中某一對(duì)象時(shí)，時(shí)間線上的“添加腳本” 按鈕轉(zhuǎn)變成為“添加效果”按鈕,5.3實(shí)例：用Swish Max快速制作flash動(dòng)畫,目標(biāo)：創(chuàng)建一個(gè)文字爆炸效果的動(dòng)畫 。 步驟：,啟動(dòng)Swish ，新建一空影片。,設(shè)置影片屬性：背景顏色為白色，寬度為400像素，高度為200像素，幀頻為12 。,單擊在工具箱中單擊文本圖標(biāo)，在“文本”面板框中輸入“Swishmax”，設(shè)置字體為“問鼎中特廣告體”，字體大小為36，顏色為#663366。,選擇工具區(qū)中的“