It's FROGiology » 資訊科技

Flash CS5 的新功能

Stanley Fok — Sat, 16 Jan 2010 19:17:43 +0000

對於Flash CS5的推出，Stanley真是萬分地期待。今次這個版本，明顯地比CS4更勝一籌! 除了為designer加入了新功能之外，CS5也開始著手改善developers方面的features。Flash，你真是愈來愈成熟了!

Built-in Physics Engine

在CS5中，Flash加入了Physcis Engine的組件，這對於designer來說是一個非常大的喜訊。以前designer要把物件在timeline上模擬真的物理反應，只能逐個keyframe慢慢調整，既花時間又不準確。現在，designer只要把movieclips設定為 “Physics Object”，再設定其他參數，如重量、velocity等等，然後就可以讓CS5 計算物件之間的物理反應，最後為所有Physics Object產生一條timeline。只要把timeline play一下，就可以看到了真正的物理反應!

當然，timeline是不dynamic的，即不能根據user input (如滑鼠標)作出反應。再者，現在應該都未support 3D Physcis，畢竟Flash IDE還是停留在2D的空間呢，不過相信這會是下幾個版本內會發生的事。先看看demo吧:

iPhone Packager

上一篇文章都提過，Flash CS5 可以直接publish出iphone格式執行檔。即代表Flash Developer可以加入iPhone App的開發團隊，在App Store上面賺賺錢了!

FLA會變成XML 格式

Flash終於放棄了用binary的fla檔了!!! 這有甚麼好處!? 如果你曾經做過Flash程式的開發，並且用SVN這些version control的軟件，就會知道有多麻煩了。因為FLA很多時都會被改被save，一save過了，不理有沒有改過東西，FLA檔都會被更新，然後SVN就會當它有更改過，下次commit上SVN時，因為binary檔做不到code diff，因此整個FLA也會上載到SVN server，浪費時間及空間。但當變成XML格式的檔案後，version control就可以發揮功用了!

和Flash Builder結合，而且有更強的Built-in Actionscript Editor

Flash built-in的 Actionscript Editor不好用就人所共知，因此很多人都寧願用其他editor，例如Flash Develop，貪它提供了code hint、auto complete、trace variable等這些好功能。現在Flash CS5終於醒覺了，這是一個好的IDE至少要有的元素吧!

Flash 能成為RIA界的一哥，”易用易學”是他成功的重要因素。可是如果要讓Flash更成功，我覺得有幾個地方還可以改善的:

設定devlopment framework

Flash的好處是很易用，code 放在哪兒也可以跑得到。但是這卻造就成很多沒有質素的Flash 程式及程式員。Stanley看過了很多不同人做的Flash-based website的source code，很多都爛得可怕…有的code 在timeline，有的code在不知多少層內的movieclip內的keyframe上，trace code 難得要命。如果Flash可以提供一個development framework或一個standard，令每個developer的code structure也差不多，相信會令Flash 的development更加健康。

更多的UI components

Flash 內建的UI components太少了，如果在Flash做form-based的程式，所有UI都要自己寫，太花時間。如果可以把Flex那豐富UI components library也port過來一起用，那是多麼的幸福哦。而且Flash正在開始要攻入手機市場，可以的話，應該要為手機平台做些針對手機使用UI components吧!

我想: 現在寫定一個iPhone UI library for Flash也是差不多時候了!

寫Flash的人有福了

Stanley Fok — Fri, 15 Jan 2010 16:49:36 +0000

今時今日，作為一個developer真是要學寫Actionscript了。為甚麼? Flash 對各平台的支持愈來愈利害了! 在不久的將來，只要你懂做flash application，你就可以用一個code base，deploy到瀏覽器、桌面、智能手機甚至是普通手機了!

Open Screen Project

Adobe 正在進行一個叫 Open Screen Project的項目，它的內容主要是想把Flash Player 可以建立在不同的裝置上，如電視機、桌面電腦、手機等，因此以Open Screen為名，希望可以透過Flash平台包容不同大小的screen device，並且為所有平台提供一致的互動性及用戶體驗。

Open Screen Project 官方網頁: http://www.openscreenproject.org/

Flash Professional CS5 – Packager for iPhone

Flash publish出來的程式也很流暢啊~

另一方面，快將推出的Flash CS5，早前已經表明過會包含iPhone Packager，即是你只要把Flash程序寫好，就可以直接把程序publish到iPhone程式的格式，之後就可以上載到App Store供別人下載。到時候，還需要花時間學習複雜的Objective C 麼? 就算是designer，以後都有機會加入寫手機程式的行列了! 雖然iPhone 的Safari已決定不會讓Flash Player 跑，但有iPhone Packager 卻令我更歡喜!

