擴擴咱 2.0

練習了官方的 Flash Catalyst Beta 教學

2009-07-23T14:14:00.005+08:00

因為想了解Flash Catalyst，所以拿了官方所提供的教學資源 Learn to Use Flash Catalyst @ Adobe Labs 來看，一邊看還一邊做了無聊的個人筆記。這些官方資源看完後發現裡面列的link太多重複內容了，其實只要看我列出的最前面兩篇，也就是Lee Brimelow的教學就可以了。<---本篇唯一重點

練習結果：

心得：(1) 覺得把互動設計的流程獨立出來不只是有幫助，對開發流程來說更是一大創新，個人覺得這種創新是有實際幫助的，而不只是口號 ( 了解Flash Catalyst )。也許現在還不太可能，可是未來FC這種軟體更為完善的時候，很有可能會有真正的"純互動設計師"這樣的工作出現。 (2) FC拉出來的檔案都好大，雖然code看起來很簡潔。 (3) 動態效果不是那麼好控制，Timeline上已經安排好的東西在切換state時會不見。關閉輸入框(demo裡最上面的bar可以按)的動態效果操作過一輪以後就爛掉了(code裡頭的Transition的startDelay效果不見了)。(4) 現在內建支援的component極少，官方的人在討論區說正式版全部的component都會有。(5) 好像也不能反過來從FB匯入到FC，我試著把FB改過的code存成zip再改名為fxp，然後試圖匯入到FC結果是失敗的。(6) FC充滿了bug，執行時吃的記憶體資源也很恐怖。

--------- "不寫Plurk而寫Blog的理由"之分隔線 ----------

Using Flash Catalyst and Flex 4 – Part 1: Design a Twitter search app
Using Flash Catalyst and Flex 4 – Part 2: Hook up the app to live data
這兩篇是Lee Brimelow的教學影片，第一篇包涵了其他link裡大部分的基本操作。第二篇跑了FC-->FB的流程，從FC輸出fxp，匯入到Flash Builder後，替按鈕加上一個click event，然後用as傳參數給Twitter的api，很快就做出一個讀Twitter資料的AP了。(因為這兩篇link列得太後面，跟其他篇重複，所以沒新東西可以記了)

Introducing Flash Catalyst
介紹如何把設計檔裡面的圖像很快地轉換成互動元件(ex:Button)，然後在元件上添加與"pages/states"的互動 ( pages/states直接翻譯就是"頁面"、"狀態"，是Flex Framework用來控制流程的機制，為了解釋之便，pages/states可以類比為Flash的Keyframe，不同pages/states之間可以添加tween effect做補間動態)

在Photoshop裡編輯的Layer匯入Flash Catalyst後會被保留，只是在Photoshop裡加的Style(ex:框線和陰影)匯入到FC後，直接被轉成點陣的格式了。
旋轉過的文字匯入以後，旋轉會失效，文字會被轉回正的。
預設的Preview會叫出IE，我不想跑兩套broswer，所以修改了Browser的設定(Preference)，修改方法可見 Flash Catalyst beta 小技巧 @ Ticore
內建的圖形編輯工具很陽春，ex:拖到畫面上的Text的元件不能雙擊直接修改文字，屬性部分只有text, rect, size, color, font等屬性可調，text甚至不能paste文字
Bug出現！新增了第四個state後，某一層layer裡面的子layer的"眼睛"開關不了
選取物件的功能怪怪的，用滑鼠拉出來的選取框框沒碰到的物件也被選到了
作完了我的第一個範例後輸出swf，檔案size高達 2 mb！檢查後發現800x600的漸層背景匯入到FC以後，被轉成點陣的png格式，一個背景圖檔的size就佔了300k，這應該是從非向量軟體匯入的缺點。滑鼠點擊背景圖-->按右鍵的話，可以發現有一個按鈕叫做"Convert to Optimized Graphics"，不知道是做什麼用的，本來以為跟縮小圖檔的size會有關係，可是實際點擊以後size大小幾乎沒有什麼變化。

Wire Framing in Flash Catalyst
介紹怎麼拿WireFrame Components(就是內建的component)來建立自製的component，以及如何在timeline裡面修改transition effect

設計檔的圖檔除了可以轉換成很基礎的內建元件外，也可以轉換成自製的custom component，轉成自製元件後，元件內就有了自己的state。在畫面上點兩下自製元件可以進到自製元件內編輯，就像編輯MovieClip一樣
講到替一個按鈕加上雙向action的地方，好像沒講清楚，講者只替第二個階段的按鈕加上action，按下按鈕後會跳到第一個階段。但第一個階段的按鈕沒加任何action，怎能夠跳回第二階段!!?? 應該是"兩個階段共用一個按鈕"這個步驟跳過去了吧後來看懂了，設定互動的條件時，"when"可以替每個階段都加上互動
用timeline控制transition很方便！

Create your First Application with Flash Catalyst
這篇的內容跟前面的嚴重重複啦，沒講什麼新東西，可以跳過

Build a Data-Centric Application Using Flash Catalyst and Flash Builder 4
介紹用設計檔案的元件拉出比較複雜的元件 Scrollbar和 DataList，既簡單又有趣。這個範例的過場動態效果(transition)有添加時間差的效果。範例後面說明把設計好的檔案丟給Flash Builder以後，用FB內建的視覺化工具可以設定從ColdFusion把資料讀出來，這邊就沒看了。

