令人驚豔的 Open Source UI library

(按小圖可看到大圖喔)

昨天在 OSFlash上有位叫 David Caram的工程師突然發佈這個訊息，內容大略是：

I have posted a component library written in ActionScript 2. This library is based on a strongly decoupled view and controller with a considered method of data binding based on XML or class modeled sources

範例程式

當時以為只不過是另一個玩家寫的元件組，這年頭已經有太多這種臨時起意然後架構不完整的 GUI Library，但 David 的這組元件實在是太讓人驚訝了。

初次把玩那個範例程式，感覺是：

1、非常快：不論是捲動、drag-resize或下拉選單，都完全沒有lag, 而且cpu消耗也不多，這點是 EnFlash比不上的(更別提 GhostWire或Bit101的產品)，因此這暗示者背後的程式碼應該非常精簡，或至少寫的很聰明。

2、很漂亮：目前大部份檯面上的OSS GUI Library(我主要觀察的有 ActionStep, ASWing, EnFlash三組)都是採取「用程式碼畫介面」的方式來做view這段，例如ActionStep的架構中就有一個超大的namespace是各種 ui drawing code，只為了生成 window outline 或 button face之類的東西。

而 Posttool這組則反其道而行，他回歸flash讓designer用movieclip做美術的部份，然後透過程式碼動態調用mc進來組成元件。這樣的設計方式代表者幾件事：

-更容易re-skinning: 由於所有視覺元素都是movieclip，因此只要打開fla將要改的地方重新設計，存檔後再輸出swf檔，就完成reskinning了。

-美術的事回歸設計師: 這件事非常的重要，美術設計師受過訓練的眼睛與美感，不是工程師可以取代的，更別提工程師想用程式碼去畫出設計師用 photoshop 才能做到的整體效果。所以，GUI 的 view 這段，我還是讚成該由設計師做，而不是程式碼。

玩完範例後把原始碼抓下來仔細研究一下，發現果真設計的很漂亮，而且他是用 FAME做的，所有每個目錄裏都有個 flashout.as 供輸出用。

元件的架構圖在這裏(按小圖可看大圖)

可以看的出確實是不像 mm V2 元件那麼多層疊來疊去，但就如之前的文章曾說過的，MM的元件雖然巨大(有時效能也不好)但它確實是功能最完整可用度最高的選擇。

目前PostTool 這組元件大約只完成了 panel, menu, scrollpane, scroller, button 幾項，但已經可以充份感覺到他的潛力了，例如：

-window 的設計很細心: 我理想中的 window 或 panel元件，本來就應該是內建 MenuBar, ToolBar, ScrollPane與右下角可拖拉的 dragger，而PostTool的window元件幾乎90%符合這個理想，尤其是它的drag-resize運作的非常順暢，恐怕是目前市場上最好的一個，另外會隨者 resize而自動出現的 scrollpane/scrollbar也是非常貼心的設計。

-tree: Tree大概是所有元件中僅次於 DataGrid 難寫的，但PostTool不但做到大部份 tree元件該有的東西，還提供了一個神奇的 drag-move功能，也就是 tree item 可隨意 drag-move 到其它位置，例如調整上下順序。

當然我理想中還需要加上一個 double-click時可就地編輯文字，這樣操作上就更像一般 win/mac的使用習慣，不過以一組新元件來說，能做到這樣已經很好了。

-datagrid : 前面講過，datagrid是最難寫的元件，原因是要同時處理許多 column同時還要保持運作的流暢度，對所有工程師都是一大挑戰，通常 3rd party 元件產品也都喜歡追者mm的 datagrid效能不佳這點猛打(例如XPcomponent就是最佳例子)。

PostTool的 datagrid設計上並沒特別突出，它是在每一列裏面放個超大movieclip，也就是類似 cellRenderer的玩法，因此理論上，只要完成了 List這個元件，就等同於有了 datagrid, 只是從我過去寫 datagrid的經驗來說，這種單一巨大mc的設計並不是最好，即使他已經小心的控制每一頁顯示的row才畫出來。

另外他的datagrid目前看起來比較像是 Multi-Column-List，而不是完整的datagrid，也沒有編輯內容的功能，所以這部份改進空間還很大。

