面向數(shù)字化教育資源的Flash到HTML5轉(zhuǎn)換研究

鐘岑岑 魏蔚

摘 要：作為數(shù)字化教育資源的主流實現(xiàn)技術(shù)，F(xiàn)lash在移動互聯(lián)時代中的制約性日益凸顯，而HTML5則以兼容、實用、互通等特點(diǎn)走上了舞臺。在這種情況下，目前眾多的Flash教育資源將何去何從？文章從減少重新開發(fā)代價的角度出發(fā)，設(shè)想是否可實現(xiàn)從Flash到HTML5的直接轉(zhuǎn)換，并圍繞5個工具進(jìn)行6組轉(zhuǎn)換實驗。結(jié)果表明，基于現(xiàn)有工具50個樣例的轉(zhuǎn)換效果并不理想。因此，從可持續(xù)和可擴(kuò)展角度考慮，盡早摒棄Flash而直接采用HTML5開發(fā)教育資源才是長久之道。

關(guān)鍵詞：Flash；HTML5；數(shù)字化教育資源

中圖分類號： G40-057 文獻(xiàn)標(biāo)志碼：B 文章編號：1673-8454（2015）18-0079-05

21世紀(jì)初，動畫視頻素材、多媒體演示型課件等數(shù)字化教育資源在計算機(jī)技術(shù)的支撐下得到了迅速普及。其中，F(xiàn)lash因其效果炫麗、操作簡單等特點(diǎn)成為了當(dāng)時乃至現(xiàn)今教育資源的主流開發(fā)技術(shù)，由此創(chuàng)作生成的Flash教育資源在課堂教學(xué)、教育游戲、資源網(wǎng)站建設(shè)等領(lǐng)域均得到了廣泛的應(yīng)用。

近些年來，隨著信息技術(shù)和移動互聯(lián)的快速發(fā)展，電子課本、數(shù)字教材等教育資源新形態(tài)相繼出現(xiàn)，人們對此提出了富媒體式的內(nèi)容呈現(xiàn)、友好的人機(jī)交互、便捷的終端移植等新要求，而這也使得Flash技術(shù)及Flash教育資源的制約性日益明顯。一方面，喬布斯曾公開表示“Flash是為了使用PC而設(shè)計的，不適合用于用手指操作的觸屏設(shè)備”[1]；另一方面，Adobe公司于2012年宣布不再為Android提供Adobe Flash Player插件的更新，更是將Flash關(guān)在了約83.6%的移動市場之外。而這些因素也就限制了Flash教育資源在具有iOS、Android4.1及其更高版本系統(tǒng)的移動終端中的使用。

近年來，HTML5[2]迅速崛起，多媒體和交互、圖形和特效、本地存儲等新特性以及跨平臺的特點(diǎn)使其較Flash在移動互聯(lián)網(wǎng)中體現(xiàn)了更強(qiáng)的可用性。目前眾多網(wǎng)站、APP乃至電子書、電子課本、數(shù)字教材等已轉(zhuǎn)而支持或直接使用這項技術(shù)。由此看來，采用HTML5作為數(shù)字化教育資源的開發(fā)工具應(yīng)是連接移動終端與資源、增強(qiáng)用戶體驗的最直接方式，并已顯現(xiàn)為當(dāng)前的主流趨勢。在這種形勢下，目前已經(jīng)存在的基于Flash的眾多教育資源將何去何從？正在進(jìn)行的資源開發(fā)是否還可以繼續(xù)采用Flash？圍繞這些疑問，本文從減少重新開發(fā)代價的角度出發(fā)，設(shè)想是否可以實現(xiàn)從Flash到HTML5的直接轉(zhuǎn)換，從而得到與原始動畫效果相一致的基于HTML5的教育資源。

基于上述考慮，本文設(shè)計了從Flash到HTML5的轉(zhuǎn)換實驗，并對轉(zhuǎn)換效果以及上述問題進(jìn)行了討論，從而為未來數(shù)字化教育資源的建設(shè)和擴(kuò)展提供了參考依據(jù)。

