Flex 使用fxg

要在Flash CS5內將圖檔輸出成fxg檔案,供Flex使用，以下步驟流程

一.Flash FXG輸出

在Flash上繪製圖片，可繪製多個物件同時輸出，Export Image，
選擇fxg格式，即自動產生FXG File
如果flash內的物件有使用到外部的圖檔,那麼在輸出fxg檔案的同時,
會產生一個asset目錄,包含外部點陣圖檔案
例如MyBall.fxg
在所輸出的fxg檔案內可看到

 1.<Graphic viewWidth viewHeight>:  
     <Graphic>為fxg document的root node,viewWidth   
     viewHeight即為flash所設定的stage大小  
 2.<Library>:當場景上有多個物件會被定義到Libray內,  
     可以重複使用裡面所定義的物件       

二.放置到Flex可連結到的目錄
可將輸出的fxg檔案放置到Flex對應的class Path內
例如 com/ozzysun/flex/fxg/MyBall.fxg
就可把fxg看作在nameSpace com.ozzysun.flex.fxg下的一個物件類別

FXG本身是一個獨立的文件，其內部不可參考到別的fxg或mxml檔案
但可以連結到點陣圖或是系統字型

三.在Flex Application使用fxg物件

fxg物件只能被加到spark container內，不能加到mx container內

  <s:Application backgroundColor="0xFFFFFF"     
    xmlns:s="library://ns.adobe.com/flex/spark"  
    xmlns:oz="com.ozzysun.flex.fxg.*">  
      <oz:MyBall id="graphic1"/>  
   </s:Application>  

四.在ActionScription上使用fxg物件

在AS中fxg物件會被當作是park.core.SpriteVisualElement物件
並使用addElement加到spark container內
例

var _item:SpriteVisualElement=new MyBall();
vGroup.addElement(_item);

五.FXG Document語法架構

fxg檔案以當作文件的根節點,下面可包含0~多個container(如Group)
或繪圖元素(如Rect,Ellipse,BitmapImage)
根節點下可以包含有或,若有,一定要放在其他tag之前
如果這兩個tag都有,那就把放在第一位

六.FXG的座標與大小控制

fxg使用可以使用兩種座標系統,document coordinater與user coordinater
document coordinater是以整個輸出的swf左上方為參考點
user coordinater則是以這個fxg document的tag為參考點
預設fxg內部元素都會使用user coordinater

每個fxg內部元素都會有width height屬性可以設定,而在根節點上的
viewWidth viewHeight為整個fxg元件大小,如果內部元素寬高小於viewWidth viewHeight
就會出現空白間距