Packager for iPhone: http://labs.adobe.com/technologies/flashcs5/appsfor_iphone/

作為Flash Developer的一群，這些對我們都是莫大的喜訊，而我自己也很看好這個發展方向。首先，Flash 開發用戶群廣，有programmer又有designer，而且Flash 發展了這麼多年，很多人都已經懂得寫ActionScript，learning curve又低。以手機開發為例，手機型號那麼多，各有不同的OS及screen size，如果還要針對性為每個手機寫一個程式，都不知寫多少個版本才行了，所以很明顯這對手機或其他平台的程式發展必定有利。

另外，Flash open source community也十分活躍。現時已經有很多很好用又利害的library讓我們使用，如3D Engine、Physics Engine等等，因此要做各式各樣的程式或遊戲，在網上找一找已經有很多東西可以用，大大加快程式的開發時間!

雖然好處多多，但我覺得還有一些決問題還是要考慮的。我們都知道Flash Lite其實推出了也有很多年，可是為何Flash Application在手機上還是這樣不普及呢? 其中一個原因可能是以前的手機一開始沒有預載到Flash Lite Player吧，一般用戶又怎會懂去找Flash Lite安裝在手機上呢? 另一個問題，就是根本沒有Flash Application下載。可是，Apple的App Store已經告訴了我們解決辦法，就是讓community的一群也可以參與程式開發，然後放到online store讓人下載。如果Ovi Store或Android Market也可容許Flash Application，相信用戶將可以享受更加多姿多彩的程式吧!

說不定，facebook的restaurant city、開心農場會在不久將來出現在手機上了 =]

用戶體驗 – User Experience

Stanley Fok — Thu, 03 Sep 2009 18:43:46 +0000

在我還小的時候，互聯網剛剛起步，網站設計的焦點都是放在外觀為主。現在我們身處web 2.0的世代，網站已再不是單向的為我們提供資訊的工具了。我們除了在網站上取得內容 (retrieving information)，還會處理資訊 (processing information)，甚至是建立資料 (creating information)。由此看見，用戶跟網站的溝通已經變成了雙向、互動的模式。用戶體驗 (User experience，或UX) 一詞，也漸漸被網站設計師及程式員所重視。

那甚麼是用戶體驗? 簡單來說就是指用戶根據某一個設計，經過使用後他所得出的感受。Jesse James Garret 可以說是對用戶體驗有深入理解的佼佼者了。早在2000年時，他已為用戶體驗進行深入探討，並且定下用戶體驗的重要元素，由抽象的概念慢慢延伸至具體的表現方法:

User Needs: 研究用戶習慣，了解網站目的
Functional Specification: 詳細描述網站的功能，必須為解決用戶需求為大前提
Interaction Design: 計劃用戶在網站內的流程 (page flow)，以及用戶與資料互動的模式
Information Design: 考慮資訊在網站中表達的方法，並且要令介面乎合用戶互動的模式
Visual Design: 主要是從美學角度設計網站外觀及感覺 (look and free)

The Elements of User Experience

Source: “The Elements of User Experience.” Jesse James Garret. (PDF)

以下這個powerpoint，在Interaction Design 及 Information Design 這兩個層面說得也很精彩，Stanley 在此極力推介呢!

Designing Rich Applications

View more documents from Theresa Neil.

My First JigLibFlash Demo

Stanley Fok — Sat, 08 Aug 2009 05:53:40 +0000

JigLibFlash 是一個ActionScript 3.0 的rigid body physics engine。何謂一個physics engine? 就是說只要你把物件放進一個空間後，然後作簡單的設定，所有物件的碰撞、碰撞後的反應、磨擦力、扭力、吸地心引等影響，全部交給這個physcis engine就好了，你完全不用理會那些複雜的物理及數學問題，大大省卻很多時間呢!

JigLibFlash同時簡也整合了papervision3D、away3D 及 sandy3D的支援，針對不同3D engine的愛好者使用，它提供的API也十分易用易明，令我很欣賞這份細心。

以下這個是Stanley測試時做的demo:

>> 放大來看

是否很有趣呢~? 有興趣可以下載source code 來玩玩~ 要用Flash CS4 compile才行哦!
>> JigLibFlash Demo (480kb)

有用連結:
JigLibFlash Startup Guide
JigLibFlash Offical Website
JigLibFlash Documentation

Flash Development Guide

Stanley Fok — Thu, 16 Jul 2009 17:10:16 +0000

