讓Flex助力互動(dòng)教學(xué)（上）

劉樹明

編者按：新的一年，“高手論技”繼續(xù)伴隨大家前行，身處一線的你，就那些技術(shù)上最常遇到的故障、最需要解決的難題、最成熟的應(yīng)用……都可以在此暢所欲言，各抒己見。是繼續(xù)圍觀還是現(xiàn)身說法，新浪微群http://q.t.sina.com.cn/264976，期待您的共同參與。

現(xiàn)代教育發(fā)展到今天，互動(dòng)教學(xué)的實(shí)現(xiàn)越來(lái)越受到教師、學(xué)生及家長(zhǎng)的重視。本期，主持人及嘉賓就與大家一起討論討論Flex與互動(dòng)教學(xué)的不解之緣。

隨著信息技術(shù)的快速發(fā)展，教育領(lǐng)域早已進(jìn)入Internet時(shí)代，互聯(lián)網(wǎng)已經(jīng)成為默認(rèn)的教學(xué)軟件開發(fā)和應(yīng)用平臺(tái)。在網(wǎng)絡(luò)上，用Flash動(dòng)畫來(lái)豐富網(wǎng)站、實(shí)現(xiàn)交互操作已非常普遍。但是，傳統(tǒng)的程序設(shè)計(jì)語(yǔ)言和開發(fā)環(huán)境在開發(fā)網(wǎng)絡(luò)動(dòng)畫應(yīng)用方面存在困難，于是Flex 平臺(tái)便應(yīng)運(yùn)而生。它通過提供一個(gè)程序員們已經(jīng)熟知的工作流程和編程模型來(lái)改善這個(gè)問題，并實(shí)現(xiàn)更方便高效的網(wǎng)絡(luò)互動(dòng)。

● 來(lái)龍去脈—Flex的誕生

Flex是一個(gè)高效、免費(fèi)的開源框架，可用于構(gòu)建RIA（Rich Internet Application）的Web應(yīng)用程序。這些應(yīng)用程序利用Adobe Flash Player和Adobe AIR（Adobe Integrated Runtime）,能夠跨瀏覽器、桌面和操作系統(tǒng)實(shí)現(xiàn)統(tǒng)一部署。

所謂RIA即富網(wǎng)絡(luò)應(yīng)用程序，它指的是應(yīng)用程序的一種技術(shù)實(shí)現(xiàn)形式，而不是一種具體的技術(shù)。在RIA出現(xiàn)之前，網(wǎng)絡(luò)軟件有兩種流行的技術(shù)實(shí)現(xiàn)形式，即C/S（Client/Server）和B/S（Browser/Server），它們各有優(yōu)缺點(diǎn)。為了方便比較，將它們的優(yōu)缺點(diǎn)一起列于下表中：

RIA被稱作是基于Web的C/S，客戶端采用基于Flex等技術(shù)開發(fā)的SWF程序嵌入在網(wǎng)頁(yè)中，提供了多種數(shù)據(jù)模型來(lái)處理客戶端復(fù)雜的數(shù)據(jù)操作，同時(shí)也提供了比HTML更為豐富的界面表現(xiàn)元素，密集、響應(yīng)速度快和圖形豐富的頁(yè)面元素與數(shù)據(jù)模型結(jié)合在一起，為用戶提供了良好的使用體驗(yàn)。它克服了C/S與B/S的不足，尤其在流媒體等技術(shù)應(yīng)用方面大展身手。

Macromedia公司以做動(dòng)畫起家，其旗下的Flash軟件是強(qiáng)大的矢量動(dòng)畫編輯工具，F(xiàn)lash一直在謀求RIA（Rich internet application）富客戶端的霸主地位，最有影響的是，已經(jīng)推出了面向?qū)ο蟮木幊棠_本ActionScript3.0，并且建立起類似于Java swing的類庫(kù)和相應(yīng)Component(組件)。

