測試Logitech的iPad專用鍵盤

剛收到的禮物，立刻來試用看看。

trace("搭配Dropbox，拿來寫些簡單的文章也沒什麼問題！");

反應速度也很快，所以以後帶個iPad到咖啡廳坐的機會又增加了。

小試一下HTML5與CSS3

自從去年開始看到一些HTML5+CSS3實驗性的範例出來，就一直想找時間來接觸這一塊。今年更多HTML5的網站陸續冒出來，書籍的資料也更多了。於是玩了一下HTML5跟CSS3，紀錄一些些心得。

我想以HTML5的發展來看，大概沒有人會懷疑它是網路上未來的標準。所謂的標準，倒不是"會不會取代Flash"這類膚淺的問題，而是只要製作網站，就得跟它打交道。即使是從過去到現在，開發一個全Flash網站，絕對不是丟幾個.swf檔案到伺服器上面就解決了，少不了還是要處理HTML、CSS、以及Javascript。未來當然也是如此。與其到時候因為一些doctype、meta等等瑣碎的東西搞得焦頭爛額，不如找個時間好好的了解一下。我相信很多人都準備要投入這一塊，只是因為某些因素而暫緩。以下分享幾個我玩了之後的心得，也許還在觀望的人看了會比較想開始接觸HTML5與CSS3。

一起來玩鳥 Starling Framework（9）Particle

最後，來看看Starling裡一個很炫的功能：Particle。Particle屬於extension，所以要另外下載檔案：Starling-Extension-Particle-System。下載之後把檔案複製到Starling的source裡面就可以了。

一起來玩鳥 Starling Framework（8）BitmapFont

所謂BitmapFont，就是事先將我們會用到的字型，會用到的字，輸出成一張圖片，類似Sprite sheet，以及一個xml格式的Data file，然後我們一次將這文字圖片轉成Texture，upload到GPU，當我們要用到某個文字時，再利用Data file對照將Texture貼上。這樣做的好處是比起我們動態的去產生文字的Texture，BitmapFont只做一次upload Texture到GPU的動作，之後重複利用這個Texture，GPU的負擔比較小；相對的，如果我們動態去產生文字的Texture，upload到GPU的次數多，GPU的cost就比較大。缺點是要先決定我們會用到哪些字？最大的字級多少？圖片儲存文字檔案也比較大。

一起來玩鳥 Starling Framework（7）MovieClip

承上一篇，我們接著來講最後一個IAnimatable類別，MovieClip。Starling的MovieClip跟native的MovieClip不太一樣，它只能接收一個Vector.＜Texture＞，來指定每個frame的貼圖，而不能像native一樣當DisplayObjectContainer，加入一堆東西。不過透過一些工具，我們可以把native做好的MovieClip，輸出成一張Sprite sheet，以及一個XML檔，再將這張圖片與XML匯入Starling產生一個TextureAtlas，最後由這個TextureAtlas轉出Vector.＜Texture＞給MovieClip使用。

一起來玩鳥 Starling Framework（6）Juggler、Tween、以及DelayCall

這篇開始來講Starling裡的Animation。Juggle是個簡單的Class，用來控制動畫的進行。他負責管理經由add()加進來的實現IAnimatable介面的物件，然後當Juggler的advanceTime()被呼叫時，它會負責去呼叫這些IAnimatable的advanceTime()，讓動畫進行下去；而當某個IAnimatable到達complete狀態時，則會被Juggler踢出去。我們就只要負責每個frame去呼叫Juggler的advanceTime()就好。而Starling class裡有個預設的juggler，當Starling.current正在運行時，Starling.juggler在每個frame時會自動被呼叫advanceTime()。通常我們把遊戲裡的動畫加到Starling.juggler裡，而一些特殊的動畫，例如遊戲暫停時要撥放的動畫，再加到另一個我們新增的Juggler，然後每個frame去呼叫它的advanceTime()。這裡講的每個frame，我們是使用EnterFrameEvent.ENTER_FRAME，而不是Event.ENTER_FRAME，因為EnterFrameEvent可以取得passedTime，這個passTime是指跟上一次事件發生經過的時間，可以傳給Juggle的advanceTime()的第一個參數。用經過時間來播放動畫，這樣就不會受frame數不穩定而影響動畫撥放的時間。