前幾天在公司又搞了我的Flash Sharing Lesson 2: Flash Development Guide。這個presentation的目的，是希望讓沒有Flash基本編程概念的朋友了解如何去展開Flash編程之路。這些內容都是Stanley多年來的心血結晶，尤其是第四部份談到的Best Practices，是我發覺很多人都沒有用心考慮過的問題。如果你覺得做Flash很花時間，不妨在此時細心想想如何可以做得更有效率吧。

Flash Development Guide

View more presentations from Stanley Fok.

下載Flash OOP程式範例 >> flash_sharing_lesson2_demo.zip

Game with Augmented Reality – 遊戲產業的新方向

Stanley Fok — Fri, 10 Jul 2009 18:03:16 +0000

最近的科技愈來愈趨向用戶體驗，好像是wii 的體感操控，iPhone的multi-touch等等。今天Stanley看了一個非利害的game demo，竟然可以將體感操控及Augmented Reality融入遊戲之中，我想這應該是未來數年遊戲產業的新方向了!

這個遊戲只要一張印有地圖的紙，及一個由NVIDIA研發的硬件。這個硬件與手機外型差不多，有touch screen，鏡頭，及高性能的GPU。只要用鏡頭對著平面的地圖，螢幕就會出現立體的建築物。玩家就要用不同的角度及距離，尋找並射殺喪屍。最有趣的，竟然可以利用skittles彩虹糖作為遊戲的道具，例如橙色是炸彈，只要把它放在地圖上，再用槍射它便可引爆，果然創作了十足!

另一個demo是加入了augmented reality 的board game，同樣有趣! 何時會有augmented reality 的大富翁玩!?

Flash 101 – Introduction to Flash and RIA

Stanley Fok — Thu, 11 Jun 2009 18:24:34 +0000

今天Stanley和同事們介紹了Flash、Flex、Silverlight等RIA技術，以及一些Flash的基本知識。很開心，大家對RIA也頗有興趣，反應不錯，對於Stanley這個RIA支持者來說，可說是非常欣慰了。

說真的，之前兩年裡埋頭於RIA的領域中所得的經驗，真是要說大半天也說不完! 從UI的規劃，以至Class要如何按排，我都有我自己一套非常嚴格的標準! 我看過很多人做過的Flash Site的source code，大部份人都沒有思考過優化的問題。要知道”優化”二字包含甚廣，如performance，work flow，team co-operation，UI structure，coding structure等範疇，programmer都可以著手加以改善，可是到google上找，也沒看到有人能夠深入的探討這樣的問題。那麼，就由我來吧!

今天的Sharing只是一個introduction，是讓聽眾們了解RIA的踏腳石~ 餘下的Sharing還有兩節，一節談優化，一節談Visual Effect Programming。又是時候準備powerpoint了~

Flash 101

View more presentations from stanleyfok.

頑遊關西 2009 Day 4 – 和菓子教室

Stanley Fok — Tue, 21 Apr 2009 18:46:05 +0000

京都的確是一個很美的地方，可是由於行程緊迫，我們只能夠花兩天時間於京都，一天在東，一天在西。我的感覺是，東面比較人多熱鬧，西面就貼近大自然，各有各的特色，若要體會京都的風情，必定不能錯過它們哦。

今天的重頭戲就是學做和菓子了，這是女朋友強烈要求的行程，為了滿足她這個願望，我也搜集了不少和菓子店的資料，終於給我找到在嵐山有分店的甘春堂~ 一節課1小時15分鐘，做三款和菓子，學費每人2000YEN~ 只要女朋友開心，花多少少錢也沒所謂啦~

以下是今天的行程:
0930 坐地下鐵御堂筋線到梅田，再轉乘阪急電鐵到達阪急嵐山駅
1030 遊覽渡月橋一帶
1230 於嵐山吃午餐及購物
1400 參觀天龍寺
1500 甘春堂和菓子教室
1650 乘坐嵯峨野觀光列車到龜岡
1720 於龜岡的花田拍照
1800 乘坐JR山陰本線馬崛駅到二条駅
1900 參觀二条城夜櫻觀賞活動
2100 到京都JR駅回大阪
2200 到道崛頓吃晚飯及購物
2330 民宿四季居

頑遊關西 2009 Day 4 路線圖

嵐山、嵯峨野，就是今天的目的地。有些旅遊書教大家從大阪去嵐山，可以在梅田坐JR山陽本線到京都駅，再轉乘山陰本線到嵯峨嵐山駅。這路線大概要一小時多的車程，但其實到嵐山是有另一個路線可供選擇呢! 在大阪的梅田，其實也是阪急電鐵的總站(從地下鐵站走過去只是幾分鐘的路程)，那兒有電車直到京都的河原町。如要到嵐山，只要在中途站”桂”轉車便可，非常快捷方便。還有就是下車的地點鄰近著名景點渡月橋，在安排行程上也更方便呢~

