当前位置:无忧公文网 >范文大全 > 征文 > 面向数字化教育资源的Flash到HTML5转换研究

面向数字化教育资源的Flash到HTML5转换研究

时间:2022-03-23 09:13:51 浏览次数:

评价项、补充资料等在内的多样课文;数字化学习资源中心在制作基于iOS的全媒体数字教材时采用了iBooks Author和EPUB3.0制作电子书,同时根据教学需要辅以HTML5、CSS3、jQuery等技术开发特定功能,从而使数字教材具备更好的交互效果。此外,北京师范大学出版社、天闻数媒科技有限公司等单位所研发的数字教材也纷纷采用了HTML5这项技术。

由此可见,将HTML5作为数字化教育资源开发工具的这一形势越发明朗,但是,目前市面上仍然存在大量的Flash教育资源,如:在国家基础教育资源网[12]、优课网[13]、人教网[14]等教育资源网站中这种资源就占有较大比重,甚至一部分正在进行的开发也仍在使用Flash。这不禁令人思考,在Flash不易于跨平台使用而HTML5已是大势所趋的情况下,这些已经存在或正在开发的Flash教育资源是否可以或将如何继续使用?

现有研究并未给出明确答案,本文则基于减少重新开发的成本和代价的考虑,从将Flash资源转换为HTML5资源的角度进行分析讨论,从而为Flash教育资源的处理以及未来数字化教育资源的开发建设提供参考。

二、Flash到HTML5的转换实验设计

对于已经存在或正在开发的Flash教育资源,首先考虑的就是从Flash到HTML5的转换问题,即通过类型转换直接得到与原始Flash动画效果相一致的基于HTML5的教育资源,从而减少重新开发的成本和代价。

从这一角度出发,本实验的目的在于对Flash转换为HTML5进行基于工具的测试,并重点关注实验样例转换成功的程度,对于不成功的部分是否需要人工干预来促成转换等问题,主要内容涉及转换工具的收集、实验样例的设计、转换测试的设置以及转换结果的评价标准等方面,具体如下:

1.转换工具的收集

本实验以“Flash转换HTML5”、“Flash HTML5 convert”等为关键词在百度、Google等网站搜索转换工具。排除“将Flash转换为视频的伪HTML5转换工具(如:Recool SWF to HTML5 Converter)”以及“仅实现还原显示的浏览器插件(如:Smokescreen)”等干扰项,本实验选定“将Flash文件(以SWF、FLA格式存储)转换为HTML5文件”的5个工具,如表1所示。

2.实验样例的设计

Flash教育资源大体包括单帧式、顺序播放式、交互式、嵌入媒体式等呈现形式;另外,考虑到Flash的矢量特性是移动互联时代下保证不同屏幕大小或缩放条件下基本阅读体验的重要支撑,因此,本实验主要关注以下动画效果的转换成功与否:

①矢量性质:图形、静态文本、输入文本、动态文本;

②基本类型动画:逐帧动画、传统补间动画、补间动画、形状补间动画、引导动画、遮罩动画;

③交互:按钮点击、鼠标滑过、其它鼠标交互、键盘交互、其它组件交互;

④嵌入媒体:流式音频、音频事件同步、视频、动画剪辑。

值得注意的是,有些动画文件不只局限于这些单一类型,而是其中两种、甚至三种的复合形式。基于此,本实验从第二代“人教数字教材”包含的Flash动画文件、文献[20]提供的样例以及互联网[21]中选用50个实验样例,基本保证每种单一类型至少有两个样例有所包含。注:由于Flash文件来源的不同,50个样例均是以SWF类型存储,只有其中的39个存在FLA存储形式。

3.转换测试的设置

本实验的实现思路是基于每一种工具对所有样例进行转换测试,即根据表1中5个工具可处理的文件类型,一方面将50个以SWF类型存储的样例进行“Free Flash to HTML5 Online Converter”、“硕思闪客精灵”和“Google Swiffy”三个工具的转换测试;另一方面,将其中39个FLA类型样例进行“Adobe Wallaby”和“Toolkit for CreateJS”两个工具的测试。另外,由于“Toolkit for CreateJS”可同时作为Flash制作软件“Adobe Flash Pro CS6”和“Adobe Flash Pro CC”的插件,因此该工具对应两组实验。综上所述,本实验涉及5个工具共6组转换实验。

4.转换结果的评价标准

对于每一组实验的转换结果,本实验拟从两个角度来进行统计描述:一方面,从样例整体的转化效果角度考虑,本实验将转换结果归为如下四个状态,并统计样例转换比率(即不同转换状态的样例数所占整体样例数的比率):

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

②转换过程出错:无法生成HTML文件;

③转换结果有误:HTML效果与原始样例的Flash效果有出入;

④转换成功:HTML效果与原始样例的Flash效果完全一致。

另一方面,从上述提到的动画效果类型的角度考虑,本实验统计不同效果类型的转换成功率(即在所有生成的HTML文件中,对于某种类型成功转换的HTML文件数与理应成功转换的HTML文件数的比率)。

三、实验结果与讨论

基于上述设计思路,表2列出了包含5个工具在内的6组实验的转换结果,从中可知:

