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

第九章FlashCC動畫優(yōu)化和發(fā)布課題9.1動畫發(fā)布課時教學(xué)內(nèi)容1、運(yùn)用所學(xué)工具制作案例2、掌握發(fā)布動畫教學(xué)目標(biāo)使用所需知識制作蝴蝶停在梅花上舞動效果案例教學(xué)重點(diǎn)運(yùn)用所學(xué)工具制作案例教學(xué)難點(diǎn)通過學(xué)習(xí)掌握動畫制作和動畫發(fā)布，在今后的實(shí)際工作中能夠應(yīng)用教學(xué)活動及主要語言學(xué)生活動一、創(chuàng)設(shè)意境，導(dǎo)入新課（設(shè)疑法、提問法）導(dǎo)入：同學(xué)們，你們知道制作好的Flash動畫作品進(jìn)行發(fā)布動畫作品是如何將制作的二、新課教學(xué)（講解法、提問法、示范法）步驟：1．選擇【文件】>【新建】命令，在“建新文檔”選擇ActionScript3.0，寬607像素，高400像素。2．在庫中，鼠標(biāo)右擊彈出面板，選擇“新建元件”，類型選擇“圖形”，命名“蝴蝶身”。使用“橢圓工具”繪制蝴蝶的身體、頭部和觸角，如圖所示。3.新建元件，命名“蝴蝶翼”。在“圖層1”中，使用“鋼筆工具”繪制蝴蝶翼的形狀，填充“線性漸變”顏色，修改漸變方向。新建“圖層2”，使用“鋼筆工具”繪制蝴蝶翼花紋，填充“線性漸變”顏色。新建“圖層3”，使用“刷子工具”繪制斑點(diǎn)，效果如圖所示。4.制作蝴蝶飛動畫（1）新建元件，命名“蝴蝶”，類型選擇“影片剪輯”。把“蝴蝶身”元件拖到“蝴蝶”元件的“圖層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ù)值。制作出蝴蝶翼收起來狀態(tài)，如圖所示。（3）選擇“圖層2”，在第15幀插入關(guān)鍵幀，點(diǎn)選蝴蝶右翼，打開“屬性”，修改蝴蝶翼寬的參數(shù)。選擇“圖層3”，在第15幀插入關(guān)鍵幀，點(diǎn)選蝴蝶左翼，打開“屬性”，寬的參數(shù)與蝴蝶右翼參數(shù)一樣。制作出蝴蝶翼展開的狀態(tài)，如圖所示。（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”的關(guān)鍵幀動畫添加“創(chuàng)建傳統(tǒng)補(bǔ)間”，如圖所示。圖9-145.新建元件，命名“樹枝”，使用“鋼筆工具”繪制樹枝，填充褐色，刪除邊框，如圖所示。6.新建元件，命名“花苞”，使用“鋼筆工具”在“圖層1”繪制花瓣，填充粉紅到白色“線性漸變”顏色。使用“漸變變形工具”調(diào)整漸變角度。新建“圖層2”，使用“鋼筆工具”繪制花托，填充綠色，刪除邊框，效果如圖所示。7.新建元件，命名“花1”，使用“鋼筆工具”在“圖層1”繪制花托，填充深綠到淺綠的“徑向漸變”顏色。新建“圖層2”，使用“鋼筆工具”繪制花瓣，填充粉色到白色的“徑向漸變”顏色，效果如圖所示。8.新建元件，命“名花2”，使用“鋼筆工具”繪制花托，填充深綠到淺綠的“徑向漸變”顏色。新建“圖層2”，使用“鋼筆工具”繪制花瓣，填充粉色到白色的“徑向漸變”顏色。新建“圖層3”，使用“鋼筆工具”繪制花瓣，填充粉色到白色的“徑向漸變”顏色，效果如圖所示。9.新建元件，命名“梅花”，類型選擇“影片剪輯”。把制作好的“樹枝”、“花1”、“花2”、“花苞”元件，拖進(jìn)“梅花”元件中，組合成一顆梅花樹，如圖所示。10.回到“場景1”，選擇“圖層1”，使用“矩形工具”繪制方形背景，填充米黃色。新建“圖層2”，分別把“梅花”元件、“蝴蝶”元件拖到舞臺。再復(fù)制“梅花”元件，使用“任意變形工具”縮小，點(diǎn)選上梅花，按鍵盤快捷鍵[Ctrl+向下箭頭]下移一層，如圖所示。11.新建“圖層3”，把“花1”元件拖進(jìn)來，調(diào)整花朵大小，放在樹枝上，位置自定。制作花朵掉落下來的效果。在第30幀插入關(guān)鍵幀，把花朵往下移到畫面外，旋轉(zhuǎn)一下角度。添加“創(chuàng)建傳統(tǒng)補(bǔ)間”命令。分別在圖層1、圖層2的第30幀插入幀。如圖所示。12.發(fā)布動畫?！疚募?gt;【發(fā)布設(shè)置】命令，打開【發(fā)布設(shè)置】對話框，如圖所示。發(fā)布選擇Flash（.swf）。從中可以對swf進(jìn)行設(shè)置。在目標(biāo)選項(xiàng)框里可以選擇播放器版本。輸出文件里可以給文件命名和選擇發(fā)布的位置。JPEG品質(zhì)是設(shè)置動畫的圖形質(zhì)量，數(shù)值為0-100，根據(jù)個人需要設(shè)置。完成一系列設(shè)置，在對話框下方按“發(fā)布”按鈕進(jìn)行發(fā)布。三、能力擴(kuò)展綜合運(yùn)用前面所寫知識，制作蝴蝶在梅花林中的飛舞動畫。學(xué)生回顧自己在日常生活中碰到的郵票圖形，并隨著教師的講解，引導(dǎo)出本節(jié)課要學(xué)習(xí)的內(nèi)容。此時學(xué)生應(yīng)該注意聽和觀看教師的講解與操作，因?yàn)榇颂幨切轮R，同時也應(yīng)積極回答相應(yīng)的問題，進(jìn)行認(rèn)真的思考學(xué)生聽講，筆記學(xué)生聽講，筆記學(xué)生聽講，筆記學(xué)生思考、討論學(xué)生根據(jù)教師規(guī)定動手制作案例課題9.2網(wǎng)頁發(fā)布課時教學(xué)內(nèi)容1、運(yùn)用所學(xué)知識制作案例2、掌握網(wǎng)頁發(fā)布的技巧3、掌握模擬網(wǎng)頁加載的進(jìn)度條的制作方法教學(xué)目標(biāo)運(yùn)用所學(xué)知識制作網(wǎng)頁加載的進(jìn)度條，掌握網(wǎng)頁發(fā)布技巧教學(xué)重點(diǎn)運(yùn)用所學(xué)知識制作進(jìn)度條案例，并進(jìn)行發(fā)布教學(xué)難點(diǎn)通過學(xué)習(xí)掌握網(wǎng)頁的技巧，在今后的實(shí)際工作中能夠應(yīng)用教學(xué)活動及主要語言學(xué)生活動一、創(chuàng)設(shè)意境，導(dǎo)入新課（設(shè)疑法、提問法）導(dǎo)入：展示案例二、新課教學(xué)（講解法、提問法、示范法）步驟：1．選擇【文件】>【新建】命令，在“建新文檔”選擇ActionScript3.0。寬607像素，高400像素。2．新建“元件1”，使用“矩形工具”繪制進(jìn)度條，添加漸變顏色，如圖所示。使用“漸變變形工具”，調(diào)整漸變方向和位置，如圖所示。3.在第100幀插入“關(guān)鍵幀”，回到第1幀，使用“選擇工具”點(diǎn)選進(jìn)度條，打開“屬性”，在“位置與大小”中把寬“1”。在第1-100幀之間任意選一幀，右擊鼠標(biāo)，選擇“創(chuàng)建形狀補(bǔ)間”。如圖所示。4.新建“元件2”。選擇“矩形工具”，打開“屬性”，設(shè)置圓角的矩形。在“矩形選項(xiàng)”欄中參數(shù)改為10，如圖所示。繪制長條圓角矩形，如圖所示。5.選擇“矩形工具”，設(shè)置畫筆邊框?yàn)楹谏伾?。在長條圓角矩形上方繪制一個縮小的長條圓角矩形，如圖所示。然后把新繪制的長條矩形刪除，掏空中間，如圖所示。6.填充漸變顏色。點(diǎn)選矩形，打開顏色，設(shè)置白色到黑色的漸變顏色，白色透明度設(shè)置為0，如圖所示。使用“漸變變形工具”，調(diào)整漸變方向和位置，如圖所示。7.選擇“圖層1”,右擊鼠標(biāo)，彈出面板，選擇“復(fù)制圖層”。把復(fù)制的圖層等比例放大，填充灰色到白色的漸變顏色，如圖所示。使用“漸變變形工具”，調(diào)整漸變方向和位置。如圖所示。8.新建“元件3”，使用“文本工具”，輸入“l(fā)oading”,如圖所示。可以根據(jù)字體設(shè)計(jì)需要在屬性面板中修改參數(shù)，如圖所示。9.在第5幀插入關(guān)鍵幀，在“l(fā)oading”后邊加“·”，如圖所示。用同樣的方法給“l(fā)oading”的后面加到6個點(diǎn)。如圖所示。10.回到“場景1”，使用“矩形工具”繪制方形背景，填充灰色到黑色徑向漸變顏色，如圖所示。新建“圖層2”，把“元件1”拖到舞臺，調(diào)整好位置。接著把“元件2”拖到舞臺，放在元件1上層，調(diào)整位置與“元件1”位置匹配。再新建“圖層3”，把“元件3”拖到舞臺，效果如圖所示。10.按鍵盤[Ctrl+Enter]測試效果。11.選擇【文件】>【發(fā)布設(shè)置】命令，選擇HTML包裝器，設(shè)置參數(shù)?！按笮。╖）”選擇“百分比”，“縮放（C）”選擇“精確匹配”，如圖所示。設(shè)置完后，點(diǎn)擊“發(fā)布”按鈕發(fā)布?？梢缘玫健斑M(jìn)度條”HTML文檔，用網(wǎng)頁瀏覽器打開，可以看到效果，效果如圖所示。三、能力擴(kuò)展結(jié)合進(jìn)度表運(yùn)動原理制作，運(yùn)用傳統(tǒng)補(bǔ)間動畫，制作玻璃瓶水滿效果動畫。教師展示圖片，導(dǎo)出本節(jié)課要學(xué)習(xí)的內(nèi)容。吸引學(xué)生興趣此部分主要由老師來講解，同時學(xué)生也配合著老師回答一些常見問題此時學(xué)生應(yīng)該注意聽教師的講解，因?yàn)榇颂幨切轮R，同時也應(yīng)積極回答相應(yīng)的問題，進(jìn)行認(rèn)真的思考學(xué)生聽講，筆記學(xué)生根據(jù)教師要求進(jìn)行擴(kuò)展項(xiàng)目練習(xí)本章小結(jié)：本章結(jié)合動畫案例，重點(diǎn)講述如何將制作的Flash動畫作品進(jìn)行發(fā)布，從動畫發(fā)布、網(wǎng)頁發(fā)布和圖片發(fā)布發(fā)布三種格式進(jìn)行設(shè)置，對以后把自己的動畫作品發(fā)布到網(wǎng)上有很大的幫助，必須熟練掌握。學(xué)生有不懂的地方向老師提出問題，尋求解答。課題9.3圖片發(fā)布課時教學(xué)內(nèi)容1、運(yùn)用所學(xué)工具制作案例2、掌握圖片發(fā)布教學(xué)目標(biāo)使用所需知識制作圖片發(fā)布案例教學(xué)重點(diǎn)運(yùn)用所學(xué)工具制作案例教學(xué)難點(diǎn)通過學(xué)習(xí)掌握圖片制作和圖片發(fā)布，在今后的實(shí)際工作中能夠應(yīng)用教學(xué)活動及主要語言學(xué)生活動一、創(chuàng)設(shè)意境，導(dǎo)入新課（設(shè)疑法、提問法）導(dǎo)入：同學(xué)們，你們知道制作好的Flash圖片作品進(jìn)行發(fā)布？動畫作品是如何將制作的二、新課教學(xué)（講解法、提問法、示范法）步驟：１.在菜單欄中選擇【文件】→【新建】命令,彈出“新建文檔”對話框,在“新建文檔“對話框中選擇“ActionScript３.０”,將分辨率設(shè)置為“２８０×４００像素”,單擊“確定”按鈕,建立新文檔.２.選擇“顏色”面板,把顏色模式改為線性漸變,顏色選擇淺藍(lán)色,如圖所示.３.用“矩形工具”在舞臺繪制一個漸變的天空,用漸變變形工具”調(diào)整其方向,如圖所示.４.新建“云朵”圖層,使用鋼筆工具”在舞臺中繪制出云朵,復(fù)制繪制好的云朵,并調(diào)整其大小;新建太陽”圖層,使用繪制工具繪制出太陽,如下圖所示.５.新建“草”圖層,使用鋼筆工具”繪制出簡單的草坪,用同樣的方法繪制出“山”,如上圖所示.６.選擇【文件】→【發(fā)布設(shè)置】命令”發(fā)布設(shè)置”對話框中勾選“JPEG圖像”,并選擇保存路徑。７.單擊”發(fā)布”按鈕,在保存路徑