李向群，張鵬程，劉伯龍

（1.中國(guó)礦業(yè)大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，徐州221116；2.中國(guó)礦業(yè)大學(xué)化工學(xué)院，徐州221116）

基于微課學(xué)習(xí)的Flash動(dòng)畫(huà)作品展示平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

李向群1，張鵬程2，劉伯龍1

（1.中國(guó)礦業(yè)大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，徐州221116；2.中國(guó)礦業(yè)大學(xué)化工學(xué)院，徐州221116）

《大學(xué)計(jì)算機(jī)基礎(chǔ)》是非計(jì)算機(jī)專(zhuān)業(yè)學(xué)生的一門(mén)必修課，F(xiàn)lash動(dòng)畫(huà)制作是其中的重要內(nèi)容，其內(nèi)容的實(shí)踐性與綜合性較強(qiáng)，單純依靠傳統(tǒng)的課堂教學(xué)已經(jīng)無(wú)法滿(mǎn)足學(xué)生們對(duì)知識(shí)的需求。分析并探討Flash動(dòng)畫(huà)作品展示平臺(tái)的設(shè)計(jì)思路，采用WebStorm作為開(kāi)發(fā)工具實(shí)現(xiàn)學(xué)習(xí)平臺(tái)的設(shè)計(jì)。實(shí)踐證明，建立一個(gè)基于微課學(xué)習(xí)的Flash動(dòng)畫(huà)作品展示平臺(tái)，可以提高學(xué)生自主學(xué)習(xí)的積極性并有效促進(jìn)課程教學(xué)方法的改進(jìn)和教學(xué)活動(dòng)的創(chuàng)新。

微課；Flash動(dòng)畫(huà)；作品展示平臺(tái)；WebStorm

0 引言

《大學(xué)計(jì)算機(jī)基礎(chǔ)》是我校為非計(jì)算機(jī)專(zhuān)業(yè)開(kāi)設(shè)的計(jì)算機(jī)基礎(chǔ)教育必修課，學(xué)時(shí)32學(xué)時(shí)理論課+40學(xué)時(shí)上機(jī)實(shí)踐課?！洞髮W(xué)計(jì)算機(jī)基礎(chǔ)》早在1998年以前就已經(jīng)在我校的各個(gè)學(xué)院開(kāi)設(shè)，2005年開(kāi)始在全校實(shí)施分級(jí)教學(xué)，藝術(shù)體育類(lèi)是其中一個(gè)教學(xué)層次。針對(duì)藝術(shù)生和體育生的專(zhuān)業(yè)特長(zhǎng)和就業(yè)前景，教學(xué)大綱中安排了Flash動(dòng)畫(huà)制作這部分內(nèi)容，學(xué)時(shí)分配占整個(gè)課程的1/4之多。Flash動(dòng)畫(huà)制作是一門(mén)靈活性、實(shí)踐性、綜合設(shè)計(jì)性很強(qiáng)的課程，給學(xué)生創(chuàng)新能力的培養(yǎng)提供了非常好的拓展空間。因此，單純依靠傳統(tǒng)的課堂教學(xué)已經(jīng)無(wú)法滿(mǎn)足學(xué)生們對(duì)設(shè)計(jì)內(nèi)容學(xué)習(xí)的需求。

2011 年，“微課”的概念在國(guó)內(nèi)首次被提出[1]。微課的顯著特點(diǎn)如時(shí)間短、容量小、主題突出、內(nèi)容精細(xì)、學(xué)習(xí)不受時(shí)間和空間的限制、更利于主動(dòng)學(xué)習(xí)等備受當(dāng)代學(xué)生們的青睞[2]。2012年、2013年微課也逐漸成為以胡鐵生、焦建利教授等為代表的教育學(xué)者們關(guān)注的焦點(diǎn)，焦建利教授認(rèn)為：“微課是為教學(xué)和學(xué)習(xí)模式創(chuàng)新而生的，教學(xué)模式創(chuàng)新是根本。在線(xiàn)教學(xué)、混合學(xué)習(xí)和翻轉(zhuǎn)課堂之類(lèi)創(chuàng)新的教學(xué)模式，才能真正推進(jìn)以‘學(xué)習(xí)者為中心’的教學(xué)理念發(fā)展，才能穩(wěn)步提升教學(xué)質(zhì)量?！薄Ｒ虼?，開(kāi)發(fā)以微課學(xué)習(xí)為基礎(chǔ)的網(wǎng)絡(luò)學(xué)習(xí)平臺(tái)既是計(jì)算機(jī)基礎(chǔ)教育教學(xué)改革的一種趨勢(shì)，又是以“學(xué)生”為主體的教學(xué)模式與“微時(shí)代”特色相結(jié)合的教學(xué)改革的必然。

