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

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

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

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

4、狀態(tài)，如圖所示。學(xué)生聽講 ,筆記(3)選擇“圖層2”，在第15幀插入關(guān)鍵幀，點選蝴蝶右翼， 打開“屬性”，修改蝴蝶翼寬的參數(shù)。選擇“圖層 3”，在第15幀 插入關(guā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)鍵幀動畫添加“創(chuàng)建傳統(tǒng)補問” ,如圖所示。學(xué)生根據(jù) 教師規(guī)定 動手制作 案例圖9-145 .新建元件，命名“樹枝”，使用“鋼筆工具”繪制樹枝，填 充褐色，刪除邊框，如圖所示。6 .新建元件，命名“花苞”，使用“鋼筆工具”在“圖層 1” 繪制花瓣，填充粉紅到白色“線性漸變”顏色。使用“漸變變形工 具”調(diào)整漸變角度。新建“圖層2”，使用“鋼筆工具”繪制花托 ,填充綠色，刪除邊框，效果如圖所示。7 .新建元件，命名“花1”，使用“鋼筆工具”在“圖層1”繪制花托，填充深綠到淺綠的“徑向漸變”顏色。新建“圖層 2”， 使用“鋼筆工具”繪制花瓣，填充粉色到白色的“徑向漸變”顏色 ,效果如圖所示。8.新建

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

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

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

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

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

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

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

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

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