(1)从整个样例的转换比率来看,转换结果并不理想。其中,转换成功比率最高的“Google Swiffy”仅为42%(即50个样例中仅有21个的转换效果与原始Flash效果完全一致),而最低的是“Adobe Wallaby”和作为“Adobe Flash Pro CS6”插件的“Toolkit for CreateJS”,仅达到23%。

(2)从HTML文件所实现的动画效果类型来看,只有部分类型能够实现成功转换,并且分布相对集中,即不同工具之间无法形成互补以保证所有效果的转换成功。

具体如下:①对于矢量性质的支持:图形和静态文本的矢量性质可以在部分工具中得到保持,如:“Free Flash to HTML5 Online Converter”和“硕思闪客精灵”是用SVG标签描述来实现,而“Adobe Wallaby”则是直接从FLA中导出图形的SVG文件,然后在HTML文件中引用这一资源;对于动态和输入类型的文本,其矢量形式所有的工具均不支持;另外,由于“Google Swiffy”和“Toolkit for CreateJS”是将矢量对象用位图来表示,因此,在这两个工具的转换生成文件中矢量性质均丢失。

②对于交互效果的支持:从整体来看,现有工具对于交互效果的转换不够理想,尤其是下拉框、单选框等组件以及键盘的交互则大多无法实现;但是,相对于其它工具的无力,“Google Swiffy”对于基于鼠标的以及ActionScript的部分交互可以提供一定程度的支持。

③对于嵌入媒体的支持,现有工具仍处于初级阶段:对于视频,所有工具生成的HTML都无法实现视频的载入和播放;而音频也仅在作为“事件”嵌入时,才有可能实现,并且在动画较为复杂时,极易受到其它因素的影响,因此并不稳定。

(3)从转换生成的文件来看,素材的可更新性和代码的易修改性与转换工具所支持的转换方式密切相关。

其中:①输入为SWF时:涉及“Free Flash to HTML5 Online Converter”、“硕思闪客精灵”和“Google Swiffy”三个工具,它们是将图像用base64进行编解码,不易后续的图像素材变更;代码方面采用的是基于JSON的JavaScript编写方式,存在代码可读性差和不易修改的问题。

②输入为FLA时:涉及“Adobe Wallaby”和“Toolkit for CreateJS”两个工具,它们是将多媒体素材导出,并采用HTML标签进行嵌入,易更新;代码方面,采用HTML标签编写方式,相对来说更易修改。

(4)在基于工具转换的思路下,可从文件类型和大小以及是否保持矢量性质的角度来选择具体的转换工具,但是无论选择哪种工具,都必须加入人工干预。

具体体现在:

①对于非交互和无媒体嵌入的简单动画,上述5个工具大多可以成功转换,但转换结果的正确与否仍需要人工确认;

②对于嵌入媒体的动画,音频事件同步可由作为“Adobe Flash Pro CC”插件的“Toolkit for CreateJS”来实现,其它情况需要借助HTML5的多媒体新特性进行人工加入;

③对于交互的实现,按钮点击交互可由“Google Swiffy”实现,但其它形式的交互应重新编写。

综上可知,现有工具大多仅支持部分动画效果的转换,而对于由交互、媒体嵌入等复杂单一效果或多种效果复合形成的Flash文件,则不易得到与原始动画效果相一致的转换结果。当采用单一工具进行转换时,对于大量可能转换失败的数据,应延续该工具采用的HTML5框架来人工编写相应的HTML5文件,以保证代码的一致性和易维护。相比之下,虽然将多种工具相结合以求达到最大的转换成功率的处理方式更为省时,但是会留下代码不兼容、可扩展性差等多种隐患。

四、结论与启示

用HTML5取代Flash作为数字化教育资源的开发工具,符合当前移动技术和互联网发展的要求。对于目前已经存在或正在开发的以Flash为主要实现技术的众多教育资源,根据上述转换实验可知,由于现有转换工具的效率普遍较低,因此成功地将其直接转换为HTML5资源并不是一个简单的过程,转换之路仍有待工具功能的进一步提升。此时,即使选择工具进行转换,也应在权衡现有资源呈现的主要动画效果与工具支持的效果之后,选用单一工具以保持代码的一致性,并且需要加入大量的人工干预。

因此,从可持续性和可扩展性角度考虑,本文认为,尽早摒弃Flash而直接采用HTML5作为数字化教育资源的开发工具才是长久之道,并且应尽早建立相关的开发和测试标准,进而对未来教育资源的构建、扩展和传播起到积极的推进作用。

参考文献:

[1]Thoughts on Flash [EB/OL]. http:/// hotnews/thoughts-on-flash.

[2]HTML5[EB/OL].http://.cn.

[15]Free Flash to HTML5 Online Converter[EB/OL].http://.

[17]Google Swiffy [EB/OL]. https:///

doubleclick/studio/swiffy.

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

[19]Toolkit for CreateJS [EB/OL].http:///devnet/createjs.html.

[20]贾勇,孟权国.完全掌握Flash CS6白金手册[M].北京:清华大学出版社,2013:28-398.

[21]站长素材网[EB/OL]. http://sc.chinaz.com/donghua/.

(编辑:李晓萍)

推荐访问: 数字化 教育资源 面向 转换 研究