亓文娟

(武夷學(xué)院 數(shù)學(xué)與計(jì)算機(jī)學(xué)院，福建武夷山354300)

進(jìn)入信息時(shí)代以來(lái)，多媒體技術(shù)迅速興起，蓬勃發(fā)展，被普通運(yùn)用到人類(lèi)的生產(chǎn)方式、工作方式甚至生活方式中。多媒體具有圖、文、聲并茂甚至有活動(dòng)影像的特點(diǎn)，能提供最理想的教學(xué)環(huán)境，勢(shì)必會(huì)對(duì)教育、教學(xué)過(guò)程產(chǎn)生深刻的影響。特別是動(dòng)畫(huà)產(chǎn)業(yè)的蓬勃興起，以及它所具有的風(fēng)靡世界的影響和獨(dú)特的藝術(shù)形式，使教育教學(xué)中應(yīng)用的多媒體技術(shù)也日漸豐富。本文以寓言故事《烏鴉喝水》為例，通過(guò)設(shè)計(jì)《烏鴉喝水》的教學(xué)動(dòng)畫(huà)，表達(dá)教學(xué)輔助設(shè)計(jì)工具對(duì)教學(xué)過(guò)程、目標(biāo)實(shí)施的作用與意義。

1 Flash簡(jiǎn)介

Flash是Macromedia公司出品的一套矢量動(dòng)畫(huà)繪圖軟件，用于制作可交互的圖形動(dòng)畫(huà)，廣泛地應(yīng)用于網(wǎng)站動(dòng)畫(huà)、片頭動(dòng)畫(huà)、Flash廣告、Flash動(dòng)漫與MTV、Flash 賀卡、Flash 游戲、多媒體光盤(pán)、教學(xué)課件、手機(jī)應(yīng)用等。

1.1 動(dòng)畫(huà)制作原理

Flash 動(dòng)畫(huà)就像一部電影一樣，是由一系列連續(xù)的幀組成，由這些幀順序的排列組成一個(gè)動(dòng)畫(huà)效果[1]。幀又分為關(guān)鍵幀和普通幀。任何動(dòng)畫(huà)要表現(xiàn)運(yùn)動(dòng)或變化，至少前后要設(shè)置兩個(gè)不同的關(guān)鍵幀，中間狀態(tài)的變化和銜接則由電腦自動(dòng)完成。Flash 動(dòng)畫(huà)制作中補(bǔ)間動(dòng)畫(huà)分兩類(lèi)：一類(lèi)是形狀補(bǔ)間，用于形狀的動(dòng)畫(huà)；另一類(lèi)是動(dòng)畫(huà)補(bǔ)間，用于圖形及元件的動(dòng)畫(huà)。當(dāng)然想要做出一個(gè)完美的動(dòng)畫(huà)還需要用到腳本、引導(dǎo)、遮罩等高級(jí)工具。

1.2 ActionScript腳本語(yǔ)言

ActionScript 是Flash 內(nèi)置的編程語(yǔ)言，用它為動(dòng)畫(huà)編程，可以實(shí)現(xiàn)各種動(dòng)畫(huà)特效、對(duì)影片的良好控制、強(qiáng)大的人機(jī)交互以及與網(wǎng)絡(luò)服務(wù)器的交互功能[2]。一般情況下，F(xiàn)lash 影片中包含若干個(gè)場(chǎng)景，每個(gè)場(chǎng)景都有時(shí)間軸，每條時(shí)間軸都從第1 幀開(kāi)始。如果不添加ActionScript，F(xiàn)lash 影片會(huì)自動(dòng)從場(chǎng)景1 的第1 幀開(kāi)始播放，直到場(chǎng)景1 的最后一幀，然后接著播放場(chǎng)景2，以此類(lèi)推。ActionScript能夠使影片完全脫離被動(dòng)的線性播放模式，一段腳本可以使影片在一個(gè)特定的幀上停止，循環(huán)播放前面的部分，甚至于讓用戶(hù)控制要播放哪一幀。

2 Flash動(dòng)畫(huà)設(shè)計(jì)與教學(xué)

2.1 Flash動(dòng)畫(huà)設(shè)計(jì)對(duì)教學(xué)的輔助作用

用Flash 制作的作品已被廣泛應(yīng)用在教學(xué)中，對(duì)我們的教學(xué)有著極其優(yōu)越的輔助作用。具體來(lái)說(shuō)有以下幾個(gè)方面：

