各位好,

請容許我在這裡向各位介紹 MadSwatter 這個專案。MadSwatter 是一個建立在 Firefox 上的軟體，其功能為動畫編輯。 SVG 是一個 w3c 的向量圖標準，Firefox 和許多瀏灠器(除了 IE)支援。在 Firefox 裡， SVG 可以像 HTML 一樣，透過 DOM 來操作。於是，透過操作 DOM 的方式，我們可以改變 SVG 的內容，進而達到動畫的效果。而 MadSwatter 即是為了這個目的而存在的。

然而， MadSwatter 更遠大的目標是 UI 編輯器，用以編輯和設計 application 的 UI。傳統的 GUI 都是建立在 menu 、 button 、list 等等的 widget 之上，於是 UI designer 在不熟程式設計的情況下，要和這些 widget 奮鬥，卻得不到他們要的效果。但，如果能讓 UI designer 在 Inkscape 或 Illustrator 之類的畫圖工具，直接畫出他們要的 UI 外觀，然後再透過動畫編輯器，將 UI的行為編成一段段的動畫。那麼， UI designer 就不用受限於怪異的 widget 。而 application programmer 也可以直接呼叫 UI designer 設計好的動畫，使 application 表現出應有的行為。試想，在這樣的 model 之下， UI designer 可以多麼快樂，而 programmer 也不需再熬夜努力做出 UI designer 想要的行為。而 MadButterfly 則是實現這個 programming model 的重要開發工具。

MadSwatter 本身是隸屬於另一個專案，MadButterfly 之下的一個子 project 。MadButterfly 這個 project 的目標，是要將上述的 programming model 帶進 embedded system。除了 MadSwatter 之外，還包括一個能在 embedded system 裡執行的 engine， 以 play MadSwatter 的輸出。雖然 MadButterfly 的主要目標是在 embedded system ，然而 MadSwatter 本身的潛力並不止於此。近來新的手機作業系統上，幾乎都搭載了 webkit 為 base 的瀏灠器，這意謂著操作 SVG DOM ，以完成 UI 的 programming model ，也適用於這些手機上。尤其 Palm 即將推出 Palm pre ，其 application 完全以 javascript 撰寫，未來 MadSwatter 更能成為 application 開發環境。因此，長期而言，我們會整合出類似 Ecllipse 的開發環境。當然，是用 Firefox 為基礎。目前已經試著將 Inkscape 整合到 Firefox 裡，和 MadSwatter 進行互動、互補。未來更會將 text editor 和其它開發軟體所需的功能整合到 Firefox 。

說到這裡，或許你會發現， MadSwatter 所要提供的 programming model ，其實和 flash 很像。沒錯，其實 MadSwatter 就是要達到類似的功能。當然， flash 有 video/audio 的支援，而 web 目前還沒這些標準。然而， SVG 卻能達到 flash 的 圖形能力。隨著 browser 隨來隨強，效率不斷的改善，其實 flash 存在的必要性愈來愈低。然而， open source solution 卻缺乏一個像 flex 一樣的好工具。 MadSwatter 試著補強這一塊。

從上述， MadSwatter 的發展潛力可見一般。MadSwatter 正處理開發的初期，已完成一些基本的動畫編輯功能。其開發平台，完全基於 Firefox with javascript。在此，我誠炙邀請各位，加入 MadSwatter 的開發，或給與建議、指教。

以下是 MadSwatter 的相關資訊

home: http://www.assembla.com/wiki/show/MadSwatter

mailing list: https://lists.sourceforge.net/lists/lis ... rfly-users

irc: #madbutterfly@irc.freenode.net (utf8 中文可)

Programming model

http://heaven.branda.to/~thinker/GinGin ... id_doc/387

使用 MadSwatter 時，請在 SVG 檔裡，將要操作的 group "g" tag ，加上 mbname="xxx" 這樣的 attribute。然後用 MadSwatter load 進 SVG 檔，進行操作。編輯的結果存成一個 SVG 檔，在 metadata 裡定義了動畫的內容。

在
http://www.assembla.com/spaces/MadSwatter/documents
裡的 test1.svg 即是一個簡單的動畫範例。不怎麼精美。請包涵。

在 Youtube 上的 MadSwatter 動畫範例

http://www.youtube.com/watch?v=w8UODs7oCcU

不用懷疑，整個軟體都是在 Firefox 裡，以 SVG + Javascript 完成。

　看起來很不錯，是很有潛力的東西。

　很可惜，我不是開發者，所以無法幫忙，只好在這裡說聲，加油！

　想問一下，MadSwatter 是不是可以把 Firefox 變成像 Powerpoint 一樣的簡報編輯器？開發初期，人手可能比較不足，如果可以先開發出一個實用、容易做到、又很酷的功能，然後 blog 一下，也許比較容易吸引有能力的開發者加入？

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI

開發成簡報軟體是可行的。事實上，之前我開發過另一個軟體叫 ajaxmind ，也是 run 在 firefox 上。我現在都用該軟體在做簡報。我也想過把 MadSwatter 和 AjaxMind 結合，變成更完整的 solution 。