本文結(jié)構(gòu)安排如下：第一部分對Flash、HTML5在數(shù)字化教育資源開發(fā)中的應(yīng)用現(xiàn)狀進(jìn)行分析；第二部分介紹Flash到HTML5轉(zhuǎn)換實驗的設(shè)計思路；第三部分描述實驗結(jié)果并展開討論；第四部分給出研究結(jié)論與啟示。

一、Flash、HTML5在數(shù)字化教育資源開發(fā)中的應(yīng)用現(xiàn)狀

Flash動畫包含豐富的聲音、圖片、視頻，并允許用戶使用鍵盤或鼠標(biāo)進(jìn)行交互，在場景呈現(xiàn)、實驗演示等教學(xué)活動中發(fā)揮著重要的作用。Flash教育資源（即應(yīng)用Flash及Flash相關(guān)軟件開發(fā)創(chuàng)作而形成的、在教育教學(xué)領(lǐng)域有直接應(yīng)用價值或潛在應(yīng)用價值的信息資源[3]）概念的引出引發(fā)了一系列研究課題，從最為直接的多媒體課件制作[3] [4]，到基于內(nèi)容的Flash動畫檢索和管理[5][6]，再到Flash資源文檔的轉(zhuǎn)換以及反編譯[7]，均為Flash教育資源開發(fā)、利用與管理的進(jìn)一步推進(jìn)提供了條件。然而，隨著移動互聯(lián)時代的到來，F(xiàn)lash技術(shù)本身的跨平臺、交互性等限制愈發(fā)明顯，因此也就制約了上述資源在移動終端中的使用。

HTML5的跨平臺、音視頻技術(shù)、交互性等優(yōu)勢令人們產(chǎn)生了取代Flash的想法，隨著其在網(wǎng)站、APP等大眾領(lǐng)域的迅速普及，開發(fā)者也逐漸傾向于直接采用這種技術(shù)進(jìn)行移動學(xué)習(xí)平臺[8]、教育游戲[9]等教育資源的開發(fā)，尤其對于電子課本、數(shù)字教材等近些年來出現(xiàn)的資源新形態(tài)更是如此。例如：在2013年的“HTML5守望者暨開發(fā)者日全國巡回”活動中，英特爾給出了基于HTML5技術(shù)的電子課本解決方案，有效地增強(qiáng)了電子課本的內(nèi)容表現(xiàn)力和互動性；相關(guān)研究也表明[10]，在諸多電子課本基礎(chǔ)技術(shù)標(biāo)準(zhǔn)的調(diào)查中，HTML5的應(yīng)答率最高。

而作為當(dāng)前電子教材的一大主流格式[11]，電子書標(biāo)準(zhǔn)EPUB3.0更是進(jìn)一步推進(jìn)了HTML5的應(yīng)用。例如：作為較早研發(fā)數(shù)字化教科書的韓國，已采用HTML5作為標(biāo)準(zhǔn)來實現(xiàn)教科書的內(nèi)容顯示，基于EPUB3.0實現(xiàn)了包含多媒體資料、用語詞典、評價項、補(bǔ)充資料等在內(nèi)的多樣課文；數(shù)字化學(xué)習(xí)資源中心在制作基于iOS的全媒體數(shù)字教材時采用了iBooks Author和EPUB3.0制作電子書，同時根據(jù)教學(xué)需要輔以HTML5、CSS3、jQuery等技術(shù)開發(fā)特定功能，從而使數(shù)字教材具備更好的交互效果。此外，北京師范大學(xué)出版社、天聞數(shù)媒科技有限公司等單位所研發(fā)的數(shù)字教材也紛紛采用了HTML5這項技術(shù)。

