《掀開窗簾看風(fēng)景——遮罩層動(dòng)畫》教學(xué)設(shè)計(jì)

張翠勤

教材分析

《動(dòng)畫設(shè)計(jì)與制作》是江蘇省八年級(jí)信息技術(shù)教材第1章的內(nèi)容。遮罩層是Flash圖層中一個(gè)重要的概念，運(yùn)用遮罩層能制作出豐富多樣的動(dòng)畫效果。學(xué)生掌握了動(dòng)畫的基本原理、元件、補(bǔ)間、層等基礎(chǔ)知識(shí)后，再學(xué)習(xí)好本節(jié)課內(nèi)容——遮罩層動(dòng)畫，不僅可以把所學(xué)的動(dòng)畫知識(shí)融會(huì)貫通，而且其動(dòng)畫制作技術(shù)將會(huì)進(jìn)一步提升，能夠制作出更加精美的動(dòng)畫。

學(xué)情分析

教學(xué)對(duì)象是初二學(xué)生，他們對(duì)信息技術(shù)有著較濃厚的學(xué)習(xí)興趣，但是其信息技術(shù)基礎(chǔ)參差不齊，信息技術(shù)的接受能力也不盡相同。可喜的是，通過Flash的前期學(xué)習(xí)，學(xué)生已經(jīng)初步掌握了Flash的基礎(chǔ)知識(shí)與基本技能，能夠制作簡(jiǎn)單的補(bǔ)間動(dòng)畫、引導(dǎo)層動(dòng)畫等，為本節(jié)課的學(xué)習(xí)奠定了基礎(chǔ)。

教學(xué)目標(biāo)

知識(shí)與技能目標(biāo)：通過生活中的實(shí)例，理解遮罩層的含義和原理;理解遮罩層與被遮罩層之間的關(guān)系;能夠利用遮罩層設(shè)計(jì)、制作一些動(dòng)畫效果。

過程與方法目標(biāo)：通過觀察、類比實(shí)例，理解遮罩層的含義;通過模仿、分析學(xué)會(huì)創(chuàng)造性地利用遮罩層制作一些特殊的動(dòng)畫效果;通過自我總結(jié)培養(yǎng)學(xué)生的分析、歸納能力。

情感態(tài)度與價(jià)值觀目標(biāo)：在遮罩層動(dòng)畫的魅力感召下，對(duì)Flash動(dòng)畫制作產(chǎn)生更大的學(xué)習(xí)興趣;通過小組合作學(xué)習(xí)，培養(yǎng)學(xué)生的團(tuán)隊(duì)合作意識(shí);通過成功制作一個(gè)個(gè)動(dòng)畫，培養(yǎng)學(xué)生深入學(xué)習(xí)Flash動(dòng)畫的興趣，體驗(yàn)動(dòng)畫制作的樂趣和成就感。

教學(xué)重點(diǎn)與難點(diǎn)

重點(diǎn)：理解、制作和運(yùn)用遮罩層。

難點(diǎn)：理解遮罩層的原理，靈活運(yùn)用遮罩制作特殊效果。

教學(xué)方法與手段

直觀展示、演示講解、自主探究、個(gè)別輔導(dǎo)、小組合作。

教學(xué)過程

1.溫故知新

教師請(qǐng)學(xué)生欣賞一個(gè)形狀補(bǔ)間動(dòng)畫，該動(dòng)畫有兩個(gè)圖層組成，圖層1的內(nèi)容是一幅校園圖片，圖層2是一個(gè)形狀補(bǔ)間動(dòng)畫，內(nèi)容是一個(gè)與舞臺(tái)同高的窄小紅色長(zhǎng)方形逐漸變成完全覆蓋舞臺(tái)的同高同寬圖形。（舞臺(tái)背景設(shè)置成墨綠色，同機(jī)房窗簾顏色）

學(xué)生觀看后制作同樣的作品并小組內(nèi)交流展示。

師：請(qǐng)同學(xué)們思考，從這個(gè)作品中我們可以看出Flash中的圖層具有什么樣的特點(diǎn)呢？