一起來玩鳥 Starling Framework（5）Multi-Touch

這篇來談談Starling的Multi-Touch。前一篇也提到，Multi-Touch一樣是監聽TouchEvent.TOUCH，然後由TouchEvent的e.getTouches()取回多點的資訊。通常提到Multi-Touch會想到Gesture，不過Starling目前沒有GestureEvent可用。需要的時候只能自己動手寫。

一起來玩鳥 Starling Framework（4）TouchEvent，Touch，以及TouchPhase

這一篇來介紹一下TouchEvent。我們先來談單點的touch，下一篇再介紹MultiTouch。翻過Starling文件的應該會發現，Starling裡面沒有MouseEvent，而是整合在TouchEvent裡，但使用上有一些些小技巧要注意一下，才能做出MouseEvent.MOUSE_OUT的功能。

一起來玩鳥 Starling Framework（3）Button！

週末夜來介紹個簡單的DisplayObject就好。不論是在電腦上或行動裝置上，跟使用者互動次數最多的，大概就是按鈕了。因此，Starling有個Button類別，來做出這個常用的互動元件。

一起來玩鳥 Starling Framework（2）效能測試以及Image與Texture

上一篇我們放了一個Quad與TextField在舞台上慢慢轉。眼尖的可能會發現轉起來邊緣有點鋸齒，這可以透過設定Starling的反鋸齒來解決，在Main.as裡，新增了_starling之後，可以加上

_starling.antiAliasing = 2;

後面的值可以是0到16間2的次方數(0, 1, 2, 4, 8, 16)，預設為0(沒有反鋸齒效果)，通常有需要的話也不會設大於2。設其他數值也可以跑，不過應該是自動取了最接近值。這一篇，我們就來測測Starling的效能有多強，另外介紹最基本的圖像Image與Texture。

一起來玩鳥 Starling Framework（1）一定要的Hello World！

雖然已經一堆Hello World的介紹文章跟影片了，但中文資料畢竟是比較少，所以不能免俗的來一篇中文版Hello World。首先開啟一個AS3.0專案，fps不用客氣，設為60，Starling很快的。當然要發佈的版本是Flash Player 11。使用FlashDevelop的需要打開Project->Properties，如下圖的地方加上：-swf-version=13設定輸出的swf版本：

FlashBuilder的使用者請參考官網的介紹影片。

一起來玩鳥 Starling Framework（0）簡介

開場

Starling Framework是一套Flash 2D遊戲開發"工具"，是使用Flash最新的Stage3D API建構出來的一套Framework。最大優點在於使用GPU做圖形的運算，讓Flash的效能能夠到之前的1000倍(官方說法)！另一大優點是易學，使用跟Flash native API類似的類別，方法，架構等，讓原本熟悉Flash的開發者可以很快的上手。

第一次上海行

上禮拜有個機會，接了一個上海那邊的案子。至於是哪家公司，雖然不是啥秘密，但也不方便公開來說，所以...不要問。會接這個案子，第一預算多，第二對方老闆很阿莎力的出機票跟住宿的錢拉我過去，第三這樣到外地工作還真的是頭一遭，很多人一輩子可能都碰不到這樣的機會，當然是要好好把握。所以迅速的辦好台胞證，跟對方確定航班，就這麼飛到上海工作10天。

iPhone草稿樣板

Facebook iOS SDK — 儲存Access Token

上一篇提到使用Facebook iOS SDK的範例，每次登入就會跳出一個授權頁，按了確認後才又回到App.來，這樣的設計對User會很惱人。主要是這個SDK沒有把Access Token紀錄下來。Javascript版會記錄到cookie，ActionScript版會記錄到ShareObject，而iOS版，可以手動記錄到NSUserDefaults。

Facebook iOS SDK — 用範例來學習

