[練習]Flex+AS3=>Genie Effect

自己出給自己的作業

等圖載入後，點圖看效果

左上角的type切換三種移動模式

上方網址列可輸入任意圖檔連結，載入別的圖試效果。

::Demo

Device Central CS3的該死bug

今天發現Device Central CS3一個可惡的bug，出現條件是Flash Lite3.0並使用loadMovie or loadClip的狀況下。

我建立兩個檔，test.fla及test2.fla，兩個的publish setting都是FlashLite3.0 + Actionscript2.0，使用Flash CS3，並在Device Central下瀏覽。

test.fla的內容為：



而test2.fla的內容為：


很簡單的測試，產生出test.swf後，以DeviceCentral來previeew test2.swf
若選擇FlashLite2.x版的模擬器，則會看到正常結果，如下：


若選擇FlashLite3.x版的模擬器，則會看到不正常結果，如下：


此bug造成的結果是，被load的swf，無法取得_root下的成員，雖然我沒一一實測，但光上面的狀況，就夠可怕了。

所幸此bug只存於Device Central CS3裏的FlashLite3.x模擬器，實際手機測FL3則是ok，Device Central CS4也無此bug。

>>下載測試檔：DeviceCentralCS3_bug.zip

[公告]mmug換位置

http://mmug.com.tw/ 因為一些說來話長的原因，暫停服務一陣子！

若是您在這段期間有什麼 Flash 的問題 "急著" 想要找人請教與討論的話，歡迎到 Google Group 平台的 AUG.tw 繼續發問：

http://groups.google.com/group/augtw

HTC Diamond Touch3D and Flash Lite

這篇主要來探討HTC Diamond-Tocuh 3D UI裏，Flash Lite有哪些做得到，哪些做不到。以下純推測，畢竟我不在HTC裏，也不認識Touch 3D的實作團隊，所以是純技術討論，但實際上Touch 3D是不是用我說的方法來做？就不在本篇範圍內了。


Youtube上已有很多影片了，請自行前往
http://tw.youtube.com/user/HTC
沒時間的話，直接看這段就好


1.時鐘

時鐘翻字效果，如果我來用Flash實作的話，我會直接把數字切半後做上下垂直壓扁，不需真的做梯形變形。有變梯形的，只有白色紙片底圖。重點是白色紙片跟黑色數字兩者是分開的。在變梯形的白色紙片與垂直壓扁的黑色數字疊在一起後，自然看起來就像一個翻頁效果了。


2.Music Play List


在iTune, iPod的Cover flow出現後，許多廠商爭相模仿，我也被許多人問過如何以FlashLite做cover flow，但答案是不行，至少標準的作法是不行的。重點仍在梯形變形，FlashLite截至目前3.1版，仍無法對bitmap做處理，因此無法做梯形變形。而非正規的作法(如mask)，可以模擬個大概，但不是很標準，且也很耗效能。
不過去除技術因素後，我仍強烈反對再做一套cover flow，原因是何苦做個me too產品再被大家笑呢？

HTC這個music play list的作法就滿聰明的，有抓到end user想要的重點：3D & rotation，但又跟Apple的效果不太一樣，而免去copy cat的罪名。另外就FlashLite的技術來看，實作機會也大為提高，原因是我們仔細看可以發現，它並沒有變梯形，而是平行四邊形。如下圖：

以Flash來說，變平行四邊形是非常容易的，以上圖的連續動畫，就可以弄出這個類3D效果了。
(同樣效果也有做在Phone book裏)

3.一些純動畫的地方
另外比較單純的，像氣象動畫


或是email翻轉動畫

(註：但email裏的文字部份在下一點補述)

甚至三軸加速計小遊戲

都是單純的動畫+互動功能，也是Flash擅長之處。

4.Flash實作困難之處
前面一直有強調梯形的問題，以下我們可以先挑出幾處有這種效果的地方。
如兩單元間的轉場：


或是photo & vidow單元：


或是email裏的文字：

從Youtube上各影片來看，email動畫中的文字每次出現都不同，所以應該是真實email的內容，不是隨便打些假字。可以看到文字的部份也做了變形。

5.結語
雖然昨天才launched，不過我們大概已不難想像Diamond將會贏得多少話題多少目光，就像一代阿福機一樣。

