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、開心農場會在不久將來出現在手機上了 =]

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 OOP程式範例 >> flash_sharing_lesson2_demo.zip

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的範例嗎? 快去看看啊!

以下是一些傑出的作品~

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

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

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

Demo中使用的標記

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

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

相關連結:
http://www.boffswana.com/news/?p=392
http://09.aid-dcc.com/

http://www.prettyloaded.com/

Coke Zero By Coca-Cola

The Da Vinci Code 電影

在開始前，我希望大家可以先安裝一個很好用的Flash ActionScript Editor，叫FlashDevelop。它是一個open source的editor，和Microsoft的Visual Studio內的editor差不多，提供auto-complete，code hint之類的功能，比使用Flash IDE入面的editor，效率可以提升十倍有多!

下載頁: http://www.flashdevelop.org/community/viewforum.php?f=11

事不宜遲，現在我們開始吧!

1. 設定Folder structure

首先，我們先建立一個folder，用來放置我們的Flash程式，我把folder叫”MyApp”。

然後在”MyApp”中，再建立一個叫”classes”的folder，之後我們所有的actionscript都會放到入面了。

設定Folder structure

2. 利用FlashDevelop建立新project

現在，我們可以在FlashDevelop中，建立一個新project。

打開了FlashDevelop後，點上面menu的”Project”，再選”New Project”。在”installed Templates”中選ActionScript 3 Empty Project，並且輸入project名字，及位置(在步驟1建立的folder)，然後按”OK”。成功後，你會在”MyApp” folder中見到一個.as3proj的檔案，以後double click它就可直接打開project。

在FlashDevelop上建立一個新project

3. 設定FlashDevelop

現在，我們要告訴FlashDevelop我們的class 檔會放在那兒，做了這個步驟，你往後就可以享受FlashDevelop的威力了。

點選”Project”，再選”Properties”。在”Classpaths”這個tab中，按下”Add Classpath”，並選取之前建立的”classes” folder。

在FlashDevelop中設定classpath

4. 建立fla檔

打開Flash IDE (我用的是Flash CS3)，並建立一個新的AS 3.0 Flash 檔。同樣，我們也要設定classpath，否則之後compile時，就會因找不到相對的class檔而出現error。

按”File”，再選”Publish Settings”。點選”Flash”這個tab，再按”Settings”。不勾選”Automatically declare stage instances” * ，同時也加入Classpath，輸入”./classes/”，即是第一步建立的”classes” folder。

ok了後，把Flash檔儲好，我叫它為MyApp.fla。

設定fla檔

* Automatically declare stage instances: 如果點選了，Flash會自動幫你在class中declare movieclip入面的其他movieclip，看似很方便，實則破壞了class的結構。即是在class中不declare 子movieclip的variable name也可成功compile，如果是另一個人接手，根本不會知道variable是在那兒decalre，代表甚麼。因此我的習慣是不選它。

5. 寫第一個class

接下來，我們可以開始寫我們的第一個class了。在AS 3.0中，引入了document class，即是我們可為場景define一個class。

現在先回到FlashDevelop，並在”classes” folder下建立以下的folder structure及檔案:

Document Class

* 請留意這命名方法叫reverse domain naming convention，想了解更多可以看這網頁:

http://brajeshwar.com/2005/class-naming-convention-reverse-domain/

至於MyApp.as 的內容如下，目的是當stage建立時output “Hello World” 字句:

package com.frogiology.tutorial {

	import flash.display.MovieClip;

	public class MyApp extends MovieClip{

		public function MyApp() {
			trace("Hello Word");
		}
	}
}

儲存好MyApp.as後，就要把Flash的stage連接到剛才寫的class。

先在stage上任意click一下，在下面properties的panel上，在”Document class”一欄上填上: “com.frogiology.tutorial.MyApp”，即是剛才define的class。

填上document class

儲存好fla檔後compile，你就會見到在output panel上出現了”Hello World”字句! 恭喜你! 我們成功寫好第一個class了!

於下一個單元，我將會以一個簡單的例子，跟大家分析做Flash的流程，如何define classes等重要概念，不要錯過啊!

>> 下載本單元demo

連結: http://apps.yahoo.com/-2DHMuY4e

PaperVisualizer - Chat Mode

PaperVisualizer主要有以下幾個目的:

• 讓你結交更多朋友
• 提供一個中央的地方，了解朋友最近做過的事 (updates)
• 可以像Twitter一樣，可以追隨(follow)你有興趣認識的人
• 把朋友的資料(profile data)有趣地歸納及顯示出來

有興趣請試試吧，我花了整個星期去做的呢!

甚麼是YQL?

YQL全寫是Yahoo! Query Language。YQL的syntax與SQL差不多，可以利用select, from, where 等語法搜索(search)、過濾(filter)或結集(aggregate) Yahoo! 內部或外部豐富數據。主要好處是可以用一個統一的語言取得數據，這樣的話，程式員就不用每次查看documentation或學習新的API，這對於Yahoo! 平台的開放是很重要的。還有在performance的考慮上也有幫助，例如我們只需要用一個single YQL call可以取得本來要multiple call的數據，大大減少latency。

甚麼是YAP?

YAP全寫是Yahoo! Application Platform。它有點像facebook application平台，可以讓程式員在Yahoo! 上建立自己的程式。其他用戶可以選擇安裝這些YAP，並且把它們放到自己的Yahoo! Profile page, Frontpage, Yahoo! Mail等等。