將圖形轉換為比較複雜的元件時，HUD右上角會出現"Component Issue (!)"，表示需要點擊"Edit Parts"，分別設定子元件
設定VScrollbar的子元件的介面操作"異常"簡單，把相關物件都選起來後，按右鍵轉成VScrollbar元件，然後點進去元件裡面以後，HUD視窗裡已經列出候選名單讓你一一勾選哪個元件對哪個規格，VScrollbar來講主要是有四個子元件要對應，上下按鈕、軌道、拖曳bar(thumb)
轉換DataList也"異常"簡單，把相關的設計元件全部選起來轉成DataList，然後Edit Parts裡面只要選哪個元件要當作"Repeated Item"，選好以後那個Repeated Item物件就自己repeat了起來
選取Repeated Item時，properties有選項可以設定垂直/水平排列、間距、對齊等
轉換複雜的元件簡單得真是十分神奇，轉到code mode去看，發現code也十分精簡
建構好DataList元件後，可以切到Design-Time Data視窗，所謂的Design-Time Data就是讓我們可以先丟一些假的資料，測試一下資料量多寡時介面的變化
要讓Scrollbar跟DataList有關聯的方法是把Scrollbar剪下貼上到DataList裡，Scrollbar就自動產生作用了，酷
在State上面按右鍵可以設定"Set Default State"

Use Native Fireworks CS4 Files in Flash Catalyst
作FC不一定要從設計檔(psd, ai)匯入，也可以把個別的圖檔讀到FC的"Library"裡面用。再來我就看不太懂了，只看懂從FC可以直接呼叫別的軟體編輯FC裡面的圖檔，然後立即更新，後來不曉得為什麼png檔被Illustrator修改過以後就變成存成.fxp檔。

Sharing Flash Catalyst Libraries
介紹怎麼跨FC專案共用"Library"的設計檔和自製Component

匯出：在Libary的物件上面按右鍵 --> export libary package --> 存成 *.fxpl 格式
匯入的話就是在同樣的menu裡面選 Import Library Package

修改TileList元件的ScrollBar位置

2009-07-14T10:01:00.010+08:00

開始使用Flex開發不久，就遇到了一個不簡單的設計，就是設計師設計了一個把ScrollBar從預設的右邊移到左邊去的TileList，本以為這應該很常見，搜尋了一下竟找不到現成的改法，索性只好自己新手駕駛了。

TileList是繼承自ListBase的，而ListBase裡面可以找到verticalScrollBar和horizontalScrollBar這兩個唯一跟scrollbar有關的class property，改變這兩個物件的位置的時候，發現就可以移動scrollbar的位置了，就這麼簡單阿(?)。下面是修改後的code，簡單說明：新建的自訂元件LeftScrollBarTileList繼承自TileList，在複寫updateDisplayList方法的地方，判斷verticalScrollBar是否有被產生出來，有的話，就把它拉到最左邊，也就是verticalScrollBar.x = 0。

LeftScrollBarTileList.as

/* Copyright (c) 2009 blog.mediakid.org. All Rights Reserved. */
package {
    import mx.controls.TileList;
    public class LeftScrollBarTileList extends TileList {
        public function LeftScrollBarTileList() {
            super();
        }
        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                // 確認vertical是否存在
                if (verticalScrollBar && verticalScrollBar.visible){
                    verticalScrollBar.x = 0; // 移動scrollbar
                }
        }
    }
}

使用元件的主程式main.mxml

<?xml version="1.0"?>
<!--
//  Copyright (c) 2009 blog.mediakid.org. All Rights Reserved.
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12" 
backgroundColor="#F0F0F0" 
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
width="450"
height="350"
>

<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
private var xml:XMLList = 
<>
<content>1</content> 
<content>2</content>
<content>3</content> 
<content>4</content>
<content>5</content> 
<content>6</content>
<content>7</content> 
<content>8</content>
<content>9</content> 
<content>10</content>
<content>11</content> 
<content>12</content>
<content>13</content>
</>;
[Bindable] private var ac : XMLListCollection = new XMLListCollection(xml);
]]>
</mx:Script>
<mx:Panel 
title="Reposition the scrollbar" 
height="300" 
width="400" >
<local:LeftScrollBarTileList
id="scroll"
dataProvider="{ac}"
xmlns:local="*" 
columnCount="2"
rowHeight="80"
borderStyle="none"
width="100%"
height="100%"
alternatingItemColors="[#FFFFFF,#CCCCCC,#999999]"
/>
</mx:Panel>
</mx:Application>

問題來了，雖然scrollbar是移到左邊了，可是TileList的右側仍然保留了預設的scrollBar的空間，事實上移動到左邊的scrollbar也壓到了一部分的TileList。

繼續trace發現，顯示"被拖曳內容"的是容器listContent，listContent上面還加了一個maskShape遮罩，所以scrollbar被移到左邊以後，這兩個物件的位置也要一併往右移動一些。只有這樣還不夠，listContent在更新位置的時候都會加上位移量leftOffset，所以leftOffset也要加上位移量，否則的話，每次一更新位置，listContent就會又跑回原來的位置。新增修改如下：

/* Copyright (c) 2009 blog.mediakid.org. All Rights Reserved. */
package {
    import mx.controls.TileList;
    public class LeftScrollBarTileList extends TileList {
        public function LeftScrollBarTileList() {
            super();
        }
        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                // vertical
                if (verticalScrollBar && verticalScrollBar.visible){
                    verticalScrollBar.x = 0; // 移動scrollbar
                    this.listContent.x =  verticalScrollBar.width; // 移動被拖曳內容
                    this.maskShape.x = this.listContent.x; // 移動被拖曳內容的mask
                    this.listContent.leftOffset = verticalScrollBar.width; // 設定被拖曳內容的位移量，如果是垂直的scrollbar則用topOffset
                }
        }
    }
}

