STEAM 理念下Flash 動畫公選課自主學習系統研究設計

肖建芳

（汕頭職業技術學院計算機系，汕頭515041）

0 引言

動畫是一種綜合藝術，它是集合了繪畫、電影、工程、數字媒體、科學、音樂、文學、技術等眾多門類于一身的藝術表現形式。從制作技術和手段看，動畫可分為以手工繪制為主的傳統動畫和以計算機設計為主的電腦動畫。計算機設計的動畫又分為二維動畫和三維動畫，Flash 就是一款非常優秀的二維動畫設計軟件，目前在MV、短劇、多媒體教學軟件、高級互動Action、Flash 式選單及表單制作等領域占據重要地位。

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

1 系統設計理念

動畫設計工作是在故事板的基礎上，確定前景、背景及道具的形式和形狀，完成場景環境和背景圖的設計、制作。由此可見動畫設計工作對設計者的綜合能力和素質要求很高，動畫設計者需要同時具備科學、技術、工程、藝術和數學等多學科知識和技能，才會更具有創造性和創新性。

Flash 是一款非常優秀的二維動畫設計軟件，學習門檻低、入門快、趣味性高，是學校比較受歡迎的課程之一。STEAM 教育是集科學（Science）、技術（Technology）、工程（Engineering）、藝術（Arts）和數學（Mathematics）多學科融合的綜合教育。該理念最早是美國政府提出的，強調教育的互動性、創造性和開闊性，注重培養學生的綜合素養，從而提升其全球競爭力。

優秀的動畫作品對動畫設計師們的綜合能力素質要求很高，如果能將STEAM 的理念引入課程學習，對學生綜合素質的提高、學生創新創造能力的培養具有重要意義。

2 系統模塊結構設計

本系統以《Flash 動畫設計》公共選修課劃分的課程體系模塊為依據，將系統分為以下子模塊：動畫基礎、基本繪圖、逐幀動畫、補間形狀、元件與實例、傳統補間、補間動畫、遮罩動畫、引導層動畫、時間軸控制、綜合案例、綜合測試。考慮到選修課的學生都是零基礎，本系統編程部分選用Action Script2.0 版本，且只學習簡單的時間軸控制函數及相關簡單事件。系統具體模塊結構如圖1 所示。

圖1 系統模塊結構圖

除“動畫基礎”、“綜合案例”和“綜合測試”三個子模塊，其他每個模塊內容都包括“概念原理”和“實用案例”兩個部分。“概念原理”主要是經過精心設計的知識點的概念、原理、使用方法等，比如動畫形成的原理介紹，時間軸、場景、圖層和幀的概念，元件和實例的區別和聯系等。“實用案例”部分展示精心挑選的案例，注意在選用案例時不但要求案例從簡單到復雜，還要考慮知識點和操作技能的螺旋遞進，并融入STEAM 理念，在案例中體現科學、技術、工程、藝術和數學等多學科的融合，這是本自主學習系統的重點部分。結合筆者多年的教學實踐和經驗，設計各模塊基于STEAM 的學習案例如下：

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

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

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

（4）“傳統補間”。該模塊設計了三個案例：小球滾動、作用力與反作用力、彈簧振子簡諧運動。案例可以很好地詮釋傳統補間的原理以及元件的使用，融入了科學、數學、工程、藝術、技術多學科知識。

（5）“補間動畫”模塊。該模塊設計了四個案例：蝴蝶花間舞、單擺運動、重走絲綢之路、幻燈片放映效果。四個實用案例融合了STEAM 理念，使用簡單的運動軌跡原理、生物特征、物理知識、歷史知識、數學知識、藝術素養和工程思想就可以設計出來。

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

（7）“引導層動畫”模塊。該模塊設計了兩個案例：物體自由落體運動、分子無規則運動。一個案例選自中學物理，一個案例選自中學化學，也是非常好理解的科學現象，很好地融入了STEAM 理念。學生通過學習能夠把以前做過的實驗真實地還原出來，興趣大大提高，也在案例練習過程中更好地理解了生活中的科學。

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

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

3 系統實現

本系統采用Adobe Flash CS6 軟件設計，腳本選擇ActionScript 2.0，最終的成果是發布成.exe 的可執行單機文件、.swf 影片文件或.html 的網頁文件形式。該系統對硬件和軟件沒有特別要求，常規學校機房條件都支持。Flash 采用矢量繪圖的特點使系統非常小，方便攜帶以及共享給學生，或者放服務器讓學生在線學習。

3.1 界面實現

系統主要內容都設計在主界面顯示，最上方一欄是標題區域，顯示該系統的標題，第二欄是一級導航區域，子模塊的名稱都顯示在這里，單擊一級導航區域的菜單項，二級導航區域出現在第三欄左側邊欄，通過二級導航獲得具體學習內容，該內容顯示在第三欄右側的主體區域。簡單布局如圖2 所示。

圖2 軟件界面布局

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

3.2 導航實現

第二種方法是將一級導航和二級導航內容設計在不同場景中，通過切換場景來實現跳轉，使用到的關鍵代碼是：

Flash 軟件中的導航設計原理與網頁設計課程里的相似，但是操作起來卻復雜很多，尤其是二級導航效果，需要通過一些技術手段實現。第一種方法是將一級導航和二級導航內容設計在同一場景中，然后通過跳轉幀的方式實現導航。使用到的關鍵代碼是：

3.3 綜合測試模塊的實現

為了實現成績即時統計和試題解析，綜合測試題目全部采用選擇題的形式。使用Flash 軟件中的RadioButton、Button 等組件可以很方便的設計出綜合測試模塊的界面，通過改變組件參數以及為組件添加AS2.0腳本代碼可以控制測試進度以及給出測試結果和試題解析等。

4 結語

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