電子教案-《FlashCC動(dòng)畫設(shè)計(jì)與制作》-A06-2765第九章FlashCC動(dòng)畫優(yōu)化和發(fā)布

1、第九章Flash CC動(dòng)畫優(yōu)化和發(fā)布課題9.1動(dòng)畫發(fā)布課時(shí)教學(xué)內(nèi)容1、運(yùn)用所學(xué)工具制作案例2、掌握發(fā)布動(dòng)回教學(xué)目標(biāo)使用所需知識(shí)制作蝴蝶停在梅花上舞動(dòng)效果案例教學(xué)重點(diǎn)運(yùn)用所學(xué)工具制作案例教學(xué)難點(diǎn)通過學(xué)習(xí)掌握動(dòng)畫制作和動(dòng)畫發(fā)布，在今后的實(shí)際工作中 能夠應(yīng)用教學(xué)活動(dòng)及主要諦言學(xué)生活動(dòng)一、創(chuàng)設(shè)意境，導(dǎo)入新課（設(shè)疑法、提問法）導(dǎo)入：同學(xué)們，你們知道制作好的Flash動(dòng)畫作品進(jìn)行發(fā)布動(dòng)畫作品是如何將制作的二、新課教學(xué)（講解法、提問法、示范法）步驟：1 .選擇【文件】 【新建】命令，在“建新文檔”選擇 Action Script 3.0,寬607像素,高 40«素。2 .在庫(kù)中，鼠標(biāo)右擊彈出面板，

2、選擇“新建元件”，類型選 擇“圖形”，命名“蝴蝶身”。使用“橢圓工具”繪制蝴蝶的身體 、頭部和觸角，如圖所示。學(xué)生回顧 自己在日 常生活中 碰到的郵 票圖形， 并隨著教 師的講解 ,引導(dǎo)出 本節(jié)課要 學(xué)習(xí)的內(nèi) 容。三份生也金曲ri禺盟工：酈T取看3.新建元件，命名“蝴蝶翼”。在“圖層1”中，使用“鋼筆 工具”繪制蝴蝶翼的形狀，填充“線性漸變”顏色，修改漸變方向 。新建“圖層2”，使用“鋼筆工具”繪制蝴蝶翼花紋，填充“線性漸變”顏色。新建“圖層3”，使用“刷子工具”繪制斑點(diǎn)，效 果如圖所示。止匕時(shí)學(xué)生 應(yīng)該壯思 聽和觀看 教師的講 解與操作 ,因?yàn)榇?處是新知 識(shí)，同時(shí) 也應(yīng)積極 回答相應(yīng) 的問

3、題， 進(jìn)行認(rèn)真 的思考學(xué)生聽講 ,筆記4.制作蝴蝶飛動(dòng)畫(1)新建元件，命名“蝴蝶”，類型選擇“影片剪輯”。把學(xué)生聽講 ,筆記“蝴蝶身”元件拖到“蝴蝶”元件的“圖層1”中。新建“圖層2” ,把“蝴蝶翼”元件拖進(jìn)“圖層2”。新建“圖層3”，選擇“圖層 2”的關(guān)鍵幀，右擊鼠標(biāo)，選擇“復(fù)制幀”，把復(fù)制的幀粘貼到“ 圖層3”，然后在菜單欄中【修改】 【變形】 【水平翻轉(zhuǎn)】命令 ,調(diào)整位置，蝴蝶制作完成，效果如圖所示。(2)選擇“圖層2”，在第1幀，點(diǎn)選蝴蝶右翼，打開“屬性”，修改蝴蝶翼的參數(shù)。選擇“圖層3”，在第1幀，點(diǎn)選蝴蝶左翼 ,打開“屬性”，修改蝴蝶左翼“ X”的參數(shù)為負(fù)值。制作出蝴蝶 翼收起來