PaperVisualizer - Nickname Mode

PaperVisualizer - Gender Mode

PaperVisualizer - Birthday Mode

PaperVisualizer - Detail View

Google Analytics 就是一個好好的site tracking工具，費用全免。對於HTML類型的網站，使用簡單，只要在page onLoad的時候，呼叫Google Analytics的JavaScript API就可以了。可是，現在的網站愈來愈趨向RIA的發展，如AJAX、Flash及Silverlight。以Flash為例，要做到tracking就先要先寫一些使用Google Analytics API的JavaScript function，然後在Flash ActionScript中使用External Interface呼叫JavaScript。在setup上，已經不太方便，而且不同programmer也會有自己的風格，欠缺標準。

幸好，Google Analytics剛跟Adobe Flash合作，建立了一個專為Flash CS3而設的Google Analytics Flash API，這樣就大大解決了剛才所提出的問題了。

這個API也也算易用，設定步驟如下:

1. 先下載gaforflash package:
   http://code.google.com/p/gaforflash/downloads/list
2. 到以下路徑，”C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components”，並且加入新資料夾”Google”
3. 解壓gaforflash package，並把lib中的兩個swc檔放到剛才建立的”Google”資料夾
4. 到Flash IDE上，打開Windows -> Components 視窗，並把AnalyticsLibrary拉到stage上
5. 加入ActionScript使用tracking API，例子:

   import com.google.analytics.AnalyticsTracker;
   import com.google.analytics.GATracker;
   
   var tracker:AnalyticsTracker = new GATracker( this, "UA-111-222", "AS3", true );
   
   playGame.addEventListener( MouseEvent.CLICK, onButtonClick );
   
   function onButtonClick ( event:Event ):void {
     tracker.trackPageview("/myGame1");
   }

   註:
   - UA-111-22 是你的web property ID，在你的Google Analytics帳戶中可找到
   - /myGame1 是虛擬頁名，你可以設立你的頁名，用來分辨不同的事件

雖然在coding上是易了，可以Stanley也發現了一些管理上的問題，大家也要留意:

1. gaforflash中的library是用swc打包，因此如果你要把soruce code給別人時，他也要有那些swc檔。如果沒有，別人就不可以compile。如果下一個版本的gaforflash也直接提供.as class檔，相信問題就可以解決。
2. 如果你的網站有staging，production兩個不同的平台，而且它們也是用不同的Google Analytics帳戶，那麼要小心確保不同平台所對應的帳戶是正確的。我的建議是把web property ID放到用來config Flash site的XML之中，那就可省卻再次compile的麻煩。

更多資料:

• Google Analytics Blog
• Google Analytics Tracking For Adobe Flash Documentation

除此之外，SmartFoxServer的功能也是非常之吸引我，絕對打破了”平沒有好東西”的定律!

縮短開發時間

開發multiplayer的遊戲，其實是很頭痛的，如用戶管理、房間管理，訊息交換等都是麻煩的問題。不過，SmartFoxServer開發的目的，就是提供開發者一個快捷易用的平台製作多人線上遊戲，因此，剛才所說的backend開發，SmartFoxServer已為你做好了。如果你要做的遊戲複雜性不高，你是可以完全不在backend上寫一行code呢! 你要做的，就只是利用SmartFoxServer提供的actionscript API，然後寫你的Flash / Flex application就夠了。這樣子就大大減少了backend及frontend同時debug的問題，開發時間及難度也大大降低了!

高擴充性

如果你的application比較複雜，SmartFoxServer也提了空間及API讓你寫backend的extension。而你更可以選擇利用ActionScript、Java或Python做backend的language，只要reload extension code，就可立即生效，不用次次都restart server! 另外，SmartFoxServer也提供local的database engine，同時也有extension API讓你可以連接到自己的RDBMS，大大擴充了程式的功能。

在房間結構上，SmartFoxServer分了Zone及Room兩個layer。一個server可以支援多個zones，一個zone可支援多個rooms。你可以利用不同的zone serve不同的application，而不同的room又可以serve 不同的game logic，靈活之極!

在架構方面，SmartFoxServer也支援類似FMS的clustering結構，簡單來說就是可以用多台伺服器serve一個application，增加application支持的traffic。

豐富的Add-ons

SmartFoxServer本身可以說是一個multiplayer game server。但是，它也提了很多add-ons，給你的程式帶來更多的可能性。值得一提的就是RedBox了，RedBox其實是由一個open source project “Red5” 整合而來的，它主要的功能就是提供video / audio streaming。因此，把SmartFoxServer加上RedBox，你立即就可以做到video conference，video chatting，或是”一同看video一同討論”等有趣的application了。

管理介面

SmartFoxServer提供了一個用Flex做的管理介面，讓你可以管理所有game room及用戶活動，比如說你可以用它來ban一些搞事的用戶、放佈公佈訊息等。

如果你想試一試SmartFoxServer的功能，你可以先到下載頁下載一個trial version(最多支援20個concurrent user)。裝好了後，就已可以試玩它預先提供了的demo 了! 再說一次，原來可以很簡單就可以做到multiplayer game了!

更多關於SmartFoxServer的資料:

• SmartFoxServer documentation: http://smartfoxserver.com/docs/
• AS3 API: http://smartfoxserver.com/docs/docPages/as3/html/index.html
• 版本 Features 比較: http://smartfoxserver.com/products/

SmartFoxServer Admin Panel (1)

SmartFoxServer Admin Panel (2)