不過雖然Diamond的UI做得很棒，特殊UI項目也比一代阿福多很多，但總有一種「本來就該如此」的感覺，而較沒有一代阿福出現時的驚豔感。但就「起、承、轉、合」的步驟來看，Diamond算是在「承」的位置，這樣的表現也算恰如其分，之後的第三支TouchFlo，應該是更值得期待的。
(謎：你忘了Shadow了…)

最後就Flash的部份再說一下心得。從事Flash工作以來，常在視覺效果與效能之間做拔河，即便是以前在PC上做Flash也是。而這中間的秘辛常常是以類似變魔術的手法來達成，以各種取巧，不擇手段的方式，欺騙user的眼睛，來營造出常規做法做不出的效果。就像大衛考伯菲穿越長城一樣。我們都知道他不可能真的穿牆，但他確實有做出「好像穿過去」的假象，而且弄得很像。
(謎：這年頭沒人記得大衛了吧，該用日本的賽洛或是大衛白爛來舉例吧…)

若能以這種變魔術的心態來創作Flash視覺特效，我認為常會是作品致勝的關鍵。很多人都能想出不錯的idea，即使不是UI 設計師，也常有一些不錯的天馬行空。但重點在不是每個人都能想出戲法關鍵。
講到這，會讓我想到日本Flash大師Yugo近期的DropClock

http://scr.sc/products/dropclock/
這個視覺效果很棒，但由於沒辦法以Actionscript實作出來，或是讓出來的效果良好，所以最後他決定用影片的方式來做，整個screensaver要130多mb。
我覺得這就是想出了不錯的idea，但卻沒想到很好的戲法關鍵，直接用影片來做，等於是表演穿牆魔術時，真的跑去挖牆壁一樣。130多mb的screensaver，我看完效果就移除了。
不過Yugo以前的作品還是很不錯的，值得大家學習。 :)

不論如何，用Flash來變魔術，真的是很有趣的一件事。

Flash Lite 3 security issue

Flash Lite3.0主要是要跟Flash8做相容，但其實很重要的bitmapdata卻完全不支援。更糟的是好的不學盡學壞的，Flash8最糟糕的安全性設定卻是完全移殖到FlashLite3了，造成許多要連線的swf都無法連線，原因及解法如下：


沒錯，就是在publish時要設local或是network only。不過，事情如果這麼簡單就好了，因為在一般S60 Standalone player上跑swf時，其實就像是我們在PC上用Standalone player執行swf。而在PC上的話，要連線的content會跳出一個設定選項，請你把這個swf的所在路徑設定可信任的位置，像下面這個畫面


而在手機中，是沒有這個介面讓你設的，所以我不論有沒有設什麼local, network，根本就完全無法連線。
(local or network設定，也許是要把swf框在html裏，用手機browser去看時，才有效果吧，我猜)

最後發現的方法，是要在Other目錄中，自行開一個叫"Trusted"的目錄，把所有要連線的東西都放進去，就可以正常連線了。

參考資料：
Flash Lite 3 security
XMLSocket to localhost problem
Nokia N95 Debranding Guide
Flash Lite 3, accessing local and remote data how to

從A到A+ Adobe AIR 上市技術講座-筆記

Adobe AIR 1.0 Logo
照片原由 mike.chambers 上載

今天下午參加了Adobe 舉辦的「從A 到A+ Adobe AIR 上市技術講座」，以下做簡單的筆記

這個活動原先有po在台灣AUG上(Adobe AIR launch party)，來的人數不少，約莫40~50人吧。
BTW，君悅酒店的小點心還滿好吃的。

．活動主旨為AIR，不過時間配置大約是介紹Flex3, AIR各半。
．一開始先播了台灣AUG拍的30onAir影片，及官方的Behind the scenes:Adobe AIR(約10多分鐘，網路上只找到一個搞笑節錄版)做開場。
．主講人為Ryan Stewart(Platform Evangelist for Adobe)

．Flex的部份主要在介紹Flex3 builder的新功能
．AIR的部份主要介紹AIR的基本架構、功能等
．老實說，這場present對長期關注RIA技術的人來說，應該是了無新意，Flex3,AIR的能力、架構，都是他們早知道的。
．不過相對來說，對不熟Flex, AIR，甚至第一次接觸的人(例如媒體朋友)，應該是很有幫助的。

