於 Flex 使用 Flash 素材，與製作動態載入 Theme

最近工作上，花了很多時間在處理 Flash 與 Flex 之間的合作。

目標是，美術製作的 Flash 素材，Flex 可以直接使用，不用重新依照 Flash 的設計而在 Flex 中重新以 MXML 組合 layout；並且要能支援動態載入外部 *.swf 素材，達到切換 theme 的機制。

步驟一：準備數款 Flash 設計的檔案，並輸出 *.swf

/asset/asset1.fla -> /asset/asset1.swf


/asset/asset2.fla -> /asset/asset2.swf


/asset/asset3.fla -> /asset/asset3.swf


步驟二，將 Flash 素材，轉變成 Flex 素材

/css/asset1.css -> /css/asset1.swf

.MyBtns{
class: Embed(source="../asset/asset1.swf", symbol="ui.Btns");
}

/css/asset2.css -> /css/asset2.swf

.MyBtns{
class: Embed(source="../asset/asset2.swf", symbol="ui.Btns");
}

/css/asset3.css -> /css/asset3.swf

.MyBtns{
class: Embed(source="../asset/asset3.swf", symbol="ui.Btns");
}

步驟三，開一 MXML 專案

畫面中只放一個自訂 UIComponent : MyBtnsUIComponent

Theme.xml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:creationComplete>
<![CDATA[
StyleManager.loadStyleDeclarations("Users/ben/Documents/Flex Builder 3/Theme/css/asset1.swf");
]]>
</mx:creationComplete>
<local:MyBtnsUIComponent /> 
</mx:Application>

這個 MyBtnsUIComponent 作的事情是，從 CSS 中，取得 ui.Btns 類別，建立視覺物件，放到畫面上；因為從 Flash 產生的物件是 Sprite 或 MovieClip，無法直接放到 Application 中，所以要放在自訂的 UIComponent 中。

MyBtnsUIComponent.as

package
{
import flash.display.Sprite;
import flash.events.Event;

import mx.core.UIComponent;
import mx.events.FlexEvent;

public class MyBtnsUIComponent extends UIComponent
{
private var Cls:Class;
private var _view:Sprite;
private var _viewProxy:MyBtnsProxy;

public function MyBtnsUIComponent()
{
super();

this.addEventListener(FlexEvent.INITIALIZE, onInitialize, false, 0, true);
}

private function onInitialize(e:Event):void{
this.removeEventListener(FlexEvent.INITIALIZE, onInitialize);

this.styleName = "MyBtns";
}

override public function styleChanged(styleProp:String):void{
Cls = this.getStyle("class") as Class;
if(Cls!=null)
createView();
}

private function createView():void{
if(_view!=null && _view.parent!=null)
_view.parent.removeChild(_view);

_view = new Cls as Sprite;
this.addChild(_view);

if(_viewProxy==null)
_viewProxy = new MyBtnsProxy(_view);
else
_viewProxy.updateView(_view);
}
}
}

另外，設計了一個 FlashUIComponentProxy 用來包裝所有來自 Flash 的 MovieClip / Sprite。

FlashUIComponentProxy.as

package
{
import flash.display.Sprite;
import flash.events.Event;

public class FlashUIComponentProxy
{
static private var _updateController:Sprite = new Sprite();
static private var _updateProxies:Array = [];
static private function invalidateDisplayList(proxy:FlashUIComponentProxy):void{
_updateProxies.push(proxy);

if(!_updateController.hasEventListener(Event.ENTER_FRAME))
_updateController.addEventListener(Event.ENTER_FRAME, onUpdateController_update, false, 0, true);
}
static private function onUpdateController_update(e:Event):void{
_updateController.removeEventListener(Event.ENTER_FRAME, onUpdateController_update);

var ary:Array = _updateProxies.splice(0, _updateProxies.length);
for(var i:int=0; i<ary.length; i++){
(ary[i] as FlashUIComponentProxy).updateDisplayList();
}
}

protected var view:Sprite;

public function FlashUIComponentProxy(view:Sprite)
{
updateView(view);
}

private var _childProxies:Object = new Object();
public function setChildProxy(view:Sprite, ProxyCls:Class):FlashUIComponentProxy{
if(_childProxies[view.name] == null)
_childProxies[view.name] = new ProxyCls(view);
else
(_childProxies[view.name] as FlashUIComponentProxy).updateView(view);

return _childProxies[view.name] as FlashUIComponentProxy;
}

public function updateView(view:Sprite):void{
this.view = view;

makeLink();

invalidateDisplayList();
}

protected function makeLink():void{
}

protected function invalidateDisplayList():void{
FlashUIComponentProxy.invalidateDisplayList(this);
}

protected function updateDisplayList():void{

}
}
}

