STEAM 理念下Flash 動(dòng)畫公選課自主學(xué)習(xí)系統(tǒng)研究設(shè)計(jì)

肖建芳

（汕頭職業(yè)技術(shù)學(xué)院計(jì)算機(jī)系，汕頭515041）

0 引言

動(dòng)畫是一種綜合藝術(shù)，它是集合了繪畫、電影、工程、數(shù)字媒體、科學(xué)、音樂(lè)、文學(xué)、技術(shù)等眾多門類于一身的藝術(shù)表現(xiàn)形式。從制作技術(shù)和手段看，動(dòng)畫可分為以手工繪制為主的傳統(tǒng)動(dòng)畫和以計(jì)算機(jī)設(shè)計(jì)為主的電腦動(dòng)畫。計(jì)算機(jī)設(shè)計(jì)的動(dòng)畫又分為二維動(dòng)畫和三維動(dòng)畫，F(xiàn)lash 就是一款非常優(yōu)秀的二維動(dòng)畫設(shè)計(jì)軟件，目前在MV、短劇、多媒體教學(xué)軟件、高級(jí)互動(dòng)Action、Flash 式選單及表單制作等領(lǐng)域占據(jù)重要地位。

汕頭職業(yè)技術(shù)學(xué)院院級(jí)公共選修課《Flash 動(dòng)畫設(shè)計(jì)》課程是一門全院性公共選修課，該課程在一個(gè)學(xué)期內(nèi)完成，共計(jì)36 課時(shí)。課時(shí)非常少，如果按傳統(tǒng)授課方式，選課學(xué)生無(wú)法通過(guò)選修課習(xí)得必要的動(dòng)畫設(shè)計(jì)知識(shí)和技能。課時(shí)少而學(xué)習(xí)內(nèi)容多的矛盾，必然促使教師進(jìn)行教學(xué)改革，采用翻轉(zhuǎn)課堂形式，將移動(dòng)學(xué)習(xí)和碎片化學(xué)習(xí)理念加入進(jìn)來(lái)。筆者結(jié)合本校實(shí)際，設(shè)計(jì)了基于STEAM 的Flash 公選課自主學(xué)習(xí)系統(tǒng)，為教師開展翻轉(zhuǎn)課堂、學(xué)生進(jìn)行碎片化學(xué)習(xí)和移動(dòng)學(xué)習(xí)提供了極大的便利。

1 系統(tǒng)設(shè)計(jì)理念

動(dòng)畫設(shè)計(jì)工作是在故事板的基礎(chǔ)上，確定前景、背景及道具的形式和形狀，完成場(chǎng)景環(huán)境和背景圖的設(shè)計(jì)、制作。由此可見動(dòng)畫設(shè)計(jì)工作對(duì)設(shè)計(jì)者的綜合能力和素質(zhì)要求很高，動(dòng)畫設(shè)計(jì)者需要同時(shí)具備科學(xué)、技術(shù)、工程、藝術(shù)和數(shù)學(xué)等多學(xué)科知識(shí)和技能，才會(huì)更具有創(chuàng)造性和創(chuàng)新性。

Flash 是一款非常優(yōu)秀的二維動(dòng)畫設(shè)計(jì)軟件，學(xué)習(xí)門檻低、入門快、趣味性高，是學(xué)校比較受歡迎的課程之一。STEAM 教育是集科學(xué)（Science）、技術(shù)（Technology）、工程（Engineering）、藝術(shù)（Arts）和數(shù)學(xué)（Mathematics）多學(xué)科融合的綜合教育。該理念最早是美國(guó)政府提出的，強(qiáng)調(diào)教育的互動(dòng)性、創(chuàng)造性和開闊性，注重培養(yǎng)學(xué)生的綜合素養(yǎng)，從而提升其全球競(jìng)爭(zhēng)力。

