讓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技術的熟悉，它將顯示出自己獨特的魅力。