使用方法
=========================================================
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
//put your code here
</xmp>
===================================================================
只要包含xflash.js文件就可以使用xflash機制來開發程序,如果你想把解析程序放到自已的網站上,或者放到本地iis服務器上便于調試,也可以把xflash.js和xflash.swf兩個文件拷貝下來放到本機的同一個目錄下,然后引用就可以了。
實事求是,從頭開始
在xflash中使用的各種元素,都由xml來表現,稱之為xfml。xfml具備和html相似的功能,事件處理方式也一樣,只是會簡潔很多,還提供很多實用的屬性,方便界面布局。
box - 盒元素
box元素是xflash界面結構的基礎,具有很強大的表現能力,而且也只有box元素可以包含其他元素或者另外的box,可見其意義之重要。與html中的div或者flash中的mc相比,box集成了很多常用的功能,使界面開發變得很容易。
pos是位置屬性,其格式是:“x,y,width,height”,以逗號分隔各個參數,這點比較容易理解,讓pos定位變得容易操作的因素是加入了關鍵字。x座標上的關鍵字是c和r,即居中和居右;y座標上的關鍵字是m和b,即居中(垂直)和居下;width和height都只有一個關鍵字f,即100%充滿。pos支持計算表達式,但是表達式中不能有括號。使用關鍵字之后,box的位置和大小將自動隨著場景的變化而變化,而不需要另外使用定位代碼,下面是幾個簡單的定位的例子。
<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的背景,以符號“#”為區分,使用了“#”為前綴的,用顏色填充,否則就用圖片填充。顏色與html中的一樣,用十六進制來表示,有一些顏色可用英文定義。背景圖片填充需要用loadFile函數先行載入,如果是遠程圖片,由于有跨域訪問的限制,不能作為背景平鋪,只能一次使用,其判斷標準是看url的最前面是否是“http://”。另外,還提供了多圖背景,有3張和9張兩種格式。三張圖片作為背景,左右兩張不變,中間平鋪的方式,以此為基礎,也提供了9張圖片作為背景的常用方式,格式是bg參數中有“_*”字樣,這樣就會分別會替換成"_l"、"_c"、"_r",取出三張圖片來組合,9張圖片則是“_*_*”字樣。下面是bg的一些應用實例。
<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>
◇ 多圖背景實例
<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屬性,則可以讓左上邊框是一種顏色,而右下邊框是另一種顏色,下面是一經典的windows凸出面板的模擬實例。
<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>
拖動box很簡單,只需提供drag屬性就可以了。drag的值有三個,parent、this和edit,parent就是拖動父元素,this是拖動自已,edit是為開發時定位準備的,拖動結束后會把座標拷貝到剪貼板上,到編輯器里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具有事件響應能力,目前提供的事件有onmouseover,onmouseout,onmousedown,onmouseout等4個。
<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中的按鈕分兩種,即普通按鈕和純圖片按鈕。普通按鈕只需要輸入文字就可以了,不用指定背景;純圖片按鈕需要準備三態圖片,對應鼠標事件的三種狀態,在生成場景時應該已經先期載入。
按鈕事件使用onclick方法,onclick里執行的是xf中的方法,比如alert(),即是xf.alert(),這個方法已經由系統定義好了。用戶可以執行自已的方法,如"onload1()",那么在程序中需要加入xf.onload1=function(){/*code*/},就可以實現點擊調用。
<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>
對于一個應用程序來說,普通按鈕數量上比較多,而且只有一種樣式,默認的普通按鈕樣式是仿windows的,那么如何自定義普通按鈕呢?首先要準備一張三態圖片,進行preload時進行虛擬切割為button_*.png,這樣按鈕樣式就會自動變化了。 ◇ 自定義的普通按鈕 - >> 運行下面的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 - 標簽
label標簽中的文字只能是一行,而且會自動垂直居中,除了字體相關屬性可以定義之外,還可以定義邊距和水平對齊方式,下面是label屬性的相關說明。
font:字體類型,目前flash只支持英文字體,對于中文字體無效
size:字體大小,以像素為單位
color:字體顏色
bold:值為1時是粗體
html:是否為html格式
align:水平對齊方式,有center和right兩個值
padding:水平方向兩端邊距
padding1:水平方向左端邊距
padding2:水平方向右端邊距
◇ 標簽實例 - >> 運行下面的js
<script src=/xflash/xflash.js></script>
<xmp type="xfml">
<label pos="c,m-20,120,21" bd="#black">普通標簽</label>
<label pos="c,m+20,180,30" bd="#black" font="黑體" size="16" color="#9b0000" bold="1" padding1="12">加了樣式的標簽</label>
</xmp>
input - 輸入框
input和label很相似,可看作是可編輯的label。
font:字體類型,目前flash只支持英文字體,對于中文字體無效
size:字體大小,以像素為單位
color:字體顏色
bold:值為1時是粗體
html:是否為html格式
align:水平對齊方式,有center和right兩個值
padding:水平方向兩端邊距
padding1:水平方向左端邊距
padding2:水平方向右端邊距
password:值為1時是密碼輸入框
<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 - 文本區域
textarea是多行的文本域,可用于輸入,也可用于顯示。
font:字體類型,目前flash只支持英文字體,對于中文字體無效
size:字體大小,以像素為單位
color:字體顏色
bold:值為1時是粗體
html:是否為html格式
align:水平對齊方式,有center和right兩個值
padding:水平方向兩端邊距
padding1:水平方向左端邊距
padding2:水平方向右端邊距
padding3:垂直方向上端邊距
padding4:垂直方向下端邊距
readOnly:值為1時不可編輯
selectable:值為1時可選擇,對于可編輯的textarea該屬性無意義
movie - 動畫元素
flash不支持gif格式的動畫,需要把所有畫面都集成在一張圖上,movie元素讀入之后,會逐楨顯示播放,實現動畫的效果。
src屬性指定動畫引用的圖片路徑,delay表示每楨播放后停留的毫秒數,默認為100。
◇ 動畫演示 - >> 運行下面的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>