效果Live Demo：修改後的效果看似是ok的，但沒有完整的trace完全部的code，所以不曉得是否有更好的解法。而這個改法雖是以TileList為例，但我想對於所有繼承自ListBase的元件都是一樣的作法吧。以上方法同理也可以用來把預設位於下方的horizontalScrollBar改成位於上方。

申請延長Flash Builder 4 beta的測試時間

2009-07-12T17:39:00.010+08:00

Flash Builder 4 beta才試用沒幾次就過了試用期了，不過還好Adobe也有提供合法的延長時間的申請。申請方法就是先到一個非常熟析的地方，拿出你那非常多才多藝的Flex Buidler 3序號填入申請表格，並填一些很簡單資料就可以了。熟析地方的位址：
Adobe® Flash™ Builder 4 Beta Extension Request

又是freeriatools！填完表格之後很快就會收到申請信了。不過其實各位也不用勞駕去申請了，因為我發現每個申請人拿到的序號都是同一組：

1377-4009-6596-2357-9400-4885

所以就請直接取用吧。這麼說Flash Builder 4 beta幾乎就是可以無限期試用的，真是越來越欣賞Adobe式的睜一隻眼閉一隻眼了。這次的測試時間可以多久我不知道，~~還沒裝上去~~ 剛剛裝上去了，開啟的時候就沒有什麼倒數的提醒了，所以應該是沒有限時間了，不過我想官方也不怕大家用，用了就是測了，而且這只是Beta版而已，未來正式版出來肯定會修正一些Bug、效能和新增些功能。

Before you thinking in Flex, you step in Flex first

2009-06-30T09:26:00.001+08:00

原來Thinking in Java的作者Bruce Eckel大師有出Flex的書：First Steps in Flex (不叫Think in Flex喔～)，這不是一本大部頭書，全書只有140頁，與Adobe evangelist for Flex : James Ward 一起合著的。兩位作者希望以最簡潔的方式向初學者介紹Flex，從網頁資料裡面看起來，我覺得這本書更像是為了他們辦的活動所寫的講義。書本的網站上可以取得第一、二章試閱 PDF。

這對大多數Flasher / Flexer而言這應該不是什麼"新"聞了，但小弟我最近才發現這件事覺得很驚喜，所以就來湊個熱鬧。

而且我覺得這本書來的真是好，講再多Flex多強多標準，也比不上跟別人說"Java大師Bruce Eckel大師也有出Flex書"來得有用。

收到Adobe寄來的免費AS 3 and Flex API 海報

2009-04-03T10:45:00.009+08:00

就在大前天收到一個閃很大的神秘禮物，就是Adobe寄來的免費AS3 和 Flex 海報。用裝海報的紙筒寄來的，寄件地址是美國加州，也就是Adobe總部的所在州。

打開紙筒以後從裡面拿出厚厚一疊的海報，包括一張AS3 class diagram (Flash Player 9，詳細版本沒仔細研究)，兩張Flex Framework Core API 、一張 Flex Additional Component API、一張Flex Advanced Component API。另外還有一個好料是Lynda.com 的DM，上面有一個月免費線上訓練課程的啟用序號。收到的資料裡面還有一張5元美金的運費收據，但我完全沒印象當時有付任何的運費。

記得是在三月初的時候，本來只是要找之前在Flex.org看到的海報pdf檔，但pdf的連結不見了，取而代之的是官方的網站 ActionScript 3 and Flex API posters ，上面說用正版Flex Builder序號就可以免費取得海報，雖然我的序號是當初用"教育界免費申請 "的方案取得的，但還是厚著臉皮試試看，沒想到這樣竟然也行！

趕快找地方把它貼起來看看，真的是非常的賞心悅目吶～但五張都貼起來實在太高調了，只貼了兩張就成為大家好奇許久的焦點了，從其他人的回應看起來，其他的平台好像沒有這種免費服務，更不用說這些海報又是這麼的有設計感啦。

發現Ping.fm支援Blogger有1 Bug + 4 缺點

2009-03-08T10:38:00.007+08:00

玩了一陣子從Ping.fm發文到Blogger的功能以後，發現Ping.fm支援Blogger的問題還真不少，有一大Bug + 4大缺點，使得Ping.fm支援Blogger的這個美意變得有一些雞肋。來紀錄一下然後丟給官方看看會不會有什麼反應。

1 Bug ( stops you from posting msgs to Blogger )

Situation: 如果Blogger的"設定(settings)" --> "意見(comments)" --> "上一頁連結(back links)" --> 為"顯示(show)"，則Ping.fm輸出到Blogger的訊息就不會出現。隨便搜尋一下發現很少有人反應這個Bug，以為是中文版才有的問題，可是把Blogger版本改成英文版以後，測試結果也是一樣。( It stops you from posting msgs to Blogger if you follow this setting : settings --> comments --> back links --> show )

Solution: 將"上一頁連結(back links)" --> 設定為剩下的另一個選項 "隱藏"。(Switch "back links" from "show" to "hide" can do the trick.)

4 Drawbacks

(1) Blogger標題不能輸入中文

在Ping.fm用blog選項輸出訊息的話，填寫處會跑出一個標題欄位，但在這個欄位輸入的中文標題都會變成亂碼。

(2) "設定標題"功能沒作用

撰寫Ping.fm訊息時可以用一個「^」符號區別Blogger文章的標題和內文，ex：「我是標題^而我是內文」，為方便說明，暫稱這個功能為"設定標題"。

缺點發生於想要一次對所有service發文時，發給blogger的"設定標題"功能會失效，而且發給其他不需要標題的service(ex:Twitter、Plurk、FaceBook)時反而保留了那個"設定標題"。也就是說，想要的效果出不來，但不想要的效果卻出現了。這樣子的話，就要選擇發出沒有標題的Blogger文章或者一次發文給全部service。

