基于Flash技术的教学视频交互功能设计与开发

汪存友　张雅琪

摘 要：交互是形成学习结果的重要机制。针对目前教师个人录制的教学视频普遍缺少交互功能这一问题，文章借鉴课堂提问的方法，采用Flash视频技术，设计并开发了具有提问功能的教学视频，在单机版上实现了教学视频的交互功能，该功能具有较好的实用价值和推广价值。

关键词：教学视频；Flash技术；视频交互

中图分类号：G434 文献标志码：B 文章编号：1673-8454（2015）16-0085-03

信息社会，人们已习惯使用各种教学视频丰富自己的知识，增长自己的见识。建构主义认为交互是学习产生的必要条件。相关的实验研究也证实，人类通过交流能使记忆内容达到70%，即通过交互至少能产生20%的提升。[1]对教学视频而言，交互主要是通过用户对视频播放器的播放、暂停、停止、回放等操作来实现。研究表明，具有交互性的教学视频能够减少学习者的认知负荷，增强学习者对学习材料的理解。[2]简单来说，学习者对教学视频的操作不仅可以帮助学习者重新播放学习内容，还允许学习者根据自身的认知能力调整视频播放的速度和节奏，顺应学习者的认知加工活动。

目前，互联网主流平台上的教学视频交互性都比较简单，学习者仅能控制教学视频的播放速度。笔者认为，对播放的操控并不能等同于视频的交互，播放的操控主要是指学习者对视频播放器的控制，而视频交互是指学习者与视频中学习材料之间的交互。陈青在远程教育中将交互定义为：远程学习者与所有远程教育资源之间的相互交流与相互作用，其中包括远程学习者与学习材料、与学习支助组织（包括辅导教师、顾问、行政管理人员、机构设施等）之间的相互交流与相互作用。[3]目前互联网中的少数视频已具有学习者与学习材料之间的交互，如在网易公开课中的部分课程中，视频播放到某个时间点时，会自动弹出一个选择题，学习者回答该问题后，视频继续播放。利用提问的方式实现视频交互是一个比较好的方法。很多教师想实现视频交互的功能，但在互联网中没有能够实现该交互功能的免费平台，而像网易公开课、爱课程、MOOC等平台只接纳通过层层遴选、脱颖而出的优秀课程的教学视频，普通教师不能随便在这些平台中上传自己录制的视频，进而没有机会实现教学视频在线交互。而单机版教学视频成本低，可拷贝，能够无障碍顺畅播放，且不需依托平台来实现交互功能，非常利于教师个人在小范围内分享和传播自己的教学视频。本文旨在利用Flash技术实现单机版教学视频交互功能的设计与开发。

一、Flash视频技术及其优势

Flash软件本身可充分集成动画、声音、视频等基本元素，创造出许多精彩的动画效果，形象生动地表达抽象内容，使学生更容易接受知识。[4]Flash视频文件的扩展名是.flv，该格式的视频生成的文件极小，比同等容量的其他视频格式更清晰，更利于互联网传播与分享。不仅如此，视频导入到Flash的时间轴后，被分解为逐个静帧画面，再利用ActionScript脚本语言控制帧和视频流，可以实现视频交互功能。除此之外，flv格式的视频能够利用嵌入在浏览器中的Flash播放器进行无障碍播放，无需重新安装播放器，传播成本低。[5]

总之，Flash视频技术可集成文本、视频、动画等多种媒体形式，可利用编程进行界面和内容的交互设计和控制。相较于其他视频而言，Flash视频容量小、清晰度高，依托与浏览器兼容的Flash播放器，更利于互联网传播和分享。这些都是本文为何要选择Flash技术开发具有交互功能的教学视频的缘由。

二、设计思路

本文中的教学视频交互设计借鉴了课堂提问的基本流程和方法，并利用Flash视频技术实现具体的交互功能。课堂提问是在课堂教学过程中，根据教学目的、教学内容、学习者特征等因素，设计合适的问题，进行师生问答的一种教学方法。[6]良好的课堂提问不仅可以启发学生学习教学内容，检查学生掌握知识情况，还能培养学生的创造思维，调动学生的积极性，激发学生的兴趣。在教学视频中，我们可以采用课堂提问的基本方法，在适当的时间抛出问题，让学生思考，从而达到更好的学习效果。[7] 值得注意的是，课堂提问是教师与学生面对面的交流过程，课堂提问的若干问题是教师根据学生的学习情况实时生成的。而在教学视频学习过程中，教师与学生的时空是分离的，教学视频中的问题必须预先设计和设置好。本文旨在介绍教学视频提问的技术实现。

教学视频交互功能的设计如下：首先，视频在播放到某合适的时间点时暂停，画面中出现“练一练”按钮；然后，学习者点击“练一练”按钮，视频弹出一个问题，这个问题与课程知识相关，主要是客观选择题，学习者通过选择自己认为对的选项，点击“提交”按钮，完成问题的作答；随后，教学视频给予反馈，反馈的内容主要包括学习者的回答正确与否以及相关的提示内容。比如，若回答正确就显示“恭喜”等字样，回答错误就给予额外的提示信息，比如与该知识相关的文本、本视频的学习区间或网页超链接等等。最后，视频回到问题弹出的时间点继续播放。本设计中每道题学习者只有两次回答问题的机会，目的是为了启发学生思考，更加深刻的理解知识，进而达到更好的学习效果。

三、制作核心步骤

本文设计的视频交互功能采用Flash Professional CS6软件实现。主要包括四个核心步骤：导入视频、制作弹出问题、制作交互效果和保存视频。