目前，我校大學(xué)計(jì)算機(jī)基礎(chǔ)系列課程中還沒(méi)有一個(gè)完善的關(guān)于Flash動(dòng)畫(huà)制作課程的微課學(xué)習(xí)平臺(tái)。而學(xué)生要想學(xué)好Flash動(dòng)畫(huà)，既要學(xué)習(xí)基本知識(shí)，又要學(xué)會(huì)鼠繪，還要學(xué)習(xí)腳本語(yǔ)言，在有限的學(xué)時(shí)內(nèi)，要想讓學(xué)生掌握Flash動(dòng)畫(huà)制作技能并做出自己的Flash動(dòng)畫(huà)作品，對(duì)于學(xué)生來(lái)講是有難度的。建立一個(gè)基于微課學(xué)習(xí)的Flash動(dòng)畫(huà)作品展示與學(xué)生自學(xué)平臺(tái)是我校學(xué)生自主學(xué)習(xí)的切身需求。

1 動(dòng)畫(huà)作品展示平臺(tái)的設(shè)計(jì)思路

學(xué)習(xí)平臺(tái)的設(shè)計(jì)內(nèi)容主要分為以下六個(gè)功能模塊：微課學(xué)習(xí)、作品欣賞、作業(yè)互評(píng)、作品上傳、資源下載和教師后臺(tái)管理模塊。

（1）微課學(xué)習(xí)模塊。微課是以闡釋某一知識(shí)點(diǎn)為目標(biāo)，以短小精悍的在線(xiàn)視頻為表現(xiàn)形式，以學(xué)習(xí)或教學(xué)應(yīng)用為目的的在線(xiàn)視頻教學(xué)[3]。該模塊中包含大量的Flash小動(dòng)畫(huà)的教學(xué)視頻，時(shí)間大多控制在5-10分鐘，將經(jīng)典的動(dòng)畫(huà)制作技巧融合在不同的動(dòng)畫(huà)作品中，主題突出，內(nèi)容精細(xì)。微課的錄制采用了錄屏軟件，除了演示在Flash環(huán)境下的操作過(guò)程，還有教師的步驟講解。微課學(xué)習(xí)的操作畫(huà)面和聲音同步，讓學(xué)習(xí)者利用網(wǎng)絡(luò)平臺(tái)可以收獲實(shí)時(shí)課堂的學(xué)習(xí)效果。在學(xué)習(xí)微課的同時(shí)，平臺(tái)中有當(dāng)前動(dòng)畫(huà)制作的詳細(xì)文檔，學(xué)習(xí)者可以按照其中的步驟逐一實(shí)踐。

（2）作品欣賞模塊。該模塊又分為三部分內(nèi)容，分別是獲獎(jiǎng)作品欣賞、歷年學(xué)生優(yōu)秀作業(yè)作品欣賞和分類(lèi)作品欣賞。獲獎(jiǎng)作品指的是在我校每年舉辦的計(jì)算機(jī)文化節(jié)-動(dòng)漫作品大賽中獲獎(jiǎng)的作品，作品的來(lái)源已不再局限于藝術(shù)學(xué)院和體育學(xué)院的學(xué)生，而是來(lái)自全校學(xué)生的共同參與，作品的主題廣泛如環(huán)境保護(hù)、我的祖國(guó)、愛(ài)與奉獻(xiàn)等。歷年學(xué)生作業(yè)作品是指教師每年給上課的學(xué)生布置不同主題的Flash作業(yè)，如翻譯小助手、旋轉(zhuǎn)的文字變幻、詩(shī)朗誦、探照燈、一分鐘Flash MV、睡前小故事等，教師篩選其中優(yōu)秀的作品上傳到學(xué)習(xí)平臺(tái)中供大家欣賞。分類(lèi)作品指的是將學(xué)生的作品按照Flash動(dòng)畫(huà)制作的技巧分成四類(lèi)，分別是逐幀動(dòng)畫(huà)、傳統(tǒng)補(bǔ)間、補(bǔ)間動(dòng)畫(huà)和補(bǔ)間形狀，這四大類(lèi)涵蓋了Flash動(dòng)畫(huà)制作的基本技巧，也是學(xué)生們?cè)趯W(xué)習(xí)過(guò)程中必須要熟練掌握的內(nèi)容。

