練習了官方的 Flash Catalyst Beta 教學

張貼者： 擴擴咱 標籤：

因為想了解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

修改TileList元件的ScrollBar位置

張貼者： 擴擴咱 標籤： ,

開始使用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的測試時間

張貼者： 擴擴咱 標籤：

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式的睜一隻眼閉一隻眼了。這次的測試時間可以多久我不知道，目前還沒裝上去 。updated: 剛剛裝上去了，開啟的時候就沒有什麼倒數的提醒了，所以應該是沒有時間限制了，不過我想Adobe也不怕大家用，用了就是測了，而且這只是Beta版而已，未來正式版出來肯定會修正一些Bug、效能和新增很多很多功能。

Before you thinking in Flex, you step in Flex first

張貼者： 擴擴咱 標籤： ,

原來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 海報

張貼者： 擴擴咱 標籤： , , ,

就在大前天收到一個閃很大的神秘禮物，就是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 缺點

張貼者： 擴擴咱 標籤：

玩了一陣子從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學習筆記：初識

張貼者： 擴擴咱 標籤： ,

紀錄一下目前所認識的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平台都可以實作和採用。

除了官方的範例，網路上也可以找到比較簡短的教學、範例以及前輩的分享，包括：
最近也看到了這兩篇比較MVC framework的文章，蠻有趣的：

訂閱： 文章 (Atom)


Copyright 2008 Splashpress Media | Modified by Mediakid.org | Converted by eBlog Templates | Blogging Pro Blogger | Designed by Design Disease