(3) 不能區別Blogger子站

Ping.fm開啟發文給Blogger功能的時候，會讓使用者選擇要對Blogger帳號底下的哪些blogspot(子站)發文，可是發文的時候沒有功能區別要發文給哪個blogspot，就變成所有blogspot都要post一樣的東西。

(4) 不支援輸入文章tag

發出的Blogger文章不支援輸入tag。

PureMVC學習筆記：初識

2009-02-17T11:46:00.200+08:00

紀錄一下目前所認識的PureMVC，最近看到蠻多前輩寫關於PureMVC的學習心得，但我寫的最沒啥重點，我只是把自己有興趣的部分紀錄一下而已，內容絕對很貧乏，開始！...

PureMVC是一套免費且open source的framework，架構於MVC設計模式之上，PureMVC最主要的目標是幫助開發人員在開發應用程式時(尤其具有User Interface的程式)，將程式的Model(資料), View(介面) , Controller(控制)三端耦合度降低，耦合度降低以後的好處有：使reuse可能性提高、易於維護、易於協同合作等。PureMVC 一開始以AS3語言實作，後來官方將這個framework陸續移植到多種語言平台上，如：Java, C#, JavaScript, PHP...甚至還有最近很熱門的Objective C和Ruby。PureMVC裡面引入了很多經典、標準的設計模式(Design Pattern)，從文件的隻字片語裡看到有被採用的pattern包括：Observer, Facade, Command, Proxy, Factory, Adaptor , Singleton, Mediator, Strategy，這些pattern在四人幫(GoF)知名的設計模式書：Design Patterns: Elementsof Reusable Object-Oriented Software 裡都可以被找到，這應該是它的賣點之一吧。目前整套framework是由作者Cliff Hall先生和他的公司Futurescale在維護。

學習PureMVC必看官方的說明文件和範例，寫得非常完整。不過我覺得官方的文件對於MVC這個模式沒有特別說明是比較有陷阱的地方，如果能夠事先對單純的MVC有一個初步的概念，學習起來應該會更容易進入狀況。

記得還沒開始學習PureMVC之前，我想了解PureMVC能不能夠被移植到C++的GUI platform上(ex:Qt)，現在我知道PureMVC的核心概念是一套與平台無關的MVC分離和溝通機制，這些機制可以用任何一種OO語言本身去實作，且不需要語言以外的API，再加上PureMVC的概念上，已經將與GUI平台有關的實作方法(例如: AS3的Event, Qt的Slot&Signal)獨立到View端，因此理論上任何採用OO語言的GUI平台都可以實作和採用。

除了官方的範例，網路上也可以找到比較簡短的教學、範例以及前輩的分享，包括：

Building a Flash site using PureMVC via hubflanger.com
Minimalist MVC example using the PureMVC Framework via ActionScript 3 Design Patterns
Renju, The Game via ActionScript Notes
[Flex] pureMVC Standard 練習筆記 via Erin's Blog
PureMVC 筆記 via Ticore's Blog
[原创翻译]PureMVC的十个小提示
Head First Design Pattern裡有張MVC圖表解說得還蠻不錯的，在Google圖書裡可以看到
對於樣式的“十大誤解” 也是好文

最近也看到了這兩篇比較MVC framework的文章，蠻有趣的：

Code formatter plugin for Flex Builder

2009-01-29T00:11:00.002+08:00

推 7Yue 大的文章-- Flex代码格式化插件裡介紹的屌貨：Flex Formatter ，這是可以在Flex Builder或Eclipse裡面自動排列(格式化)程式碼的外掛。

安裝方式
(1) 下載.jar 檔
(2) 丟到Flex Builder 的plugin資料夾 (or "dropins" dir if you are using Eclipse 3.4 or greater)
(3) 重新啟動Flex Builder (如果沒有出現，就在開啟捷徑的"目標"最後面加上-clean)
(4) 安裝完畢，工具列上就會出現兩個新的formatter按鈕了

「Format Flex Code」可依全部格式(ex: 字的間隔、if格式等等)重新format，「Indent Flex Code」只改變行的位置，而不更動其他的格式。

在Flex Builder裡用純ActionScript開發AIR專案的方法

2009-01-28T09:39:00.002+08:00

預設狀態下，想在Flex Builder 3裡頭開發AIR的話，只能透過建立Flex專案(Project)的方式來建立AIR專案，也就是說，在建立Flex 專案時會有開發成AIR的選項可以選(Desktop Application)，可是在純ActionScript專案中沒有這種選項時該怎麼建立能夠開發AIR專案的環境呢？

可以參考前人的這個作法，是個簡單又有趣的hack。作法如下：
(1) 建立 Flex Project
(2) 選擇 Desktop Application (runs in Adobe AIR)
(3) 按"下一步"
(4) 再次"下一步"，來到最後一個畫面
(5) 把最下面倒數第二行main application file欄位的副檔名，由.mxml 改成 .as

這樣子就可以開始用ActionScript Code開發AIR了。

CES 2009展出採用FlashLite技術的Vizio Connected HDTV

2009-01-22T17:10:00.008+08:00

這是在CES 2009中展出的液晶電視Vizio Connected HDTV，它內建802.11n Wi-Fi，能夠使用以FlashLite技術開發的Yahoo! TV Widget，也因為有Flash Platform串流影片技術的支援，讓這台電視可以收看線上內容供應商與服務商所提供的VOD影音和服務，內容供應商包括：Amazon Video on Demand 、Blockbuster OnDemand 、Flickr 、Netflix 等等等。