他的線上手冊在這裏，有興趣的人可以看看。

簡單的結論：

-”holy sxxt” : 老實說第一眼看到他的範例時眼睛真的快要跳出來，心裏想的就是這句話(呃 其它還有其它幾，但..)，總之就是好的不可思議，不論 架構設計、視覺美感、操作效能 都是目前用過最好的，對一個元件組(尤其還是 open source)來說，你還有什麼能要求的呢？

-潛力極大: 由於它GUI view的部份是用 movieclip做成，因此如果假以時日改用 flash 8裏面的 BitmapAPI與 filter/effects重新設計(或有其它熱血青年跳進來設計一組 theme/skin)，這時它的視覺效果會有多棒？

btw, 作者目前正在找人加入這個Project, 幫忙完成其它的元件，以David的眼光跟工程功力，有興趣的中文世界玩家加入這個project跟者他一定可以學到很多，大家不妨試試。( OSFlash 的 Aral這兩天就會在站上設立 project site，屆時會有更多資訊，你也可以透過 email - david 在 posttool com 直接與他聯絡)

另一個 FoF 網站

linkedIn

Friend of Friend 自從 orkut 之後就變的非常火紅，最近又多了一個。

只是常聯絡的朋友就那麼幾個，連來連去還是這些人啊~

FMS2 初體驗(3) - 完結篇

核心功能都玩完後，順邊把FMS2安裝目錄逛一遍，看有沒有偷藏什麼好東東，結果有以下發現：

-lic檔:
就跟 flash remoting, flex, jrun等產品一般，FMS2是靠一紙 xxxx.lic 來記錄授權資訊，而且最妙的地方在於這個lic是純文字檔，打開就可以看到裏面的內容，包含「到期日」之類的資訊；我試者將它移到其它目錄再重開 FMS2 果然就變回 dev版(1MB/5 connections)，所以由此幾乎可以判斷將來 FMS2的賣法應該也是分等級，其中 dev是免費開發版，而「不限頻寬/5000連線數」的則是最貴版(十五萬台幣左右)，另外應該還可以再堆疊license上去；比較好奇的是在這中間是否還會有中階產品出現？例如五萬元(約略coldfusion的價位)給個 10Mb/1000連線數之類的。

如果這個價位的產品能出現的話，對mm與業主來說都是利多，畢竟台灣想做 Flashcom 應用的業主都以中小企業為主，其中十個有八個是想做影音聊天電話交友之類的服務(我們平均每個月會接到兩三個詢問個案)，而這些業主再強也不可能弄到超過10Mb的線路，所以五萬元會是一個非常殺的搶手貨啊~

-神祕的 G711.dll 與 Screenshare.dll:
這兩個dll都大有來頭，其中 G711主要是用於 VoIP(ip telephony)，它是採用 8 bit PCM壓縮原理的codec，詳情請看wiki解釋。這個DLL原本是用於 Breeze 的 telephony support, 例如上次MM財報大會時，無法透過browser聽到聲音的用戶就可以直接打電話進去聽演講或發問，這就是 breeze telephony gateway 加上 G711的功用。

而Screenshar.dll則更是讓人眼睛一亮，心想是不是mm終於良心發現願意放棄商業獨佔奔向開放源碼的光明境界因此決定提供眾人期待以久的Screen Sharing功能一解多年的憾恨但在看完這麼長一句沒有逗號分隔可喘氣的句子後我仍然只能很遺憾的告訴你這一切都是落花有意流水無情想太多啦~

要瞭解這個問題必需對 Flash Player與 Screen sharing這兩件事有根本的認識，首先，要能做到 screen sharing就必需要有程式負責把畫面抓下來，這部份很簡單，用類似下面的程式碼即可(用 C 寫成)：

但重點是程式(也就是player)本身必需有能力去做這件事，例如內含必需的library，可是這樣做的話無可避免會增加 player本身的size，而保持flash player 苗條的身段一直是mm最高優先，因此當然不會內建在flash player裏面；這也是為何 breeze 會需要額外下載 breezeAddIn.exe，這支 exe就包含了上述 screen capture所需的一切功能。

