鄧文清

摘要：Flash動(dòng)漫設(shè)計(jì)與制作課程的教學(xué)是各級(jí)各類學(xué)校計(jì)算機(jī)動(dòng)漫專業(yè)的核心課程，要達(dá)到“教”和“學(xué)”的有機(jī)統(tǒng)一，教法的選擇是關(guān)鍵因素。而Flash教學(xué)中動(dòng)態(tài)電子相冊(cè)的制作是一個(gè)很典型的動(dòng)畫(huà)作品制作案例，該案例的制作涉及Flash中多方面的技術(shù)應(yīng)用，有一定的制作難度和挑戰(zhàn)性。該文采用問(wèn)題探究法這種新穎的教學(xué)方法來(lái)進(jìn)行動(dòng)態(tài)電子相冊(cè)的制作，學(xué)生從中體會(huì)到了這種方法的獨(dú)特性和優(yōu)越性，收到了很好的教學(xué)效果。

關(guān)鍵詞：?jiǎn)栴}探究法；Flash；應(yīng)用

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）10-0205-03

教學(xué)方法是教師和學(xué)生為了實(shí)現(xiàn)共同的教學(xué)目標(biāo)，完成共同的教學(xué)任務(wù)，在教學(xué)過(guò)程中運(yùn)用的方式與手段的總稱。而問(wèn)題探究法是其中的一種重要的教法。問(wèn)題探究法是指教師或教師引導(dǎo)學(xué)生提出問(wèn)題，在教師組織和指導(dǎo)下，通過(guò)學(xué)生比較獨(dú)立的探究和研究活動(dòng)，探求問(wèn)題的答案而獲得知識(shí)的方法。

任務(wù)：動(dòng)物相冊(cè)的制作之人類的朋友——可愛(ài)的動(dòng)物

最終完成作品效果：通過(guò)動(dòng)態(tài)展示一些動(dòng)物的圖片和文字說(shuō)明，來(lái)激發(fā)學(xué)生愛(ài)護(hù)自然、保護(hù)動(dòng)物的環(huán)保意識(shí)，在按鈕的控制下，一幅幅可愛(ài)的動(dòng)物圖片緩緩地顯示出來(lái)。通過(guò)多媒體同步控制系統(tǒng)向?qū)W生進(jìn)行多次播放展示，漂亮完美的動(dòng)態(tài)圖片和文字出現(xiàn)效果瞬間吸引了學(xué)生的注意力，激發(fā)了學(xué)生想制作動(dòng)態(tài)電子相冊(cè)的強(qiáng)烈興趣，學(xué)習(xí)的主動(dòng)性和積極性大為提高，為接下來(lái)的問(wèn)題探究學(xué)習(xí)奠定了基礎(chǔ)。

問(wèn)題1 ：通過(guò)作品欣賞，大家看到，此作品中每種動(dòng)物圖片的大小是相同的，但是提供的動(dòng)物素材圖片大小是不同的，請(qǐng)問(wèn)如何使得圖片的大小一致呢？你能想到幾種方法？

此問(wèn)題一提出，學(xué)生們就馬上開(kāi)動(dòng)腦筋，應(yīng)用自己已有的知識(shí)怎么樣來(lái)完成這個(gè)操作，有的還小聲地同旁邊的同學(xué)交流和探討，經(jīng)過(guò)一番探究，大家總結(jié)出若干種解決圖片大小一致問(wèn)題的方法，操作簡(jiǎn)單，容易上手，可行性頗高。

最后教師總結(jié)出兩種常用的方法：一是把所有圖片導(dǎo)入到Flash庫(kù)中，把每張圖片拉到場(chǎng)景中，在屬性面板上直接進(jìn)行大小的設(shè)置，簡(jiǎn)單有效，但圖片處理的效果不是很理想；二是利用常用的圖形圖像處理軟件，比如Photoshop，進(jìn)行處理，效果較為理想。以一幅圖像處理為例，利用Photoshop進(jìn)行處理的步驟如下：

1）在Photoshop中打開(kāi)圖像dongw001.jpg。

2）更改圖像大?。哼x擇[圖像]→[圖像大小]，設(shè)置[像素大小]中的寬度為350像素，高度為260像素，其他參數(shù)不變。

3）優(yōu)化并輸出圖像：執(zhí)行[文件]→[存儲(chǔ)為Web所用格式]命令，將圖像存儲(chǔ)為dongw1.gif。

