Anistar RIA Blog

沒錯，久違的Flash/Flex體驗活動又來啦，
這次我們要用50行以內的程式碼來體驗Flash和Flex的互動魅力，
這次活動中總共準備了兩個非常實用的範例來跟大家分享，
一個是經典的CoverFlow效果，
而另一個則是目前非常流行的HD高畫質影音應用。

以前許多的廣告總是打著1元可以做什麼？
反正不是能加購一個商品就是可以在多加什麼優惠，
不過寫互動程式可不是多一行程式就多送一個效果啊 。 XD

若是能夠達成業主和老闆的任務，
當然能夠用越少行的程式來完成任務，
就代表了你有更多的時間可以做更多的事，
可以早點下班，可以回家陪陪家人，
所以這次我故意將大家動不動就寫了好幾百行的程式的效果，
但是卻用短短的50行來完成任務，
當然這必須要有清楚的觀念與對Flash技術的熟悉才能surrport這種做法。

示範1：CoverFlow經典效果

其實從Flash 10以後就開始支援了3D的功能，
你可以不用了解複雜的3D理論就能夠使用各種透視與旋轉的效果，
這是以前很難辦的到的事情，
透過Flash 10的技術，像是CoverFlow這種經典的效果，
就能非常輕易的用50行的程式寫完了，
在這個示範中當然我們要完成基本的兩個任務，
第一個任務是要讓照片能夠像CoverFlow的效果一樣，
讓兩側的相片傾斜擺放，
而中央的相片則是正對畫面，如下圖所示：

再來第二個任務需要讓使用者可以用滑鼠或是鍵盤來操作CoverFlow效果的左右滾動，
這樣使用者才能夠自己去做相片的指定動作，
畢竟CoverFlow只不過是一種瀏覽的效果罷了，
更重要的其實是如何做項目與資料的指定，
不然就稱不上是互動，
而只是一段絢麗的動畫而已。

想要看實際展示效果的網友，
可以看下方的示範錄影(可點選全螢幕功能放大觀看)，
若是想要觀看高解析度的全螢幕畫面，
也可以點選下方的超連結到該網址上看完整的內容：

現場直擊Flash/Flex特效瘋-活動內容(CoverFlow) from anistar sung on Vimeo.

當然這只是一個Flash/Flex應用的開頭，
他的延伸還可以變成任意旋轉的3D介面，
或是製作Apple的Time Machine介面，
甚至你也可以結合XML或是資料庫來提供動態的資料挑選，
這些就留給大家自行發揮了。

示範2：HD高畫質影音應用

Flex是什麼？我每次在上課都要重申一次，
Flex其實跟Flash根本就是巒生兄弟，
一樣是使用ActionSctipt 3.0來進行程式的撰寫，
同樣在Flash Player上面執行，所以根本就沒必要分家，
只是Adobe在Flex建立了許多非常優良的元件，
可以讓(程式)設計師非常快速的去與現有的後端伺服器與資料庫做溝通，
但是其實Flex對互動效果的呈現也是非常優良的，
所以我們再次用50行的程式快速的產生HD影片播放的介面。

其實早在Flash Player 9的時候，
HD影片就能在上面進行播放了，
既然Flex與Flash是巒生兄弟，
那麼當然在Flex理面要播放HD影音也不會是什麼困難的事情，
甚至還可能會更簡單，
所以首先的任務就是能在Flex中播放HD影片，
說真的每次看到HD影片還真的會不由得感動一下，
因為畫質實在是太清楚了，
活在這個年代真是太好了 *哭泣*。

當然只是播放HD影片沒什麼了不起，
重點在於可以用互動的方式來切換不同的HD影片，
因此在示範中我們可以利用滑鼠的操作來中間半透明的浮動面板，
並透過光暈與放大的效果讓使用者可以非常清楚的知道他想要觀看的影片封面為何，
其實動個腦筋，
你甚至可以將上一個示範的CoverFlow效果搬進來做為瀏覽也行。

而這個浮動面板也應該能隨時收合起來，
以免擋住面也是有點煞風景的，
就像是在電影院有個路人甲在你前面晃來晃去，
你應該也會很想用爆米花丟他吧。 :p
我們在浮動面版上簡單的提供了"navigator"和"close"兩個簡單的功能，
意思就是你可以收闔或展開這個介面。

沒錯，這樣的一個精采的互動應用只需要50行就能完成了，
實際操作效果可以觀看下方的影片，
因為是HD影片當然是會有聲音囉，
你可以打開的的喇叭，
享受一下家庭電影院的快感，
我心裡其實在想，
如果以後DVD或是藍光影片開頭目錄可以做成這樣的話會有多好。

現場直擊Flash/Flex特效瘋-活動內容(HD Movie) from anistar sung on Vimeo.

以上示範都是Flash與Flex的50行示範，
相信你應該能親身體驗到Adobe互動RIA技術的魅力吧？
非常歡迎你能來參予這場活動，
讓我們面對面直接交流，
活動預定為8/26於優勢數位設計學苑(恆逸資訊)舉辦。

活動與報名網頁: http://us.uuu.com.tw/events/090803_flash_flex.htm