让Flex助力互动教学

发布于:2021-07-31 13:43:30

让 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 以*姹尽N颐强梢岳谜飧霾寮 moodle 课程里面开设网络 会议(当成 virtual classroom) ,学生点击链接就能进到虚拟教室 里来,摄像头会将所有参与人员的头像传到每个人的电脑屏幕上, 并且上面还能显示该人在 moodle 里面注册的名称,主持人可以很 方便地给每个参与者赋权限。例如,设置某人为主持人、允许他在 白板上面涂鸦、允许他共享他的屏幕、允许他使用远程桌面控制、 允许他通过麦克风发言等。跟其他的一些 flex 多媒体应用一样, 它也需要 red5 服务器作支撑。我们可以部署自己专用的 red5 服务 器,以获得良好的网络体验。上图是 openmeetings 在 moodle 下面 的运行屏幕截图。 flex 在 moodle 里面的应用除了 openmeetings 外,还有很多的人 写了其他的一些非常有用的插件,如语音室(language lab)插件 等,大大扩充了 moodle 的功能。当然,更详细的介绍用户可以登 录 moodle 官网(moodle.org)进一步了解。 当前,越来越多的人开始利用网络接受教育,网络课件的表现力 就显得尤为重要。是否能将课程内容快速、完整、充分、优美地表

现出来,给学*者一次良好的学*体验,是衡量网络课程是否成功 的一个重要指标。 flex 技术从程序开发者的角度给我们提供了一个 非常好的工具,它和适用于设计者的 flash 技术一样,成为网络课 件开发的两驾马车。随着更多的教育工作者对 flex 技术的熟悉, 它将显示出自己独特的魅力。


相关推荐

最新更新

猜你喜欢