問(wèn)題2 ：作品的標(biāo)題“人類的朋友——可愛(ài)的動(dòng)物”是特效字，那么這種特效字如何制作的呢？

通過(guò)大家的探究，總結(jié)出若干種行之有效的方法，其中大多數(shù)學(xué)生都想到了用Photoshop來(lái)制作，是的，用Photoshop來(lái)制作確實(shí)是簡(jiǎn)單有效的，主要步驟如下：

1）啟動(dòng)Photoshop，執(zhí)行[文件]→[新建]命令，設(shè)置圖像尺寸為290*36像素，背景為透明。

2）選擇工具箱中的[文本工具]，輸入文本。設(shè)置字體大小為20點(diǎn)，選擇一種合適的字體。本課件使用的是文鼎水晶體，輸入課件標(biāo)題“人類的朋友——可愛(ài)的動(dòng)物”。

3）執(zhí)行[窗口]→[樣式]命令，選擇一種樣式到文字上。

4）將特效字優(yōu)化并輸出，存儲(chǔ)文件名為“biaoti.gif”。

問(wèn)題三：準(zhǔn)備好了這么多的經(jīng)過(guò)處理設(shè)計(jì)好的素材，那如何使用它們呢？

這問(wèn)題一經(jīng)提出，大家?guī)缀醪患s而同的大聲回答：要將這些素材全部導(dǎo)入到Flash庫(kù)中，是的，確實(shí)是這樣的。接下來(lái)大家紛紛導(dǎo)入必須全部素材到庫(kù)中，具體要求是這樣的：

1）新建Flash文檔：將舞臺(tái)尺寸寬高設(shè)置為：550px*420px，背景色為白色。

2）將Photoshop處理后的動(dòng)物圖像文件dongw1.gif、dongw2.gif…、dongw10.gif導(dǎo)入到Flash中。

3）用同樣的方法將Photoshop中制作的特效字圖像文件biaoti.gif、樹(shù)葉 .gif也導(dǎo)入到Flash中。

4）將外部聲音素材文件fm_loop08.mp3、sound1.mp3、 down.wav導(dǎo)入到Flash中，在庫(kù)中可以看到。

好的，到此為止，所有需要用到的素材全部處理完畢并已經(jīng)導(dǎo)入到Flash庫(kù)中，接下來(lái)就正式開(kāi)始制作動(dòng)態(tài)動(dòng)物電子相冊(cè)了。此時(shí)學(xué)生們躍躍欲試，但提醒大家別急，得慢慢來(lái)，俗話說(shuō)心急吃不了熱豆腐嘛。

問(wèn)題四：作品中各種動(dòng)物圖片具有的動(dòng)態(tài)顯示效果和相應(yīng)的動(dòng)物文字說(shuō)明伴隨音效飛入的效果是如何制作出來(lái)的？

此類特效的制作是動(dòng)態(tài)相冊(cè)制作的精華和核心所在，可以說(shuō)效果如何直接影響到最終作品的整體效果，所以馬虎不得。先給足時(shí)間讓學(xué)生進(jìn)行自我實(shí)操，探究其中的關(guān)鍵所在，摸索總結(jié)出其中的規(guī)律。要較好的完成此特效的制作，學(xué)生需要熟練掌握Flash中的多圖層操作、圖層時(shí)間軸的操作、音效的加載等等。因此在學(xué)生自我摸索探究階段會(huì)遇到不少問(wèn)題，而這正是問(wèn)題探究法的精髓所在，通過(guò)一系列的小問(wèn)題環(huán)環(huán)相扣，逐層深入，進(jìn)而最終求得問(wèn)題的解決，完成知識(shí)和技術(shù)的升華。

經(jīng)過(guò)教師問(wèn)題的不斷提出和學(xué)生獨(dú)立的研究，此類特效的制作學(xué)生順利的獨(dú)立完成并找到了其中的制作規(guī)律，總結(jié)制作過(guò)程如下：

1）創(chuàng)建名稱為“dw1”的影片剪輯（MC）元件，把圖片dongw01.gif拖入“dw1”的影片剪輯編輯場(chǎng)景，位置可以隨意。

2）選中編輯場(chǎng)景中的動(dòng)物圖片，轉(zhuǎn)換成名字為“dw01”的圖片元件。把dw1編輯場(chǎng)景中的動(dòng)物圖片轉(zhuǎn)換為圖片元件的目的主要是為了方便定義運(yùn)動(dòng)動(dòng)畫(huà)效果。