優(yōu)秀的動(dòng)畫作品對(duì)動(dòng)畫設(shè)計(jì)師們的綜合能力素質(zhì)要求很高，如果能將STEAM 的理念引入課程學(xué)習(xí)，對(duì)學(xué)生綜合素質(zhì)的提高、學(xué)生創(chuàng)新創(chuàng)造能力的培養(yǎng)具有重要意義。

2 系統(tǒng)模塊結(jié)構(gòu)設(shè)計(jì)

本系統(tǒng)以《Flash 動(dòng)畫設(shè)計(jì)》公共選修課劃分的課程體系模塊為依據(jù)，將系統(tǒng)分為以下子模塊：動(dòng)畫基礎(chǔ)、基本繪圖、逐幀動(dòng)畫、補(bǔ)間形狀、元件與實(shí)例、傳統(tǒng)補(bǔ)間、補(bǔ)間動(dòng)畫、遮罩動(dòng)畫、引導(dǎo)層動(dòng)畫、時(shí)間軸控制、綜合案例、綜合測(cè)試。考慮到選修課的學(xué)生都是零基礎(chǔ)，本系統(tǒng)編程部分選用Action Script2.0 版本，且只學(xué)習(xí)簡(jiǎn)單的時(shí)間軸控制函數(shù)及相關(guān)簡(jiǎn)單事件。系統(tǒng)具體模塊結(jié)構(gòu)如圖1 所示。

圖1 系統(tǒng)模塊結(jié)構(gòu)圖

除“動(dòng)畫基礎(chǔ)”、“綜合案例”和“綜合測(cè)試”三個(gè)子模塊，其他每個(gè)模塊內(nèi)容都包括“概念原理”和“實(shí)用案例”兩個(gè)部分。“概念原理”主要是經(jīng)過(guò)精心設(shè)計(jì)的知識(shí)點(diǎn)的概念、原理、使用方法等，比如動(dòng)畫形成的原理介紹，時(shí)間軸、場(chǎng)景、圖層和幀的概念，元件和實(shí)例的區(qū)別和聯(lián)系等。“實(shí)用案例”部分展示精心挑選的案例，注意在選用案例時(shí)不但要求案例從簡(jiǎn)單到復(fù)雜，還要考慮知識(shí)點(diǎn)和操作技能的螺旋遞進(jìn)，并融入STEAM 理念，在案例中體現(xiàn)科學(xué)、技術(shù)、工程、藝術(shù)和數(shù)學(xué)等多學(xué)科的融合，這是本自主學(xué)習(xí)系統(tǒng)的重點(diǎn)部分。結(jié)合筆者多年的教學(xué)實(shí)踐和經(jīng)驗(yàn)，設(shè)計(jì)各模塊基于STEAM 的學(xué)習(xí)案例如下：

（1）“基本繪圖”模塊。該模塊設(shè)計(jì)了三個(gè)案例：繪制海魚、繪制夜晚高樓、繪制圣誕老人。三個(gè)案例從簡(jiǎn)單到復(fù)雜，兼顧了各繪圖工具和其他工具的使用，并融入了數(shù)學(xué)幾何、藝術(shù)色彩搭配、工程布局等STEAM元素。

（2）“逐幀動(dòng)畫”模塊。該模塊設(shè)計(jì)了三個(gè)案例：QQ 齜牙表情設(shè)計(jì)、高考倒計(jì)時(shí)牌設(shè)計(jì)和生日賀卡設(shè)計(jì)。其中QQ 齜牙表情需要參考QQ 軟件的齜牙表情，然后繪制出效果，最后使用逐幀動(dòng)畫實(shí)現(xiàn)齜牙笑動(dòng)畫。生日賀卡設(shè)計(jì)的是打字效果，隨著光標(biāo)的移動(dòng)，生日祝語(yǔ)一字一字地好像是即時(shí)敲打上去的。案例承前啟后，從簡(jiǎn)單到復(fù)雜，生動(dòng)詮釋了動(dòng)畫原理和視覺(jué)暫留原理，學(xué)生在案例學(xué)習(xí)中理解幀、關(guān)鍵幀和幀頻等概念，并運(yùn)用到藝術(shù)、數(shù)學(xué)、科學(xué)、技術(shù)和工程多學(xué)科的知識(shí)。