由此可見，將HTML5作為數(shù)字化教育資源開發(fā)工具的這一形勢越發(fā)明朗，但是，目前市面上仍然存在大量的Flash教育資源，如：在國家基礎(chǔ)教育資源網(wǎng)[12]、優(yōu)課網(wǎng)[13]、人教網(wǎng)[14]等教育資源網(wǎng)站中這種資源就占有較大比重，甚至一部分正在進(jìn)行的開發(fā)也仍在使用Flash。這不禁令人思考，在Flash不易于跨平臺使用而HTML5已是大勢所趨的情況下，這些已經(jīng)存在或正在開發(fā)的Flash教育資源是否可以或?qū)⑷绾卫^續(xù)使用？

現(xiàn)有研究并未給出明確答案，本文則基于減少重新開發(fā)的成本和代價的考慮，從將Flash資源轉(zhuǎn)換為HTML5資源的角度進(jìn)行分析討論，從而為Flash教育資源的處理以及未來數(shù)字化教育資源的開發(fā)建設(shè)提供參考。

二、Flash到HTML5的轉(zhuǎn)換實驗設(shè)計

對于已經(jīng)存在或正在開發(fā)的Flash教育資源，首先考慮的就是從Flash到HTML5的轉(zhuǎn)換問題，即通過類型轉(zhuǎn)換直接得到與原始Flash動畫效果相一致的基于HTML5的教育資源，從而減少重新開發(fā)的成本和代價。

從這一角度出發(fā)，本實驗的目的在于對Flash轉(zhuǎn)換為HTML5進(jìn)行基于工具的測試，并重點(diǎn)關(guān)注實驗樣例轉(zhuǎn)換成功的程度，對于不成功的部分是否需要人工干預(yù)來促成轉(zhuǎn)換等問題，主要內(nèi)容涉及轉(zhuǎn)換工具的收集、實驗樣例的設(shè)計、轉(zhuǎn)換測試的設(shè)置以及轉(zhuǎn)換結(jié)果的評價標(biāo)準(zhǔn)等方面，具體如下：

1.轉(zhuǎn)換工具的收集

本實驗以“Flash轉(zhuǎn)換HTML5”、“Flash HTML5 convert”等為關(guān)鍵詞在百度、Google等網(wǎng)站搜索轉(zhuǎn)換工具。排除“將Flash轉(zhuǎn)換為視頻的偽HTML5轉(zhuǎn)換工具（如：Recool SWF to HTML5 Converter）”以及“僅實現(xiàn)還原顯示的瀏覽器插件（如：Smokescreen）”等干擾項，本實驗選定“將Flash文件（以SWF、FLA格式存儲）轉(zhuǎn)換為HTML5文件”的5個工具，如表1所示。

2.實驗樣例的設(shè)計

Flash教育資源大體包括單幀式、順序播放式、交互式、嵌入媒體式等呈現(xiàn)形式；另外，考慮到Flash的矢量特性是移動互聯(lián)時代下保證不同屏幕大小或縮放條件下基本閱讀體驗的重要支撐，因此，本實驗主要關(guān)注以下動畫效果的轉(zhuǎn)換成功與否：

①矢量性質(zhì)：圖形、靜態(tài)文本、輸入文本、動態(tài)文本；

②基本類型動畫：逐幀動畫、傳統(tǒng)補(bǔ)間動畫、補(bǔ)間動畫、形狀補(bǔ)間動畫、引導(dǎo)動畫、遮罩動畫；

③交互：按鈕點(diǎn)擊、鼠標(biāo)滑過、其它鼠標(biāo)交互、鍵盤交互、其它組件交互；

④嵌入媒體：流式音頻、音頻事件同步、視頻、動畫剪輯。

值得注意的是，有些動畫文件不只局限于這些單一類型，而是其中兩種、甚至三種的復(fù)合形式。基于此，本實驗從第二代“人教數(shù)字教材”包含的Flash動畫文件、文獻(xiàn)[20]提供的樣例以及互聯(lián)網(wǎng)[21]中選用50個實驗樣例，基本保證每種單一類型至少有兩個樣例有所包含。注：由于Flash文件來源的不同，50個樣例均是以SWF類型存儲，只有其中的39個存在FLA存儲形式。