（3）作業(yè)互評(píng)模塊。作業(yè)互評(píng)的前提是教師已經(jīng)將學(xué)生提交的動(dòng)畫(huà)作品初步篩選并上傳到平臺(tái)上，要求學(xué)生們根據(jù)教師提供的評(píng)分標(biāo)準(zhǔn)對(duì)作品進(jìn)行打分評(píng)價(jià)，得分在一定標(biāo)準(zhǔn)之上的標(biāo)記為優(yōu)秀作品并成為平臺(tái)中的“作品欣賞”作品。

（4）作品上傳模塊。作品上傳是教師專(zhuān)屬權(quán)限，學(xué)生不能直接上傳自己的作品，但學(xué)生可以向教師提出上傳的申請(qǐng)，當(dāng)教師審核通過(guò)了學(xué)生作品之后，學(xué)生可將作品的詳細(xì)信息如作者、作品名稱(chēng)、作品意義以及作品等內(nèi)容在頁(yè)面提交，作品文件必須符合標(biāo)準(zhǔn)的提交格式，教師在后臺(tái)管理模塊再次審核作品提交信息后才能完成作品的上傳。

（5）資源下載模塊。可以下載的資源包括教學(xué)大綱、學(xué)時(shí)安排與上課進(jìn)度、電子課件、Flash CS6的安裝軟件、音樂(lè)裁剪軟件、視頻和音頻格式轉(zhuǎn)換軟件、動(dòng)畫(huà)元件素材、動(dòng)畫(huà)制作技巧文章等內(nèi)容，學(xué)生可以在學(xué)習(xí)過(guò)程中下載這些重要的資源。

（6）教師后臺(tái)管理模塊。教師的后臺(tái)管理可以實(shí)現(xiàn)的操作是：作品查詢(xún)、作品的審核與上傳、作品下架、學(xué)生管理與教師管理。作品查詢(xún)可以實(shí)現(xiàn)多條件查詢(xún)，如作品名稱(chēng)、作者、發(fā)布時(shí)間、點(diǎn)擊量等。作品的審核與上傳是學(xué)生按照規(guī)定的文檔格式上傳作品信息及作品之后，教師在后臺(tái)審核信息的真實(shí)性和作品的品質(zhì)，確定無(wú)誤后點(diǎn)擊上傳，學(xué)生在前臺(tái)頁(yè)面就可以欣賞到最新的優(yōu)秀作品。作品下架是指隨著優(yōu)秀作品的不斷積累，將一些內(nèi)容缺乏新意或者不屬于當(dāng)前教學(xué)大綱內(nèi)容的作品從前臺(tái)網(wǎng)頁(yè)中取消瀏覽的鏈接，但下架并不是刪除，學(xué)生在前臺(tái)看不到下架的作品，但服務(wù)器上仍然保存了該作品。學(xué)生管理主要是實(shí)現(xiàn)將當(dāng)前教學(xué)班的學(xué)生加入合法瀏覽用戶(hù)名單，默認(rèn)學(xué)生的學(xué)號(hào)為登錄號(hào)，密碼也與學(xué)號(hào)相同。同時(shí)，也可以添加、查詢(xún)、刪除學(xué)生。教師管理的對(duì)象分為普通任課教師和管理員兩種，可以添加與刪除教師，也可以將教師權(quán)限升級(jí)為管理員權(quán)限，以實(shí)現(xiàn)作品的上傳和下架。

2 動(dòng)畫(huà)作品展示平臺(tái)的實(shí)現(xiàn)

基于微課學(xué)習(xí)的Flash動(dòng)畫(huà)作品展示平臺(tái)，依托于中國(guó)礦業(yè)大學(xué)服務(wù)器云，利用學(xué)校的云計(jì)算資源為教學(xué)服務(wù)。系統(tǒng)內(nèi)嵌FTP服務(wù)器，管理員可以方便有效地上傳分享文件，F(xiàn)lash素材、制作工具、優(yōu)秀作品等都可以通過(guò)訪(fǎng)問(wèn)網(wǎng)站素材下載板塊進(jìn)行下載。系統(tǒng)采用B/S設(shè)計(jì)模式，這使得系統(tǒng)具有跨平臺(tái)展示的能力，Linux，Windows，Mac OS等系統(tǒng)，借助瀏覽器均能獲得統(tǒng)一的展示。同時(shí)平臺(tái)擁有高效的擴(kuò)展性，管理員僅僅需要在服務(wù)器上對(duì)系統(tǒng)進(jìn)行升級(jí)，客戶(hù)端便可以獲得最新應(yīng)用。系統(tǒng)設(shè)計(jì)工具采用的是WebStorm，WebStorm具有優(yōu)秀的代碼提示功能與代碼跟蹤功能[4]，與Google瀏覽器搭配方便開(kāi)發(fā)人員進(jìn)行調(diào)試。頁(yè)面采用HTML5+ CSS3美化，借助HTML5的語(yǔ)義化標(biāo)簽，編寫(xiě)易于理解的代碼如定義header、main和footer分別代表頁(yè)眉，正文，頁(yè)腳；借助CSS3可以編寫(xiě)出優(yōu)美的過(guò)渡效果，文字陰影，懸浮特效。圖片的加載全部采用AJAX異步獲取，并進(jìn)行事件回調(diào)處理，完美解決傳統(tǒng)加載方式遇到圖片獲取失敗時(shí)影響網(wǎng)頁(yè)整體布局與美觀度的問(wèn)題，同時(shí)可以對(duì)圖片顯示效果進(jìn)行處理如飛入與飛出、百葉窗、旋轉(zhuǎn)放大等特效；對(duì)于CSS、JS等靜態(tài)資源的加載采用CDN云加速技術(shù)，多站點(diǎn)響應(yīng)，可靠性高，就近獲取等優(yōu)點(diǎn)，大大提高網(wǎng)站健康程度與用戶(hù)體驗(yàn)。