同F(xiàn)lash一樣，F(xiàn)lex能夠制作出可以被Flash Player播放的SWF文件。但是，F(xiàn)lex主要是開發(fā)者（程序員）的工具，并且開發(fā)Flex應(yīng)用程序的方式和開發(fā)Flash RIA（Rich Internet Application，富互聯(lián)網(wǎng)應(yīng)用程序）的方式完全不同。所有的Flex開發(fā)都基于一個(gè)Flex開發(fā)框架，該框架為用戶提供可重復(fù)使用、可擴(kuò)展的UI組件、數(shù)據(jù)獲取服務(wù)和事件處理模塊等。我們可以在熟悉的（以代碼為核心的）編程環(huán)境中開發(fā)創(chuàng)建RIA程序，并且仍然可以獲得Flash應(yīng)用程序的好處。

其實(shí)，運(yùn)用Flash是完全可以實(shí)現(xiàn)Flex所達(dá)成的效果的，為什么還需要Flex呢？這最主要的原因是為了迎合更多的開發(fā)者。Flash天生是為了設(shè)計(jì)者設(shè)計(jì)的，F(xiàn)lash開發(fā)環(huán)境僅考慮了時(shí)間軸和可視化開發(fā)工具，它的界面和動(dòng)畫概念與程序開發(fā)人員的編程習(xí)慣格格不入。為了吸引更多的程序員進(jìn)行動(dòng)畫開發(fā)，Macromedia推出了Flex，用非常簡(jiǎn)單的MXML語(yǔ)言來(lái)描述界面，使用ActionScript語(yǔ)言定義邏輯和開發(fā)控制，以便JSP/ASP/PHP程序人員使用。

● 開發(fā)優(yōu)勢(shì)—Flex與多媒體

作為新一代的富客戶端互聯(lián)網(wǎng)技術(shù)的佼佼者，F(xiàn)lex這種技術(shù)已經(jīng)被越來(lái)越多的公司所采用，被越來(lái)越多的用戶和程序員所接受。那么，基于Flex的表現(xiàn)層開發(fā)多媒體應(yīng)用有哪些優(yōu)點(diǎn)？

1.豐富的組件。Flex提供了一整套工業(yè)級(jí)的控件、非常靈活的組件框架及豐富方便而靈活的前后臺(tái)數(shù)據(jù)交互方式，可以為用戶提供很好的體驗(yàn)。組件包括表格、樹、列表等各種常用組件。圖形控件包括餅圖、柱狀圖、線圖、氣泡圖、區(qū)域圖、圖例等。由于Flex已經(jīng)開源，很多第三方廠商和開發(fā)人員也開發(fā)了一些第三方Flex組件庫(kù)，其中比較優(yōu)秀的有ILog Elixir等。

2.矢量圖形和API支持。使Flex在表現(xiàn)力方面有別于其他軟件的一個(gè)功能是提供矢量圖形。通過使用矢量圖形，線、形狀和圖像可以使用幾何公式(而不是位圖)來(lái)表示。通過使用Flex，對(duì)矢量圖形API具有完全的訪問權(quán)限。但大多數(shù)時(shí)候，我們只需使用Flex框架中的組件，該框架已經(jīng)廣泛利用矢量圖形。

例如，如果需要畫一個(gè)帶圓角的紅色半透明面板，需要的編碼全部?jī)?nèi)容是：。矢量圖形對(duì)用戶界面可以有一個(gè)更具轉(zhuǎn)變性的影響：它能以任何可能的方式拉伸、收縮、旋轉(zhuǎn)、翻轉(zhuǎn)或更改對(duì)象的形狀。

3.多媒體支持。支持播放音頻和視頻流。Flex是被公認(rèn)為流媒體技術(shù)支持最好的應(yīng)用，它與流媒體服務(wù)器通過RTMP協(xié)議進(jìn)行通信，在不下載完整文件的情況下，對(duì)服務(wù)器上面的媒體文件進(jìn)行隨機(jī)播放、隨機(jī)查詢等操作，同時(shí)它還能通過Flex SDK組件，直接調(diào)用客戶端上面的攝像頭、麥克風(fēng)等設(shè)備，完成教學(xué)活動(dòng)中所需要的多種形式的交互過程。

● 編程模型—Flex的Web開發(fā)