其次，raw data抓下來後，由於資料量非常大，因此勢必要先壓過才能傳出去，以上面的例子，它是直接壓成 flv 然後寫入 filesystem，而 breezeAddIn 想當然爾就是透過內建的codec 壓縮成 flv傳回 breeze內建的flashcom server，因而做到了 screen sharing。

從這兩段描述就可以瞭解，一支能 capture + compress + streaming 的程式是不可或缺的，而目前Flash Player 8只具備了後兩項，自然是無法抓畫面啊~

那FMS2裏面這個 Screenshar.dll 到底是做什麼用的呢？個人推測是用來接收 client端傳回的 screen capture data，因為FP7裏除了有 Sorenson spark codec外，還有一個比較少人知道的 Screen Video Codec，猜測合理的作業流程是screen video codec負責壓縮screen sharing的raw data然後傳回 breeze/flashcom(請注意 breeze裏面的flashcom是特別版，不是一般的flashcom)，此時 Screenshare.dll就負責接收這段 stream，後續有可能在server端即時 transcoding成 sorenson spark flv再廣播出去以節省頻寬。

所以 FMS2 裏面放個 Screenshar.dll 恐怕只是為了給 breeze 5測試用，將來正式版很有可能就會拿掉。

□ screensharing using breezeaddin

既然講到 breezeaddin，不如就順便聊聊這件事吧。

去年初玩家們籍由分析 flex 的 base class 發現在 flash player 裏有內建某種程式下載機制，當時大家用下列語法就可以順便安裝 central plugin (主要提供file upload) 與 breezeAddIn(用途顧名思意不用再解釋吧？)

一旦下載完成後，就可以用下列語法來抓畫面：

然後將寫好的 swf 拖放到 breezeAddIn上就可順利執行並做到補捉畫面，這支程式甚至還可以讓你選擇要抓那個開啟中的應用程式來廣播。

這一切聽起來都很順利，你知道了如何下載、安裝俱備 screen capture能力的breezeAddIn，也知道用什麼語法去觸發補捉畫面，沒有理由不善用這功能來寫許多偉大的曠世巨作不是嗎？

問題只有一個，flashcom不吃這套。

經過去年初一長串的測試後終於証實，flashcom裏面有某種判別機制，能分辨封包中的訊號是來 breezeAddIn然後就直接drop掉。一般測試最常見的情況就是 breezeAddIn可以成功連進 flashcom, 但通常最慢 5秒內就會被斷線，所有的video stream也不會寫入硬碟。

這讓我不禁想起去年 max 2004時跟 gary grossman聊到這件事，那時他一臉賊賊的招牌微笑，原來是早有暗留一招難怪老神在在毫不擔心，果然是真人不露相啊~

所以如果你是個 flashcom wanna-be或也想試試 screen sharing，簡單的答案是：人生苦短，找點別的事做可能更有意義。

□如果一定要 screen sharing怎麼辦呢？

好吧，在已經提醒過你人生唯苦無樂只有苦極滅道回道是岸才為上策後，如果你還是一心想要 screen sharing該怎麼辦呢？

可能的方案有幾個。

1、用 virtual driver: 這裏面最知名的就是 camtasia studio。camtasia是一套screen capture軟體，可以將畫面操作錄影下來，經過剪輯後再輸出成avi, mpg, swf等各種格式，頗受國內e-learning界與講師群喜愛，而它確實也是個中翹楚當之無愧。

camtasia另一個特異功能就是可以把自已模擬成一台web cam，一旦啟動它的 live 功能後，在flash player 裏的 camera listing就會看到一台名稱為 camtasia的webcam，這就是camtais偽裝而成的 virtual driver，此時就可以一邊錄畫面一邊將訊號餵進 flash player然後透過它傳進 flashcom。

根據兩三年前的測試結果，這招是百分之百成功的，那時我們也跟國內某大英語補習班合作開發了一些應用程式，但這條路也有個缺點，就是每套camtasia要價約三百美元(約一萬元台幣)，而理論上來說，在合法使用的情況下，每個廣播發送電腦 (publisher) 都要安裝一套自已的license，因此如果同一時間有二十個老師要教課，或四十人要開會，就得買同等數量的license，這裏面所需的成本就不見得是可行的了。