3.轉(zhuǎn)換測試的設(shè)置

本實驗的實現(xiàn)思路是基于每一種工具對所有樣例進(jìn)行轉(zhuǎn)換測試，即根據(jù)表1中5個工具可處理的文件類型，一方面將50個以SWF類型存儲的樣例進(jìn)行“Free Flash to HTML5 Online Converter”、“碩思閃客精靈”和“Google Swiffy”三個工具的轉(zhuǎn)換測試；另一方面，將其中39個FLA類型樣例進(jìn)行“Adobe Wallaby”和“Toolkit for CreateJS”兩個工具的測試。另外，由于“Toolkit for CreateJS”可同時作為Flash制作軟件“Adobe Flash Pro CS6”和“Adobe Flash Pro CC”的插件，因此該工具對應(yīng)兩組實驗。綜上所述，本實驗涉及5個工具共6組轉(zhuǎn)換實驗。

4.轉(zhuǎn)換結(jié)果的評價標(biāo)準(zhǔn)

對于每一組實驗的轉(zhuǎn)換結(jié)果，本實驗擬從兩個角度來進(jìn)行統(tǒng)計描述：一方面，從樣例整體的轉(zhuǎn)化效果角度考慮，本實驗將轉(zhuǎn)換結(jié)果歸為如下四個狀態(tài)，并統(tǒng)計樣例轉(zhuǎn)換比率（即不同轉(zhuǎn)換狀態(tài)的樣例數(shù)所占整體樣例數(shù)的比率）：

①不符合工具要求：如文件大小的限制；

②轉(zhuǎn)換過程出錯：無法生成HTML文件；

③轉(zhuǎn)換結(jié)果有誤：HTML效果與原始樣例的Flash效果有出入；

④轉(zhuǎn)換成功：HTML效果與原始樣例的Flash效果完全一致。

另一方面，從上述提到的動畫效果類型的角度考慮，本實驗統(tǒng)計不同效果類型的轉(zhuǎn)換成功率（即在所有生成的HTML文件中，對于某種類型成功轉(zhuǎn)換的HTML文件數(shù)與理應(yīng)成功轉(zhuǎn)換的HTML文件數(shù)的比率）。

三、實驗結(jié)果與討論

基于上述設(shè)計思路，表2列出了包含5個工具在內(nèi)的6組實驗的轉(zhuǎn)換結(jié)果，從中可知：

（1）從整個樣例的轉(zhuǎn)換比率來看，轉(zhuǎn)換結(jié)果并不理想。其中，轉(zhuǎn)換成功比率最高的“Google Swiffy”僅為42%（即50個樣例中僅有21個的轉(zhuǎn)換效果與原始Flash效果完全一致），而最低的是“Adobe Wallaby”和作為“Adobe Flash Pro CS6”插件的“Toolkit for CreateJS”，僅達(dá)到23%。

（2）從HTML文件所實現(xiàn)的動畫效果類型來看，只有部分類型能夠?qū)崿F(xiàn)成功轉(zhuǎn)換，并且分布相對集中，即不同工具之間無法形成互補(bǔ)以保證所有效果的轉(zhuǎn)換成功。

具體如下：①對于矢量性質(zhì)的支持：圖形和靜態(tài)文本的矢量性質(zhì)可以在部分工具中得到保持，如：“Free Flash to HTML5 Online Converter”和“碩思閃客精靈”是用SVG標(biāo)簽描述來實現(xiàn)，而“Adobe Wallaby”則是直接從FLA中導(dǎo)出圖形的SVG文件，然后在HTML文件中引用這一資源；對于動態(tài)和輸入類型的文本，其矢量形式所有的工具均不支持；另外，由于“Google Swiffy”和“Toolkit for CreateJS”是將矢量對象用位圖來表示，因此，在這兩個工具的轉(zhuǎn)換生成文件中矢量性質(zhì)均丟失。