第一步：导入视频

启动Flash Professional CS6软件，在新建一栏选择“ActionScript 3.0”，菜单栏文件中选择导入-导入视频。

（1）“选择视频”窗口：点击文件路径后面的“浏览”，选中事先备好的flv格式的视频，然后选择“在SWF中嵌入FLV并在时间轴中播放”，再点击“下一步”。

（2） “嵌入”窗口：选择的符号类型是“嵌入的视频”，将其下面的“将实例放置在舞台上”、“如果需要，可扩展时间轴”、“包括音频”，全部选中。点击“下一步”。

（3）“完成视频导入”窗口：检查导入的视频是否正确，若正确，就点击“完成”。若不正确，则点击“上一步”，重新导入视频。

第二步：制作弹出问题

弹出问题的制作主要采用场景跳转的方式。

（1）场景1中的操作

在场景1新建图层2，找到要添加问题的那一帧，本次制作是在第2597帧。用文字工具在该帧添加文字“练一练”，并将该文字转换为按钮元件，命名为aaa。在该帧添加代码片段：

stop（）；

aaa.addEventListener（MouseEvent.CLICK， LBYC _Click1）；

function LBYC_Click1（event：MouseEvent）：void

{MainTimeline（this.root）.gotoAndPlay（1，"场景 2"）；}

（2）在场景2中的操作

在“插入”菜单选择“场景”，新建场景2。

在场景2新建图层2，在图层2第一帧添加文字“返回”，并将该文字转换为按钮元件，命名为aa。在该帧添加代码片段：

stop（）；

aa.addEventListener（MouseEvent.CLICK， LBYC_Click）；

function LBYC_Click（event：MouseEvent）：void

{MainTimeline（this.root）.gotoAndPlay（2598，”场景 1”）；}

第三步：制作交互问题

（1）在场景2中，图层1中添加影片剪辑元件，命名为“kaokaoni_mc”，双击进入kaokaoni_mc元件。在此元件图层1中第一帧添加代码片段：

stop（）；

var m2：int；

m2=0；

this.tijiao2_btn.addEventListener（MouseEvent.CLICK，checkResult2）；

function checkResult2（event：MouseEvent）

{

m2++；

if（this.lianxi2_mc.C_2_3.selected ==1）{this.lianx i2_mc.check2_mc.gotoAndStop（3）；m2=2；}

else

if（m2！=2&&this.lianxi2_mc.C_2_3.selected ==0）{this.lianxi2_mc.check2_mc.gotoAndStop（2）；}

else

if（m2==2&&this.lianxi2_mc.C_2_3.selected ==0）{this.lianxi2_mc.check2_mc.gotoAndStop（4）；}

if（m2==2）{

this.lianxi2_mc.C_2_1.enabled=false；

this.lianxi2_mc.C_2_2.enabled=false；

this.lianxi2_mc.C_2_3.enabled=false；

this.lianxi2_mc.C_2_4.enabled=false；

tijiao2_btn.visible=false；

}

}

在此元件中，新建图层2，在图层2第一帧，用文字工具书写“提交”，将其选中，右击选择“转换为元件”，选择“按钮”。将该元件命名为“tijiao2_btn”。在此元件中，新建图层3，在图层3第一帧添加代码片段：stop（）；

（2）用文字工具添加问题。

将该区域选中，右击转换为影片剪辑元件，命名为“lianxi2_mc”。双击进入该元件，在图层1第一帧，添加题干，在ABCD四个选项前面分别添加RadioButton，分别命名为C_2_1、C_2_2、C_2_3、C_2_4。

在该元件中新建图层2，在图层2第一帧添加代码片段：stop（）；

（3）新建影片剪辑元件，将其命名为check2_mc。双击进入该元件，在图层1第2帧，添加文字“请再仔细想一下，还有一次机会！”在图层1第3帧添加文字“恭喜！答对了！”在图层1第4帧添加文字“很遗憾，答错了！”并给予提示。

在该元件中新建图层2，在图层2的第1、2、3、4帧均添加代码片段：stop（）；

第四步：保存视频

用Ctrl+S保存视频，再用键盘上Ctrl+Enter导出视频，观看测试效果。

四、总结

教学视频可任意点播，自选起点，无序观看，反复视听，极大地满足了学习者的个性化需要。[8]视频交互技术改变了以往教学视频信息单向、线性流动的性质，弥补了视频学习的缺陷。本文采用Flash的视频技术，在单机版上实现了视频提问功能，增加了学习者与教学视频间的交互。但对于多项选择题和主观题的提问、提问的教学设计以及学生回答问题的数据统计等问题，本文尚未涉及，这也是后续研究中有待解决的问题。

参考文献：

[1]沈夏林，周跃良.论开放课程视频的学习交互设计[J].电化教育研究，2012（2）.

[2]宋菲菲.学科背景与呈现交互性对动画多媒体学习成效影响的实验研究[D].大连：辽宁师范大学，2011.

[3]陈丽.远程教学中交互规律的研究现状述评[J].学术论坛，2004（1）.

[4]马涛，朱印宏.视频网站修炼术——基于Flash的视频技术开发与应用[M].北京：电子工业出版社，2009.

[5]360百科.FLV格式[DB/OL].http：//baike.so.com/doc/5450553.html2003.

[6]孟宪凯，刘文甫，李涛.提问技能训练[M].天津：天津教育出版社，2010.

[7]刘显国.课堂提问艺术[M].北京：中国林业出版社，2004.

[8]黄立新.透析网络课程中教学视频的问题[J].电化教育研究，2006（3）.（编辑：鲁利瑞）