（3）“補(bǔ)間形狀”模塊。該模塊設(shè)計(jì)了三個(gè)案例：ABC 字母變換、愛心變換、幾何圖形變形。案例包含了文字變化成其他文字、文字變化成圖形、圖形之間相互轉(zhuǎn)換效果，融合了STEAM 理念，鞏固了Flash 繪圖基礎(chǔ)和逐幀動(dòng)畫。同時(shí)，可以使用洋蔥皮工具觀察形狀補(bǔ)間動(dòng)畫在形狀、顏色、位置等方面的具體變化細(xì)節(jié)。

（4）“傳統(tǒng)補(bǔ)間”。該模塊設(shè)計(jì)了三個(gè)案例：小球滾動(dòng)、作用力與反作用力、彈簧振子簡(jiǎn)諧運(yùn)動(dòng)。案例可以很好地詮釋傳統(tǒng)補(bǔ)間的原理以及元件的使用，融入了科學(xué)、數(shù)學(xué)、工程、藝術(shù)、技術(shù)多學(xué)科知識(shí)。

（5）“補(bǔ)間動(dòng)畫”模塊。該模塊設(shè)計(jì)了四個(gè)案例：蝴蝶花間舞、單擺運(yùn)動(dòng)、重走絲綢之路、幻燈片放映效果。四個(gè)實(shí)用案例融合了STEAM 理念，使用簡(jiǎn)單的運(yùn)動(dòng)軌跡原理、生物特征、物理知識(shí)、歷史知識(shí)、數(shù)學(xué)知識(shí)、藝術(shù)素養(yǎng)和工程思想就可以設(shè)計(jì)出來(lái)。

（6）“遮罩動(dòng)畫”模塊。該模塊設(shè)計(jì)了三個(gè)案例：探照燈文字、毛筆寫字效果、自動(dòng)繪制幾何圖形。這幾個(gè)案例都是學(xué)生平時(shí)經(jīng)常接觸到的一些效果，結(jié)合數(shù)學(xué)、藝術(shù)、科學(xué)知識(shí)，使用遮罩動(dòng)畫設(shè)計(jì)技巧就能很快做出來(lái)，學(xué)生學(xué)習(xí)積極性大大提高。

（7）“引導(dǎo)層動(dòng)畫”模塊。該模塊設(shè)計(jì)了兩個(gè)案例：物體自由落體運(yùn)動(dòng)、分子無(wú)規(guī)則運(yùn)動(dòng)。一個(gè)案例選自中學(xué)物理，一個(gè)案例選自中學(xué)化學(xué)，也是非常好理解的科學(xué)現(xiàn)象，很好地融入了STEAM 理念。學(xué)生通過(guò)學(xué)習(xí)能夠把以前做過(guò)的實(shí)驗(yàn)真實(shí)地還原出來(lái)，興趣大大提高，也在案例練習(xí)過(guò)程中更好地理解了生活中的科學(xué)。

（8）“時(shí)間軸控制”模塊。該模塊設(shè)計(jì)了一個(gè)案例：電子畫冊(cè)設(shè)計(jì)。精選精美畫冊(cè)圖片，使用Photoshop 工具將圖片處理成想要的效果，然后導(dǎo)入庫(kù)中，并將圖片置入不同的幀，最后通過(guò)按鈕編程實(shí)現(xiàn)控制畫冊(cè)的播放。其中不但融入了科學(xué)、數(shù)學(xué)、工程和藝術(shù)理念，還可以對(duì)ActionScript2.0 中的事件和時(shí)間軸控制函數(shù)進(jìn)行很好的練習(xí)和理解。