過去幾年我也不斷找尋 C/C++高手幫忙開發類似的東西，因為理論上screen capture很容易，只要有人能將抓下來的 raw data轉成 virtual driver 送給 flash player即可，但根據好友兼長輩 b6s 兄的解釋，要寫出這樣一個 driver 不如直接找個密室修成肉身佛還快一點(呃 好吧 這不是 exactly wording, 但基本上很麻煩就對了，要自已從很底層的地方做起，並沒有高階的API可用)

2、用 vnc2swf: vnc是一個遠端遙控桌面的軟體，原理跟 screen capture沒啥兩樣，而 vnc2swf故名思意就是將 vnc的畫面轉成 swf(範例請看這裏)，因此可能的下手處是改寫 vnc2swf的輸出端模組，讓它可以直接傳 flv到 flashcom上面，或是將此訊號轉成前面提過的 virtual driver (but again, this is a rawdata to virtual drviver issue, which is HARD)

但要特別注意的一點則是，vnc傳送一個 1024x768大小的畫面大約會吃掉 300kbps的頻寬，這還只是一個stream單向的傳輸，如果同時有二十個學生在上課，那就是 300*20 = 6000(將近6MBbps的頻寬)，這些頻寬都是成本啊~

3、用白爛法: 有次一位合作的工程師突然說「那幹麼不直接拿web cam照螢幕就好？」頓時大家聽了真是額手稱慶鼓掌叫好，然後就是一頓亂打順便就地埋了，現在墳上的草應該也就一公尺了吧...

□真的需要 screen sharing嗎？

在看完上面一堆跟FMS2好像沒直接關連的閒聊後，你可以認真想想，真的有需要screen sharing 嗎？

這些年來我也曾抱者幾近極端份子的熱情嚐試各種可行的solution，但最後我終於發現一件殘酷的事實，那就是screen sharing其實是件很不實際的事。

並不是指技術上不可行(因為它已經被証明可行)，而是指它所消耗的頻寬，與所能提供的品質實在不成正比。

上面是某次 Peldi's Coding Cafe抓下的畫面，圖中是他示範程式碼的部份，當時我瞪大眼睛把螢幕放到最大，也還是看不清楚他到底在打什麼，這件事突顯了一個事實：

即使技術上能將螢幕廣播出去，也很難達到清淅可接受的程度

而像 vnc 高品質的畫面則需用大量頻寬(也就是錢)堆出來，這使得screen sharing這件事變的幾乎無解。

另一方面，如果從「應用面」來看，不論是線上教學會視訊會議，其實最重要的元素都是影像、聲音與教材/簡報，其中影像與聲音用web cam就可以，而教材簡報則可以用眾多的 ppt to swf 轉換程式預先轉好，甚至是將ppt上傳到server供所有學員下載也是可行，因此，真的很難找到什麼應用模式是非用screen sharing不可的。

所以到這裏，你應該真的死心了吧？

□結語

經過幾天測試，基本上對 FMS2 已經有全盤的掌握，雖然特出的新功能不多(file/net access等眾API算是基本常識本來就要會的)，但支援 edge server做clustering與 ON2 VP6 codec則是讓人心喜的部份，另外最重要的就是合理的定價讓人第一次開始覺得這是可以認真推的解決方案，也比較敢把 FMS2 包進專案規畫書裏呈現給客戶了

FMS2 初體驗(2)

這兩天把 FMS 徹底玩透透，看看有些什麼新東東，接下來是 Part 2。

首先我先將過去做的案子直接移到FMS2下面執行，基本上都很順利，只有一兩支程式遇到configuration上的麻煩，需要手動改權限。

測試時觀察的重點有兩個：

1、執行效能:

據說這次 FMS2 是完全用 C++改寫，因此在windows上效能應該會有長足進步，但可能是我測試的 con-current連線太少，所以無法探測到它真正的效能邊界，以我測試的部份來看是完全沒有大躍進的感覺。(或許當 yahoo 成為我的客戶那天時就有機會玩幾千人同時連線的測試了 orz)

2、畫面品質:

基本上 FMS2 最大的賣點之一就是多了 ON2 VP6 的支援，但比較有趣的是「支援」的定義有兩種，一種是server本身能做 server-side transcoding將外來訊號轉換成 VP6 格式，另一種則是能吃下client端傳來的 VP6 video stream，而很明顯的 FMS2 的支援是屬於後者，也就是說它無法(或至少我沒玩到)在server端提供必要的 transcoding，因此想要高品質的VP6 streaming video ? 請愛用 ON2 Flix 8 (這玩意上個版本不是才 v1.0，怎麼過兩個月就直升8.0啦~) 或最新才更新的 Sorenson Squeeze v4.2

這兩點之外，由於其它核心API的操作都完全一樣，因此剩下能做的測試就是把所有新的API都跑一遍，基本上前一篇中打 * 號的那幾個，例如 XML, LoadVars, WebService等都跟Flash 裏的一模一樣，因此使用上你只要騙自已是在操作一個看不見的 flash player就好(把 FMS2 想成是 flash player)，另外 File 這組API也跟 FP8裏面的 FileAPI非常類似，不過個人覺得更貼近 PHP 的 file操作，但總之就是很容易使用，正常程度的工程師應該半小時內就可以上手。

正事玩完後接者就將注意力轉到其它五四三的地方，第一個看上的就是全新的 admin 工具。

Flashcom舊的admin工具分成兩個，一個是 server admin另一個是 app admin，基本上功能陽春但仍堪用，如果真的不夠還可以跟macromedia申請 source code 回來自已改；但這次 FMS2 的 admin可真是讓人驚豔，幾個重點整理如下：

-畫面變漂亮了: 這個不用多說，請自已看照片(點小圖可看大圖)。整體操作流程與 UI配置也明顯經過設計，四處可見的淡黃色 pop-up tips更是讓人覺得貼心(怎麼越說越像某01站的吉米兄賣東西的台詞啊？)

-大量採用 central 元件: 第一眼看到 admin 畫面時，心中就是想到這件事，基本上整體的介面就是以 central元件為核心來製作，有部份 UI controls 是連flex裏都還沒有的。

以目前macormedia產品線眾多的元件版本來說，Breeze 5.0的元件外觀與功能都是最新(因為是在Flex之後才上市，自然繼承Flex + Central 的長處)、Flex 的元件最強大完整，有讓人口水真流的HDivideBox(也就是以前的 Splitter)、Central的元件也挺漂亮並且效能頗佳、而Flash 2004/8裏的元件則只能以，咳，樸實無華但堪用來形容(也可以說是大過不犯但小錯不斷 :D)。

因此從這個發展的階段來看，FMS admin既然不是flex 寫成，因此自然不能用Flex元件，而Breeze 5的元件推測應該正用力改寫中將來好放進正式版的FMS，因此這個時間點要寫新的 Admin的介面當然只能挑次一級最佳的選擇，也就是 central囉。

只是希望在不久的將來，flex team能真的將這些不同版本的元件大一統，做出一組 UI base library，就可以同時供 Flash/Flex/Breze/FMS使用了，其實話說回來，這沒有那麼難啊，人家 ASWing一個人都硬幹出一套 SWING AS2 port，EeFlash更是以一人之力就寫出近乎Flex的 xml-ui parser，更別提ActionStep也不過才三個人但已經快把整個NextStep的NS系元件都port完畢了，最重要的是這三組team都是從 0 開始做，而mm早就有 UIObject/UIComponents的base class架構~所以，mm要加油啊，有需要幫忙說一聲就好...咳...

-可同時管理多個server: FMS2另一個比較令人重視的新功能就是 edge server，也就是能簡單無痛的 clustering 到 server farm以提供數百到數千人的同時連線的能力，而當edge server數量一多時，管理自然就很重要，這時 admin的 Manager Servers面板就派上用場了。

從圖中可以看出這個面板提供了三組圖表，分別是 active connections, bandwidth與 cpu/memory usage，這正是以往 Flashcom管理者最需要的資訊，同時FMS2也有一個詳細的log機制，所有面板上看不到或看不清楚的數據從log裏都可以分析出來。

Using Edge and Origin Servers (online doc)

Flv Player v1.2

下載

這是flv player的另一個選擇，特色是最近才release, 因此是用 flash player 8與 flash 內建的 video component為底做成的，理論上比 rivavx 的版本新一點，可能bug也少一點。