該系統(tǒng)將教學(xué)資源分為可視化資源與非可視化資源，可視化資源如SWF格式的動(dòng)畫(huà)、微課視頻、動(dòng)畫(huà)制作步驟文檔等，借助HTML豐富的排版能力對(duì)其進(jìn)行美化，使用后可以直接在瀏覽器中瀏覽。可視化資源主要用來(lái)輔助課堂教學(xué)，幫助學(xué)生課下的自主學(xué)習(xí)；對(duì)于非可視化資源如可下載的Flash安裝軟件、動(dòng)畫(huà)素材、電子課件等，借助FTP服務(wù)對(duì)用戶(hù)開(kāi)放下載。這些非可視化的資源主要用于課程的教學(xué)實(shí)踐，學(xué)生在實(shí)驗(yàn)課環(huán)節(jié)將課堂內(nèi)容結(jié)合多樣化的素材，再根據(jù)教師的作業(yè)安排設(shè)計(jì)出具有創(chuàng)造力的動(dòng)畫(huà)作品。

3 微課學(xué)習(xí)平臺(tái)的實(shí)現(xiàn)

微課學(xué)習(xí)平臺(tái)基于響應(yīng)式布局框架，利用新一代瀏覽器媒體查詢(xún)API對(duì)用戶(hù)的設(shè)備尺寸進(jìn)行查詢(xún)，然后將顯示系統(tǒng)分為大型（PC端，大于960px），中型（平板，大于760px），小型（手機(jī)，小于760px），這些數(shù)據(jù)來(lái)自于Twitter對(duì)用戶(hù)數(shù)據(jù)進(jìn)行分析得到的最佳實(shí)踐。該框架的優(yōu)勢(shì)在于只需要編寫(xiě)一套顯示系統(tǒng)，而其他顯示系統(tǒng)將由程序自動(dòng)生成。同時(shí)該平臺(tái)利用客戶(hù)端與服務(wù)器協(xié)同開(kāi)發(fā)模式，打破了瀏覽器僅僅用來(lái)顯示網(wǎng)頁(yè)的傳統(tǒng)觀念。雙端MVC的設(shè)計(jì)理念使得程序的設(shè)計(jì)向客戶(hù)端傾斜，對(duì)于數(shù)據(jù)密集型的功能在考慮安全性的同時(shí)，由客戶(hù)端承擔(dān)數(shù)據(jù)的獲取、數(shù)據(jù)的處理、模板的生成、視圖的生成、視圖的展示等，充分利用用戶(hù)富裕的計(jì)算資源，分擔(dān)服務(wù)器的計(jì)算壓力，由于縮減了數(shù)據(jù)來(lái)回傳遞的次數(shù)，使得響應(yīng)速度大大提高。

微課學(xué)習(xí)平臺(tái)同時(shí)將優(yōu)秀作品的制作步驟以文檔的形式展示出來(lái)，為學(xué)生邊學(xué)習(xí)邊實(shí)踐提供了有效的視頻和文檔指導(dǎo)。教師在每個(gè)主題的微課視頻最后發(fā)布本次主題的設(shè)計(jì)任務(wù)，讓學(xué)生提前預(yù)習(xí)，作品完成后提交至系統(tǒng)后臺(tái)，由管理員統(tǒng)一審核與發(fā)布。學(xué)生可以在同類(lèi)作品的對(duì)比中發(fā)現(xiàn)作品的優(yōu)勢(shì)與不足，取長(zhǎng)補(bǔ)短，由此來(lái)提高學(xué)生的整體設(shè)計(jì)水平。