Flex應(yīng)用程序開發(fā)可以使用MXML和ActionScript編程語(yǔ)言，并且提供強(qiáng)大的Flex類庫(kù)做后臺(tái)支持，我們也可以混合MXML和ActionScript來(lái)開發(fā)Flex應(yīng)用程序。事實(shí)上，MXML 和ActionScript編程語(yǔ)言都提供了訪問 Flex類庫(kù)的能力。通常的做法是：使用MXML去定義用戶界面的元素，使用 ActionScript去定義客戶端的邏輯并進(jìn)行控制。

Flex類庫(kù)包括了Flex組件、管理器和行為。在基于組件的開發(fā)模型下，開發(fā)人員可以直接使用Flex類庫(kù)中預(yù)先做好的組件，也可以使用自己定義的組件，以便在項(xiàng)目中使用。

使用Flex開發(fā)RIA盡管有多種形式，但主流架構(gòu)是將Flex作為客戶端，使用動(dòng)態(tài)網(wǎng)頁(yè)編程語(yǔ)言（Java,PHP,Asp等）構(gòu)建服務(wù)器端。它們之間的數(shù)據(jù)通信步驟如下。

1.用戶提交頁(yè)面請(qǐng)求給服務(wù)器端的PHP等動(dòng)態(tài)網(wǎng)頁(yè)程序。

2.接收到請(qǐng)求后，服務(wù)器端程序跟后臺(tái)數(shù)據(jù)庫(kù)溝通，查詢相關(guān)數(shù)據(jù)信息。

3.網(wǎng)頁(yè)程序生成相關(guān)HTML頁(yè)面代碼，這些代碼里面嵌入了SWF文件（使用Flex開發(fā)的RIA應(yīng)用程序）。

4.瀏覽器將這些內(nèi)容下載并顯示到客戶端機(jī)器上面。

5.SWF程序直接跟服務(wù)器端的PHP等網(wǎng)頁(yè)程序進(jìn)行通信，通信過程中客戶端頁(yè)面不需要刷新，用戶感覺不到通信過程。

Flex為程序員提供了開發(fā)動(dòng)畫、復(fù)雜圖形應(yīng)用和RIA的工具和框架。所以使用Flex的主要是開發(fā)工程師，由美工來(lái)完成一些圖片，以及純動(dòng)畫（與業(yè)務(wù)邏輯無(wú)關(guān)，使用Flash開發(fā)工具）。Flex支持運(yùn)行期調(diào)試。Flex的熟練開發(fā)人員目前不多，但是其學(xué)習(xí)曲線較低。熟練的Java、PHP和.Net程序員經(jīng)過學(xué)習(xí)后可以輕松進(jìn)行Flex開發(fā)。

另外，我們也很容易在互聯(lián)網(wǎng)上找到大量基于Flex的開源項(xiàng)目，可以很容易通過學(xué)習(xí)和研究這些開源項(xiàng)目大幅提升我們的開發(fā)水平，同時(shí)我們也可以利用這些開源項(xiàng)目，進(jìn)行二次開發(fā)，大幅節(jié)約開發(fā)成本并提高開發(fā)效率。

● 教育應(yīng)用—讓網(wǎng)頁(yè)煥發(fā)光彩

1.Flex技術(shù)的應(yīng)用優(yōu)勢(shì)。

（1）使用Flex技術(shù)可以使客戶端功能得到增強(qiáng)，可以制作出非常漂亮的界面，在表現(xiàn)能力上超過了傳統(tǒng)教學(xué)軟件單調(diào)枯燥的頁(yè)面，能更好地吸引學(xué)生的注意力，從而提高學(xué)生的學(xué)習(xí)興趣。

（2）Flex可以使用ActionScript做出許多復(fù)雜的交互，學(xué)生能更好地和軟件進(jìn)行互動(dòng)，學(xué)生能參與到學(xué)習(xí)的過程中來(lái)，符合現(xiàn)在倡導(dǎo)的自主學(xué)習(xí)、探究式學(xué)習(xí)方式。

（3）Flex和傳統(tǒng)的B/S模式軟件不同，它能有效地減輕服務(wù)器的負(fù)擔(dān)，能對(duì)學(xué)生的交互做出快速反應(yīng)，能增強(qiáng)學(xué)生使用軟件的體驗(yàn)，使學(xué)生能更好地投入到學(xué)習(xí)中。