4、狀態(tài)，如圖所示。學(xué)生聽講 ,筆記(3)選擇“圖層2”，在第15幀插入關(guān)鍵幀，點(diǎn)選蝴蝶右翼， 打開“屬性”，修改蝴蝶翼寬的參數(shù)。選擇“圖層 3”，在第15幀 插入關(guān)鍵幀，點(diǎn)選蝴蝶左翼，打開“屬性”，寬的參數(shù)與蝴蝶右翼 參數(shù)一樣。制作出蝴蝶翼展開的狀態(tài)，如圖所示。學(xué)生思考、討論(4)選擇“圖層2”、“圖層3”白第20幀，插入關(guān)鍵幀。(5)選擇“圖層2”、“圖層3”白第21幀，插入空白關(guān)鍵幀,選擇“圖層2”、“圖層3”白第1幀，復(fù)制粘貼到第21幀。(6)選擇“圖層2”、“圖層3”白第24幀，插入空白關(guān)鍵幀。選擇“圖層2”、“圖層3”白第20幀，復(fù)制粘貼到第24幀。然后 分別給“圖層2”、“圖層3”的

5、關(guān)鍵幀動(dòng)畫添加“創(chuàng)建傳統(tǒng)補(bǔ)問” ,如圖所示。學(xué)生根據(jù) 教師規(guī)定 動(dòng)手制作 案例圖9-145 .新建元件，命名“樹枝”，使用“鋼筆工具”繪制樹枝，填 充褐色，刪除邊框，如圖所示。6 .新建元件，命名“花苞”，使用“鋼筆工具”在“圖層 1” 繪制花瓣，填充粉紅到白色“線性漸變”顏色。使用“漸變變形工 具”調(diào)整漸變角度。新建“圖層2”，使用“鋼筆工具”繪制花托 ,填充綠色，刪除邊框，效果如圖所示。7 .新建元件，命名“花1”，使用“鋼筆工具”在“圖層1”繪制花托，填充深綠到淺綠的“徑向漸變”顏色。新建“圖層 2”， 使用“鋼筆工具”繪制花瓣，填充粉色到白色的“徑向漸變”顏色 ,效果如圖所示。8.新建

6、元件，命“名花2”，使用“鋼筆工具”繪制花托，填 充深綠到淺綠的“徑向漸變”顏色。新建“圖層 2”，使用“鋼筆 工具”繪制花瓣，填充粉色到白色的“徑向漸變”顏色。新建“圖 層3”，使用“鋼筆工具”繪制花瓣，填充粉色到白色的“徑向漸 變”顏色，效果如圖所示。9.新建元件，命名“梅花”，類型選擇“影片剪輯”。把制作 好的“樹枝”、“花1”、“花2”、“花苞”元件，拖進(jìn)“梅花” 元件中，組合成一顆梅花樹，如圖所示。10 .回到“場(chǎng)景1”，選擇“圖層1”，使用“矩形工具”繪制 方形背景，填充米黃色。新建“圖層2”，分別把“梅花”元件、 “蝴蝶”元件拖到舞臺(tái)。再?gòu)?fù)制“梅花”元件，使用“任意變形工 具”縮

7、小，點(diǎn)選上梅花，按鍵盤快捷鍵Ctrl+對(duì)下箭頭下移一層 ,如圖所示。11 .新建“圖層3”，把“花1”元件拖進(jìn)來，調(diào)整花朵大小， 放在樹枝上，位置自定。制作花朵掉落卜來的效果。在第 30幀插入 關(guān)鍵幀，把花朵往下移到畫面外，旋X下角度。添加“創(chuàng)建傳統(tǒng) 補(bǔ)問”命令。分別在圖層1、圖層2的第30幀插入幀。如圖所示。12.發(fā)布動(dòng)畫。【文件】 【發(fā)布設(shè)置】命令，打開【發(fā)布設(shè)置 1對(duì)話框，如圖所示。發(fā)布選擇Flash (.swf)。從中可以對(duì)swf進(jìn) 行設(shè)置。在目標(biāo)選項(xiàng)框里可以選擇播放器版本。輸出文件里可以給 文件命名和選擇發(fā)布的位置。JPE簾質(zhì)是設(shè)置動(dòng)畫的圖形質(zhì)量，數(shù) 值為0-100,根據(jù)個(gè)人需要設(shè)置