這台電視似乎是蠻受歡迎的，在我看到的幾則 CES 2009 Top10相關的文章中，這個創新產品跟 ASUS Eee Keyboard 一樣常被媒體選為Top前十名。Vizio Connected HDTV採用的技術組合應該就是Intel 的晶片CE 3100 + FlashLite，更多技術平台內容可以參考我的前post： Intel和Adobe合作把Flash移植到新視聽裝置晶片上

More Information:

VIZIO 官方新聞
Vizio Connected HDTVs: Built-in 802.11n for Amazon and Netflix VOD via Gizmodo
CES 2009：Vizio支援HDTV新平台 via 癮科技
CES Day One: Our Top 10 via Gizmodo

PC平台的Crayon Physics Deluxe (updated)

2009-01-18T11:42:00.011+08:00

上週(1/10)收到通知說Crayon Physics Deluxe 在PC平台上開賣。上圖是我的"無俚頭之其實球滾不過去"小作。

Crayon Physics Deluxe is now available for the PC at http://www.crayonphysics.com/

The full version of the game costs 19.95$ and there's a free demo that you can download.

Crayon Physics Deluxe is a 2D physics puzzle / sandbox game, in which you get to experience what it would be like if your drawings would be magically transformed into real physical objects. Solve puzzles with your artistic vision and creative use of physics.

The game features over 70 levels, ropes, rockets and hinges. There's also a very easy to use level editor and website where user generated levels can be uploaded and downloaded.

Petri

在官方blog 上看到這個很可愛的過關解法～

Crayon Physics - That Darn Pole, featuring Wall-E from Jimmy Gunawan on Vimeo.

Updated 2009.01.23: 新增朋友告知的一個用Flash開發很類似的遊戲 Magic Pen，這個作品跟Crayon Physics Deluxe很像，即使是用Flash開發，遊戲性也差不了很多，作者是 Alejandro Guillen，與Crayon Physics Deluxe的作者Petri Purho，應該是不同人。

More Information：

Kloonigames - Official Blog
Crayon Physics Deluxe - Official Site
Crayon Physics Deluxe for Apple iPhone and iPod Touch - Official Site
互動遊戲: Crayon Physics Deluxe via MMDays
Magic Pen

Adobe AIR team的團隊開發成員數?

2009-01-15T13:20:00.006+08:00

在AIR的官方blog上看到一個新聞是 Popular Science visits Adobe AIR team ，這篇新聞是說Adobe AIR在2009年一月獲頒Popular Science的Best of What's New in 2008 獎項，我算一算文章裡面提到的工作人員數目...分佈在San Francisco, San Jose, California, Romania, India等地的開發成員總共有 65 個高手。會去算人數，不是對專案和人數多少之間的關係有什麼概念或特殊見解，只是很膚淺的想知道開發這麼大型、創新的平台需要多少高手。AIR是一個相對大的一個平台，相關的技術領域很多( API, M$ platform, Linux platform, Mac platform, HTML, AJAX, Mobile platform...等等小弟未知領域)，如果這65個人就是全部的開發人員的話，分一分以後負責每個子領域的開發成員數好像也不是很多，只能說這些人真的太厲害了。

AdvancED ActionScript 3.0 Animation

2009-01-09T11:38:00.004+08:00

Keith Peters 先生又出新書 (2008/12/29)了：AdvancED ActionScript 3.0 Animation ，噗～這本書的上一本都還沒看幾章呢。搜尋國內的書局發現已經可以買得到了，比如: 博客來外文館 (打79折 NT$1106)、天瓏資訊圖書 (NT$1224)。主題部分，這次的主題更是超級有趣的呢：

In this book, you'll learn how to:
Leverage Flash 10 3D, the new drawing API commands, and Pixel Bender

Create isometric worlds for games

Construct powerful artificial intelligence routines including pathfinding, steering,
and flocking behaviors

Use numerical integration for real world physics effects

Build advanced collision detection routines for more accurate simulations

Summary of Contents
Advanced Collision Detection

Steering Behaviors

Isometric Projection

Pathfinding

Alternate Input: The Camera and Microphone

Advanced Physics: Numerical Integration

3D in Flash 10

Flash 10 Drawing API

Pixel Bender

Tween Engines

Qt Creator與Qt 4.5皆推進到Beta版

2009-01-07T13:12:00.004+08:00

Qt Creator與Qt 4.5兩者的Beta版都在2008/12/18發佈了耶，下載位址：

Qt Creator Beta可以由Beta - Qt Creator - Lightweight IDE 取得
Qt 4.5 Beta在Beta - Qt 4.5 取得

在Two new Qt Creator videos are out這篇文章裡面有影片介紹 Qt Creator的快速鍵，發現有一個垂直選取的功能很屌，這是我第一次看到的。看完的結果發現諸多快速鍵裡面只有"Ctrl+/"(註解) 跟Eclipse是一樣的，也就是說其他快速鍵都是不一樣的，根據之前好幾個 IDE輪流用的經驗，太多套一啟用挺容易會快速鍵錯亂的。

相關訊息：

Two new Qt Creator videos are out via Qt Labs Blog
Qt Creator beta released! via Qt Labs Blog
简讯: Qt 4.5 Beta、Qt Creator Beta 及 KDE 4.2 Beta2
集成开发环境 Qt Creator

Intel和Adobe合作把Flash移植到新視聽裝置晶片上

2009-01-06T10:21:00.033+08:00

訊息來源：Intel and Adobe offer chicken in every pot (err… Flash on every HDTV)

Adobe and Intel’s press release today says that they are working on a Flash port for Intel’s latest Camore platform. The CE3100 platform is a X86 based SoC targetted towards consumer market. More specifically the chip targets Set-top bix, digital TV, blue ray DVD and retail connected A/V devices. The chip offers high definition decoder to facilitate decoding. With this port, the OEMs will be able to purchase Flash Lite 3 running on Intel platform.