1）用Flash 動(dòng)畫(huà)制作的作品，可以將文字、圖形、圖像、動(dòng)畫(huà)、聲音、視頻集成于一體,設(shè)計(jì)出讓人賞心悅目的多媒體學(xué)習(xí)課件,具有藝術(shù)性和娛樂(lè)性，更易讓學(xué)生理解接受。

2）動(dòng)畫(huà)設(shè)計(jì)過(guò)程相對(duì)簡(jiǎn)單，制作簡(jiǎn)便，不需要添置專(zhuān)用設(shè)備，任課教師很容易掌握，非常適合教學(xué)一線人員設(shè)計(jì)出針對(duì)性強(qiáng)的教學(xué)素材。

3）交互功能強(qiáng),針對(duì)特定教學(xué)情景，以生動(dòng)活潑的形式更能夠增強(qiáng)教學(xué)效果。Flash動(dòng)畫(huà)設(shè)計(jì)被普遍應(yīng)用在教學(xué)中，對(duì)我們的教學(xué)有著極其優(yōu)越的輔助作用[3]。

4）用Flash 生成的互動(dòng)式動(dòng)畫(huà)體積很小，采用流技術(shù)邊下載邊播放，便于教學(xué)人員攜帶，也便于網(wǎng)絡(luò)傳輸。

2.2 用Flash制作的作品運(yùn)用于教學(xué)應(yīng)注意的問(wèn)題

用Flash 制作教學(xué)輔助動(dòng)畫(huà)有其自身的特點(diǎn)，因此在使用和制作上應(yīng)與普通教學(xué)區(qū)分開(kāi)來(lái)，注意一些問(wèn)題：

1）制作的作品應(yīng)當(dāng)具有針對(duì)性。教育是有特定的教學(xué)對(duì)象，與娛樂(lè)和科普動(dòng)畫(huà)不同，它是為特定的教學(xué)對(duì)象而制作的。

2）在作品中應(yīng)體現(xiàn)明確的教學(xué)目標(biāo)。教育動(dòng)畫(huà)是以動(dòng)畫(huà)為載體，利用教學(xué)設(shè)計(jì)理論傳播教學(xué)信息，它是為實(shí)現(xiàn)教學(xué)大綱服務(wù)的。

3）作品應(yīng)有嚴(yán)格的科學(xué)性。動(dòng)畫(huà)作品必須強(qiáng)調(diào)知識(shí)和內(nèi)容的科學(xué)性。

4）作品應(yīng)具有寓教于樂(lè)的特點(diǎn)。教育動(dòng)畫(huà)采用視聽(tīng)結(jié)合，在呈現(xiàn)教學(xué)內(nèi)容的同時(shí)，又擁有動(dòng)畫(huà)本身的特點(diǎn)：藝術(shù)性和娛樂(lè)性[4]。

3 《烏鴉喝水》動(dòng)畫(huà)設(shè)計(jì)與制作

3.1 素材收集與制作

Flash 動(dòng)畫(huà)的素材是動(dòng)畫(huà)制作的重要內(nèi)容，是構(gòu)成一個(gè)個(gè)畫(huà)面的基礎(chǔ)。因此素材的收集與制作一定要有準(zhǔn)確的定位，進(jìn)行全方位的設(shè)計(jì)與制作才能給制作動(dòng)畫(huà)打下堅(jiān)實(shí)的基礎(chǔ)。在寓言故事《烏鴉喝水》中，烏鴉是故事的主角，因此對(duì)烏鴉這個(gè)角色的設(shè)計(jì)就顯得尤其重要?？紤]到這個(gè)故事的教育對(duì)象是少年兒童，所以烏鴉應(yīng)該設(shè)計(jì)的盡量卡通、可愛(ài)，這樣才能激發(fā)學(xué)生的學(xué)習(xí)興趣。通過(guò)借鑒網(wǎng)上素材，利用Photoshop、Illustrator、Corel-Draw或Flash等軟件對(duì)素材進(jìn)行加工處理，最終鼠繪烏鴉、瓶子、小石子、太陽(yáng)等，如圖1。

在Flash作品的制作中，視覺(jué)的效果固然重要，但是聽(tīng)覺(jué)的效果也不能忽視。對(duì)于“烏鴉喝水”這個(gè)Flash作品的音頻素材包括了課文朗讀聲音和背景聲音，對(duì)于這方面的素材互聯(lián)網(wǎng)上有許多，可以直接在一些免費(fèi)的素材網(wǎng)上下載。

3.2 動(dòng)畫(huà)設(shè)計(jì)與制作

