使用方法
=========================================================
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    //put your code here
</xmp>
===================================================================
    只要包含xflash.js文件就可以使用xflash機(jī)制來開發(fā)程序，如果你想把解析程序放到自已的網(wǎng)站上，或者放到本地iis服務(wù)器上便于調(diào)試，也可以把xflash.js和xflash.swf兩個(gè)文件拷貝下來放到本機(jī)的同一個(gè)目錄下，然后引用就可以了。
實(shí)事求是，從頭開始  

    在xflash中使用的各種元素，都由xml來表現(xiàn)，稱之為xfml。xfml具備和html相似的功能，事件處理方式也一樣，只是會(huì)簡潔很多，還提供很多實(shí)用的屬性，方便界面布局。

box - 盒元素
    box元素是xflash界面結(jié)構(gòu)的基礎(chǔ)，具有很強(qiáng)大的表現(xiàn)能力，而且也只有box元素可以包含其他元素或者另外的box，可見其意義之重要。與html中的div或者flash中的mc相比，box集成了很多常用的功能，使界面開發(fā)變得很容易。
    pos是位置屬性，其格式是：“x,y,width,height”，以逗號(hào)分隔各個(gè)參數(shù)，這點(diǎn)比較容易理解，讓pos定位變得容易操作的因素是加入了關(guān)鍵字。x座標(biāo)上的關(guān)鍵字是c和r，即居中和居右；y座標(biāo)上的關(guān)鍵字是m和b，即居中（垂直）和居下；width和height都只有一個(gè)關(guān)鍵字f，即100%充滿。pos支持計(jì)算表達(dá)式，但是表達(dá)式中不能有括號(hào)。使用關(guān)鍵字之后，box的位置和大小將自動(dòng)隨著場景的變化而變化，而不需要另外使用定位代碼，下面是幾個(gè)簡單的定位的例子。
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <box pos="0,0,100,100" bg="#0d8910" bd="#black"/>
    <box pos="c,m,100,100" bg="#0d8910" bd="#black"/>
    <box pos="r,b,100,100" bg="#0d8910" bd="#black"/>
    <box pos="0,b,f/2,100" bg="#0d8910" bd="#black"/></xmp>
</xmp>

    bg屬性表示box的背景，以符號(hào)“#”為區(qū)分，使用了“#”為前綴的，用顏色填充，否則就用圖片填充。顏色與html中的一樣，用十六進(jìn)制來表示，有一些顏色可用英文定義。背景圖片填充需要用loadFile函數(shù)先行載入，如果是遠(yuǎn)程圖片，由于有跨域訪問的限制，不能作為背景平鋪，只能一次使用，其判斷標(biāo)準(zhǔn)是看url的最前面是否是“http://”。另外，還提供了多圖背景，有3張和9張兩種格式。三張圖片作為背景，左右兩張不變，中間平鋪的方式，以此為基礎(chǔ)，也提供了9張圖片作為背景的常用方式，格式是bg參數(shù)中有“_*”字樣，這樣就會(huì)分別會(huì)替換成"_l"、"_c"、"_r"，取出三張圖片來組合，9張圖片則是“_*_*”字樣。下面是bg的一些應(yīng)用實(shí)例。
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <box pos="0,0,100,100" bg="#0d8910"/>
    <box pos="200,200,286,110" bg="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"/>
</xmp>

◇ 多圖背景實(shí)例 
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <preload>
        <file url="photo/box_x.png">dlg_*_*.png:0,0,170,95,60,60,22,9;bar_*.png:0,105,170,34,9,9</file>
    </preload>
    <box pos="c-120,m-80,120,34" bg="bar_*.png"><label align="center" pos="c,m,60,20">我短</label></box>
    <box pos="c-120,m+80,180,34" bg="bar_*.png"><label align="center" pos="c,m,60,20">我長</label></box>
    <box pos="c+120,m-120,120,120" bg="dlg_*_*.png"><label align="center" pos="c,m,60,20">我小</label></box>
    <box pos="c+120,m+120,220,220" bg="dlg_*_*.png"><label align="center" pos="c,m,60,20">我大</label></box>
</xmp>

    bd屬性表示box的邊框，只能使用顏色表示，這比較好理解。如果加入bd2屬性，則可以讓左上邊框是一種顏色，而右下邊框是另一種顏色，下面是一經(jīng)典的windows凸出面板的模擬實(shí)例。
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <box pos="c,m,300,200" bg="#d4d0c8" bd="#d4d0c8" bd2="#404040">
        <box pos="1,1,f-2,f-2" bd="#white" bd2="#808080"/>
    </box>