以這個例子來說，我有一個 Sprite 中，放了三個按鈕、一個文字欄位、一個 Sprite，因為這一整組 Sprite 會有自己的邏輯，所以建立了一個 MyBtnsProxy 來包裝。

MyBtnsProxy.as

package
{
import flash.display.SimpleButton;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;

import mx.styles.StyleManager;

public class MyBtnsProxy extends FlashUIComponentProxy
{
private var _b1:SimpleButton;
private var _b2:SimpleButton;
private var _b3:SimpleButton;

private var _txtData:TextField;

private var _mcInner:Sprite;
private var _mcInnerProxy:MyInnerProxy;



private var _myData:String = "";
public function get myData():String{return _myData;}
public function set myData(value:String):void{
if(_myData==value)
return;
_myData=value;
this.invalidateDisplayList();
}



public function MyBtnsProxy(view:Sprite)
{
super(view);
}

override protected function makeLink():void{
_b1 = view.getChildByName("b1") as SimpleButton;
_b2 = view.getChildByName("b2") as SimpleButton;
_b3 = view.getChildByName("b3") as SimpleButton;

_txtData = view.getChildByName("txtData") as TextField;

_mcInner = view.getChildByName("mcInner") as Sprite;
_mcInnerProxy = this.setChildProxy(_mcInner, MyInnerProxy) as MyInnerProxy;


_b1.addEventListener(MouseEvent.CLICK, on_b1_click, false, 0, true);
_b2.addEventListener(MouseEvent.CLICK, on_b2_click, false, 0, true);
_b3.addEventListener(MouseEvent.CLICK, on_b3_click, false, 0, true);
}

private function on_b1_click(e:MouseEvent):void{
myData = "on_b1_click";
_mcInnerProxy.myData = "inner 1";

StyleManager.loadStyleDeclarations("Users/ben/Documents/Flex Builder 3/Theme/css/asset1.swf");
}

private function on_b2_click(e:MouseEvent):void{
myData = "on_b2_click";
_mcInnerProxy.myData = "inner 2";

StyleManager.loadStyleDeclarations("Users/ben/Documents/Flex Builder 3/Theme/css/asset2.swf");
}

private function on_b3_click(e:MouseEvent):void{
myData = "on_b3_click";
_mcInnerProxy.myData = "inner 3";

StyleManager.loadStyleDeclarations("Users/ben/Documents/Flex Builder 3/Theme/css/asset3.swf");
}

override protected function updateDisplayList():void{
_txtData.text = myData;
}
}
}

在上述的 Sprite 中，又另外有一個叫作 mcInner 的 Sprite，內含一個文字欄位，所以這裡也建立了另一個 MyInnerProxy 來包裝這個 Sprite。

MyInnerProxy.as

package
{
import flash.display.Sprite;
import flash.text.TextField;

public class MyInnerProxy extends FlashUIComponentProxy
{
private var _myData:String = "";
public function get myData():String{return _myData;}
public function set myData(value:String):void{
if(_myData==value)
return;
_myData=value;
this.invalidateDisplayList();
}



private var _txtInner:TextField;

public function MyInnerProxy(view:Sprite)
{
super(view);
}

override protected function makeLink():void{
_txtInner = view.getChildByName("txtInner") as TextField;
}

override protected function updateDisplayList():void{
_txtInner.text = myData;
}

}
}

以上，是所有程式碼，執行畫面如下：

按下按鈕一，動態載入 asset1.swf


按下按鈕二，動態載入 asset2.swf


按下按鈕三，動態載入 asset3.swf


整套程式的目的在於，動態換掉視覺後，文字欄位、資料的部分仍要能保存下來；決定是否要建立一個 FlashUIComponentProxy 來包裝一個 Sprite 在於這個 Sprite 有多複雜。