2.Flex技術(shù)的應(yīng)用途徑。

（1）教學(xué)模型的開發(fā)。在類似模擬物理、化學(xué)等實(shí)驗(yàn)的教學(xué)模型中，使用Flex開發(fā)的小程序可以接收動(dòng)態(tài)參數(shù)，模擬實(shí)驗(yàn)過程和實(shí)驗(yàn)結(jié)果。也可以開發(fā)一些益智小游戲，類似數(shù)獨(dú)游戲、拼詞游戲、數(shù)學(xué)計(jì)算小游戲等。

（2）Flex多媒體處理技術(shù)用于非母語(yǔ)教學(xué)活動(dòng)。由于利用Flex可以非常方便調(diào)用客戶端的攝像頭和麥克風(fēng)等設(shè)備，教師可以在線進(jìn)行語(yǔ)言教學(xué)，及時(shí)糾正學(xué)生發(fā)音錯(cuò)誤、可以布置口語(yǔ)訓(xùn)練作業(yè)，也可以遠(yuǎn)程在線收集學(xué)生提交的錄音、錄像作品。

（3）利用Flex的圖像處理功能，可以開發(fā)出針對(duì)書法、美術(shù)教學(xué)方面使用的網(wǎng)絡(luò)課件，類似于《你畫我猜》一類的游戲就是基于Flex技術(shù)開發(fā)出來(lái)的。

（4）虛擬教室(Virtual Classroom)應(yīng)用。利用Flex的多媒體駕馭能力，我們可以開發(fā)或者整合出在線虛擬教室，直接在網(wǎng)上對(duì)學(xué)生進(jìn)行在線輔導(dǎo)，甚至可以將上課過程全程錄像，重復(fù)利用，既可以減輕教師的勞動(dòng)量，也便于教師事后回顧教學(xué)過程以便改進(jìn)教學(xué)。

靈活使用Flex技術(shù)進(jìn)行教學(xué)軟件的開發(fā)，我們能做出炫目的界面效果，高效復(fù)雜的交互，靈活駕馭多媒體及相關(guān)硬件，使教學(xué)軟件真正成為學(xué)生學(xué)習(xí)的引導(dǎo)者。

● 交互實(shí)例—用技術(shù)助力教學(xué)

Flex技術(shù)應(yīng)用在互動(dòng)教學(xué)活動(dòng)方面，已經(jīng)有很多的開源軟件，我們可以直接引入到自己的互動(dòng)教學(xué)平臺(tái)上來(lái)，下面筆者介紹幾個(gè)以供大家參考。

1．口語(yǔ)訓(xùn)練項(xiàng)目Babelium（http://code.google.com/p/babeliumproject/）。

Babelium是西班牙巴斯克大學(xué)（巴斯克語(yǔ)稱作Euskal Herriko Unibertsitatea）的GHyM小組主導(dǎo)開發(fā)的一個(gè)開源項(xiàng)目，它是一個(gè)非常完美的錄音、錄像Flex應(yīng)用，可以讓學(xué)生相互協(xié)作訓(xùn)練外語(yǔ)口語(yǔ)技能。教師上傳一段視頻（這類視頻可以由教師自己制作，也可以去Babelium的官網(wǎng)下載）后，由學(xué)生各自為視頻里面的角色配音，自己覺得滿意后，將配音上傳到服務(wù)器，并且可以對(duì)別人上傳的配音進(jìn)行評(píng)價(jià)，類似于微博的評(píng)論和轉(zhuǎn)發(fā)，參與的人越多，學(xué)習(xí)的效果越好。不過默認(rèn)是使用國(guó)外的流媒體服務(wù)器，因?yàn)閲?guó)內(nèi)的訪問很慢，教師自己最好能搭建一個(gè)服務(wù)器，這樣效果更好。在Babelium的Google開源項(xiàng)目里面有服務(wù)器搭建教程，用戶可以按照指引在Ubuntu等Linux操作系統(tǒng)上面搭建好自己的服務(wù)器。

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