②對于交互效果的支持：從整體來看，現(xiàn)有工具對于交互效果的轉(zhuǎn)換不夠理想，尤其是下拉框、單選框等組件以及鍵盤的交互則大多無法實現(xiàn)；但是，相對于其它工具的無力，“Google Swiffy”對于基于鼠標(biāo)的以及ActionScript的部分交互可以提供一定程度的支持。

③對于嵌入媒體的支持，現(xiàn)有工具仍處于初級階段：對于視頻，所有工具生成的HTML都無法實現(xiàn)視頻的載入和播放；而音頻也僅在作為“事件”嵌入時，才有可能實現(xiàn)，并且在動畫較為復(fù)雜時，極易受到其它因素的影響，因此并不穩(wěn)定。

（3）從轉(zhuǎn)換生成的文件來看，素材的可更新性和代碼的易修改性與轉(zhuǎn)換工具所支持的轉(zhuǎn)換方式密切相關(guān)。

其中：①輸入為SWF時：涉及“Free Flash to HTML5 Online Converter”、“碩思閃客精靈”和“Google Swiffy”三個工具，它們是將圖像用base64進(jìn)行編解碼，不易后續(xù)的圖像素材變更；代碼方面采用的是基于JSON的JavaScript編寫方式，存在代碼可讀性差和不易修改的問題。

②輸入為FLA時：涉及“Adobe Wallaby”和“Toolkit for CreateJS”兩個工具，它們是將多媒體素材導(dǎo)出，并采用HTML標(biāo)簽進(jìn)行嵌入，易更新；代碼方面，采用HTML標(biāo)簽編寫方式，相對來說更易修改。

（4）在基于工具轉(zhuǎn)換的思路下，可從文件類型和大小以及是否保持矢量性質(zhì)的角度來選擇具體的轉(zhuǎn)換工具，但是無論選擇哪種工具，都必須加入人工干預(yù)。

具體體現(xiàn)在：

①對于非交互和無媒體嵌入的簡單動畫，上述5個工具大多可以成功轉(zhuǎn)換，但轉(zhuǎn)換結(jié)果的正確與否仍需要人工確認(rèn)；

②對于嵌入媒體的動畫，音頻事件同步可由作為“Adobe Flash Pro CC”插件的“Toolkit for CreateJS”來實現(xiàn)，其它情況需要借助HTML5的多媒體新特性進(jìn)行人工加入；

③對于交互的實現(xiàn)，按鈕點(diǎn)擊交互可由“Google Swiffy”實現(xiàn)，但其它形式的交互應(yīng)重新編寫。

綜上可知，現(xiàn)有工具大多僅支持部分動畫效果的轉(zhuǎn)換，而對于由交互、媒體嵌入等復(fù)雜單一效果或多種效果復(fù)合形成的Flash文件，則不易得到與原始動畫效果相一致的轉(zhuǎn)換結(jié)果。當(dāng)采用單一工具進(jìn)行轉(zhuǎn)換時，對于大量可能轉(zhuǎn)換失敗的數(shù)據(jù)，應(yīng)延續(xù)該工具采用的HTML5框架來人工編寫相應(yīng)的HTML5文件，以保證代碼的一致性和易維護(hù)。相比之下，雖然將多種工具相結(jié)合以求達(dá)到最大的轉(zhuǎn)換成功率的處理方式更為省時，但是會留下代碼不兼容、可擴(kuò)展性差等多種隱患。

四、結(jié)論與啟示

