MacroViz

多媒體設計、數位學習、英語學習、日語學習

Archive for the '多媒體設計' Category

把 Flex SDK 4 整合進 Flex Builder 3 開發環境

Flex SDK 4 已經出來了,可惜還沒有 Flex Builder 4。不過沒關係,野部看到國外有些人把 Flex SDK 4 整合進去 Flex Builder 3,照樣可以視覺化開發應用程式。以下,野部就詳列操作步驟:

一、下載 Flex SDK 4:
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4
Adobe Flex SDK (ZIP  82MB)

二、確認 Flash Player 的版本是 10 以上,預設的 9 是不可以搭配 Flex 4 使用的:
http://www.adobe.com/products/flash/about/
記下這一行 「You have version 10,0,12,36 installed」。

三、安裝 Flex SDK 4:

將 Flex SDK 4 解壓縮,並且根據版本序號命名為 4.0.0。將此資料夾移動到 C:\Program Files\Adobe\Flex Builder 3\sdks。此時可以看到之前已經有 2.0.1,3.2.0 兩個資料夾了。

四、設定 Flex Builder 3 呼叫 Flex SDK 4:
首先,先進入「功能表選單 => Project => Properties => Flex Compiler 」,看到右上角「Configure Flex SDKs」,進入之後,我們可以看到,已經有 Flex 2.0.1 Hotfix 3 和 Flex 3.2。現在請按下 Add,Flex SDK location 指向 C:\Program Files\Adobe\Flex Builder 3\sdks\4.0.0,Flex SDK name 會自動出現 Flex 4.0,如果沒有,請自行手動輸入。增加完畢後,請在 Flex 4.0 之前打勾。

五、設定專案使用 Flash Player 10 執行:
通常 Flex Builder 3 的專案都是放在 「我的文件 => Flex Builder 3」 的資料夾下。進入想要用 Flex SDK 4 開發的專案資料夾。用記事本打開 「.actionScriptProperties」檔案,找到「htmlPlayerVersion」,把版本從「9.x.x」改成「10.0.12」。此處原本是可以從 Builder 來改,但是不知道為何改了之後無法存檔,只好用記事本改。

六、測試成功與否,輸入:
<mx:Script>
    <![CDATA[
        import flashx.textLayout.formats.TextAlign;
    ]]>
</mx:Script>
如果沒有錯誤訊息,表示整合成功。

注意事項:

  1. 每次開一個新專案或者舊專案要用 Flex SDK 4 來建構的話,都必須重複執行步驟五,否則 Flex Builder 3 呼叫預設的 Flash Player 9,會產生錯誤訊息。
    http://blog.shortfusion.com/index.cfm/2008/12/27/Flex4Gumbo-Error-1046-Type-Not-Found-Matrix3d–Easy-Fix
  2. Flex 4 和 Flex 3 的 Application 的 XML 命名空間不太一樣,所以語法上也要有些對應調整,可以參考下面這個範例,要改的地方包含 xmlns、所有標籤前方的 mx: 也都不見了。
    http://blog.flexexamples.com/2008/10/22/setting-text-alignment-on-an-fxtextarea-control-in-flex-gumbo/
  3. 另外,當專案最後產出 swf  的時候,可以在 「功能表選單 => Project => Properties => Flex Compiler 」把 「 -locale en_US 」改成「-locale en_US -debug=false 」可讓每個 swf 減少100KB。但是,這樣做會把除錯訊息整個隱藏,要注意。
  4. 此外,切換到 Design Mode 時會出現 warning 訊息,根據討論區的回應,看來目前 Flex 開發團隊還在處理當中。
    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=669&threadid=1407689&enterthread=y

posted by 野部 聖広 in Actionscript 3.0,Adobe Flash,Adobe Flex and have Comment (1)

增加 Flex 的運作效率

當 Flex 專案變龐大,Building workspace (編譯專案) 的速度會變得極慢。不過野部也發現一些方法,可以大幅提升 Building workspace 的速度。
每次 Building workspace 之後,我們可以看到 0 errors, 0 warnings, 0 infos。提升速度的竅門,在於讓這三個數字都保持 0。 errors 並不可怕,因為修正之後,errors 並不會再次出現,拖慢 Building workspace 的速度。
真正可怕的是 warnings。warnings 的產生,野部歸納為下列幾種原因:

  1. 函式的宣告,並未宣告 public 或 private,就直接以 function 開頭。
  2. 函式的宣告,並未宣告類型,如 void、String、Number 等,就直接在 (…) 後接上 {…}。
  3. 變數的宣告,並未宣告 public 或 private,就直接以 var 開頭。
  4. 變數的宣告,並未宣告類型,如String、Number等,就直接以 ; 結束。
  5. CSS 宣告的 Tag ,並未在 Application 的 MXML 中出現。
  6. 外部 CSS 套用到 Custom component 上。