生：圖層相當(dāng)于透明的紙，長(zhǎng)方形的紅色色塊和校園圖片分別放在不同的圖層，上面圖層中的紅色色塊會(huì)完全遮擋下面圖層的校園風(fēng)景圖片。

師：說(shuō)得非常好。圖層相當(dāng)于透明紙，不同的對(duì)象放在不同的圖層，既方便獨(dú)立操作，又可以協(xié)調(diào)組合，因?yàn)樯厦娴膱D層內(nèi)容會(huì)遮擋下面圖層的內(nèi)容，所以要注意舞臺(tái)上不同對(duì)象的擺放順序。

設(shè)計(jì)意圖：①帶領(lǐng)學(xué)生復(fù)習(xí)形狀補(bǔ)間動(dòng)畫，并用這個(gè)實(shí)例來(lái)引入遮罩層的學(xué)習(xí)。②復(fù)習(xí)圖層相當(dāng)于透明紙的含義，來(lái)對(duì)比呈現(xiàn)將要學(xué)習(xí)的特殊的不透明遮罩層。③把舞臺(tái)背景設(shè)置成同機(jī)房窗簾的顏色以同步接下來(lái)的實(shí)物模擬。

2.觀察類比

師：請(qǐng)同學(xué)們仔細(xì)觀察老師的操作，注意觀察時(shí)間軸面板上圖層發(fā)生了什么變化，舞臺(tái)上的內(nèi)容發(fā)生了什么改變。

教師在剛才演示的形狀補(bǔ)間動(dòng)畫上，鼠標(biāo)右擊圖層2，將圖層屬性設(shè)置為“遮罩層”。

生：圖層名稱前的標(biāo)志形狀和顏色發(fā)生了變化，兩個(gè)圖層的層級(jí)關(guān)系也發(fā)生了改變。舞臺(tái)上第一幀處紅色長(zhǎng)方形和校園風(fēng)景圖片都不見了，僅剩下墨綠色背景。

師：觀察得很仔細(xì)。遮罩層是不透明的特殊圖層。特殊在哪兒？下面的被遮罩層內(nèi)容完全消失了，只能看見背景色。請(qǐng)同學(xué)們先模仿操作然后進(jìn)行“測(cè)試影片”，觀察動(dòng)畫效果，并思考以下幾個(gè)問題：①你看到了怎樣的動(dòng)畫效果？②圖層2的內(nèi)容去哪兒了？在這個(gè)動(dòng)畫中它起到了什么作用？

學(xué)生自主操作，教師巡視。學(xué)生完成操作后組內(nèi)交流討論。

生：我先看到了墨綠色的背景，然后逐漸出現(xiàn)了校園風(fēng)景，看到的是圖層1的內(nèi)容逐步變大。圖層2的內(nèi)容看不見了，不知道去哪兒了……

教師走到旁邊的窗前，緩緩地拉開墨綠色的窗簾，看向窗外的校園風(fēng)景。

師：我拉開窗簾看風(fēng)景的情形，像不像我們制作的動(dòng)畫效果？這個(gè)動(dòng)畫中什么相當(dāng)于窗簾？什么相當(dāng)于拉開窗簾的動(dòng)作？

生：拉開窗簾看風(fēng)景的動(dòng)作與我們剛剛制作的動(dòng)畫非常相似。上面的圖層相當(dāng)于窗簾，緩慢變寬的長(zhǎng)方形紅色塊相當(dāng)于拉開窗簾的動(dòng)作。

師：剛剛我們學(xué)習(xí)的內(nèi)容是遮罩層動(dòng)畫。遮罩層是Flash中特殊的不透明圖層，它就好比我們的窗簾（上面的圖層），要想看到外部（下面圖層的內(nèi)容）的風(fēng)景，就得把窗簾拉開（就是遮罩層中的內(nèi)容：緩緩變寬的長(zhǎng)方形紅色塊）。基本的遮罩層動(dòng)畫至少需要兩個(gè)圖層，上面的是遮罩層（用來(lái)控制顯示的范圍和位置），下面的是被遮罩層（提供顯示的內(nèi)容）。

