high-res and the making of can be found here:

http://www.flickr.com/photos/18697966@N00/2982281565/sizes/o/in/set-72157608377333404/

http://www.flickr.com/photos/18697966@N00/sets/72157608377333404/detail/

(圖:只要你AS3夠強,就可以放出夠臭的臭屁)

很多人可能到現在還搞不懂

actionscript(3.0/2.0) / .as / .mxml / .swf / .air

Flex / Air / Flash

Flash Player / Air Runtime

之間交錯的關係, 就連身為 web designer/programmer的我也花了一些時間來搞懂,不過也不確定正不正確,在這邊分享我自己版本的解釋,也希望有錯的話請大方解囊相授.

教學相長,歡迎指正.（特別感謝 Flex 高手 Ticore)

首先,先了解這三樣(flash / flex / air)到底是
為何而戰,為誰而戰? <-還有誰背的出來,證明國軍戰力…

寫Code的原因是為了達成某種目的,就Actionscript而言,原本的目的只是製做出 .swf 檔案,然後embed在html裡面,顯示聲光互動的效果,這效果可以拿來作廣告,做藝術,做簡報,做 game,做互動卡通,做非線性故事,做笑料,等等.
後來因為應用越來越廣,所以在幾年前出現了Flex,專攻Rich Internet Application, 最近推出的AIR則是加上了desktop application的一些web application辦不到的互動功能.

如果光看成品的格式,Flash/Flex都是.swf,想的簡單一點,.swf不一定是要由flash做出來,Adobe illustrator,也可以做出沒有互動的swf檔,也就是說做 swf 檔的方式有很多種,就像能製造出 jpg 圖檔的軟體也很多一,只是功能強不強大跟速度快不快而已.

我個人淺見一切的根本還是在Flash, 用 Flash可以做出最多種東西,不只是 .swf,也可以包著圖形作成可以重複應用的 component(.swc). 而Flex,就是把很多Flash做出來的可以光利用文字 customize, reuse 的 component 用很類似XML(xhtml)的 mxml 語法寫出來,在另外加上典型的 actionscript 讓每個componet之間互動,或者是一些 .as 的物件,來達到RIA(Rich Internet Application)的功能,所以 Flash 跟 Flex 都是輸出 .swf 然後,用 Flash Player 跑的,我認為兩個差不多,只是 Flex 開發非常快速,因為很多 UI(User Interface) component 都做好了.
而 AIR 是綜合 Flex / Flah,可以是 .mxml 或 .as, 可是由於可以特別在桌面上跑,所以加上他自己的一些class, 變成只有 Adobe® AIR™ runtime 可以跑的桌上應用程式

AS2/AS3/FLA -> FLASH（ 講求設計,具有 timeline / vector symbol library )

AS3+MXML+CSS -> FLEX (用 UI component, mxml做位置編排,CSS改變樣式,非常適合快速程式開發 )

AS3 / MXML + AJAX + SQLite + Desktop Interaction -> AIR（ 包含所有Flex/Flash,加上跟桌面整合的功能 )

製作 Flex / Flash / Air 分作三個過程: source code developing -> compile -> play it using player.

這三種不同的產品都有基於一些相同(actionscript)及不同(classes and component)的方式製作,用到的compiler跟editor也不太一樣.