．以下記一下present提到的範例：
-eBay Desktop
-Finetune Desktop
-NASDAQ Market Replay
-Google Analytics AIR beta(推，支援中文)
-SHIFD AIR Tool
-Nick.com Puzzle
-AOL Music Top100Video
-Adobe Media Player
另外兩個附帶提到的網站
-Small Worlds(Flex開發的Web2.0 3D Avatar系統)
-AlivePDF(ActionScript 3 Open-Source PDF Library)

報告完畢!

AUG2008新春網聚

想要知道Adobe在RIA開發上又多了啥咪新東東嗎？
想要知道超級貼心的我們這次又準備了啥咪好康嗎？
這一切的一切都在我們精心準備的3月網聚中揭曉！

Happy Chinese new year!!!!

報名由此去

Sprout:很不錯的web多媒體widget編輯器

Sprout是個很不錯的web widget編輯器，可包進影片、聲音、照片等各種多媒體素材，編輯器本身介面也是以Flash(or Flex?)完成，也算是非常不錯的RIA範例。有興趣可以試試。以下是我以Sprout用製作的小widget。(從製作到發佈blog，花費不到一分鐘)

Twitter API for AS2

最近做了個Twitter API for AS2的Class。

為什麼要做這個？因為我想寫一個Flash Lite版的Twitter Client，然後又因為目前放在Twitter官網上的那份AS2 class是不健全的，裏面只能做到讀取一般status的動作，無法做更深入的操作，所有登入後的操作幾乎都沒寫完整。且官方在今年初有追加了Follower / Leave Notification的功能，也沒有更新進官方的class裏。

而官網上提供另一個選擇是SWX，呃…老實說對這暫時沒什麼興趣。

基於上述原因，所以才搞了這個。

順帶一提 ，Twitter for AS3 class又如何？雖然我還沒仔細檢查官方目前放的AS3 class是否健全，或是有無高手寫過完整的Twitter AS3 class，不過以目前許多AIR開發的Twitter Client來看，想來應該是沒問題的吧？
範例看這裏
檔案下載

kuneriLite入門

記錄一下初次使用kuneriLite的筆記。


簡介
kuneriLite是可以擴充Flash Lite對硬體控制功能(S60 only)的開發工具，讓FlashLite可做到原來做不到的事，如對Camera, GPS, File System等功能的控制。

能力
在kuneriLite裏，這些擴充能力稱為"plug-in"，目前支援的plug-ins如下：
-Accelerometer plugin
-Camera plugin
-Connect plugin
-Download plugin
-DTMF plugin
-File plugin
-GPS plugin
-Rotate plugin
-Simple protection plugin
-Timer plugin
-Upload/Download plugin
完整列表請看這裏
範例成品下載

原理
與flyer類似，kuneriLite也是在手機中建一個local server(base on Symbian C++)，再以Flash Lite用loadVariables連結127.0.0.1來達成溝通。所以實際跟硬體溝通的其實是local server，而Flash Lite只是不斷跟它傳遞資訊而已。
細節請參考官方Wiki上的kuneriLite Overview

軟體
kuneriLite同時也是一個打包.sis的工具。在開發過程中必需把你的.swf放進kuneriLite的PC端tool中，再轉換成含有kuneriLite功能的sis，完成後手機直接安裝該sis即可，不需另外裝其他軟體。
目前有分三個版本
-Basic : 免費下載，plug-in功能完整，只可做個人測試用，不可任意發佈成品(不論是否商業性質)。
-Professional : 免費，但需跟官方申請才有。plug-in功能完整，除個人測試外，可發佈非商業作品。
-Commercial : 付費，無任何限制，甚至可客制化plug-ins
三版本詳情請看這裏

安裝
1.下載Basic版
2.安裝kuneriLite前，有3個東西要先裝好：Java runtime, Active Perl and Symbian S60 3rd edition SDK Maintenance Release
註：詳細說明及各別下載連結請參考這裏，記得注意裏面路徑設置的說明。
註：其中S60 SDK比較麻煩的，需先註冊成Forum Nokia的會員才可下載，而Forum Nokia的email審核標準比一般嚴苛得多，gmail使用不能。註冊完後，此SDK有300多MB大，需花不少時間。