OpenMeetings是一個(gè)多語(yǔ)言可定制的視頻會(huì)議和協(xié)作系統(tǒng)。它支持音頻、視頻，能讓你查看每個(gè)與會(huì)者的桌面，也能通過攝像頭看到每一個(gè)參與者的面部表情，攝像頭分辨率可以由主持人調(diào)整。OpenMeetings還包含一個(gè)白板，通過白板可以導(dǎo)入各種格式的圖片和涂鴉。支持參與人員在線投票，可保存投票結(jié)果并以餅圖方式顯示。還支持共享發(fā)言人的桌面，用戶可以利用自己的計(jì)算機(jī)給所有參會(huì)人員展示講稿。它支持讓指定的人來(lái)操作用戶的計(jì)算機(jī)，類似QQ的遠(yuǎn)程協(xié)助功能。它還支持會(huì)議過程全程錄像，為會(huì)后回顧提供支持。它同時(shí)支持對(duì)每個(gè)用戶設(shè)置靜音功能及HTTPS和RTMPS加密傳輸。

雖然從名稱上來(lái)看，它是一個(gè)為了網(wǎng)絡(luò)會(huì)議而開發(fā)的項(xiàng)目，但是我們完全可以拿來(lái)使用——因?yàn)樗耆邆淞颂摂M教室所需要的所有功能。當(dāng)然，如果你覺得哪個(gè)功能需要改造，你也可以嘗試對(duì)它進(jìn)行二次開發(fā)。事實(shí)上，已經(jīng)有很多的機(jī)構(gòu)和個(gè)人在它的基礎(chǔ)上開發(fā)出了多種多樣的二次應(yīng)用產(chǎn)品了。

值得欣慰的是，有人將它與著名的網(wǎng)絡(luò)在線教育平臺(tái)Moodle進(jìn)行整合，開發(fā)出了一款OpenMeetings Moodle插件，支持Moodle2.0以上版本。我們可以利用這個(gè)插件，在Moodle課程里面開設(shè)網(wǎng)絡(luò)會(huì)議（當(dāng)成Virtual Classroom），學(xué)生點(diǎn)擊鏈接就能進(jìn)到虛擬教室里來(lái)，攝像頭會(huì)將所有參與人員的頭像傳到每個(gè)人的電腦屏幕上，并且上面還能顯示該人在Moodle里面注冊(cè)的名稱，主持人可以很方便地給每個(gè)參與者賦權(quán)限。例如，設(shè)置某人為主持人、允許他在白板上面涂鴉、允許他共享他的屏幕、允許他使用遠(yuǎn)程桌面控制、允許他通過麥克風(fēng)發(fā)言等。跟其他的一些Flex多媒體應(yīng)用一樣，它也需要RED5服務(wù)器作支撐。我們可以部署自己專用的RED5服務(wù)器，以獲得良好的網(wǎng)絡(luò)體驗(yàn)。上圖是OpenMeetings在Moodle下面的運(yùn)行屏幕截圖。

Flex在Moodle里面的應(yīng)用除了OpenMeetings外，還有很多的人寫了其他的一些非常有用的插件，如語(yǔ)音室（Language lab）插件等，大大擴(kuò)充了Moodle的功能。當(dāng)然，更詳細(xì)的介紹用戶可以登錄Moodle官網(wǎng)（moodle.org）進(jìn)一步了解。

當(dāng)前，越來(lái)越多的人開始利用網(wǎng)絡(luò)接受教育，網(wǎng)絡(luò)課件的表現(xiàn)力就顯得尤為重要。是否能將課程內(nèi)容快速、完整、充分、優(yōu)美地表現(xiàn)出來(lái)，給學(xué)習(xí)者一次良好的學(xué)習(xí)體驗(yàn)，是衡量網(wǎng)絡(luò)課程是否成功的一個(gè)重要指標(biāo)。Flex技術(shù)從程序開發(fā)者的角度給我們提供了一個(gè)非常好的工具，它和適用于設(shè)計(jì)者的Flash技術(shù)一樣，成為網(wǎng)絡(luò)課件開發(fā)的兩駕馬車。隨著更多的教育工作者對(duì)Flex技術(shù)的熟悉，它將顯示出自己獨(dú)特的魅力。