設(shè)計(jì)意圖：①在復(fù)習(xí)的基礎(chǔ)上自然而然地引出新內(nèi)容。②在實(shí)例分析和組內(nèi)相互討論的基礎(chǔ)上認(rèn)識(shí)遮罩層，理解遮罩層，理解遮罩層與被遮罩層的關(guān)系。③在知識(shí)的學(xué)習(xí)上突出學(xué)生的主體性，教師只需做好引導(dǎo)、鋪墊，不需要灌輸，學(xué)生可通過觀察、類比、“做中學(xué)”和驅(qū)動(dòng)任務(wù)進(jìn)行自主構(gòu)建，從而達(dá)成學(xué)習(xí)目標(biāo)。

3.深入探究

師：窗外的風(fēng)景很優(yōu)美，請(qǐng)你制作一個(gè)拉開窗簾欣賞窗外風(fēng)景的動(dòng)畫，帶領(lǐng)大家去欣賞一下吧。請(qǐng)同學(xué)們通過實(shí)踐回答以下三個(gè)問題：①如果長(zhǎng)方形紅色塊變成其他顏色，會(huì)有什么變化？②如果長(zhǎng)方形中沒有填充色，會(huì)有什么變化？③如果長(zhǎng)方形色塊變成其他形狀，試一試工具箱中的其他繪圖工具，又會(huì)出現(xiàn)怎樣的動(dòng)畫效果？

學(xué)生自主實(shí)踐操作，教師巡視并個(gè)別輔導(dǎo)。

學(xué)生作品交流展示并回答上面三個(gè)問題。

師：遮罩層中有顏色的圖形會(huì)變成透明，與顏色無(wú)關(guān)，如果圖形只有形狀沒有顏色，就不會(huì)變成透明。圖形的大小、形狀以及變化會(huì)決定被遮罩層中內(nèi)容出現(xiàn)的效果。線條工具和鉛筆工具繪制的線條不會(huì)變成透明，刷子工具繪制的線條會(huì)變成透明。我們可以歸納出遮罩層動(dòng)畫的基本原理，遮罩層動(dòng)畫至少需要兩個(gè)圖層——上層（遮罩層）和下層（被遮罩層），遮罩層中的色塊大小、形狀和變化決定顯示內(nèi)容的范圍和形式，被遮罩層決定顯示的內(nèi)容。

設(shè)計(jì)意圖：在理解的基礎(chǔ)上，再次制作范例作品，既能容易上手，又可以讓學(xué)生再次細(xì)細(xì)體會(huì)遮罩動(dòng)畫的原理和操作步驟。但是，如果不通過問題引導(dǎo)學(xué)生深入實(shí)踐思考，學(xué)生對(duì)遮罩層的理解也只停留在表面，只會(huì)簡(jiǎn)單模仿。這個(gè)環(huán)節(jié)不僅僅是及時(shí)反芻，更重要的是讓學(xué)生帶著問題在嘗試實(shí)踐中發(fā)現(xiàn)遮罩層動(dòng)畫的真正含義，學(xué)會(huì)從現(xiàn)象看到本質(zhì)的解決問題的方法。

4.觸類旁通

教師展示幾個(gè)實(shí)例：探照燈、彩虹字、百葉窗。

學(xué)生自選一個(gè)實(shí)例小組內(nèi)討論、分析其制作步驟。

每個(gè)范例邀請(qǐng)一位學(xué)生進(jìn)行制作分析交流。

學(xué)生自主嘗試制作所選作品，教師巡視，選取小老師進(jìn)行“兵教兵”。

學(xué)生針對(duì)制作心得、注意事項(xiàng)、作品效果等進(jìn)行交流展示。