（9）“綜合案例”模塊。該模塊精選綜合案例：數(shù)學(xué)課件設(shè)計(jì)和MV 設(shè)計(jì)，綜合運(yùn)用Flash 繪圖、逐幀動(dòng)畫、形狀補(bǔ)間、傳統(tǒng)補(bǔ)間、補(bǔ)間動(dòng)畫、引導(dǎo)層動(dòng)畫、遮罩動(dòng)畫等動(dòng)畫設(shè)計(jì)方法，導(dǎo)入外部多媒體素材：圖片素材、聲音素材和視頻素材，并融入科學(xué)思維、數(shù)學(xué)知識(shí)、藝術(shù)審美及創(chuàng)作、技術(shù)運(yùn)用和工程理念，結(jié)合鏡頭設(shè)計(jì)技巧：推鏡頭、拉鏡頭、搖鏡頭、移鏡頭，完成綜合性的案例效果。最后設(shè)計(jì)恰當(dāng)?shù)陌粹o，并在按鈕和相應(yīng)關(guān)鍵幀上根據(jù)需要添加腳本代碼，控制動(dòng)畫的播放、暫停、停止、快進(jìn)和快退等效果。

3 系統(tǒng)實(shí)現(xiàn)

本系統(tǒng)采用Adobe Flash CS6 軟件設(shè)計(jì)，腳本選擇ActionScript 2.0，最終的成果是發(fā)布成.exe 的可執(zhí)行單機(jī)文件、.swf 影片文件或.html 的網(wǎng)頁(yè)文件形式。該系統(tǒng)對(duì)硬件和軟件沒(méi)有特別要求，常規(guī)學(xué)校機(jī)房條件都支持。Flash 采用矢量繪圖的特點(diǎn)使系統(tǒng)非常小，方便攜帶以及共享給學(xué)生，或者放服務(wù)器讓學(xué)生在線學(xué)習(xí)。

3.1 界面實(shí)現(xiàn)

系統(tǒng)主要內(nèi)容都設(shè)計(jì)在主界面顯示，最上方一欄是標(biāo)題區(qū)域，顯示該系統(tǒng)的標(biāo)題，第二欄是一級(jí)導(dǎo)航區(qū)域，子模塊的名稱都顯示在這里，單擊一級(jí)導(dǎo)航區(qū)域的菜單項(xiàng)，二級(jí)導(dǎo)航區(qū)域出現(xiàn)在第三欄左側(cè)邊欄，通過(guò)二級(jí)導(dǎo)航獲得具體學(xué)習(xí)內(nèi)容，該內(nèi)容顯示在第三欄右側(cè)的主體區(qū)域。簡(jiǎn)單布局如圖2 所示。

圖2 軟件界面布局

將圖1 中的子模塊名稱設(shè)置為一級(jí)導(dǎo)航的菜單項(xiàng)，單擊一級(jí)導(dǎo)航菜單項(xiàng)，出現(xiàn)對(duì)應(yīng)的二級(jí)導(dǎo)航菜單。比如單擊一級(jí)導(dǎo)航菜單項(xiàng)“動(dòng)畫補(bǔ)間”，則顯示二級(jí)導(dǎo)航菜單項(xiàng)：“概念原理”、“蝴蝶花間舞”、“單擺運(yùn)動(dòng)”、“重走絲綢之路”、“幻燈片放映效果”和“返回”五個(gè)子菜單項(xiàng)。單擊“單擺運(yùn)動(dòng)”菜單項(xiàng)，則在系統(tǒng)主體區(qū)域顯示該案例動(dòng)畫效果，單擊主體區(qū)域的“設(shè)計(jì)思路”鏈接查看該案例的設(shè)計(jì)思路和相關(guān)的STEAM 原理，單擊“操作步驟”鏈接彈出作品的操作步驟和注意事項(xiàng)。學(xué)生課前進(jìn)行自主學(xué)習(xí)時(shí)，可以根據(jù)教師預(yù)先布置的學(xué)習(xí)任務(wù)，找到相應(yīng)導(dǎo)航打開學(xué)習(xí)內(nèi)容，先學(xué)習(xí)該模塊相關(guān)概念原理，然后觀看案例效果，邊看效果邊查看作品的設(shè)計(jì)思路和原理，最后根據(jù)“操作步驟”中的具體操作步驟進(jìn)行實(shí)操訓(xùn)練。