So with this users will be able to purchase Flash player software alongwith the chip and customize the device to watch hulu.com or youtube.com on HDTV. It may even allow OEMs to open their platform to upload games and Flash based applications. Way to go!

今天看到的好消息，Intel與Adobe宣布他們正在合作將 Flash Platform移植到Intel去年(2008.08)宣佈要發表的消費性電子產品晶片Intel Media Processor CE3100(研發代號為"Canmore")上，這顆晶片可以用來開發具有網路連線功能的消費性電子產品，如機上盒、藍光光碟機、數位電視和其他影音設備等等，不久的將來我們可能會看到有人在電視上收看Youtube網路影片，以及使用 Flash Platform 開發的豐富使用者介面和RIA。

相關的文章中還看到 Yahoo! TV Widgets 的開發計畫，這也是Intel為他們這顆晶片所做的準備，Intel與Yahoo合作開發透過widget把yahoo的內容和服務傳送到電視中，從下面的demo中可以看到Flash Widgets在電視上運行的模樣，非常酷呢。

For More Information:

Intel bringing Flash and Adobe AIR to their new generation of home displays via Scott Janousek
Intel's Latest System-On-A-Chip is For Web Enabled TVs, Set-Top Boxes via Gizmodo
Yahoo Connected TV to Bring Web Widgets to TV via SizloPedia
Intel和Yahoo合推Web TV平台Widget Channel 媒介整合新紀元 via Yahoo!奇摩理財
Yahoo! Connected TV: The best of the Internet on your TV via Yahoo! Connected TV

The 25-Line ActionScript Contest

2009-01-05T10:55:00.002+08:00

2008年12月初出來的比賽 The 25-Line ActionScript Contest ，是大師Keith Peters 先生辦的，內容顧名思義就是用25行as比看誰可以做出最酷的作品，最大獎項是 CS4 Master Suite。

贏家就是上圖的那個捲軸遊戲(Entry 043 SWF )，短短25行就弄出一個具有簡易遊戲機制的捲軸遊戲，看他的source code 可以發現其實構成場景的字串並不短，貼到CS4都自動斷行了。蠻意外的是之前看到還蠻多人在討論的，可是從投票結果看到投票人數不是很多。

主辦者後來也把所有參賽作品的source code分享出來。

Flasher Magazine

2008-12-31T09:46:00.019+08:00

Flasher Magazine 是Lee Brimelow 先生的新點子，這是他自己錄製的影片雜誌，內容涵蓋與Flash Platform相關的資訊，第一集(2009/12/30)可以從這邊下載MP4 。

關於影片的內容：

Issue 1 features interviews with Chuck Freedman from Ribbit and Ryan Stewart joins me to talk about Flash Catalyst. We also go on a road trip through the southwest to a couple of different Flash events. Finally I answer some of the most frequently asked questions regarding how I record my tutorials at gotoAndLearn. Go on over and watch this issue and let me know what you think.

摘自Lee Brimelow的原文：The Flash Blog » Flasher Magazine Issue 1 is now live!

分享我在影片中看到的新東西：Ribbit.com 是一個整合網路電話技術到Flash平台的公司，他們正在舉辦一個比賽 http://killerappchallenge.ribbit.com/ ，贏家最高可得4.5萬美金的獎金。訪問Ryan的時候，Lee問為什麼Flash Catalyst既然是跟Flex一樣用Eclipse作的，為什麼不叫作Flex Catalyst，Rrayn的回答是：因為Adobe為Flash Platform正名的關係，所以以後的產品都會以Flash作開頭。Lee在研討會的時候demo他做的一個小工具，就是按下某種快速鍵組合的時候，視窗桌面會變得很乾淨病跳出一個命令列視窗，裡面有code拼命的在跑，看起來一付工作得很忙的樣子。再來就是Lee分享他錄製tutorial的製作細節，Lee的工具比一般使用者用來講網路電話的工具高級，有點像是錄音室的工具的簡易版，很酷的是這些簡易版的專業錄音工具是接USB的，可以很容易與電腦整合。

原來 Flash CS4 還是可以離線用 Reference Document

2008-12-10T09:39:00.003+08:00

原來 window / extensions / connections 裡面有選項可以選擇要不要讓CS4與網路連線，如果選擇保持連線狀態的話，那按F1查詢reference doc的話就會開啟線上的livedocs，反之，取消連線的話就會開啟離線的html版本，不是以前內建在Flash IDE裡面的那種。

取消連線的影響目前看起來是CS4新增的網路工具連不上，比如色票小工具Kuler、share my screen等，但反正我也沒在用，影響甚微。

Scaleform GFx：可用Flash做遊戲UI的介面引擎

2008-12-05T14:24:00.011+08:00

Scaleform GFx 是一套使用硬體加速的向量介面引擎，可以被整合到許多Video Game引擎(ex: Unreal^® Engine 3、Ogre...)裡面，Scaleform GFx有個最大的特色是它可以用Adobe Flash Platform來開發介面，甚至對as1, as2擁有完整支援，可以直接開發遊戲裡面複雜的介面邏輯、介面組件和小遊戲等，Scaleform GFx引擎跨平台的對象包括 Windows、Linux、Mac、Wii、XBox 360、PS3、PSP等等。關於實際採用Scaleform的產品，Scaleform的官方新聞稿說 Crysis這款超高畫質的遊戲就是用這套引擎來開發介面的。

我看到有遊戲產業開發者的文章，他們說明使用Flash來開發遊戲介面的好處包括：