玩Objective-C跟iOS兩個多禮拜，大概搞懂程式語法跟專案架構後，就想找些範例來練習一下。因為接下來想寫個跟Facebook有關的應用，就找了Facebook iOS SDK來試試。這篇就來紀錄一下一些設定的方法，免得過幾天又忘了。

Progression 4 自訂Command

Progression裡面的Command相當好用，內建有許多很實用的Command。但如果還不夠用的話，可以來動手自訂Command。自訂Command其實相當簡單，不管是用Flash IDE裡的面板或者FlashDevelop的Template，都有個叫MyCommand.as的樣版，複製它或使用它來新增一個as檔，裡面已經有_execute與_interrupt兩個私有方法，分別是執行與中斷Command要做的事情，而原本_execute裡有一行executeComplete()，是當Command執行完要呼叫的方法，必須依據我們的Command搬到適當的結束地方。另外還有一個覆寫公有方法clone()，複製這個Command的所有參數。還有，建構式該輸入的參數也依照我們的Command來開設。這幾點都做好了，一個自訂Command就完成了。

[Test]

  從手機來的測試

Facebook ActionScript Graph API ( 4 ) Dialogs

這一篇簡直是在考驗debug與找solution的功力！Dialog是用來彈出對話框，讓user與其互動，例如發布post到塗鴉牆，或是彈出extended permissions讓user同意等。因為user必須與其互動(按下同意按鈕之類)才會有反應，所以不需要特別的permission。例如不需要publish_stream權限也可以使用Feed Dialog去發post。目前文件裡面列出三種Dialog可用：Feed Dialog、Friends Dialog以及OAuth Dialog。而在這個API是使用Facebook.ui()來呼叫。很不幸的，這個method雖然可以正常呼叫，不過有點小bug，就是callback function無法正常呼叫，詳情見這篇。

Facebook ActionScript Graph API ( 3 ) FQL、Old REST API以及picture

這三個東西篇幅不大，因此放在一起講。我們繼續擴充這個測試App.，首先在使用者介面新增三個TextField與三個Button，個別用來呼叫這三個method，類似這樣：

而程式主要是使用Facebook.fqlQuery()，Facebook.callRestAPI()，以及Facebook.getImageUrl()。

Facebook ActionScript Graph API ( 2 ) Graph API的GET、POST與DELETE

完成授權與登入後，接下來呼叫API的方式不管是外部Web連結Facebook，或者是IFrame App.，都沒有差別。由於等等我們要測試自動發布到塗鴉牆的功能，所以login的時候請多加上"publish_stream"這個extended permission，並確定重新執行一次login。然後我們做一個介面類似這樣：

由上而下放了三個TextField：
apiRequest_txt：輸入Graph API Request用的，例如：/me/friends。
params_txt：當使用POST時，需要帶的參數。這裡因為AS的Object不方便用String去轉，因此我們設計讓user輸入JSON encoded的String，然後再用as3corelib的JASON.decode將它解回Object。輸入例如：{"message":"test message!"}。
result_txt：將回傳的結果顯示出來。這裡可以將result轉成JSON encoded String之後顯示出來。
左邊放個名為btnApi的Button在輸入完後去呼叫。另外放個method_cb的ComboBox來選擇要用GET、POST或是DELETE。

Facebook ActionScript Graph API ( 1 ) 取得認證與授權，以及登入

首先準備幾件事：第一，下載Adobe ActionScript 3 SDK for Facebook Platform API，裡面有原始檔，SWC，Docs，Examples，是個規模還算小的API，所以其實花點時間就看完了。第二，雖然Adobe上面有一系列介紹文章，建議可以先開發AIR應用，再將程式碼改為WEB App.，但我試過好像也沒多方便，所以還是習慣丟到網站上測試。要在網路上測試，當然要安裝Flash Player Debug版，還要有個可以讀取Flash Log的工具，例如Vizzy Flash Tracer。第三，開一個測試App.，在"網站"裡面設定好Site URL，以及"Facebook整合"裡面的Canvas Page與Canvas URL，我們等等會練習一般Web連結Facebook，以及Facebook上IFrame App.的認證授權與登入。最後將"應用程式 ID"複製下來，接下來會用到。