用HTML5取代Flash作為數(shù)字化教育資源的開發(fā)工具，符合當(dāng)前移動技術(shù)和互聯(lián)網(wǎng)發(fā)展的要求。對于目前已經(jīng)存在或正在開發(fā)的以Flash為主要實現(xiàn)技術(shù)的眾多教育資源，根據(jù)上述轉(zhuǎn)換實驗可知，由于現(xiàn)有轉(zhuǎn)換工具的效率普遍較低，因此成功地將其直接轉(zhuǎn)換為HTML5資源并不是一個簡單的過程，轉(zhuǎn)換之路仍有待工具功能的進(jìn)一步提升。此時，即使選擇工具進(jìn)行轉(zhuǎn)換，也應(yīng)在權(quán)衡現(xiàn)有資源呈現(xiàn)的主要動畫效果與工具支持的效果之后，選用單一工具以保持代碼的一致性，并且需要加入大量的人工干預(yù)。

因此，從可持續(xù)性和可擴(kuò)展性角度考慮，本文認(rèn)為，盡早摒棄Flash而直接采用HTML5作為數(shù)字化教育資源的開發(fā)工具才是長久之道，并且應(yīng)盡早建立相關(guān)的開發(fā)和測試標(biāo)準(zhǔn)，進(jìn)而對未來教育資源的構(gòu)建、擴(kuò)展和傳播起到積極的推進(jìn)作用。

參考文獻(xiàn)：

[1]Thoughts on Flash [EB/OL]. http：//www.apple.com/ hotnews/thoughts-on-flash.

[2]HTML5[EB/OL].http：//www.w3.org/TR/html5.

[3]鄭小軍.Flash教育資源的理論研究與實踐探討[J].電化教育研究，2002（2）：49-53.

[4]劉斌，衣勉.基于Flash的課件制作與應(yīng)用[J].科技廣場，2012（7）：102-105.

[5]孟祥增.基于內(nèi)容的Flash網(wǎng)絡(luò)教學(xué)資源檢索研究[J].電化教育研究，2009（9）：77-79.

[6]劉菲，孟祥增.基于場景的Flash動畫摘要研究及其教育應(yīng)用[J].現(xiàn)代教育技術(shù)，2009，19（5）：111-114.

[7]黃立冬.Flash教育資源文檔的處理技術(shù)綜述[J].中國教育信息化，2009（4）：63-65.

[8]陳楠楠.基于HTML5的移動學(xué)習(xí)資源設(shè)計及應(yīng)用研究[D].西安：西安電子科技大學(xué)，2013.

[9]馬少雄.基于HTML5的教育游戲設(shè)計與開發(fā)——以“Impact”打字游戲為例[D].上海：上海師范大學(xué)，2013.

[10]許哲，顧小清.電子課本國際標(biāo)準(zhǔn)的發(fā)展與追蹤調(diào)研[J].現(xiàn)代遠(yuǎn)程教育研究，2014（1）：62-71.

[11]王然，郭鴻.電子教材的研究與設(shè)計[J].中國遠(yuǎn)程教育，2014（5）：82-87.

[12]國家基礎(chǔ)教育資源網(wǎng)[EB/OL]. http：//www.cbern. gov.cn/derscn/portal/index.html.

[13]優(yōu)課網(wǎng)[EB/OL].http：//www.uken.cn.

[14]人教網(wǎng)[EB/OL].http：//www.pep.com.cn.

[15]Free Flash to HTML5 Online Converter[EB/OL].http：//www.flash-to-html5.net.

[16]碩思閃客精靈[EB/OL]. http：//www.shankejingling.com.

[17]Google Swiffy [EB/OL]. https：//www.google.com/

doubleclick/studio/swiffy.

[18]Adobe Wallaby [EB/OL].http：//en.wikipedia.org/wiki/Adobe_Wallaby.

[19]Toolkit for CreateJS [EB/OL].http：//www.adobe.com/devnet/createjs.html.

[20]賈勇，孟權(quán)國.完全掌握Flash CS6白金手冊[M].北京：清華大學(xué)出版社，2013：28-398.

[21]站長素材網(wǎng)[EB/OL]. http：//sc.chinaz.com/donghua/.

（編輯：李曉萍）