設(shè)計(jì)意圖：在深刻理解遮罩層的基礎(chǔ)上，通過分析遮罩效果就可以制作出相同原理不同效果的動(dòng)畫作品，這既是對(duì)動(dòng)畫制作基礎(chǔ)和遮罩層動(dòng)畫制作的知識(shí)和能力的考驗(yàn)，也是一種綜合應(yīng)用。為了減少難度，教師不僅安排學(xué)生進(jìn)行制作交流和“兵教兵”互助學(xué)習(xí)，同時(shí)也提供了制作的參考微課視頻。

5.生活應(yīng)用

師：請(qǐng)同學(xué)們想一想，生活中還有哪些場(chǎng)景可以用遮罩層動(dòng)畫來(lái)表現(xiàn)呢？

生：有放大鏡、波光粼粼、望遠(yuǎn)鏡……

小組討論并班內(nèi)交流。

設(shè)計(jì)意圖：遮罩層應(yīng)用的拓展、提升。學(xué)生之間再次從遮罩層的內(nèi)涵上進(jìn)行思維碰撞。此時(shí)可以不在乎能不能給出一些切實(shí)可行的方案，只是激發(fā)學(xué)生進(jìn)一步拓展思維，與生活實(shí)際相聯(lián)系。

6.學(xué)習(xí)反思

學(xué)生填寫課堂學(xué)習(xí)小結(jié)記錄單（如上表），記錄自己這節(jié)課上學(xué)到了什么，還有哪些疑惑，學(xué)習(xí)感受是什么。

教學(xué)反思

學(xué)生能在“循循善誘”的教學(xué)設(shè)計(jì)下收獲“潤(rùn)物細(xì)無(wú)聲”的成長(zhǎng)。我曾經(jīng)很喜歡那種有跌宕起伏情感、有扣人心弦情景的教學(xué)設(shè)計(jì)，但此時(shí)，我更崇尚這種“水到渠成”的無(wú)痕教育理念，并努力在自己的教學(xué)中實(shí)踐。本課教學(xué)設(shè)計(jì)遵循建構(gòu)主義學(xué)習(xí)理論，學(xué)生在教師的引導(dǎo)下，參與教學(xué)活動(dòng)，在活動(dòng)中自主獲取、分析、加工處理教學(xué)活動(dòng)所傳遞的信息，并在內(nèi)心反思、歸納、整理，從而形成自己的認(rèn)知經(jīng)驗(yàn)。

這節(jié)課學(xué)生的學(xué)習(xí)活動(dòng)由六個(gè)遞進(jìn)環(huán)節(jié)組成：我復(fù)習(xí)、我模仿、我探究、我拓展、我應(yīng)用、我反思。在整個(gè)教學(xué)過程中，學(xué)生呈現(xiàn)了了解、嘗試、理解、探究、明朗、沉淀六種思維狀態(tài)，這是一場(chǎng)有生命力成長(zhǎng)的教學(xué)活動(dòng)。尤其是在探究環(huán)節(jié)，看似非常簡(jiǎn)單的嘗試實(shí)踐活動(dòng)，其實(shí)里面有著很大的思考和創(chuàng)作空間，學(xué)生作品也能很好地詮釋這一點(diǎn)，有的從方向，有的從大小，有的從位置，有的從形狀等變化呈現(xiàn)遮罩層的動(dòng)畫效果，也有的把被遮罩層內(nèi)容處理得非常精彩。遮罩效果的精彩離不開一些補(bǔ)間動(dòng)畫的輔助，這個(gè)環(huán)節(jié)中可以多展示幾個(gè)典型學(xué)生作品，也可以為下個(gè)環(huán)節(jié)打下基礎(chǔ)。

但課堂也反映出了一些設(shè)計(jì)不足，在“生活應(yīng)用”環(huán)節(jié)，學(xué)生交流后如果能展示一些具體的實(shí)例效果會(huì)更好些，因?yàn)閷W(xué)生畢竟還是初次接觸遮罩，認(rèn)識(shí)上還是有些局限，同時(shí)一些實(shí)例展示也可以激發(fā)學(xué)生進(jìn)一步探究的興趣和動(dòng)力。