让Flex助力互动教学（上）

刘树明

编者按：新的一年，“高手论技”继续伴随大家前行，身处一线的你，就那些技术上最常遇到的故障、最需要解决的难题、最成熟的应用……都可以在此畅所欲言，各抒己见。是继续围观还是现身说法，新浪微群http://q.t.sina.com.cn/264976，期待您的共同参与。

现代教育发展到今天，互动教学的实现越来越受到教师、学生及家长的重视。本期，主持人及嘉宾就与大家一起讨论讨论Flex与互动教学的不解之缘。

随着信息技术的快速发展，教育领域早已进入Internet时代，互联网已经成为默认的教学软件开发和应用平台。在网络上，用Flash动画来丰富网站、实现交互操作已非常普遍。但是，传统的程序设计语言和开发环境在开发网络动画应用方面存在困难，于是Flex 平台便应运而生。它通过提供一个程序员们已经熟知的工作流程和编程模型来改善这个问题，并实现更方便高效的网络互动。

● 来龙去脉—Flex的诞生

Flex是一个高效、免费的开源框架，可用于构建RIA（Rich Internet Application）的Web应用程序。这些应用程序利用Adobe Flash Player和Adobe AIR（Adobe Integrated Runtime）,能够跨浏览器、桌面和操作系统实现统一部署。

所谓RIA即富网络应用程序，它指的是应用程序的一种技术实现形式，而不是一种具体的技术。在RIA出现之前，网络软件有两种流行的技术实现形式，即C/S（Client/Server）和B/S（Browser/Server），它们各有优缺点。为了方便比较，将它们的优缺点一起列于下表中：

RIA被称作是基于Web的C/S，客户端采用基于Flex等技术开发的SWF程序嵌入在网页中，提供了多种数据模型来处理客户端复杂的数据操作，同时也提供了比HTML更为丰富的界面表现元素，密集、响应速度快和图形丰富的页面元素与数据模型结合在一起，为用户提供了良好的使用体验。它克服了C/S与B/S的不足，尤其在流媒体等技术应用方面大展身手。

Macromedia公司以做动画起家，其旗下的Flash软件是强大的矢量动画编辑工具，Flash一直在谋求RIA（Rich internet application）富客户端的霸主地位，最有影响的是，已经推出了面向对象的编程脚本ActionScript3.0，并且建立起类似于Java swing的类库和相应Component(组件)。

同Flash一样，Flex能够制作出可以被Flash Player播放的SWF文件。但是，Flex主要是开发者（程序员）的工具，并且开发Flex应用程序的方式和开发Flash RIA（Rich Internet Application，富互联网应用程序）的方式完全不同。所有的Flex开发都基于一个Flex开发框架，该框架为用户提供可重复使用、可扩展的UI组件、数据获取服务和事件处理模块等。我们可以在熟悉的（以代码为核心的）编程环境中开发创建RIA程序，并且仍然可以获得Flash应用程序的好处。

其实，运用Flash是完全可以实现Flex所达成的效果的，为什么还需要Flex呢？这最主要的原因是为了迎合更多的开发者。Flash天生是为了设计者设计的，Flash开发环境仅考虑了时间轴和可视化开发工具，它的界面和动画概念与程序开发人员的编程习惯格格不入。为了吸引更多的程序员进行动画开发，Macromedia推出了Flex，用非常简单的MXML语言来描述界面，使用ActionScript语言定义逻辑和开发控制，以便JSP/ASP/PHP程序人员使用。

● 开发优势—Flex与多媒体

作为新一代的富客户端互联网技术的佼佼者，Flex这种技术已经被越来越多的公司所采用，被越来越多的用户和程序员所接受。那么，基于Flex的表现层开发多媒体应用有哪些优点？

1.丰富的组件。Flex提供了一整套工业级的控件、非常灵活的组件框架及丰富方便而灵活的前后台数据交互方式，可以为用户提供很好的体验。组件包括表格、树、列表等各种常用组件。图形控件包括饼图、柱状图、线图、气泡图、区域图、图例等。由于Flex已经开源，很多第三方厂商和开发人员也开发了一些第三方Flex组件库，其中比较优秀的有ILog Elixir等。

2.矢量图形和API支持。使Flex在表现力方面有别于其他软件的一个功能是提供矢量图形。通过使用矢量图形，线、形状和图像可以使用几何公式(而不是位图)来表示。通过使用Flex，对矢量图形API具有完全的访问权限。但大多数时候，我们只需使用Flex框架中的组件，该框架已经广泛利用矢量图形。

