劉樹明

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

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

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

● 來龍去脈—Flex的誕生

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.接收到請求后，服務器端程序跟后臺數(shù)據(jù)庫溝通，查詢相關數(shù)據(jù)信息。

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

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

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

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

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

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

1.Flex技術的應用優(yōu)勢。

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

（2）Flex可以使用ActionScript做出許多復雜的交互，學生能更好地和軟件進行互動，學生能參與到學習的過程中來，符合現(xiàn)在倡導的自主學習、探究式學習方式。

（3）Flex和傳統(tǒng)的B/S模式軟件不同，它能有效地減輕服務器的負擔，能對學生的交互做出快速反應，能增強學生使用軟件的體驗，使學生能更好地投入到學習中。

2.Flex技術的應用途徑。

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

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

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

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

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

● 交互實例—用技術助力教學

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

1．口語訓練項目Babelium（http://code.google.com/p/babeliumproject/）。

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

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

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

雖然從名稱上來看，它是一個為了網(wǎng)絡會議而開發(fā)的項目，但是我們完全可以拿來使用——因為它完全具備了虛擬教室所需要的所有功能。當然，如果你覺得哪個功能需要改造，你也可以嘗試對它進行二次開發(fā)。事實上，已經(jīng)有很多的機構和個人在它的基礎上開發(fā)出了多種多樣的二次應用產(chǎn)品了。

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

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

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