使用
打開KuneriLite Wizard會看到以下畫面。

設好Project Name, note後，記得要選取右邊的Plug-ins，有需要用的就選起來。另外右下的Use external player yes/no，意指是否要用額外的FlashPlayer播放，選no的話，則以預設/內建的Player，選yes的話則可用另外灌的版本。(但這部份目前測是無效，在我N95上不論選yes/no，都固定以2.0開啟，而在N73測則固定以1.1開啟)

第二個畫面如下，是給你選.swf以外，會用到的檔，可包進多個檔，或整個目錄。


第三步如下，swf欄必填，就是主要work的.swf，其他欄可留空。按下方Compile project後，等待一段時間即可得.sis檔。(compile時間有點久)


如compile過程有錯誤，請檢查安裝時所需的三個軟體是否都有安裝，及路徑設置是否都正確

開發
而Flash這邊的code要如何撰寫？以accelerometer來說，accelerometer plugin主要有三個行為：Start, End 及Read。
Start及End似乎是各plugin都需要的，好讓local server不需持續開外掛，當收到start時才開啟，收到end則關閉。


指令執行後，接收變數的mc會收到(非同步)對應的變數內容。不同的plugin會有不同的變數，以上述accelerometer來說，當我下readsensor時，在test_mc後就能得到：
klEnd
klError
klCount
klXAxis
klYAxis
klZAxis
幾個變數

每一個plugin的詳細用法請參考官方wiki及fla範例
配合說明及範例檔，應該就不難上手了。

注意
用到目前為止，我覺KuneriLite的使用方便性及支援程度都還不錯，Basic即有所有plug-ins可玩，相當不錯。唯一麻煩是以Basic版開發的sis，一次只能裝一個在手機裏，若要裝第二個.sis，必需先移除原來的才行。(包含官網的範例成品也是以Basic完成的)。這是為了防止user把basic開發的東西拿出去散佈而設的限制。

注意2
由於FlashLite3的安全性問題，所以若要發佈給FL3手機使用的話，記得在Installation path裏要填\Data\Others\trusted\[application]\，官方說明在此。

若真要做可發佈的作品，則需跟官方申請professional版才行，申請過程不知是否會很麻煩，有待測試查証。

Flash Lite with accelerometer

在知道Nokia部份手機有Accelerometer後，當然會想知道如果以Flash Lite來開發。以下是我所知道的2個方式。


0.謎之影片
介紹之前先說說這段新聞影片：FlashLite and N95 Accelerometer APIs
這是前幾天看到的新聞，從作者的簡介可以知道是Adobe在印度辦公室的工程師，裏面提到關於accelerometer api是由他另外兩個伙伴完成，而實際運作模式也沒有說明。

1.kuneriLite

kuneriLite是一個類似Flyer或Janu的Flash Lite功能增強套件，其原理都是在手機建一個local server，此server由Flash以外的技術寫成(java, python...etc)，這些技術通常有比Flash Lite更大的硬體操控資源，如系統訊息、Camera、GPS甚至是Accelerometer。透過連結此local server，讓Flash Lite能間接與硬體做更多的溝通。
而kuneriLite, Flayer, Janu這三套裏，目前只有kunerLite有支援accelerometer訊號。
可直接在kuneriLite Tester applications頁面中取的一些範例.sis。
註：測式accelerometer範例前，需先安裝Nokia N95 Accelerometer plugin package
註：這些tester app，一次只能裝一個進手機，裝第二個前要先把第一個刪除掉，否則裝不進去。這是license限制的關係。

2.Nokmote

這是比較遜的方式吧，直接用法國人Samir開發的Nokmote程式來做。Nokmote只是把accelerometer訊號轉成方向鍵訊號，並於S60中做背景執行，所以我們可以先launch Nokmote後，再進Flash Lite Player播放我們的swf，然後只要接收onKeyDown即可知目前的傾斜狀況。
雖然使用上很方便，但仍不建議，原因是我實測後發現，Nokmote目前還不是很完整，無法自設靈敏度，使用後會FlashLite會一直收到連發的key event，你必需自己過濾多餘的訊號。且也只能知道傾斜方向，卻不能知道傾斜程度，實用性大打折扣。