「把Flash影片，用三角形描绘出来，让你能制作出传统位图不能解决的UI效果。你的编辑工具将非常好，因为可以使用Flash来编辑。所以强大度可想而知，比CEGUI LayoutEditor要强不知道多少倍了。」引自 Ogre & Scaleform整合
「利用Flash技术可以很方便的在游戏内播放视频，对于游戏内嵌广告发布，玩家互动内容表现都是很的一种表现形式。而对于开发方式方面，由于Flash可以支持动态的UI表现，这样美术人员就可以独立的进行UI设计而不需要程序员的过多参与了。而且由于UI采用Flash格式，这样来UI的设计工具也可以直接使用Macromedia的FlashMX了。」引自关注Game内嵌Flash UI
「类似巨人刚推出时的巨型休闲MMO的概念有了Flash技术的支持应该很容易实现了，再也不需要分拆MMO开发人员去制作游戏内的Mini-Game。而其设计专门为游戏量身定做，对于跨平台(Window,linux,PSP,PS2...)，字体以及Scale9Grid(按照9格来拼接窗体，输入框等需要自由缩放大小的UI)的支持都使得游戏的UI开发更加便捷」。引自关注Game内嵌Flash UI

其實向量的優勢是可以想像得到的，因為採用向量，同樣的介面可以自由的放大縮小，而不用事先準備好一張很大的圖檔，或者好幾張不同解析度的圖檔來切換，記憶體方面的需求可能可以釋放許多，超大的圖檔在運算位移和旋轉吃的CPU也可以省下不少吧。Scaleform 這間公司還有另外一個產品是Scaleform GFx Lobby，這個產品可以整合到其他遊戲引擎裡做聊天室、server UI等，我覺得他的介面應該完全是用Flash平台做的。下面是在youtube上搜到唯一跟GFx有關的影片：

金融危機也影響到Adobe了

2008-12-05T00:03:00.003+08:00

新聞來源: 600 job cuts at Adobe

Adobe也將裁員600人！其中包括前Flash平台經理與傳教士的Mike Downey ？在gSkinner的文章中有人在討論Mike Downey的離去與裁員無關，也有人說無關的話時間點也未免太巧合，不過從Mike Downey本人的Twitter到是看到他很大器的說這樣對公司最好。

至少裁掉600人事實，就像新聞來源文章說的，明明還是賺大錢的公司卻要這樣裁員，真的是很令人不解。

支援Flash的Multi-touch架構

2008-12-04T23:04:00.000+08:00

閒晃時碰巧看到的文章，一篇支援Flash的Multi-touch架構: Flash for surface computing @ Adobe，蠻有趣的議題。

TUIO is a very simple UDP-based protocol. So if you wish to create responsive applications using Adobe Flash Professional or ActionScript 3.0, you need to have a bridge that reads this UDP socket and converts it to a TCP connection. Since TUIO is based on the OpenSound Control (OSC) protocol, we make use of flosc (Flash OSC ), which is a small Java server that converts OSC into a TCP-based XML socket, which can be read easily by the XMLSocket class in Flash. If this doesn't make much sense to you, just remember that you need to run Flash OSC to make sure your applications can use the multi-touch events being pushed by the Computer Vision Engine.

使用ASDoc + FlashDevelop 生成class reference doc

2008-12-03T12:17:00.071+08:00

ASDoc是Adobe官方免費並且 open source的工具，目的是用來替 source code生成 class reference doc，官方自己的 livedocs也都是用 ASDoc生成的。不過由於ASDoc是一個command line工具，也就是說它沒有GUI介面，所以搭配 FlashDevelop內建的GUI工具來輸出文件會方便許多。

取得 FlashDevelop
原來我一直在用的FD在 FlashDevelop 3.0.0 beta8 以上的版本開始，就內建一個支援ASDoc的簡易GUI工具叫做Actionscript Documentation Generator，它可以把每次編譯的class路徑、編譯參數、輸出位置等等資訊存成一個*.docproj檔，隨時可以叫出來修改。

取得 ASDoc
從Flex SDK 2.0以後，ASDoc就預設附加在bin資料夾裡面了，所以如果已經安裝 Flex SDK或 Flex Builder的話就只需要在FlashDevelop只要設置路徑就可以了。需要者可以在此下載 Flex SDK，基本上一定還是要有整包SDK，因為ASDoc需要SDK裡的其他工具作編譯和錯誤檢查。

開始使用ASDoc
上述的工具就照預設的方式安裝就可以了，然後找到 FD -> Tools -> Flash Tools-> Documentation Generator 。首先開啟setting標籤設定你的ASDoc路徑，像我這樣指到ASDoc location，也就是Flex sdk的bin資料夾。

接著回到project標籤。Page title填入整份文件的名稱。exclude classes可以用來排除你不想編入文件的單一class，例如：填入 "com.ClassA com.ClassB" 排除com package下的ClassA和ClassB兩個class，中間用空格區別，但不能用"com.*"同時排除底下的兩個class。Output directory 是你想輸出Doc的位置。

在來就是卡了我很久的地方xd，Classpaths 要填入你所使用到的第三方package，這個欄位的設定與 project 的classpath設定是沒有直接關聯的，ASDoc編譯的時候，他還是會再去呼叫sdk的編譯器，再重新檢查一次你的code有沒有錯誤，如果有錯誤輸出就失敗，並且在Output標籤裡面列出錯誤訊息，所以你有使用到任何第三方的package的話，這邊就要再填一次。

Extra option 可以選擇性的填入編譯的參數，-source-path 是source code的位置，-doc-classes 是要編譯的單一Class，請在裡面填入標準的package路徑，例如"com.myname.ClassA com.myname.ClassB"，同樣用空格作區隔，如果想要編的class是某路徑的全部class可以填"-doc-sources ."，除了ASDoc專用的參數外，也可以傳遞as3編譯器用的參數進去，例如"-strict=false"。Compiler請選ASDOC(AS3)。更多的編譯參數可以參考官方文件 Using ASDoc 。