</xmp>

    拖動(dòng)box很簡單，只需提供drag屬性就可以了。drag的值有三個(gè)，parent、this和edit，parent就是拖動(dòng)父元素，this是拖動(dòng)自已，edit是為開發(fā)時(shí)定位準(zhǔn)備的，拖動(dòng)結(jié)束后會(huì)把座標(biāo)拷貝到剪貼板上，到編輯器里ctrl+v就行了。
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <box pos="50,50,300,200" drag="this" bg="#d4d0c8" bd="#808080"/>
</xmp>

    我們還可以讓box具有事件響應(yīng)能力，目前提供的事件有onmouseover,onmouseout,onmousedown,onmouseout等4個(gè)。
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <box pos="50,50,300,200" onmouseup="alert(this)" bg="#d4d0c8" bd="#808080"/>
</xmp>
 button - 按鈕
    xflash中的按鈕分兩種，即普通按鈕和純圖片按鈕。普通按鈕只需要輸入文字就可以了，不用指定背景；純圖片按鈕需要準(zhǔn)備三態(tài)圖片，對(duì)應(yīng)鼠標(biāo)事件的三種狀態(tài)，在生成場景時(shí)應(yīng)該已經(jīng)先期載入。
    按鈕事件使用onclick方法，onclick里執(zhí)行的是xf中的方法，比如alert()，即是xf.alert()，這個(gè)方法已經(jīng)由系統(tǒng)定義好了。用戶可以執(zhí)行自已的方法，如"onload1()"，那么在程序中需要加入xf.onload1=function(){/*code*/}，就可以實(shí)現(xiàn)點(diǎn)擊調(diào)用。
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <preload><file url="photo/button_a.png"/></preload>
    <button onclick="alert('我是普通按鈕')" pos="c,m-20,60,21">普通按鈕</button>
    <button onclick="alert('我是純圖片按鈕')" pos="c,m+20,53,17" bg="button_a.png"/>
</xmp>

    對(duì)于一個(gè)應(yīng)用程序來說，普通按鈕數(shù)量上比較多，而且只有一種樣式，默認(rèn)的普通按鈕樣式是仿windows的，那么如何自定義普通按鈕呢？首先要準(zhǔn)備一張三態(tài)圖片，進(jìn)行preload時(shí)進(jìn)行虛擬切割為button_*.png，這樣按鈕樣式就會(huì)自動(dòng)變化了。     ◇ 自定義的普通按鈕 - >> 運(yùn)行下面的js 
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <preload><file url="photo/button_x.png">button_*.png:0,0,58,63,9,9</file></preload>
    <button onclick="alert('我是自定義的普通按鈕')" pos="c,m-20,90,21">普通按鈕</button>
</xmp>
label - 標(biāo)簽

label標(biāo)簽中的文字只能是一行，而且會(huì)自動(dòng)垂直居中，除了字體相關(guān)屬性可以定義之外，還可以定義邊距和水平對(duì)齊方式，下面是label屬性的相關(guān)說明。

font：字體類型，目前flash只支持英文字體，對(duì)于中文字體無效
size：字體大小，以像素為單位
color：字體顏色
bold：值為1時(shí)是粗體
html：是否為html格式
align：水平對(duì)齊方式，有center和right兩個(gè)值
padding：水平方向兩端邊距
padding1：水平方向左端邊距
padding2：水平方向右端邊距
◇ 標(biāo)簽實(shí)例 - >> 運(yùn)行下面的js 
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <label pos="c,m-20,120,21" bd="#black">普通標(biāo)簽</label>
    <label pos="c,m+20,180,30" bd="#black" font="黑體" size="16" color="#9b0000" bold="1" padding1="12">加了樣式的標(biāo)簽</label>
</xmp>
input - 輸入框 
input和label很相似，可看作是可編輯的label。

font：字體類型，目前flash只支持英文字體，對(duì)于中文字體無效
size：字體大小，以像素為單位
color：字體顏色
bold：值為1時(shí)是粗體
html：是否為html格式
align：水平對(duì)齊方式，有center和right兩個(gè)值
padding：水平方向兩端邊距
padding1：水平方向左端邊距
padding2：水平方向右端邊距
password：值為1時(shí)是密碼輸入框

<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <box pos="c,m,200,200">
        <label pos="20,20,50,20">用戶名：</label>
        <input pos="75,20,120,21" bd="#black"></input>
        <label pos="20,50,50,20">密　碼：</label>
        <input pos="75,50,120,21" bd="#black" password="1"></input>
    </box>
 textarea - 文本區(qū)域

textarea是多行的文本域，可用于輸入，也可用于顯示。
font：字體類型，目前flash只支持英文字體，對(duì)于中文字體無效
size：字體大小，以像素為單位
color：字體顏色
bold：值為1時(shí)是粗體
html：是否為html格式
align：水平對(duì)齊方式，有center和right兩個(gè)值
padding：水平方向兩端邊距
padding1：水平方向左端邊距
padding2：水平方向右端邊距
padding3：垂直方向上端邊距
padding4：垂直方向下端邊距
readOnly：值為1時(shí)不可編輯
selectable：值為1時(shí)可選擇，對(duì)于可編輯的textarea該屬性無意義
movie - 動(dòng)畫元素

    flash不支持gif格式的動(dòng)畫，需要把所有畫面都集成在一張圖上，movie元素讀入之后，會(huì)逐楨顯示播放，實(shí)現(xiàn)動(dòng)畫的效果。
    src屬性指定動(dòng)畫引用的圖片路徑，delay表示每楨播放后停留的毫秒數(shù)，默認(rèn)為100。
◇ 動(dòng)畫演示 - >> 運(yùn)行下面的js 
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
    <preload><file url="photo/loading.jpg"/></preload>
    <box pos="c,m-100,104,60" bg="loading.jpg"/><movie pos="c,m,104,12" delay="50" src="loading.jpg"/>
</xmp>
</script> 

  

最新評(píng)論