4 結(jié)語(yǔ)

基于微課學(xué)習(xí)的Flash動(dòng)畫(huà)作品展示平臺(tái)結(jié)合當(dāng)前網(wǎng)絡(luò)資源豐富、手機(jī)智能化和普及化的時(shí)代特點(diǎn)，極大的激發(fā)了學(xué)生自主學(xué)習(xí)的積極性，促進(jìn)了非計(jì)算機(jī)專(zhuān)業(yè)的《大學(xué)計(jì)算機(jī)基礎(chǔ)》課程教學(xué)方法的改進(jìn)和教學(xué)活動(dòng)的創(chuàng)新，讓學(xué)生在實(shí)踐中驗(yàn)證理論的有效性，使抽象的理論內(nèi)容內(nèi)涵深化、外延擴(kuò)展[5]。與此同時(shí)，我校每年都會(huì)組織大學(xué)生計(jì)算機(jī)文化節(jié)等計(jì)算機(jī)應(yīng)用技能的比賽，其中，動(dòng)畫(huà)制作便是其中的一項(xiàng)。同時(shí)，江蘇省以及全國(guó)也都會(huì)開(kāi)展相應(yīng)的動(dòng)畫(huà)作品大賽。因此，建立基于微課學(xué)習(xí)的動(dòng)畫(huà)作品展示平臺(tái)，可以鼓勵(lì)更多對(duì)動(dòng)畫(huà)制作有興趣并且有特長(zhǎng)的優(yōu)秀學(xué)生上傳自己的作品，這既是為參加校級(jí)、省級(jí)、全國(guó)動(dòng)漫大賽進(jìn)行的作品儲(chǔ)備，又是學(xué)生們之間在數(shù)字網(wǎng)絡(luò)平臺(tái)互相交流和學(xué)習(xí)的途徑。

[1]胡鐵生.“微課”：區(qū)域教育信息資源發(fā)展的新趨勢(shì)[J].中國(guó)電化教育,2011(10):61-65.

[2]胡鐵生,周曉清.高校微課建設(shè)的現(xiàn)狀分析與發(fā)展對(duì)策研究[J].現(xiàn)代教育技術(shù),2014(2):5-13.

[3]焦建利.微課與翻轉(zhuǎn)課堂中的學(xué)習(xí)活動(dòng)設(shè)計(jì)[J].中國(guó)教育信息化,2014(24):4-6.

[4]百度百科

[5]王賦騰,孫曉榮,劉翠玲.示范課程網(wǎng)站與微課學(xué)習(xí)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J].教育教學(xué)論壇,2016(12):237-238.

[6]季益龍,張閃閃,趙俞凌.基于微課程的自主學(xué)習(xí)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].國(guó)教育信息化,2015(21):88-91.

Design and Im p lementation of Flash Anim ation Works Exhibition Platform Based on M icro-Course Learning

LIXiang-qun1，ZHANG Peng-cheng2，LIU Bai-long1

（1.Department of Computer Science,China University of Mining and Technology,Xuzhou 221116；2.School of Chem ical Engineering,China University of Mining and Technology,Xuzhou 221116）

University Computer Basis course is required for non-computer majors,Flash animation design is one of the important content full of practical and comprehensive,relies only on traditional classroom teaching has been unable tomeet the students'demand for knowledge. With the arrival of the era ofm icro,the micro-course become the mainstream channels of students'autonomous learning,analyzes the idea of design the Flash animation display platform,usesWebStorm as a tool to realize the design of E-learning platform.Practice has proved that the establishment of amicro-course learning based Flash animation display platform,can improve students'autonomous learning initiative and effective promotion of curriculum teachingmethods and innovation of teaching activities.

Micro-Course;Flash Animation;Works Exhibition Platform;WebStorm

1007-1423（2017）03-0022-04

10.3969/j.issn.1007-1423.2017.03.006

李向群（1973-），女，山東省濟(jì)南人，博士，副教授，研究方向?yàn)橛?jì)算機(jī)應(yīng)用

2016-11-29

2017-01-15

中國(guó)礦業(yè)大學(xué)課程建設(shè)與教學(xué)改革項(xiàng)目（No.2015JC02）

張鵬程（1996-），男，江蘇徐州人，在讀本科，研究方向?yàn)閃eb應(yīng)用

劉佰龍（1983-），男，江蘇徐州人，博士，講師，研究方向?yàn)橹悄軝C(jī)器人