梁林慎

摘要：研究如何在課堂上講授用HTML5實現(xiàn)FLASH功能的教學方法，教學思路是首先說明在移動互聯(lián)網(wǎng)開發(fā)中HTML5實現(xiàn)FLASH功能的必要性，接著講授用HTML5實現(xiàn)FLASH的四個典型功能的方法，最后提出一種加深學生對知識深刻理解的教學方法：在W3School TIY平臺上演示教學內(nèi)容。

關(guān)鍵詞： HTML5；FLASH；在線演示；音視頻媒體；移動互聯(lián)網(wǎng)

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2015）11-0088-03

A Teaching Method for Replacing FLASH with HTML5 in Mobile Internet Development

LIANG Lin-shen

（The Technical Schools of Zhanjian in Guangdong， Zhanjian 524001，China）

Abstract： Study the method of teach students to implement FLASH effects using HTML5 in mobile device. Firstly explained the reason why we have to do this thing. Secondly， teach students to implement four typical effects of FLASH using HTML5， and finally introduce a novel method to make students deepen the understanding by using the W3School TIY platform.

Key words： HTML5； FLASH； audio and video media； mobile Internet

2014年10月，W3C宣布HTML5標準規(guī)范制定完成。HTML5能大大縮減HTML代碼的數(shù)量，并使編寫的HTML代碼變得更簡單。傳統(tǒng)的HTML代碼中有一堆代碼是苦澀難懂的，對于學生來說，他們根本看不懂這些東西；而HTML5極大改善代碼可讀性體驗，例如HTML的聲明方式要比傳統(tǒng)的HTML更友好一些。目前，大部分移動應(yīng)用程序和游戲開發(fā)者都選擇了HTML5作為開發(fā)言語，究其原因包括：1） HTML5技術(shù)的跨平臺性非常強大，基于HTML5開發(fā)的應(yīng)用可以實現(xiàn)完美的跨平臺使用； 2）簡單易用，并且支持語義標簽和ARIA，使使HTML5創(chuàng)建的網(wǎng)站更加簡單；3）支持音頻、視頻，通過HTML5的

1 HTML5實現(xiàn)FLASH功能的教學思路

在開展HTML5實現(xiàn)FLASH功能的教學內(nèi)容之前，必須學生明白一個很關(guān)鍵的問題，為什么要用HTML5實現(xiàn)FLASH功能，而不能直接使用FLASH呢？本文研究的教學思路如下：

首先，講述HTML5與FLASH在移動互聯(lián)網(wǎng)應(yīng)用開發(fā)中的現(xiàn)狀和地位，說明兩者的優(yōu)缺點，讓學生理解FLASH在移動平臺中存在哪些致命性的缺點，以及HTML5的優(yōu)點和它更適合在移動平臺中使用的原因。

其次，在學生理解了移動應(yīng)用開發(fā)中HTML5實現(xiàn)FLASH功能的必要性之后，我們開始講述HTML5實現(xiàn)FLASH功能的方法和技巧，同時為了避免講課內(nèi)容空泛，我們應(yīng)該選擇若干個具有代表性的開發(fā)實例，向?qū)W生具體地詳細地講述開發(fā)和實現(xiàn)的過程。

再次，為了進一步加深學生對所教知識的理解，教師可以結(jié)合W3School TIY平臺（http：//www.w3school.com.cn/tiy/t.asp），演示HTML5實現(xiàn)FLASH功能的具體實例。W3School TIY平臺是一個非常優(yōu)秀的HTML代碼在線測試工具，學生可以在W3School TIY平臺上輕松地編寫任意HTML代碼，并可以快速便捷地看到代碼的渲染效果。

最后，通過課程設(shè)計的形式，讓學生課后實際動手開發(fā)一個用HTML5實現(xiàn)FLASH功能的小任務(wù)，以達到鞏固知識和掌握技能的目的。

2 教學內(nèi)容

2.1 HTML5實現(xiàn)FLASH功能的必要性

學生可能會產(chǎn)生一個誤區(qū)，就是HTML5優(yōu)于FLASH，HTML5要取代FLASH。在講述HTML5實現(xiàn)FLASH功能的時候，必須要先讓學生明白，F(xiàn)LASH有其優(yōu)點，而且是一項一直在發(fā)展中的技術(shù)，它不會因為HTML5的出現(xiàn)而馬上消亡。相反，目前在很多應(yīng)用場合中，F(xiàn)LASH還是具有其他技術(shù)無法比擬的大勢。這些優(yōu)勢表現(xiàn)在：1）FLASH在PC端的普及率極高，遠遠超越了HTML5。目前，F(xiàn)LASH在個人計算機上的普及率達到98%以上，流行的瀏覽器幾乎都支持FLASH，F(xiàn)LASH的用戶數(shù)也高達20億。相反，只有大約40%的瀏覽器支持HTML5，而HTML5只有不到8億用戶。2）FLASH技術(shù)一直在發(fā)展，而且非常靈活。3）FLASH不存在兼容性問題，支持跨平臺。4）FLASH支持多種視頻編碼，為用戶提供簡單的網(wǎng)站串流影音機制，而目前的HTML5只支持兩種視頻編碼。