3.2 導(dǎo)航實(shí)現(xiàn)

第二種方法是將一級(jí)導(dǎo)航和二級(jí)導(dǎo)航內(nèi)容設(shè)計(jì)在不同場(chǎng)景中，通過(guò)切換場(chǎng)景來(lái)實(shí)現(xiàn)跳轉(zhuǎn)，使用到的關(guān)鍵代碼是：

Flash 軟件中的導(dǎo)航設(shè)計(jì)原理與網(wǎng)頁(yè)設(shè)計(jì)課程里的相似，但是操作起來(lái)卻復(fù)雜很多，尤其是二級(jí)導(dǎo)航效果，需要通過(guò)一些技術(shù)手段實(shí)現(xiàn)。第一種方法是將一級(jí)導(dǎo)航和二級(jí)導(dǎo)航內(nèi)容設(shè)計(jì)在同一場(chǎng)景中，然后通過(guò)跳轉(zhuǎn)幀的方式實(shí)現(xiàn)導(dǎo)航。使用到的關(guān)鍵代碼是：

3.3 綜合測(cè)試模塊的實(shí)現(xiàn)

為了實(shí)現(xiàn)成績(jī)即時(shí)統(tǒng)計(jì)和試題解析，綜合測(cè)試題目全部采用選擇題的形式。使用Flash 軟件中的RadioButton、Button 等組件可以很方便的設(shè)計(jì)出綜合測(cè)試模塊的界面，通過(guò)改變組件參數(shù)以及為組件添加AS2.0腳本代碼可以控制測(cè)試進(jìn)度以及給出測(cè)試結(jié)果和試題解析等。

4 結(jié)語(yǔ)

高校校級(jí)公共選修課具有課時(shí)少、內(nèi)容多的特點(diǎn)，如果想要學(xué)生學(xué)到更多內(nèi)容，最好使用翻轉(zhuǎn)課堂的形式，并引入移動(dòng)學(xué)習(xí)和碎片化學(xué)習(xí)。除了提供一些學(xué)習(xí)視頻，設(shè)計(jì)一個(gè)基于STEAM 理念的課程自主學(xué)習(xí)系統(tǒng)是很好的選擇。系統(tǒng)包括課程所有的內(nèi)容體系和實(shí)踐體系，還有幾套簡(jiǎn)單的綜合測(cè)試題，融入STEAM 理念，為學(xué)生提供了豐富的學(xué)習(xí)資料，同時(shí)構(gòu)建了良好的學(xué)習(xí)情境，可以極大地調(diào)動(dòng)學(xué)生自主學(xué)習(xí)的積極性，讓學(xué)生在自主學(xué)習(xí)過(guò)程中掌握Flash 動(dòng)畫設(shè)計(jì)的原理、方法和技巧，培養(yǎng)學(xué)生的創(chuàng)新思想和創(chuàng)造能力。系統(tǒng)本身就是使用Flash CS6 軟件設(shè)計(jì)出來(lái)的，基于真實(shí)項(xiàng)目，學(xué)生在使用過(guò)程中對(duì)于項(xiàng)目發(fā)開會(huì)有更好的體驗(yàn)。如果在系統(tǒng)中加入“動(dòng)作腳本基礎(chǔ)”、“動(dòng)作腳本進(jìn)階”、“組件和模板”和“測(cè)試優(yōu)化發(fā)布”等模塊，就可以作為高校計(jì)算機(jī)系數(shù)字媒體等專業(yè)學(xué)生《Flash 動(dòng)畫設(shè)計(jì)》等相關(guān)Flash 專業(yè)課程的自主學(xué)習(xí)系統(tǒng)了。本系統(tǒng)提出的這種將STEAM 教學(xué)理念與高校工科課程相結(jié)合的方法，可以為同行進(jìn)行該方面的教學(xué)改革和研究提供參考。