Java培訓(xùn)大綱(共45張)(PPT 45頁)

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

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

3、 / 第四幀 / 第五幀： 方法同前，調(diào)整“郵件”圖層的位置第7頁，共45頁。設(shè)置五幀的延遲時間均為0.2秒 執(zhí)行【文件】【將優(yōu)化結(jié)果存儲為】菜單命令 ，優(yōu)化并保存動畫第8頁，共45頁。4. 創(chuàng)建Flash動畫基本概念實(shí)例1：Flash圖形繪制 實(shí)例2：創(chuàng)建運(yùn)動漸變動畫 實(shí)例3：創(chuàng)建形狀漸變動畫實(shí)例4：創(chuàng)建路徑運(yùn)動動畫實(shí)例5：創(chuàng)建遮罩動畫 第9頁，共45頁。4.1 基本概念分辨率位圖、矢量圖圖層場景幀、關(guān)鍵幀與時間軸第10頁，共45頁。4.2 繪制Flash圖形畫直線畫圓畫矩形使用鋼筆畫曲線修改圖形箭頭工具貝茲工具套索工具自由變形工具著色工具墨水瓶油漆桶吸管填充轉(zhuǎn)換工具第11頁，共45頁。4.

4、3 實(shí)例2：創(chuàng)建運(yùn)動漸變動畫 目標(biāo)：創(chuàng)建一個由小到大的文字運(yùn)動漸變動畫 步驟：啟動Flash MX 2004 ，執(zhí)行【修改】【文檔】菜單命令或按Ctrl+J組合鍵或直接單擊屬性面板中的尺寸右邊的按鈕，打開文檔屬性對話框。第12頁，共45頁。雙擊時間線上的文本“圖層1”，將圖層命名為“移動文本” 選擇“移動文本”圖層上的第一幀，輸入文本“創(chuàng)作運(yùn)動漸變動畫！”。 第13頁，共45頁。選擇第一幀，單擊右鍵，執(zhí)行“創(chuàng)建動畫動作”命令 第14頁，共45頁。鼠標(biāo)單擊第30幀，執(zhí)行【插入】【時間軸】【關(guān)鍵幀】命令，或者在30幀處單擊鼠標(biāo)右鍵，執(zhí)行“插入關(guān)鍵幀”命令，或者按【F6】快捷鍵，插入關(guān)鍵幀。然后選擇

5、關(guān)鍵幀的內(nèi)容“創(chuàng)作運(yùn)動漸變動畫！”，對其屬性進(jìn)行設(shè)置，設(shè)置坐標(biāo)軸X為160，Y為160，其余保持不變。 當(dāng)時間軸底層顏色變?yōu)樽仙f明動畫設(shè)置正確。 第15頁，共45頁。選擇動畫創(chuàng)作完畢，執(zhí)行【控制】【測試影片】菜單命令，或按【Ctrl+Enter】組合鍵調(diào)試影片 保存文件，并執(zhí)行【文件】【發(fā)布設(shè)置】菜單命令，進(jìn)入“發(fā)布設(shè)置”界面，如下設(shè)置好后點(diǎn)擊發(fā)布按鈕。第16頁，共45頁。4.4 實(shí)例3：創(chuàng)建形狀漸變動畫 目標(biāo)：創(chuàng)建圓變成矩形的形狀漸變動畫，在運(yùn)動過程中顏色也進(jìn)行相應(yīng)的變化。 步驟：啟動Flash MX 2004 ，新建一空白文檔，設(shè)置文檔的屬性如圖。第17頁，共45頁。雙擊時間線上的文本

6、“圖層1”，將圖層命名為“形狀變化”。 單擊橢圓工具圖標(biāo) ，在舞臺工作區(qū)中畫一個橢圓。通過屬性面板對橢圓進(jìn)行屬性設(shè)置。 第18頁，共45頁。選擇第一幀，在屬性設(shè)置面板中的“中間”下拉列表框中選擇“形狀”，完成第一幀的設(shè)置。 在20幀處插入一關(guān)鍵幀，選擇關(guān)鍵幀，刪除橢圓，單擊工具箱中的矩形工具圖標(biāo) ，畫一個矩形。設(shè)置其坐標(biāo)軸X為400，Y為180，寬度為110，高度為90，填充色為#666633，邊線顏色為#CC99FF。 第19頁，共45頁。選擇動畫創(chuàng)作完畢，時間軸如圖所示。保存文件，并執(zhí)行【文件】【發(fā)布設(shè)置】菜單命令發(fā)布動畫。第20頁，共45頁。4.5 實(shí)例4：路徑運(yùn)動動畫 目標(biāo)：創(chuàng)建地球繞