在制作Flash動(dòng)畫(huà)過(guò)程中我們要把握整個(gè)動(dòng)畫(huà)主脈搏。本人將此動(dòng)畫(huà)設(shè)計(jì)分為三個(gè)大部分：片頭動(dòng)畫(huà)-片中動(dòng)畫(huà)-片尾動(dòng)畫(huà)。運(yùn)用了變形動(dòng)畫(huà)、傳統(tǒng)補(bǔ)間動(dòng)畫(huà)、遮罩動(dòng)畫(huà)、引導(dǎo)動(dòng)畫(huà)以及高級(jí)編程等動(dòng)畫(huà)形式。

3.2.1 片頭動(dòng)畫(huà)制作

片頭動(dòng)畫(huà)是整個(gè)動(dòng)畫(huà)的開(kāi)始部分，決定著能否引起觀看者的興趣。因此片頭動(dòng)畫(huà)的部分的制作顯得尤為關(guān)鍵。

在片頭動(dòng)畫(huà)中，總共有6 個(gè)場(chǎng)景，其中主要的場(chǎng)景是通過(guò)“逐幀動(dòng)畫(huà)”和“循環(huán)動(dòng)畫(huà)”實(shí)現(xiàn)動(dòng)畫(huà)效果的[5]。

場(chǎng)景1，主要展示了這個(gè)動(dòng)畫(huà)的整體形式。這個(gè)場(chǎng)景是通過(guò)烏鴉、瓶子、太陽(yáng)等元件，以及播放開(kāi)關(guān)和“烏鴉喝水”藝術(shù)字構(gòu)成的。

場(chǎng)景2，展示了故事的背景畫(huà)面，背景由天空、白云、沙漠、仙人掌及枯樹(shù)組成。背景播放出由遠(yuǎn)及近的過(guò)程，這一過(guò)程主要是通過(guò)創(chuàng)建補(bǔ)間動(dòng)畫(huà)來(lái)完成的。

場(chǎng)景3，烏鴉正式進(jìn)入場(chǎng)景中，這一過(guò)程主要是通過(guò)創(chuàng)建逐幀動(dòng)畫(huà)和補(bǔ)間動(dòng)畫(huà)完成效果的，與場(chǎng)景2類(lèi)似的做法，先在開(kāi)始位置設(shè)置烏鴉飛的位置，再在烏鴉最后停的位置設(shè)置位子，其他背景不變。

場(chǎng)景4，主要是展現(xiàn)天氣的炎熱和烏鴉的口渴而眩暈的狀態(tài)。

場(chǎng)景5，烏鴉發(fā)現(xiàn)了瓶子，瓶子里裝有水。

場(chǎng)景6，當(dāng)烏鴉準(zhǔn)備去喝水的時(shí)候，發(fā)現(xiàn)瓶口太小。

部分截圖如圖2。

3.2.2 片中動(dòng)畫(huà)制作

片中動(dòng)畫(huà)是故事的高潮部分，也是故事最精彩、最關(guān)鍵的部分。因此在這部分的變現(xiàn)應(yīng)該更加生動(dòng)形象，才能讓學(xué)生投入情境中，引起共鳴。在片中動(dòng)畫(huà)中，總共有3個(gè)場(chǎng)景，采用補(bǔ)間動(dòng)畫(huà)、遮罩動(dòng)畫(huà)、引導(dǎo)動(dòng)畫(huà)等技術(shù)實(shí)現(xiàn)。

場(chǎng)景1，烏鴉正在苦思冥想著，這時(shí)它看見(jiàn)了旁邊的小石子。

場(chǎng)景2，烏鴉想出辦法來(lái)了，烏鴉把小石子一個(gè)一個(gè)地放進(jìn)瓶子里。場(chǎng)景3，瓶子里的水漸漸升高。部分截圖如圖3。

3.2.3 片尾動(dòng)畫(huà)制作

片尾動(dòng)畫(huà)是故事的結(jié)局部分，對(duì)給整個(gè)故事應(yīng)當(dāng)有總結(jié)的作用，對(duì)學(xué)生具有啟發(fā)作用。采用遮罩動(dòng)畫(huà)實(shí)現(xiàn)水位上升效果。

3.3 音頻導(dǎo)入

