移动互联网开发中HTML5实现FLASH功能的教学方法

梁林慎

摘要：研究如何在课堂上讲授用HTML5实现FLASH功能的教学方法，教学思路是首先说明在移动互联网开发中HTML5实现FLASH功能的必要性，接着讲授用HTML5实现FLASH的四个典型功能的方法，最后提出一种加深学生对知识深刻理解的教学方法：在W3School TIY平台上演示教学内容。

关键词： HTML5；FLASH；在线演示；音视频媒体；移动互联网

中图分类号：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标准规范制定完成。HTML5能大大缩减HTML代码的数量，并使编写的HTML代码变得更简单。传统的HTML代码中有一堆代码是苦涩难懂的，对于学生来说，他们根本看不懂这些东西；而HTML5极大改善代码可读性体验，例如HTML的声明方式要比传统的HTML更友好一些。目前，大部分移动应用程序和游戏开发者都选择了HTML5作为开发言语，究其原因包括：1） HTML5技术的跨平台性非常强大，基于HTML5开发的应用可以实现完美的跨平台使用； 2）简单易用，并且支持语义标签和ARIA，使使HTML5创建的网站更加简单；3）支持音频、视频，通过HTML5的

1 HTML5实现FLASH功能的教学思路

在开展HTML5实现FLASH功能的教学内容之前，必须学生明白一个很关键的问题，为什么要用HTML5实现FLASH功能，而不能直接使用FLASH呢？本文研究的教学思路如下：

首先，讲述HTML5与FLASH在移动互联网应用开发中的现状和地位，说明两者的优缺点，让学生理解FLASH在移动平台中存在哪些致命性的缺点，以及HTML5的优点和它更适合在移动平台中使用的原因。

其次，在学生理解了移动应用开发中HTML5实现FLASH功能的必要性之后，我们开始讲述HTML5实现FLASH功能的方法和技巧，同时为了避免讲课内容空泛，我们应该选择若干个具有代表性的开发实例，向学生具体地详细地讲述开发和实现的过程。

再次，为了进一步加深学生对所教知识的理解，教师可以结合W3School TIY平台（http：//www.w3school.com.cn/tiy/t.asp），演示HTML5实现FLASH功能的具体实例。W3School TIY平台是一个非常优秀的HTML代码在线测试工具，学生可以在W3School TIY平台上轻松地编写任意HTML代码，并可以快速便捷地看到代码的渲染效果。

最后，通过课程设计的形式，让学生课后实际动手开发一个用HTML5实现FLASH功能的小任务，以达到巩固知识和掌握技能的目的。

2 教学内容

2.1 HTML5实现FLASH功能的必要性

学生可能会产生一个误区，就是HTML5优于FLASH，HTML5要取代FLASH。在讲述HTML5实现FLASH功能的时候，必须要先让学生明白，FLASH有其优点，而且是一项一直在发展中的技术，它不会因为HTML5的出现而马上消亡。相反，目前在很多应用场合中，FLASH还是具有其他技术无法比拟的大势。这些优势表现在：1）FLASH在PC端的普及率极高，远远超越了HTML5。目前，FLASH在个人计算机上的普及率达到98%以上，流行的浏览器几乎都支持FLASH，FLASH的用户数也高达20亿。相反，只有大约40%的浏览器支持HTML5，而HTML5只有不到8亿用户。2）FLASH技术一直在发展，而且非常灵活。3）FLASH不存在兼容性问题，支持跨平台。4）FLASH支持多种视频编码，为用户提供简单的网站串流影音机制，而目前的HTML5只支持两种视频编码。

那么为什么有人认为HTML5会取代FLASH，为什么我们还学习HTML5实现FLASH功能的方法呢？原因是FLASH存在一些致命性的缺点：（1）FLASH容易宕机，乔布斯就曾经批评过FLASH是导致MAC死机的原因之一；（2）FLASH在移动设备上的性能不佳，不能在移动设备上完美地运行；（3）FLASH的耗电量太大，大大降低了移动设备的续航时间，而续航时间对移动用户来说是很重要的体验参数。基于这些原因，Adobe宣传，放弃移动FLASH。因此，如果我们要在移动设备上实现像FLASH那样生动的动画效果，则必须采用HTML5来实现。