8、。完成一系列設(shè)置，在對(duì)話框下方 按“發(fā)布”按鈕進(jìn)行發(fā)布。、能力擴(kuò)展綜合運(yùn)用前面所寫知識(shí)，制作蝴蝶在梅花林中的飛舞動(dòng)畫。教師展示 圖片，導(dǎo) 出本節(jié)課 要學(xué)習(xí)的 內(nèi)容。吸 引學(xué)生興 趣此部分主 要由老師 來講解， 同時(shí)學(xué)生 也配合著 老師回答 一些常見 問題1、運(yùn)用所學(xué)知識(shí)制作案例教學(xué)內(nèi)容2、掌握網(wǎng)頁(yè)發(fā)布的技巧3、掌握模擬網(wǎng)頁(yè)加載的進(jìn)度條的制作方法教學(xué)目標(biāo) 教學(xué)重點(diǎn) 教學(xué)難點(diǎn)運(yùn)用所學(xué)知識(shí)制作網(wǎng)頁(yè)加載的進(jìn)度條，掌握網(wǎng)頁(yè)發(fā)布技巧運(yùn)用所學(xué)知識(shí)制作進(jìn)度條案例，并進(jìn)行發(fā)布通過學(xué)習(xí)掌握網(wǎng)頁(yè)的技巧，在今后的實(shí)際工作中能夠應(yīng)用教學(xué)活動(dòng)及主要諦言學(xué)生活動(dòng)課題課時(shí)9.2網(wǎng)頁(yè)發(fā)布一、創(chuàng)設(shè)意境，導(dǎo)入新課（設(shè)疑法、提問法）

9、導(dǎo)入：展示案例二、新課教學(xué)（講解法、提問法、示范法）步驟：1 .選擇【文件】 【新建】命令，在“建新文檔”選才A ActionScript 3.0 。寬607像素，高400像素。2 .新建“元件1”，使用“矩形工具”繪制進(jìn)度條，添加漸變顏 色，如圖所示。使用“漸變變形工具”，調(diào)整漸變方向和位置，如圖 所示。4.新建“元件2”。選擇“矩形工具”，打開“屬性”，設(shè)置圓角3 .在第100幀插入“關(guān)鍵幀”，回到第1幀，使用“選擇工具” 點(diǎn)選進(jìn)度條，打開“屬性”，在“位置與大小”中把寬“1”。在第1-100 幀之間任意選一幀，右擊鼠標(biāo)，選擇“創(chuàng)建形狀補(bǔ)問”。如圖所示。的矩形。在“矩形選項(xiàng)”欄中參數(shù)改為

10、10,如圖所示。繪制長(zhǎng)條圓 角矩形，如圖所示。5 .選擇“矩形工具”，設(shè)置畫筆邊框?yàn)楹谏伾?。在長(zhǎng)條圓角矩 形上方繪制一個(gè)縮小的長(zhǎng)條圓角矩形，如圖所示。然后把新繪制的 長(zhǎng)條矩形刪除，掏空中間，如圖所示。此時(shí)學(xué)生 應(yīng)該汪忠 聽教師的 講解，因 為此處是 新知識(shí)， 同時(shí)也應(yīng) 積極回答 相應(yīng)的問 題，進(jìn)行 認(rèn)真的思 考學(xué)生聽 講，筆記6 .填充漸變顏色。點(diǎn)選矩形，打開顏色，設(shè)置白色到黑色的漸 變顏色，白色透明度設(shè)置為 0,如圖所示。使用“漸變變形工具” 調(diào)整漸變方向和位置，如圖所示。7 .選擇“圖層1”，右擊鼠標(biāo)，彈出面板，選擇“復(fù)制圖層”。把 復(fù)制的圖層等比例放大，填充灰色到白色的漸變顏色，如圖所

11、示。使用“漸變變形工具”，調(diào)整漸變方向和位置。如圖所示。BA8 .新建“元件3”，使用“文本工具”，輸入“l(fā)oading : 如圖 所示?？梢愿鶕?jù)字體設(shè)計(jì)需要在屬性面板中修改參數(shù)，如圖所示。ii m 嶷咽同智字除W仆bi咋M呷而*蚓眥中檢，踹9 .在第5幀插入關(guān)鍵幀，在“l(fā)oading ”后邊加“ ”，如圖所示。 用同樣的方法給“ loading ”的后面加到6個(gè)點(diǎn)。如圖所示。學(xué)生根據(jù) 教師要求 進(jìn)行擴(kuò)展 項(xiàng)目練習(xí))0rn910 .回到“場(chǎng)景1”，使用“矩形工具”繪制方形背景，填充灰色到黑色徑向漸變顏色，如圖所示。新建“圖層 2”，把“元件1”拖 到舞臺(tái)，調(diào)整好位置。接著把“元件2”拖到舞臺(tái)，