這就是阪急的電車了，棗紅色的車身給人一種典雅的味道~

在阪急嵐山駅下車，就是嵐山公園的範圍。這天，我們終於第一次近距離接觸到開了花的櫻花樹了!

櫻花沾上了雨水，特別純潔~

來一張旅遊雜誌的例牌甫士~

嵐山就是給人這種家鄉的感覺，你感覺到嘛~

日本旅遊大使露露~

大堰川有船隻出租，你更可以逆流而上到龜岡一帶呢!

在渡月橋對岸，是人力車出租的地方，兩人同坐大概$3000YEN 15分鐘~拉車的都是很年青，有的更是女孩子，他們除了拉車，還會當導遊，而且還是搞笑能手呢~ 總之服務態度一流!

突然在京都的路山見到了一隊車隊，是甚麼政治團體麼…?

行過了渡月橋，是一條大街，兩旁商店林立，消費慾又再爆發…

我們報了甘春堂下午3時的和菓子製作班。為了不要遲到，我們早30分鐘已開始出發前往。雖然甘春堂的位置比較遠，但是路很易走，有地圖是一定找得到的~ 我們很快也找到了位置，可是我記錯了上課時間…最後都是遲到了…

嵐山甘春堂分店~

漂亮嗎~? 這是……老師做的…~

這就是我們的用心之作~ 大家估到哪個是我的女朋友做的~?

來跟老師的作個比較吧…呵呵…-_-”

他就是我們的老師了，雖然我們不會日語，但他也很細心的教我們呢~

做完了~ 有一個和菓子是即場吃的~ 還有一碗濃濃的綠茶喝~ 深深體會到日本文化呢~

有用連結:
甘春堂和菓子教室 – http://www.kanshundo.co.jp/museum/make/annai.htm
其他網友在甘春堂做和菓子的過程 – http://www.wretch.cc/blog/ikumichan/12225972

頑遊關西 2009 Day 4 路線圖

wonderfl – 為Flash Developer而設的Web 2.0平台

Stanley Fok — Wed, 04 Feb 2009 16:54:29 +0000

今天看到了一個非常之厲害的網站，叫wonderfl(真是不得不叫人說wonderful…)，由一位叫kayac的日本人做的。這個網站的賣點，你可以直接在網站上寫actionscript，並且可以立即compile查看結果! 過程無需使用Flash的IDE也可做出令人拍案叫絕的效果! 作者把compilation這一步放到server上做，果真夠創意呢!

Wonderfl 主頁

用戶的code及compile了後的結果

除此之外，網站還加入了web 2.0的元素! 例如你可rate別人寫的code，rate 用戶等等功能，使用戶更加有心在這個平台上做出出色的作品，互相分享! 另外，最有用的就是code search的功能，例如你不知道”ColorTransform”如何使用，你可以來wonderfl找找code reference看，這對於學actionscript是十分有幫助的!

不過有一點要說的是，因為沒有了Flash IDE的關係，所有的UI上的東西都要寫code來generate出來了，而且這個工具只有對actionscript很了解的人才懂用啦。

最近作者還加入了Papervision3D 2.0的支援，想看更多Papervision3D 2.0的範例嗎? 快去看看啊!

以下是一些傑出的作品~

forked from: BallBlast – wonderfl build flash online

forked from: Colorful Rings – wonderfl build flash online

「PV3Dその3」　に　グーグル検索を交えてみた。forked from V3Dその3 – wonderfl build flash online

Augmented Reality on Flash!

Stanley Fok — Mon, 19 Jan 2009 15:10:13 +0000

根據Wikipedia的定義，Augmented Reality即是實時地將電腦畫像、聲音、氣味等融入於現實地界之中。其中一個好好的例子可以說是龍珠卡通片中，用來查看對手能力值的那個儀器了。

最近，這個技術開始被人融合到Flash的平台上，再加上papervision3D 這些3D engine，已經可以做出令人驚嘆的Flash Application了。

以上這兩個demo 都是利用web cam，加上一個特別的標記做出來的:

Demo中使用的標記

在Flash中，標記的形狀、大小、扭曲程度會被計算，並且計算出平面的距離及角度，得出這些資訊後玩甚麼都可以了~

更利厲的就是已經有位日本programmer Saqoosha 做了相關的library，叫FLARToolKit，有興趣可以看看哦:
http://www.libspark.org/wiki/saqoosha/FLARToolKit/en