2.2 HTML5实现FLASH功能的方法和技巧

业界对HTML5的评价极高：“网页开发者可以在不依赖第三方插件的时候，利用HTML5做出高级的图像、字体、动画和过滤效果”。HTML5实质上是HTML+CSS3+JS的综合体，它是一个无需插件的、开放免费的、对搜索引擎友好的一项新技术。利用HTML5，我们可以在不安装任何第三方插件的情况下，实现生动的音视频效果，以及FLASH能实现的交互效果。下面列举三个典型的例子，让学生轻松学会如何用HTML5实现FLASH功能：

1） 用HTML5实现音频播放器功能。

如图1所示，音频播放器可以用HTML5的

图1 音频播放器

2） 用HTML5实现视频播放器功能

如图2所示，左边是HTML5实现视频播放器的代码，右边是浏览器中渲染的效果。在HTML5中，用

图2 视频播放器

3） 用HTML5实现对象的拖放功能

要实现对象的拖放功能，需要用到HTML5的一个新定义属性：“draggable”。将该属性设置为“true”以后，可以实现对一个对象的拖放。例如：要对一个图片实现拖放效果，可以使用以下代码：

当然，在代码中还必须定义一个函数：drag（event），由于篇幅所限，在此不详细罗列。

4） 用HTML5实现动画效果。

HTML5整合了HTML、CSS3和JS三者，而基于JS的强大功能，我们可以实现任何动画效果，例如图3左边实现一个动画效果的HTML5代码，右边是它的渲染效果。在该HTML5代码中，不需要加载第三方插件，所有的代码和动画渲染都在浏览器中解析执行。

2.3 课堂在线演示教学内容

为了增加课堂教学效果，让学生能通过形象生动的视觉体验来加深对学习内容的理解，我们需要给学生展示实际页面效果。本文在研究HTML5教学方法的过程中，发现W3School TIY在线测试平台是一个非常合适和优秀的教学演示工具。图3是W3School TIY平台的效果截图。W3School TIY平台的使用方法非常简单，只要在代码编辑区键入HTML5代码，然后点击右上角的“提交代码”按键之后就可以在右边的结果输出框中看到对应的渲染效果。

图3 HTML5实现动画功能的效果图

使用W3School TIY平台的好处是，不但方便教学演示，便于学生在课后巩固复习和实践创新，而且可以大大降低教师教学的经费投入，减少学生学习的投入成本。

2.4 设置适当的课程设计内容

课程设计是检验学生是否掌握知识和技能的有效方式，通过设计科学的课程设计题目，引导学生自主独立地完成，能有效地帮助学生巩固理论知识，也能有效提高学生的动手能力，从而让学生真正掌握开发技能。课程设计题目的设置应该注意难度要适当，不能太容易，也不能太难，要结合学生的真实水平；遵循一个由简单到复杂、循序渐进的原则来设定；课程设计的内容不能天马行空，要尽量与实际应用挂勾。

3 结束语

本文研究了在移到互联网中如何用HTML5实现FLASH功能的教学方法。教学过程中首先要让学生理解教学的目的，接着再着重讲述HTML5实现FLASH功能的具体方法，同时，教师还要在W3School TIY平台上演示典型的实例，以加深学生对所学知识的理解。最后，通过布置课程设计题目，让学生真正掌握在实际应用中如何用HTML5实现FLASH功能的技能。

参考文献：

[1] Chuck Hudson，Tom Leadbetter. HTML5开发手册[M].廖望，译. 北京：人民邮电出版社，2013.

[2] 邓晓， 何中灵.浅析Html5与Flash的发展趋势[J].电子制作，2015（1）：47-47.

[3] Adam Freeman.HTML5权威指南[M].谢廷晟， 牛化成， 等译. 北京：人民邮电出版社，2014.

[4] 刘聪， 张海立.H5-Flash：基于HTML5的Flash运行时[J].计算机应用与软件， 2012，29（2）：169-172.