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

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

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

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

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

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

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

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

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

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

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

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

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