然後你就得到一個漂漂亮亮的class參考文件了。

排除Package
再來是卡住我很久的第二個地方，如果不想把第三方的package一起編進reference(不想編進去的需求應該是比較大的)，比如我不想把非自行開發的Tweener也編進去，那就加入另一個參數"-exclude-dependencies=true"，並且把設定好的Classpaths全部移除掉，否則會發生錯誤。

以上的方法我用在輸出用到沒很複雜的第三方的lib時都沒有問題，但因為asdoc還會去檢查code有沒有錯誤，就算用了strict=false，還是會被寫得不夠嚴謹的code給擋住，比如函式的回傳型別不能沒寫，但竟然as3corelib裡面有很多這種狀況，不太可能遇到一個改一個；再來比如把script用外部連接的方式嵌到mxml裡也會被視為是bug。所以還是有狀況導致我還沒有能夠真正替我的code成功輸出文件，要怎麼辦還要再研究研究。

大致上就是以上這樣，以上除了介面的操作，其他應該都跟直接使用command line模式是一樣的。問題都搞定的話再來就是要了解怎麼去替程式作註解了。

文件的註解方式請參考官方的文件：Creating ASDoc comments

特別謝謝Ticore大的幫忙。

Flex in a Week

2008-11-27T22:42:00.007+08:00

Adobe 為了消滅大家的假期，提供了Flex in a Week 這個以一週五天為學習長度的資源，我要來找個時間認真學學。做練習遭遇困難的話可以到Flex in a Week Forum 求救。五天的大綱如下：

DAY 1: FLEX BASICS
DAY 2: COMPONENT DEVELOPMENT
DAY 3: PUTTING IT ALL TOGETHER
DAY 4: ADDING VISUAL APPEAL
DAY 5: ARCHITECTURE AND ADVANCED TOPICS

Flex Learning Paths

2008-11-23T10:37:00.007+08:00

Adobe官方推出一個新的Flex學習資源:Flex Learning Paths，把過去發表在Adobe Developer Center的文章依學習者的身份做成四種不同的索引，身份有 Designer/Web developer, Programmer, Architect 和 Manager 等，索引裡列的學習資料有多種類型，包括練習檔, 影片, 文件等。這個應用也有RIA版: Flex Learning Paths 。

QT4 學習筆記：QT4提供的數學函數

2008-11-20T12:44:00.027+08:00

QT的一些範例中有出現 qmax, qmin 等 math函式的身影，但我在官方文件中卻找不到與 math函式相關的說明，所以我就把函式的source裡面提供的方法整理條列，並且看看還有哪些 math相關的函式可用。在 qglobal.h 裡，可以找到幾種 math函式，條列於下，但一般常用的 math如：qfloor(無條件捨去)、qceil(無條件進位)、qsin,qcos,qtan(三角函數) 等等等...則是都沒有看到。

qAbs ( const &value )
說明：返回絕對值
範例：

int absoluteValue;
 int myValue = -4;
 absoluteValue = qAbs(myValue); 
 // absoluteValue == 4

qBound ( const &min, const &value, const &max )
說明：返回極限不超過 min , max 的值，等同於 qMax(min, qMin(value, max))
範例：
```
int myValue = 10;
 int minValue = 2;
 int maxValue = 6;

 int boundedValue = qBound(minValue, myValue, maxValue);
 // boundedValue == 6
```

qMax ( const &value1, const &value2 )
說明：返回最大值
範例：

int myValue = 6;
 int yourValue = 4;

 int maxValue = qMax(myValue, yourValue);
 // maxValue == 6

qMin ( const & value1, const &value2 )
說明：返回最小值
範例：

int myValue = 6;
 int yourValue = 4;

 int minValue = qMin(myValue, yourValue);
 // minValue == 4

int qRound ( qreal value )
說明：返回四捨五入的整數
範例：

qreal valueA = 2.3;
 qreal valueB = 2.7;

 int roundedValueA = qRound(valueA); 
 // roundedValueB = 2
 int roundedValueB = qRound(valueB); 
 // roundedValueB = 3

qint64 qRound64 ( qreal value )
說明：返最接近的64位元整數
範例：

qreal valueA = 42949672960.3;
 qreal valueB = 42949672960.7;

 int roundedValueA = qRound(valueA); 
 // roundedValueA = 42949672960
 int roundedValueB = qRound(valueB); 
 // roundedValueB = 42949672961

int qrand ()
說明：thread-safe版本的標準C++亂數函式，返回 0 到 RAND_MAX之間的數字序列之下一個整數，使用qsrand(uint seed) 重新給定種子
範例：

qreal valueA = qrand() % 100; // 41
 qreal valueB = qrand() % 10; // 7
 qreal valueC = qrand() % 2; // 0
 qsrand(0xffffffff);
 valueA = qrand() % 100; // 35
 valueB = qrand() % 10; // 9
 valueC = qrand() % 2; // 0
 qsrand(0xffffff);
 valueA = qrand() % 100; // 35
 valueB = qrand() % 10; // 3
 valueC = qrand() % 2; // 0

bool qFuzzyCompare ( double p1, double p2 ) [靜態方法]
說明：比較兩個長浮點數的大小，如果兩者相同返回true，反之為否，同樣為thread-safe。另外也提供float版本的方法： bool qFuzzyCompare ( float p1, float p2 ) [static]
範例：
```
qreal valueA = 42949672960.3;
 qreal valueB = 42949672960.7;

 bool equal = qFuzzyCompare(valueFA,valueFB); 
 // equal = false
```