那么為什么有人認為HTML5會取代FLASH，為什么我們還學習HTML5實現(xiàn)FLASH功能的方法呢？原因是FLASH存在一些致命性的缺點：（1）FLASH容易宕機，喬布斯就曾經(jīng)批評過FLASH是導致MAC死機的原因之一；（2）FLASH在移動設(shè)備上的性能不佳，不能在移動設(shè)備上完美地運行；（3）FLASH的耗電量太大，大大降低了移動設(shè)備的續(xù)航時間，而續(xù)航時間對移動用戶來說是很重要的體驗參數(shù)?；谶@些原因，Adobe宣傳，放棄移動FLASH。因此，如果我們要在移動設(shè)備上實現(xiàn)像FLASH那樣生動的動畫效果，則必須采用HTML5來實現(xiàn)。

2.2 HTML5實現(xiàn)FLASH功能的方法和技巧

業(yè)界對HTML5的評價極高：“網(wǎng)頁開發(fā)者可以在不依賴第三方插件的時候，利用HTML5做出高級的圖像、字體、動畫和過濾效果”。HTML5實質(zhì)上是HTML+CSS3+JS的綜合體，它是一個無需插件的、開放免費的、對搜索引擎友好的一項新技術(shù)。利用HTML5，我們可以在不安裝任何第三方插件的情況下，實現(xiàn)生動的音視頻效果，以及FLASH能實現(xiàn)的交互效果。下面列舉三個典型的例子，讓學生輕松學會如何用HTML5實現(xiàn)FLASH功能：

1） 用HTML5實現(xiàn)音頻播放器功能。

如圖1所示，音頻播放器可以用HTML5的

圖1 音頻播放器

2） 用HTML5實現(xiàn)視頻播放器功能

如圖2所示，左邊是HTML5實現(xiàn)視頻播放器的代碼，右邊是瀏覽器中渲染的效果。在HTML5中，用

圖2 視頻播放器

3） 用HTML5實現(xiàn)對象的拖放功能

要實現(xiàn)對象的拖放功能，需要用到HTML5的一個新定義屬性：“draggable”。將該屬性設(shè)置為“true”以后，可以實現(xiàn)對一個對象的拖放。例如：要對一個圖片實現(xiàn)拖放效果，可以使用以下代碼：

當然，在代碼中還必須定義一個函數(shù)：drag（event），由于篇幅所限，在此不詳細羅列。

4） 用HTML5實現(xiàn)動畫效果。

HTML5整合了HTML、CSS3和JS三者，而基于JS的強大功能，我們可以實現(xiàn)任何動畫效果，例如圖3左邊實現(xiàn)一個動畫效果的HTML5代碼，右邊是它的渲染效果。在該HTML5代碼中，不需要加載第三方插件，所有的代碼和動畫渲染都在瀏覽器中解析執(zhí)行。

2.3 課堂在線演示教學內(nèi)容

為了增加課堂教學效果，讓學生能通過形象生動的視覺體驗來加深對學習內(nèi)容的理解，我們需要給學生展示實際頁面效果。本文在研究HTML5教學方法的過程中，發(fā)現(xiàn)W3School TIY在線測試平臺是一個非常合適和優(yōu)秀的教學演示工具。圖3是W3School TIY平臺的效果截圖。W3School TIY平臺的使用方法非常簡單，只要在代碼編輯區(qū)鍵入HTML5代碼，然后點擊右上角的“提交代碼”按鍵之后就可以在右邊的結(jié)果輸出框中看到對應(yīng)的渲染效果。

圖3 HTML5實現(xiàn)動畫功能的效果圖

使用W3School TIY平臺的好處是，不但方便教學演示，便于學生在課后鞏固復習和實踐創(chuàng)新，而且可以大大降低教師教學的經(jīng)費投入，減少學生學習的投入成本。

2.4 設(shè)置適當?shù)恼n程設(shè)計內(nèi)容

課程設(shè)計是檢驗學生是否掌握知識和技能的有效方式，通過設(shè)計科學的課程設(shè)計題目，引導學生自主獨立地完成，能有效地幫助學生鞏固理論知識，也能有效提高學生的動手能力，從而讓學生真正掌握開發(fā)技能。課程設(shè)計題目的設(shè)置應(yīng)該注意難度要適當，不能太容易，也不能太難，要結(jié)合學生的真實水平；遵循一個由簡單到復雜、循序漸進的原則來設(shè)定；課程設(shè)計的內(nèi)容不能天馬行空，要盡量與實際應(yīng)用掛勾。

3 結(jié)束語

本文研究了在移到互聯(lián)網(wǎng)中如何用HTML5實現(xiàn)FLASH功能的教學方法。教學過程中首先要讓學生理解教學的目的，接著再著重講述HTML5實現(xiàn)FLASH功能的具體方法，同時，教師還要在W3School TIY平臺上演示典型的實例，以加深學生對所學知識的理解。最后，通過布置課程設(shè)計題目，讓學生真正掌握在實際應(yīng)用中如何用HTML5實現(xiàn)FLASH功能的技能。

參考文獻：

[1] Chuck Hudson，Tom Leadbetter. HTML5開發(fā)手冊[M].廖望，譯. 北京：人民郵電出版社，2013.

[2] 鄧曉， 何中靈.淺析Html5與Flash的發(fā)展趨勢[J].電子制作，2015（1）：47-47.

[3] Adam Freeman.HTML5權(quán)威指南[M].謝廷晟， 牛化成， 等譯. 北京：人民郵電出版社，2014.

[4] 劉聰， 張海立.H5-Flash：基于HTML5的Flash運行時[J].計算機應(yīng)用與軟件， 2012，29（2）：169-172.