只有畫(huà)面的動(dòng)畫(huà)是不完整的，聲音對(duì)整個(gè)動(dòng)畫(huà)起著畫(huà)龍點(diǎn)睛的作用。在互聯(lián)網(wǎng)上很容易就能找到有關(guān)《烏鴉喝水》的音頻素材，導(dǎo)入音頻到動(dòng)畫(huà)中，利用“千千靜聽(tīng)”軟件找出烏鴉說(shuō)話的具體時(shí)間，在Flash中新建一個(gè)歌詞圖層，在每句話的開(kāi)始和結(jié)束幀處添加關(guān)鍵幀，用文本工具添加烏鴉所說(shuō)的話，以此類(lèi)推，添加烏鴉其他的語(yǔ)句，保證聲音與歌詞的同步。同時(shí)設(shè)置聲音“同步”方式為數(shù)據(jù)流及聲音循環(huán)次數(shù)。如圖4。

3.4 腳本

在Flash動(dòng)畫(huà)中，交互性是其最大的特點(diǎn)，而按鈕正是交互性的直接體現(xiàn)。此動(dòng)畫(huà)中通過(guò)播放、暫停、返回按鈕來(lái)控制影片的播放。

播放：在動(dòng)畫(huà)開(kāi)始播放幀處添加stop，在播放按鈕上添加on(release){gotoAndPlay(4)}

暫停：on(press){a=a+1;if(Math.pow(-1,a)>0){play();}else{stop();}}

返回：on(release){gotoAndPlay(4)}

在首頁(yè)中，為了美化頁(yè)面實(shí)現(xiàn)更強(qiáng)的交互性，添加了一個(gè)動(dòng)畫(huà)下載的進(jìn)度條。代碼如下：

var a=this.getBytesLoaded();

var b=this.getBytesTotal();

var bfb=Math.round(a/b*100);

text1.text="Loading："+bfb+"%";

text2.text="正在下載...";

loadbar._xscale=bfb;

3.5 調(diào)試及發(fā)布

動(dòng)畫(huà)調(diào)試的目的在于發(fā)現(xiàn)錯(cuò)誤、糾正錯(cuò)誤，是一個(gè)驗(yàn)證軟件是否滿(mǎn)足要求的過(guò)程。通過(guò)反復(fù)地調(diào)試、比對(duì)和校正，基本實(shí)現(xiàn)了《烏鴉喝水》動(dòng)畫(huà)的制作，達(dá)到了較為滿(mǎn)意的效果。利用Flash 的發(fā)布功能可將你制作好的多媒體課件發(fā)布為影片(*.swf文件格式)、可執(zhí)行文件（*.exe 文件格式）或網(wǎng)頁(yè)（HTML格式）。

4 總結(jié)

教學(xué)輔助動(dòng)畫(huà)以“體積”越來(lái)越小、交互性越來(lái)越強(qiáng)、信息容量越來(lái)越大成為教學(xué)發(fā)展趨勢(shì)。本文通過(guò)兒童故事《烏鴉喝水》的設(shè)計(jì)與實(shí)現(xiàn)，說(shuō)明了Flash 教學(xué)輔助動(dòng)畫(huà)的具體實(shí)現(xiàn)過(guò)程，通過(guò)輔助教學(xué)與課堂教學(xué)相結(jié)合的方法，使學(xué)生輕松地掌握知識(shí)點(diǎn)。但教學(xué)輔助動(dòng)畫(huà)也存在著過(guò)分依賴(lài)視覺(jué)技術(shù)、限制了學(xué)生的意外學(xué)習(xí)、只接受教師事先編好的輸入、需要昂貴而不斷更新的硬件等不足之處，有待進(jìn)一步解決。

[1]魏三強(qiáng).基于Flash 的《白狐MTV》動(dòng)畫(huà)作品的設(shè)計(jì)與實(shí)現(xiàn)[J].宿州教育學(xué)院學(xué)報(bào)，2011（8）：140-142.

[2]曹晏禎.基于Flash 的多媒體課件設(shè)計(jì)與開(kāi)發(fā)[J].赤峰學(xué)院學(xué)報(bào)，2013(10)：252-253.

[3]邱秀榮,趙莉蘋(píng),蔡鑌.基于Flash的冒泡排序算法的演示實(shí)現(xiàn)[J].安陽(yáng)工學(xué)院學(xué)報(bào)，2011(11)：48-49.

[4]辛浩,李玲玲.淺談Flash 動(dòng)畫(huà)制作中的ActionScript[J].淮北職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2014(10)：135-136.

[5]馬海燕,李希文,郭文平.淺析Flash 動(dòng)漫MV 中的鏡頭與接鏡技巧[J].臺(tái)州學(xué)院學(xué)報(bào)，2007(12)：21-23.