1. 怎麼寫? 基本上除非你要寫在 .fla 裡面黏在視覺物件上的 code (這不是很好的方法), 用一般的文字處理軟體像是(text eidtor, 小作家）就可以開始寫 actionscript.

由於 AS 是物件導向程式（OOP）為基本,在 Flash IDE 裡面的AS Editor 並不是這麼好對付這麼以文字為基礎的邏輯架構,所以可以利用一些別的Editor(專業名稱 IDE:Integrated_development_environment)來管理眾多的 Classes.
一般常見的有Adobe Flash CS3, Adobe Flex Builder (based on eclipse), Eclipse + FTD, SE|PY, FlashDevelop (PC), SciTE. 這些編輯器裡面通常都要設定core library,先把Flash基本的物件類別設定好,之後可以opne linkage libraries 去管理及應用到處抓來的東西(像是tweener / papervision….etc.)

2. 寫在哪? ActionScript 是一個 base on ECMAScript 語法的程式語言.目前開發到 3.0.(2.0與3.0語法上有很大的改變,做出來的swf在相容性也有問題）
AS 會存在的方式有三種,(1)一種是在 *.as 的文字檔上,(2)另一種是在.fla (Flash CS3) 裡面的 library 物件上或是timeline上,(3)還有就是在*.mxml文字檔裡面 <mx:Script><![CDATA[ .... ]]></mx:Script>

三種都有不同的寫法,最正規的就是寫在 .as 文件檔裡面,其他的會有一些很特殊的方式互相配合.

2.1. *.mxml : Flex / AIR

2.2. *.as/*.fla : Flash / AIR

3. 怎編碼? 要製作 .swf 或是 .air 的檔案你必須把寫好的 .fla / .as / .mxml 檔案 compile 成 .swf / .air, 就是把人可以了解的 code (文字) 檔轉換成電腦 player / runtime 看得懂得 byte code( .swf / .air)

用 .as(flash) .mxml(flex) 寫出來的東西要先被 compile 成 .swf / .air 然後可以被 Flash Player (stand alone / browser plugin) / Air (Adobe® AIR™ runtime) 拿來執行,所以光是 .as 檔案你看到的就只是一首比文言文還難懂的詩.雖然都是輸出成 .swf/.air,不過輸出的 .swf/.air 以及所用到的 compiler 有很多種,用基本的用電腦常識大概也可以知道既然是要讀檔案後生出另一個檔案,不同的軟體一定會有分別,像是photoshop不能讀 exe檔一樣, compiler也有complier的差別,有些只吃2.0,輸出的 .swf 也可以選擇讓不同的版本的 player 跑.

這些compiler 比較常見的就是

3.1. Flash CS3 (actionscript 1.0/2.0/3.0,.fla -> .swf / actionscript3.0 ->.air)
在Flash IDE(CS3)裡面的 compiler, 這個 compiler比其他兩個特別一點,他出了 .as 文字檔外, 還可以compile .fla 裡面的物件, 必要的時候還會自動把 library 裡面有 linkage 的物件,生出虛擬的 class 來使用.要用flash cs3 做air你要先有這個.

3.2. Flex (actionscript 3.0 -> .swf / .air)

3.2.1.在Flex Builder 裡面的 compiler,用這個compiler無法抓到 Flash library裡面自動產生的 Class,導致無法compile,不過如果你夠屌,連畫個圓都用 code的話（你有種就畫個臉看看),那就沒差. Flex Compile出來的東西可以是 .swf / .air

3.2.2.如果你夠屌,不需要用 IDE ,光用文字編輯器寫Code,因為你的屌, 你可以不花錢去用免費的 Flex SDK(Software Development Kit),去產生(example: mxmlc.exe -library-path+=../lib/bin/assets.swc -coverage src/test.mxml -output bin/Output.swf )

3.3. AIR SDK(actionscript3.0 -> .air)同2.2,只要你夠屌,你就不用花錢. Dreamweaver　也可以編輯＋compile

3.4. 以上都是adobe推出的, mtasc 則是 Open Source free compiler,可惜他只能讀2.0的Code.

4.怎麼跑? .swf(flash / flex), 都是放在網路上,用 flash player 9 就可以跑, AIR則要先在電腦裡面先安裝 Adobe® AIR™ runtime (類似player的東西),然後抓下 .air 安裝檔,之後像應用程式一樣安裝.

5.哪個好? Flash / Flex / AIR 哪個好?

5.1. AIR
-> PRO: 包含了 Flash / Flex 所有可以辦的到的功能加上對 Local 端互動的支援,所以功能可以說是最強大
-> CON: AIR 要先安裝 Adobe® AIR^TM runtime,之後還要下載 .air 檔安裝成應用程式,過程比較麻煩,會流失掉部分使用者

5.2. Flex
-> PRO: 有許多可以有限度更改介面以及很多針對對資料管理的 Component, 很快就可以像拼拼圖一樣拼出想要的 RIA, 利用 Flex Builder SDK 來製作,熟悉的 MXML 語法, 深受 hard core programmer 喜愛,因此也發展迅速,當然這些人認為flash沒有flex厲害,因為太麻煩.
-> CON: 如果光應用基本的 Componet 看起來會很一制,缺乏設計感(能做到的已經相當個廣,當然是會比 html好,甚至比一些鳥 Flash 好), 沒有像 AIR 一樣具有與桌面互動的能力

5.3. Flash
-> PRO: Flash CS3 具有 Timeline, 還有 vector drawing 的 Tool, 可以做動畫,Banner…等. 對於視覺創意人士而言是很好的工具
-> CON: Flash 無法像 Flex 一樣可以快速開發 RIA, 也沒有像 AIR 一樣具有與桌面互動的能力.

相信大家都多少看過電腦教學影片, http://tv.adobe.com 本家早就也應該推出免費教學了,自家的產品應該要有免費的教學才對的起消費者吧.

我想面臨 MS silverline 大軍的免費贈送學校單位與教學 , Adobe 被迫加強鞏固已有客群, 雖然晚推出了,卻用了創新的方式,減輕大家的學習壓力,這也算是有誠意啦.

據說 Shai 已經被 adobe 請去了, 可能下一代的 photoshop 就會有這個神奇的功能.

Click here to view the embedded video.