3）將[圖層1]重新命名為“dw01”，選中第20幀，插入一個(gè)關(guān)鍵幀。選中第1幀上的dw01實(shí)例，執(zhí)行[窗口]→[設(shè)計(jì)面板]→[變形]命令，設(shè)置變形百分比為20%，[Alpha]（透明度）設(shè)置為10%。在第1幀設(shè)置[補(bǔ)間]為[動(dòng)作]，設(shè)置[旋轉(zhuǎn)]為順時(shí)針1次。在第26幀，插入一個(gè)幀。

4）插入一個(gè)新圖層，重新命名為“wenzi01”，在第21幀，插入一個(gè)空白關(guān)鍵幀。用工具箱中的文字工具，在場(chǎng)景中輸入有關(guān)動(dòng)物的說(shuō)明文字，并將文本對(duì)象轉(zhuǎn)換為圖形元件。

5）選中[wenzi01]圖層的第26幀，插入一個(gè)關(guān)鍵幀。選中第21幀上的文本圖像元件，將文本向右移動(dòng)到舞臺(tái)外部。定義動(dòng)作補(bǔ)間動(dòng)畫(huà)。

6）再插入一個(gè)新圖層，并重新命名為“sound”。在這個(gè)圖層中的第19幀（提問(wèn)：為什么在第19幀開(kāi)始加載聲音？）插入一個(gè)空白關(guān)鍵幀。將庫(kù)中的sound1.mp3 聲音拖放到場(chǎng)景中。

7）定義[wenzi01]圖層第26幀的動(dòng)作為“stop（ ）；”。（提問(wèn)：此處為什么要設(shè)置動(dòng)作“stop（ ）；”？有何作用？如果不加載此動(dòng)作效果會(huì)如何？通過(guò)對(duì)比，學(xué)生完全明白了腳本動(dòng)作“stop（）”加在此處的含義和作用。 ）

最終的圖層及時(shí)間線如下所示：

其他動(dòng)物圖片及其文字的特效制作以此類推，操作過(guò)程和步驟幾乎完全相同，而且學(xué)生還可以加上自己的創(chuàng)意，自由發(fā)揮，制作出跟作品不完全一樣的動(dòng)態(tài)顯示特效。在實(shí)際教學(xué)中，有好些學(xué)生確實(shí)挖掘出了自己的創(chuàng)意，設(shè)計(jì)和制作出效果更好的特效，可以說(shuō)采用問(wèn)題探究法進(jìn)行教學(xué)很受學(xué)生歡迎，從而收到了很好的教學(xué)效果。

問(wèn)題五：播放作品簡(jiǎn)介時(shí)，有滾動(dòng)的說(shuō)明文字，有循環(huán)播放的背景音樂(lè)。這是如何實(shí)現(xiàn)的呢？

要較好的完成此效果制作，涉及Flash中多種基本操作：元件的創(chuàng)建；多圖層的建立及其操作；補(bǔ)間動(dòng)畫(huà)和遮罩動(dòng)畫(huà)的應(yīng)用；元件透明度的設(shè)置；聲音的加載等等。

經(jīng)過(guò)一小段時(shí)間的探究和分析，通過(guò)實(shí)操，學(xué)生基本上掌握了其中的制作要點(diǎn)，能夠獨(dú)立完成。

制作的步驟如下：

主界面的文字：動(dòng)物是人類最親密的朋友，可隨著生態(tài)環(huán)境的不斷破壞，動(dòng)物變得無(wú)家可歸，一些珍稀動(dòng)物甚至瀕臨絕種！我們要行動(dòng)起來(lái)，保護(hù)生態(tài)環(huán)境、保護(hù)動(dòng)物。我們永遠(yuǎn)不要忘記，地球是人類和動(dòng)物共同的家園！

1）執(zhí)行[插入]→[新建元件]，新建一個(gè)名為“main”的影片剪輯（MC）元件。

2）影片剪輯共有4個(gè)層，最下邊的是[bg]圖層，放10幅動(dòng)物圖片。

3）中間兩個(gè)圖層通過(guò)遮罩動(dòng)畫(huà)定義文字滾動(dòng)的效果。其中[文字]層的第1到第65幀為文字移動(dòng)的補(bǔ)間動(dòng)畫(huà)，從下往上移；第100到第135幀為文字的淡出效果，為透明度的補(bǔ)間動(dòng)畫(huà)。[文字遮罩]層畫(huà)一個(gè)矩形做遮罩處理。