7、太陽轉(zhuǎn)動的動畫 。 步驟：啟動Flash MX 2004 ，新建一空白文檔，設(shè)置影片尺寸為550*400，背景顏色為#333333，幀頻為12，標(biāo)尺單位保持不變 。第21頁，共45頁。雙擊時間線上的文本“圖層1”，將圖層命名為“太陽”。 單擊橢圓工具圖標(biāo) ，在舞臺工作區(qū)中畫一個圓，去掉邊線。設(shè)置其坐標(biāo)軸X為350，Y為160，寬度為70，高度為70。用鼠標(biāo)選擇舞臺上的橢圓，執(zhí)行【窗口】【設(shè)計(jì)面板】【混色器】菜單命令，打開混色器，選擇“徑向”，設(shè)置漸變色。 第22頁，共45頁。鼠標(biāo)選擇第50幀，執(zhí)行【插入】【時間軸】【幀】，或者按F5快捷鍵。 執(zhí)行【插入】【時間軸】【圖層】或者直接按時間軸面板上

8、的“插入圖層”按鈕，新建圖層 ，并將圖層2命名為“地球公轉(zhuǎn)”。第23頁，共45頁。鼠標(biāo)選擇“地球公轉(zhuǎn)”層第一幀，按照上述同樣的方法在舞臺上畫一個正圓，去掉邊線，然后設(shè)置其坐標(biāo)軸X為480，Y為180，寬度為35，高度為35。 右擊“地球公轉(zhuǎn)”層第一幀，執(zhí)行“創(chuàng)建補(bǔ)間動畫”命令。然后選擇第50幀，插入關(guān)鍵幀。 第24頁，共45頁。鼠標(biāo)選擇“地球公轉(zhuǎn)”圖層，執(zhí)行【插入】【時間軸】【運(yùn)動引導(dǎo)層】命令，或單擊右鍵，執(zhí)行“添加引導(dǎo)線”命令，或者直接在時間線面板上單擊“添加引導(dǎo)圖層”按鈕。第25頁，共45頁。在“引導(dǎo)線：地球公轉(zhuǎn)”圖層上畫一橢圓，去掉填充部分，設(shè)置橢圓邊線坐標(biāo)軸X為10，Y為60，寬度為5

9、00，高度為250 。右擊“地球公轉(zhuǎn)”層第一幀，執(zhí)行“創(chuàng)建補(bǔ)間動畫”命令。然后選擇第50幀，插入關(guān)鍵幀。 第26頁，共45頁。動畫創(chuàng)作完畢，按Ctrl+Enter鍵測試動畫。保存文件并發(fā)布動畫。 選擇“地球公轉(zhuǎn)”圖層，分別在第16幀和第33幀插入關(guān)鍵幀，設(shè)置小球的位置如圖 第27頁，共45頁。4.6 實(shí)例5：遮罩動畫 目標(biāo)：創(chuàng)建探照燈效果的遮罩動畫 。 步驟：啟動Flash MX 2004 ，新建一空白文檔，設(shè)置影片尺寸為400*200，背景顏色為#333333，幀頻為12，標(biāo)尺單位保持不變 。第28頁，共45頁。雙擊時間線上的文本“圖層1”，將圖層命名為“背景”。 單擊工具箱中的文本工具圖標(biāo)

10、 ，在舞臺工作區(qū)中輸入文本“FLASH動畫”。設(shè)置文本類型為“靜態(tài)文本”，字體為“隸書”，大小為“50”，顏色為#999999，字符間距為2，坐標(biāo)軸X為70，Y為70，其余保持不變。 第29頁，共45頁。新建一圖層，并命名為“底層”。 執(zhí)行選擇新建的“底層”為當(dāng)前層，鼠標(biāo)單擊工具箱上矩形工具圖標(biāo)，在舞臺上畫一矩形，去掉邊線，設(shè)置其坐標(biāo)軸X為0，Y為0，寬度為400，高度為200，背景色為#FFFFFF。 在矩形上方輸入文字“FLASH動畫”，設(shè)置文本類型為“靜態(tài)文本”，字體為“方正粗倩簡體”，大小為“50”，顏色為#FF9933，字符間距為2，坐標(biāo)軸X為70，Y為70，其余保持不變。 第30頁

11、，共45頁。新建圖層，并命名為“遮罩”。 選中“遮罩”層，在舞臺工作區(qū)中畫一個圓，去掉邊線，設(shè)置其坐標(biāo)軸X為5，Y為65，寬度為80，高度為80。 鼠標(biāo)右擊“遮照”層第一幀，執(zhí)行“創(chuàng)建補(bǔ)間動畫”命令。然后選擇第35幀，插入關(guān)鍵幀。然后選擇第35關(guān)鍵幀中的圓，設(shè)置坐標(biāo)軸X為315，Y為65。第31頁，共45頁。選擇“背景”和“底層”圖層中的第35幀，按F5鍵，插入幀。 鼠標(biāo)右擊“遮罩”層，執(zhí)行“遮罩層”命令 。第32頁，共45頁。動畫創(chuàng)作完畢后時間軸如圖所示。 舞臺如圖所示。 第33頁，共45頁。動畫創(chuàng)作完畢，按Ctrl+Enter鍵測試動畫。保存文件并發(fā)布動畫。第34頁，共45頁。5. Swi

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