總結上述
以kuneriLiter來實作效果會比較好，支援較完整，雖然需要額外安裝一些軟體，但我試用過發現其實還滿容易上手的，其api 文件、範例也都很完整。而且不只accelerometer，如camera, GPS, file system一樣等都能控制，AS開發上也很方便，以loadVariables呼叫即可。(所以連FL1.1也可支援)

接下來準備來寫一篇kuneriLiter入門示範。

N95 Accelerometer

N95 加速計(Accelerometer)，本來只是內建在相機中，好讓照片存檔時能自動判斷圖檔是否需要旋轉的感測功能。但這讓wiimote殺到不行的accelerometer sensor卻只做照片旋轉這件事，未免也太浪費了。所以網路上開始出現了一些N95 accelerometer hack應用。

．Moving Ball

這應該第一個出現的應用，如上圖所示，然後可以藉由手機的傾斜方向來移動小紅球。目前已可在Nokia Research Center中找到說明文件及源始檔。

．Samir系列

MovingBall出現沒多久後，一位法國的工程師Samir陸續開發了rotateMe,Nokmote,ShutUp等accelerometer應用程式。

-rotateMe ：根據手機擺放角度，自動將S60介面設為橫向或直向。

-Nokmote ：將手機傾斜訊號轉成方向鍵訊號。

-ShutUp ：手機正面朝下時自動轉靜音

註：Samir所有作品在此。上述有些開發中作品暫無提供下載，要donate後才能得到測試版。

．Flip Silent

Flip Silent是由大陸的SymbianBlog.com所開發的作品，功能與Samir的ShutUp一樣，主要都是讓手機蓋起時自動靜音，不過版本更新比Samir快多了，目前已到1.03版，多了更多細節設定。

-Flip Silent官方網頁

**題外話，關於自動靜音功能…
其實不論是Samir的ShutUp或是大陸的FlipSilent，其最早的概念都應來自於Nokia於2007/10月份左右的發表的Touch UI Concept影片。其中有一幕就是在表現這個概念。只不過該影片只是"concept"，沒想到N社自己還沒實現，外面就一堆人實做出來了，滿有趣的。

．LightSabre

看名字就知道這是啥子了，沒錯，這是把手機當星際大戰的光劍來用，當手機揮動時就會發出光劍的嗡嗡聲，夠Kuso吧。

-LightSabre

-這裏可以看到很多用N95玩LightSabre的影片。

．NiiMee

NiiMe是以Python開發的手機結合PC作品，可以利用N95當作像Wiimote的手把，來控制PC端，例如玩Game等行為。
-這裏有示範影片

．其他用Python開發的作品

-pyPiwo

-pyPoziomica

-pyMoneta

不過大多是一些實用性不高的小ap

目前蒐集到的資料就這些了，期待將來有更多有趣的應用出現吧。

幾個免費的手機播Youtube FLV的方案

介紹幾個目前手機播Youtube的免費程式，包含一個快推出的FlashLite3.0 app.


手機看youtube，最快的方式是上官方的http://m.youtube.com/，不過這裏的影片並非Youtube上所有的影片。原因是大部份手機並未支援.flv的播放，因此這裏只提供轉換成.3gp格式的影片，而Youtube目前還沒有將這個手機站的資料與原站資料100%且即時的同步，所以這裏只能看到部份而非全部的Youtube的影片。
[update:2008/1/24]
m.youtube.com網站已更新，官方說"大部份"影片都有支援手機版，這個"大部份"是多少我個人無法確定，不過用了一下發現，確實是比之前好很多了，很多影片都有，也能做上傳動作。且手機版網站也有多國語版，包括繁體中文。
[update:2008/1/24---end]

本篇主要的重點是要看到與Youtube一模一樣的資料，讓手機能觀賞.flv影片

[update:2008/1/24]
0.Youtube for Mobile(beta)*

官方工具是不錯的選擇，功能完整，也能上傳，介面也算美觀，可試試。唯一重大缺點是中文無法正常顯示，且我猜播放的可能不是.flv而是.3gp，只是都在app中播放，不會另外叫real player，比較不會有操作的不順感。
http://m.youtube.com/app
[update:2008/1/24---end]