第 1 ~ 4 項,留心改善便可。第5、6項,其實是吃掉 Building workspace 的元兇。在Adobe / Macromedia 網頁設計工具中,例如 Flex、Dreamweaver、或是 Flash,針對 CSS 的運用時機,可分為 Design mode/time (設計時期之外觀) 和 Run time (執行時期之外觀)。
當我們在 Flex 使用 <mx:Style 標籤時,不論是外部或者內部 CSS,就是使用了 Design mode CSS。而每次存檔,Design mode CSS 都必須重新套用到整個專案,並輸出成 swf 檔,速度一定會很慢。
有時候,我們不得不將外部 CSS 套用到 Custom component (自訂元件,類似 Java Beans 的觀念,BCB or VB 也具有相同或類似的運作觀念)上。雖然外部 CSS 對 Custom component 的 Control (設計控件) 仍具有影響力,但是會出現一大串 warnings。
所以,野部提出幾個變通的方法。

  1. 盡量減少 Custom component,改用 Application 搭配 SWFLoader,並根據不同的 Application 設計不同的外部 CSS。 每次 Custom component 的存檔,會影響所有引用這個 Custom component 的 MXML 重新編譯,這也是拖慢 Building workspace 的速度的另一個主因。
  2. 用 Actionscript 產生 Control,不過這樣做,就走回 JAVA 在人機介面設計上,被人家詬病的老路了。不過野部知道,有些從 JAVA 領域來到 Flex 領域的設計師,極端偏好此道。優點是執行效率真的極端的高,缺點是這個專案無法讓太多不同背景的人共同 teamwork。如:視覺設計師、或專案經理。專案的邏輯只有程式設計師自己看得懂而已。萬一這位程式設計師離開專案,這專案就掛定了。
  3. 將 Desing mode CSS Complie 成 Run time CSS。Run time CSS 的哲學是,程式開始執行才導入外部 CSS 去改變外觀。不但可以避開 Design mode CSS 重新套用的低效能,也不會產生任何 warnings。詳細做法,可參考 Flex Help 內的幾個主題:
  1. Using external style sheets
  2. Loading style sheets at run time

個人認為,上列三種方式,可靈活變通運用,不必極端。用得好,就是有效,用得不好,那就不如不用。

另外,針對除錯效率方面。雖然 Flex Builder 在 Eclipse 開發環境下,已經整合了自動提示 errors 的功能。可是過度依賴這個功能,是不好的觀念。而且,每次都讓開發環境去提示,可是得浪費掉很多效能和時間的。野部的 Flex 專案開發環境,最高消耗掉 700 多 mb 的記憶體。
正確的開發觀念是,一次就把程式寫對了,別讓開發環境來提醒。然而,弔詭的是,開發環境沒 errors,不見得寫下的程式就是對的。下面兩種情形,就是這樣的:

  1. 某些 Default control 被 implement 時所呼叫的 Manager 有 bug,而我們並不知道這樣的 bug 存在。目前已知的情形是 ComboBox 所呼叫的 IPopUpManager 有這個情形。解決方法是要自行先 import 這個 Manager。聽說 DragManager也有。由於許多 Control 被 implement 都會使用到 IPopUpManger 和 DragManager,例如 ComboBox 或者 List,當發現下拉清單拉不下來時,就是了。所以,還是養成好習慣,調用 Manager 時,用和 JAVA 一樣嚴謹的態度完全 import,甚至開發環境沒有提醒到的,還是要強制 import。
  2. 濫用的 parentApplication。在 Custom component 內的 parentApplication 語法會去參照引用這個 Application/Custom component 的最上層的 Application,不論中間引用的 n 層的 Application/Custom component。所以,可能是基於運算效能上的考量,開發環境並不會去偵測和除錯 parentApplication 語法,成了隱形的炸彈。parentApplication 絕對不是唯一的解決方案,還有很多寫法可以取代。parentApplication 用法可參考 Flex Help:
  1. About the Application object
  2. Passing data

還有一個小技巧,對設計師在 layout 上影響不大的一些 Control 就可以善加使用迴圈 + this[字串] 讓 Actionscript 自動產生或者批次處理大量的 Control,或者使用 repeater 達到同樣的目的。不但可以大幅減少 MXML 和 as 的檔案長度、增加程式的可讀性,並且不用重複撰寫多次類似的函式。

