鄧文清

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

關(guān)鍵詞：問題探究法；Flash；應(yīng)用

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

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

任務(wù)：動物相冊的制作之人類的朋友——可愛的動物

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

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

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

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

1）在Photoshop中打開圖像dongw001.jpg。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最終的圖層及時間線如下所示：

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

問題五：播放作品簡介時，有滾動的說明文字，有循環(huán)播放的背景音樂。這是如何實現(xiàn)的呢？

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

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

制作的步驟如下：

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

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

2）影片剪輯共有4個層，最下邊的是[bg]圖層，放10幅動物圖片。

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

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

最終的圖層及時間線如下所示：

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

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

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

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

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

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

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

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

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

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

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

最終的圖層及時間線如下所示：

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

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

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

回到主場景進行合成開始，自然而然的提出以下問題：

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

這一問題有點“大”，進而可以分解成若干個“小”問題：

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

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

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

下面進行探究分析：

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

圖層及時間線如下圖所示：

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

此時的圖層及時間線如下圖所示：

此時測試影片，鼠標(biāo)點擊按鈕，為什么沒有反應(yīng)呢？這就提出下面的問題：

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

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

on （release） {

nextFrame（）；

}

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

on （release） {

prevFrame（）；

}

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

問題十： 如何導(dǎo)出動畫成品？

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

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

參考文獻：

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

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

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