4）最上面的[音樂(lè)]圖層，放置的是外部導(dǎo)入的名為“fm_loop08.mp3”的聲音素材。

最終的圖層及時(shí)間線如下所示：

問(wèn)題六：動(dòng)態(tài)相冊(cè)的瀏覽是采用帶音效的按鈕來(lái)進(jìn)行控制的，那么音效按鈕時(shí)如何制作的呢？這一步是本作品制作中的一個(gè)難點(diǎn)，在進(jìn)行探究分析時(shí)必須按照教師的問(wèn)題提示再加上自己的獨(dú)立思考方能順利完成。

首先需要學(xué)生掌握有關(guān)按鈕元件的基本知識(shí)：

按鈕是元件的一種，它具有多種狀態(tài)，并且會(huì)響應(yīng)鼠標(biāo)事件，執(zhí)行指定的動(dòng)作，是實(shí)現(xiàn)交互性課件的關(guān)鍵對(duì)象。

按鈕有特殊的編輯環(huán)境，通過(guò)在四個(gè)不同狀態(tài)的幀時(shí)間軸上創(chuàng)建關(guān)鍵幀，可以指定不同的按鈕狀態(tài)。

[彈起]幀：表示鼠標(biāo)指針不在按鈕時(shí)的狀態(tài)。

[指針經(jīng)過(guò)]幀：表示鼠標(biāo)指針在按鈕上時(shí)的狀態(tài)。

[按下]幀：表示鼠標(biāo)單擊按鈕時(shí)的狀態(tài)。

[點(diǎn)擊]幀：定義對(duì)鼠標(biāo)做出反應(yīng)的區(qū)域，這個(gè)反應(yīng)區(qū)域在影片播放時(shí)看不到的。也可以不定義[點(diǎn)擊]幀，這時(shí)[彈起]狀態(tài)下的對(duì)象就會(huì)作為鼠標(biāo)的響應(yīng)區(qū)。

1）制作作品中的按鈕：[插入]→[新建元件]，名字為“nextBtn”的按鈕元件。

2）創(chuàng)建指針經(jīng)過(guò)按鈕時(shí)的聲效：新建一個(gè)圖層，將這個(gè)圖層重新命名為“sound”，選擇該圖層中的第2幀（指針經(jīng)過(guò)幀），插入一個(gè)空白關(guān)鍵幀。將庫(kù)中的名為down.wav 的聲音拖放到場(chǎng)景中。選擇“sound” 圖層的第3幀（按下幀），插入一個(gè)空白關(guān)鍵幀。

3）按照上面的步驟，再創(chuàng)建一個(gè)名為“prevBtn”的按鈕元件。

最終的圖層及時(shí)間線如下所示：

問(wèn)題七：在課件背景上增添綠色樹(shù)葉，既能增強(qiáng)課件的藝術(shù)效果，又能表現(xiàn)環(huán)保的寓意。如何增強(qiáng)課件的表現(xiàn)效果？

操作要點(diǎn)：導(dǎo)入圖像文件：樹(shù)葉.gif到flash中，執(zhí)行[修改]→[分離]，將樹(shù)葉圖像打散。選擇[箭頭工具]，在場(chǎng)景的空白處單擊一下，取消樹(shù)葉圖像的選中狀態(tài)。選擇[套索]工具，用[魔術(shù)棒]（閥值=1，平滑為像素）單擊樹(shù)葉圖形的白色背景，按Delete鍵，將背景刪除。使用[任意變形工具]調(diào)整樹(shù)葉圖形的大小，并把它放在合適的位置。

到此為止，已經(jīng)完成了作品的所有元素的設(shè)計(jì)和制作，距離整個(gè)作品的完成只有一步之遙了，到了返回到主場(chǎng)景中進(jìn)行合成測(cè)試的階段了。但是還不能掉以輕心，因?yàn)檫@一階段是作品的最后整合階段，所有前面的操作都是為了這一階段準(zhǔn)備的，因此制作的效果如何直接控制著作品的最終輸出效果。

回到主場(chǎng)景進(jìn)行合成開(kāi)始，自然而然的提出以下問(wèn)題：

問(wèn)題八：如何利用已經(jīng)設(shè)計(jì)制作好各種素材（元件）生成最終的動(dòng)畫(huà)作品？

這一問(wèn)題有點(diǎn)“大”，進(jìn)而可以分解成若干個(gè)“小”問(wèn)題：

1）背景如何設(shè)計(jì)？