這些經驗的歸納,來自於野部不斷犯的錯,以及工作夥伴們,用血淚堆砌的開發經驗,希望對大家在開發 Flex 專案上,有所幫助。

posted by 野部 聖広 in Actionscript 3.0,Adobe Flash,Adobe Flex and have Comments (2)

硬碟空間是被哪隻怪獸給吃掉的?

可能會有些人有此疑問,明明把軟體裝在 D 槽,為什麼 C 槽的空間還是會大量減少呢?
(把 Windows 裝在D槽的魔人和 Linux 的愛用者應該不用看此文)

有下列幾種原因:

(一) 這套軟體裝了一些字型到 Window 系統資料夾,通常在 C 槽。
(二) 這套軟體把原始安裝檔案留在 C 槽。
(三) 這套軟體需要下載 Microsoft .Net Framework 等公用元件,不得不裝在 C 槽。
(四) 這套軟體操作時,所下載的一些檔案資源,或者使用者產生的檔案,自動跑到 C 槽。如 PowerPoint 的樣板,Word 的藝廊,Windows Media Player 的面板檔案。
(五) 筆電休眠時的記憶體 Dump 檔,系統預設的 Swap 虛擬記憶體檔,軟體預設的虛擬記憶體檔,都是放在 D 槽。

如果是 Windows 的愛用者,解決的方法永遠只有一個,就是想辦法讓你的 C 槽夠大吧,最好能夠無限大 XD。
宇宙霹靂天下無敵刀槍不入的終極方法就是把 Windows 移除,改裝 Ubuntu Linux 8.10 吧。 

下表打 ◎ 表示具有該情形的軟體

軟體名稱 (一)字型 (二)原始檔 (三)公用元件 (四)產生檔案 (五)暫存檔
Microsoft Office    
Microsoft Visual Studio      
Microsoft Encarta      
Borland C++ 2006        
Adobe Photoshop, Illustrator, Acrobat  
Adobe/Macromedia Dreamweaver, Flash, Fireworks        
Adobe/Macromedia Flex Builder 3        
Windows Swap, Memory Dump File        
Windows Media Player        
Microsoft Internet Explorer Cache Files        
Firefox Cache Files        

本表由野部歸納整理

為何整理這張表呢?原因是剛剛裝完 Adobe CS4 測試版,才發現,C 槽硬碟空間消失一大塊。看來 Adobe 早就已經比 Microsoft Office 還像吃資源怪物了。

介紹一套軟體 OverDisk。在OverDisk 下,硬碟就像是塊大餅乾,用 OverDisk 來看看到底哪隻怪獸吃最多吧。http://users.forthnet.gr/pat/efotinis/programs/overdisk.html

 

posted by 野部 聖広 in 硬體相關 and have No Comments

Flex 使用 parentApplication 的注意事項

當在專案中,運用的自訂元件越來越多層時,為了頁面的切換和導覽,有時候會需要存取上層,或同層之間的變數或物件,這個時候,Flex 的 Actionscript 3.0 提供了parentApplication作為一個解決方案。野部用一個通俗的概念來描述,parentApplication 可以視同為 flash 開發環境下的 _root,但是限制比較多,可以有下面幾種運用方式:

  1. parentApplication.componentID.objectID.property
  2. parentApplication.objectID. property
  3. parentApplication.varableName

但是當遇到兩層元件以上的時候,用下列語法會造成執行錯誤:

componentID.componetID.objectID.property

此外,parentApplication還有幾個需要注意的事項:

  1. 一定是從最上層也就是 <mx:Application> 那一層開始算起
  2. 引入自訂元件一定要下 ID,如 <local:myComp id="myComp">,這點有時候會被忽略。
  3. 如上所述,元件只能一層。
  4. parentApplication 之後的語法,Flex Builder 不會即時除錯,必須等到在瀏覽器中執行時才知道錯誤與否,因為超過運算範圍。

可是有時候為了導覽,不得不跨層存取,限制那麼多,又不能即時除錯,那該怎麼辦呢?

其實解決方法很簡單,就是在最上層,也就是<mx:Application>層,宣告一個 public 變數。之後任何一層,需要存取或者判斷時,直接用parentApplication.varableName 的方式來達成就行了。

P.S. 上述的componentID, objected, property, varableName 請代換成您自己的語法就行了。

野部

posted by 野部 聖広 in Actionscript 3.0,Adobe Flash,Adobe Flex and have No Comments