例如，如果需要画一个带圆角的红色半透明面板，需要的编码全部内容是：。矢量图形对用户界面可以有一个更具转变性的影响：它能以任何可能的方式拉伸、收缩、旋转、翻转或更改对象的形状。

3.多媒体支持。支持播放音频和视频流。Flex是被公认为流媒体技术支持最好的应用，它与流媒体服务器通过RTMP协议进行通信，在不下载完整文件的情况下，对服务器上面的媒体文件进行随机播放、随机查询等操作，同时它还能通过Flex SDK组件，直接调用客户端上面的摄像头、麦克风等设备，完成教学活动中所需要的多种形式的交互过程。

● 编程模型—Flex的Web开发

Flex应用程序开发可以使用MXML和ActionScript编程语言，并且提供强大的Flex类库做后台支持，我们也可以混合MXML和ActionScript来开发Flex应用程序。事实上，MXML 和ActionScript编程语言都提供了访问 Flex类库的能力。通常的做法是：使用MXML去定义用户界面的元素，使用 ActionScript去定义客户端的逻辑并进行控制。

Flex类库包括了Flex组件、管理器和行为。在基于组件的开发模型下，开发人员可以直接使用Flex类库中预先做好的组件，也可以使用自己定义的组件，以便在项目中使用。

使用Flex开发RIA尽管有多种形式，但主流架构是将Flex作为客户端，使用动态网页编程语言（Java,PHP,Asp等）构建服务器端。它们之间的数据通信步骤如下。

1.用户提交页面请求给服务器端的PHP等动态网页程序。

2.接收到请求后，服务器端程序跟后台数据库沟通，查询相关数据信息。

3.网页程序生成相关HTML页面代码，这些代码里面嵌入了SWF文件（使用Flex开发的RIA应用程序）。

4.浏览器将这些内容下载并显示到客户端机器上面。

5.SWF程序直接跟服务器端的PHP等网页程序进行通信，通信过程中客户端页面不需要刷新，用户感觉不到通信过程。

Flex为程序员提供了开发动画、复杂图形应用和RIA的工具和框架。所以使用Flex的主要是开发工程师，由美工来完成一些图片，以及纯动画（与业务逻辑无关，使用Flash开发工具）。Flex支持运行期调试。Flex的熟练开发人员目前不多，但是其学习曲线较低。熟练的Java、PHP和.Net程序员经过学习后可以轻松进行Flex开发。

另外，我们也很容易在互联网上找到大量基于Flex的开源项目，可以很容易通过学习和研究这些开源项目大幅提升我们的开发水平，同时我们也可以利用这些开源项目，进行二次开发，大幅节约开发成本并提高开发效率。

● 教育应用—让网页焕发光彩

1.Flex技术的应用优势。

（1）使用Flex技术可以使客户端功能得到增强，可以制作出非常漂亮的界面，在表现能力上超过了传统教学软件单调枯燥的页面，能更好地吸引学生的注意力，从而提高学生的学习兴趣。

（2）Flex可以使用ActionScript做出许多复杂的交互，学生能更好地和软件进行互动，学生能参与到学习的过程中来，符合现在倡导的自主学习、探究式学习方式。

（3）Flex和传统的B/S模式软件不同，它能有效地减轻服务器的负担，能对学生的交互做出快速反应，能增强学生使用软件的体验，使学生能更好地投入到学习中。

2.Flex技术的应用途径。

（1）教学模型的开发。在类似模拟物理、化学等实验的教学模型中，使用Flex开发的小程序可以接收动态参数，模拟实验过程和实验结果。也可以开发一些益智小游戏，类似数独游戏、拼词游戏、数学计算小游戏等。

（2）Flex多媒体处理技术用于非母语教学活动。由于利用Flex可以非常方便调用客户端的摄像头和麦克风等设备，教师可以在线进行语言教学，及时纠正学生发音错误、可以布置口语训练作业，也可以远程在线收集学生提交的录音、录像作品。

（3）利用Flex的图像处理功能，可以开发出针对书法、美术教学方面使用的网络课件，类似于《你画我猜》一类的游戏就是基于Flex技术开发出来的。