2）如何使用制作好的動(dòng)態(tài)影片元件產(chǎn)生作品的動(dòng)態(tài)效果？

3）按鈕交互控制如何實(shí)現(xiàn)？

下面進(jìn)行探究分析：

仔細(xì)分析已經(jīng)生成的素材（元件），可以歸類為兩大類：靜態(tài)的和動(dòng)態(tài)的，因此把靜態(tài)的素材（元件）放置在“背景”圖層的第1關(guān)鍵幀，并在第11幀插入幀，這其中包括按鈕；把動(dòng)態(tài)的素材（元件）連續(xù)放置到“動(dòng)物”圖層的第1關(guān)鍵幀到第11關(guān)鍵幀，這其中包括作品簡(jiǎn)介影片元件以及各種動(dòng)物和文字的動(dòng)態(tài)顯示影片元件等。

圖層及時(shí)間線如下圖所示：

此時(shí)按Ctal+Entr進(jìn)行影片測(cè)試，出現(xiàn)了除背景之外的各元件自動(dòng)快速播放的效果，停不下來(lái)，為什么會(huì)出現(xiàn)這個(gè)奇怪的現(xiàn)象呢？進(jìn)行探究分析，這是因?yàn)椤皠?dòng)物”圖層上的各元件是順序連續(xù)放置在關(guān)鍵幀上的，現(xiàn)在沒(méi)有任何控制動(dòng)作，當(dāng)然是按照順序從第1幀播放到第11幀的。既然知道了出現(xiàn)問(wèn)題的原因，那又該如何進(jìn)行控制呢？其實(shí)很簡(jiǎn)單，使用大家耳熟能詳?shù)耐Ｖ姑顂top（）；就可以了。具體操作是在“動(dòng)物”圖層上面增加一個(gè)“播放控制”圖層，從第2幀開(kāi)始連續(xù)插入10個(gè)空白關(guān)鍵幀（注意是空白關(guān)鍵幀），在每個(gè)空白關(guān)鍵幀上輸入控制命令stop（）；就可以了。此時(shí)測(cè)試影片，就自動(dòng)停留在作品簡(jiǎn)介的畫(huà)面上了，等待通過(guò)按鈕進(jìn)行交互控制了。

此時(shí)的圖層及時(shí)間線如下圖所示：

此時(shí)測(cè)試影片，鼠標(biāo)點(diǎn)擊按鈕，為什么沒(méi)有反應(yīng)呢？這就提出下面的問(wèn)題：

問(wèn)題九：如何使按鈕產(chǎn)生控制作用？這問(wèn)題其實(shí)很簡(jiǎn)單，只要給按鈕加上控制代碼就行了。

“nextBtn”按鈕控制代碼如下：

on （release） {

nextFrame（）；

}

“prevBtn”按鈕控制代碼如下：

on （release） {

prevFrame（）；

}

至此，動(dòng)物相冊(cè)的制作全部完成。當(dāng)然，可以在此基礎(chǔ)上不斷完善動(dòng)物相冊(cè)的功能，設(shè)計(jì)和制作出更加完美的作品，在此就不贅述了。

問(wèn)題十： 如何導(dǎo)出動(dòng)畫(huà)成品？

其實(shí)這不是問(wèn)題了，學(xué)生都可以比較熟練的輸出各種類型的能夠獨(dú)立播放的影片。

通過(guò)以上動(dòng)態(tài)動(dòng)物相冊(cè)的設(shè)計(jì)和制作，采用問(wèn)題探究法，把一個(gè)比較復(fù)雜的Flash動(dòng)漫作品設(shè)計(jì)與制作問(wèn)題按照一定的邏輯進(jìn)行分解，生成若干個(gè)既相互獨(dú)立又有內(nèi)在聯(lián)系的“小”問(wèn)題，引導(dǎo)學(xué)生進(jìn)行探究分析，一步一步地向著最終目標(biāo)邁進(jìn)，最終使得問(wèn)題得到完美的解決。

參考文獻(xiàn)：

[1] 蔡朝暉.Flash CS3商業(yè)應(yīng)用實(shí)戰(zhàn)[M].北京：清華大學(xué)出版社，2008.

[2] 安小龍.中文版Flash CS3課堂實(shí)錄[M].北京：清華大學(xué)出版社，2008.

[3] 卓越科技.Flash CS3動(dòng)畫(huà)制作融會(huì)貫通[M].北京：電子工業(yè)出版社，2009.