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


練習結果：



小小心得：(1) 覺得把互動設計的流程獨立出來不只是有幫助，對開發流程來說更是一大創新，個人覺得這種創新是有實際幫助的，而不只是口號 ( 了解Flash Catalyst )。也許近幾年還不太可能，可是未來FC這種軟體更為完善的時候，很有可能會有真正的"純互動設計師"這樣的工作出現。(無法驗證^^"，只是種感想)  (2) FC拉出來的檔案size都超大，雖然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