（4）虚拟教室(Virtual Classroom)应用。利用Flex的多媒体驾驭能力，我们可以开发或者整合出在线虚拟教室，直接在网上对学生进行在线辅导，甚至可以将上课过程全程录像，重复利用，既可以减轻教师的劳动量，也便于教师事后回顾教学过程以便改进教学。

灵活使用Flex技术进行教学软件的开发，我们能做出炫目的界面效果，高效复杂的交互，灵活驾驭多媒体及相关硬件，使教学软件真正成为学生学习的引导者。

● 交互实例—用技术助力教学

Flex技术应用在互动教学活动方面，已经有很多的开源软件，我们可以直接引入到自己的互动教学平台上来，下面笔者介绍几个以供大家参考。

1．口语训练项目Babelium（http://code.google.com/p/babeliumproject/）。

Babelium是西班牙巴斯克大学（巴斯克语称作Euskal Herriko Unibertsitatea）的GHyM小组主导开发的一个开源项目，它是一个非常完美的录音、录像Flex应用，可以让学生相互协作训练外语口语技能。教师上传一段视频（这类视频可以由教师自己制作，也可以去Babelium的官网下载）后，由学生各自为视频里面的角色配音，自己觉得满意后，将配音上传到服务器，并且可以对别人上传的配音进行评价，类似于微博的评论和转发，参与的人越多，学习的效果越好。不过默认是使用国外的流媒体服务器，因为国内的访问很慢，教师自己最好能搭建一个服务器，这样效果更好。在Babelium的Google开源项目里面有服务器搭建教程，用户可以按照指引在Ubuntu等Linux操作系统上面搭建好自己的服务器。

2．虚拟教室OpenMeetings（http://incubator.apache.org/openmeetings/）。

OpenMeetings是一个多语言可定制的视频会议和协作系统。它支持音频、视频，能让你查看每个与会者的桌面，也能通过摄像头看到每一个参与者的面部表情，摄像头分辨率可以由主持人调整。OpenMeetings还包含一个白板，通过白板可以导入各种格式的图片和涂鸦。支持参与人员在线投票，可保存投票结果并以饼图方式显示。还支持共享发言人的桌面，用户可以利用自己的计算机给所有参会人员展示讲稿。它支持让指定的人来操作用户的计算机，类似QQ的远程协助功能。它还支持会议过程全程录像，为会后回顾提供支持。它同时支持对每个用户设置静音功能及HTTPS和RTMPS加密传输。

虽然从名称上来看，它是一个为了网络会议而开发的项目，但是我们完全可以拿来使用——因为它完全具备了虚拟教室所需要的所有功能。当然，如果你觉得哪个功能需要改造，你也可以尝试对它进行二次开发。事实上，已经有很多的机构和个人在它的基础上开发出了多种多样的二次应用产品了。

值得欣慰的是，有人将它与著名的网络在线教育平台Moodle进行整合，开发出了一款OpenMeetings Moodle插件，支持Moodle2.0以上版本。我们可以利用这个插件，在Moodle课程里面开设网络会议（当成Virtual Classroom），学生点击链接就能进到虚拟教室里来，摄像头会将所有参与人员的头像传到每个人的电脑屏幕上，并且上面还能显示该人在Moodle里面注册的名称，主持人可以很方便地给每个参与者赋权限。例如，设置某人为主持人、允许他在白板上面涂鸦、允许他共享他的屏幕、允许他使用远程桌面控制、允许他通过麦克风发言等。跟其他的一些Flex多媒体应用一样，它也需要RED5服务器作支撑。我们可以部署自己专用的RED5服务器，以获得良好的网络体验。上图是OpenMeetings在Moodle下面的运行屏幕截图。

Flex在Moodle里面的应用除了OpenMeetings外，还有很多的人写了其他的一些非常有用的插件，如语音室（Language lab）插件等，大大扩充了Moodle的功能。当然，更详细的介绍用户可以登录Moodle官网（moodle.org）进一步了解。

当前，越来越多的人开始利用网络接受教育，网络课件的表现力就显得尤为重要。是否能将课程内容快速、完整、充分、优美地表现出来，给学习者一次良好的学习体验，是衡量网络课程是否成功的一个重要指标。Flex技术从程序开发者的角度给我们提供了一个非常好的工具，它和适用于设计者的Flash技术一样，成为网络课件开发的两驾马车。随着更多的教育工作者对Flex技术的熟悉，它将显示出自己独特的魅力。