12、放在元件1上層， 調(diào)整位置與“元件1”位置匹配。再新建“圖層3”，把“元件3”拖 到舞臺(tái)，效果如圖所示。11 .按鍵盤Ctrl+Enter 測(cè)試效果。12 .選擇【文件】 【發(fā)布設(shè)置】命令，選擇 HTM血裝器，設(shè)置 參數(shù)?！按笮。╖）”選擇“百分比”，“縮放（C）”選擇“精確匹配”， 如圖所示。設(shè)置完后，點(diǎn)擊“發(fā)布”按鈕發(fā)布。可以得到“進(jìn)度條” HTM儀檔，用網(wǎng)頁(yè)瀏覽器打開，可以看到效果，效果如圖所示。三、能力擴(kuò)展結(jié)合進(jìn)度表運(yùn)動(dòng)原理制作，運(yùn)用傳統(tǒng)補(bǔ)問動(dòng)畫，制作玻璃瓶水 滿效果動(dòng)畫。本章小結(jié):本章結(jié)合動(dòng)畫案例，重點(diǎn)講述如何將制作的 Flash動(dòng)畫作品進(jìn)行發(fā)布，從動(dòng)畫發(fā)布、網(wǎng)頁(yè)發(fā)布和圖片發(fā)布發(fā)布三

13、種格學(xué)生有不式進(jìn)行設(shè)置，對(duì)以后把自己的動(dòng)畫作品發(fā)布到網(wǎng)上有很大的幫助，懂的地方必須熟練掌握。向老師提出問題，尋求解答0課題9.3圖片發(fā)布課時(shí)教學(xué)內(nèi)容1、運(yùn)用所學(xué)工具制作案例2、掌握?qǐng)D片發(fā)布教學(xué)目標(biāo)使用所需知識(shí)制作圖片發(fā)布案例教學(xué)重點(diǎn)運(yùn)用所學(xué)工具制作案例教學(xué)難點(diǎn)通過學(xué)習(xí)掌握?qǐng)D片制作和圖片 發(fā)布，在今后的實(shí)際工作中能夠應(yīng)用教學(xué)活動(dòng)及主要語(yǔ)m學(xué)生活動(dòng)、創(chuàng)設(shè)意境，導(dǎo)入新課（設(shè)疑法、提問法）導(dǎo)入：同學(xué)們，你們知道制作好的Flash圖片作品進(jìn)行發(fā)布?動(dòng)畫作品是如何將制作的、新課教學(xué)（講解法、提問法、示范法）步驟：1 .在菜單欄中選擇【 文件】 一【 新建】命令，彈出“新建文檔”對(duì)話框，在“新建文檔”對(duì)話框

14、中選擇 “ A c ti o n S c r i p t3.0 "，將分辨率設(shè)置為 “ 2 8 0 X 4 00像素”，單擊“確定”按鈕，建立新文檔.2 .選擇“顏色”面板，把顏色模式改為線性漸變，顏色選擇淺藍(lán)色，如圖所示.7| | I娥性二 ：學(xué)生回顧 自己在日 常生活中 碰到的郵 票圖形， 并隨著教 師的講解 ,引導(dǎo)出 本節(jié)課要 學(xué)習(xí)的內(nèi) 容。% rH 5 B OOO0OOA: 1CO«3 .用“矩形工具”在舞臺(tái)繪制一個(gè)漸變的天空，用漸變變形工 具”調(diào)整其方向，如圖所示.4 .新建“云朵”圖層，使用鋼筆工具”在舞臺(tái)中繪制出云朵， 復(fù)制繪制好的云朵，并調(diào)整其大?。恍陆ㄌ?yáng)”圖層，使用繪制工具 繪制出太陽(yáng)，如下圖所示.5 .新建“草”圖層，使用鋼筆工具”繪制出簡(jiǎn)單的草坪，用同 樣的方法繪制出“山”，如上圖所示.6 .選擇【文件】一【發(fā)布設(shè)置】命令”發(fā)布設(shè)置”對(duì)話框