1.emTube

emTube是一個免費的S60程式，安裝後即可在程式內瀏覽、搜尋、播放Youtube影片，也能把.flv下載到手機，還可觀看手機本地的.flv檔案 (不過我測試此功能時發現只有從Youtube抓下來的才能播，像土豆或其他地方抓的.flv，有時會不能播)。另外若是N95等內建加速計的機種，還能像iPhone一樣，在手機轉橫時，畫面自動轉90度。非常不錯。
http://www.emtube.yoyo.pl/

2.YoutubePocket

YoutubePocket也是免費的服務，主要是針對WindowsMobile系統的，用手機內的IE連http://www.ytpocket.com/後，透過裏面的install步驟一一照做即可。之前瀏覽也是再用IE連此網頁，在網頁上做瀏覽、搜尋，到要播放時就會自動呼叫對應的程式來播放。也算是滿方便的。

3.Youtube Mobile by Flash Lite3.0

這還在開發當中，不過就demo影片來看應該快了。利用FL3.0開發的Youtube app，UI的表現比上述兩者好，實際狀況待它release後才知。
YouTube Mobile - A FlashLite 3.0 application

4.MobiTubia
一樣還在開發中的MobiTubia，也是for S60的，目前只有screenshot而已，有興趣可以看看
First Look at MobiTubia

5.YTPlayer
法國Samir開發的YTPlayer，仍在beta階段，目前只有一個Flash的.swf檔，目前功能只有Search, Play而已，且手機需先安裝好FlashLite3.0才可執行。
YTPlayer

The Sword

>>作品欣賞

PS.這是2003年的動畫作品，因之前blog轉換時不慎遺漏此作品的說明文，因此補上。

Title / 片名：劍 / The Sword
Running Time / 片長： 3min. 40 sec.
Nationality of Film / 原產地： Taiwan(R.O.C)
Year of Production / 出品年： Sep. 2003
Director & Script & Animation ： Maso Lin /林秉舒
Music ：妙蓮華唱片有限公司

Synopsis：
講述一把具有魔力的劍的故事，以闡述人類心中慾望的產生及過程。
The story about a magic sword.
this story is about a sword that many people fight against each other for getting it, through describing the process, it explains the process and birth of human desire...

獎項&展歷:
．經濟部工業局2003年4C數位創作競賽動畫組佳作
．經濟部工業局2003年4C數位創作競賽動畫組智冠科技股份有限公司贊助獎
．2004 Seoul International Cartoon&Animation Festival-Internet Animation

[簡報]Play With Multimedia

昨天應以前研究所老師之邀，回到母校演講，我這次講的題目是「Play With Multimedia」，內容其實主要是介紹Flash目前及未來幾個不錯的發展方向，裏面收錄了許多我個人覺得不錯的Flash作品或網站範例。有興趣的人可以看看


概要：

本簡報主要介紹近五年多媒體界的演進及未來五年可能的發展方向。

過去，多媒體的核心意義都在於「整合」這件事上。而隨著科技的進步，現今的多媒體能整合的元素也愈來愈多，表現的方式也愈來愈廣；而在如此龐雜的資訊環境中，更是突顯「整合」的重要性的普遍性。

早期，多媒體設計大多著重於光碟設計，之後隨著internet的發展及寬頻的普及，光碟市場慢慢凋伶，取著代之的一個個聲光俱佳的多媒體web site。

Internet的大環境經1999的泡沫化洗禮後，近年來已走進了web2.0的新世代，從content is king 演變成service
is king。而網路多媒體設計發展也慢慢從單純的聲光表演，延伸到更注重使用者需求的UI design。

在未來網路上的多媒體仍會繼續發光發熱，每天思考著user experience 的設計師們將會慢慢把焦點移到PC
以外的上網環境，mobile internet的口號已慢慢實現。而未來設計師所要琢磨也不再是只有鍵盤與滑鼠的輸入介面。Touch
panel日益普及，新興的motion UI也會帶給世人愈來愈多的革命。

未來，多媒體設計的應用將會愈來愈普及且廣泛。