使用方法
=========================================================
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
//putyourcodehere
</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的位置和大小将自动随着场景的变化而变化,而不需要另外使用定位代码,下面是几个简单的定位的例子。
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<boxpos="0,0,100,100"bg="#0d8910"bd="#black"/>
<boxpos="c,m,100,100"bg="#0d8910"bd="#black"/>
<boxpos="r,b,100,100"bg="#0d8910"bd="#black"/>
<boxpos="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的一些应用实例。
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<boxpos="0,0,100,100"bg="#0d8910"/>
<boxpos="200,200,286,110"bg="http://www.google.cn/intl/zh-CN/images/logo_cn.gif"/>
</xmp>
◇多图背景实例
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<preload>
<fileurl="photo/box_x.png">dlg_*_*.png:0,0,170,95,60,60,22,9;bar_*.png:0,105,170,34,9,9</file>
</preload>
<boxpos="c-120,m-80,120,34"bg="bar_*.png"><labelalign="center"pos="c,m,60,20">我短</label></box>
<boxpos="c-120,m+80,180,34"bg="bar_*.png"><labelalign="center"pos="c,m,60,20">我长</label></box>
<boxpos="c+120,m-120,120,120"bg="dlg_*_*.png"><labelalign="center"pos="c,m,60,20">我小</label></box>
<boxpos="c+120,m+120,220,220"bg="dlg_*_*.png"><labelalign="center"pos="c,m,60,20">我大</label></box>
</xmp>
bd属性表示box的边框,只能使用颜色表示,这比较好理解。如果加入bd2属性,则可以让左上边框是一种颜色,而右下边框是另一种颜色,下面是一经典的windows凸出面板的模拟实例。
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<boxpos="c,m,300,200"bg="#d4d0c8"bd="#d4d0c8"bd2="#404040">
<boxpos="1,1,f-2,f-2"bd="#white"bd2="#808080"/>
</box>
</xmp>
拖动box很简单,只需提供drag属性就可以了。drag的值有三个,parent、this和edit,parent就是拖动父元素,this是拖动自已,edit是为开发时定位准备的,拖动结束后会把座标拷贝到剪贴板上,到编辑器里ctrl+v就行了。
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<boxpos="50,50,300,200"drag="this"bg="#d4d0c8"bd="#808080"/>
</xmp>
我们还可以让box具有事件响应能力,目前提供的事件有onmouseover,onmouseout,onmousedown,onmouseout等4个。
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<boxpos="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*/},就可以实现点击调用。
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<preload><fileurl="photo/button_a.png"/></preload>
<buttononclick="alert('我是普通按钮')"pos="c,m-20,60,21">普通按钮</button>
<buttononclick="alert('我是纯图片按钮')"pos="c,m+20,53,17"bg="button_a.png"/>
</xmp>
对于一个应用程序来说,普通按钮数量上比较多,而且只有一种样式,默认的普通按钮样式是仿windows的,那么如何自定义普通按钮呢?首先要准备一张三态图片,进行preload时进行虚拟切割为button_*.png,这样按钮样式就会自动变化了。◇自定义的普通按钮->>运行下面的js
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<preload><fileurl="photo/button_x.png">button_*.png:0,0,58,63,9,9</file></preload>
<buttononclick="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
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<labelpos="c,m-20,120,21"bd="#black">普通标签</label>
<labelpos="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时是密码输入框
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<boxpos="c,m,200,200">
<labelpos="20,20,50,20">用户名:</label>
<inputpos="75,20,120,21"bd="#black"></input>
<labelpos="20,50,50,20">密码:</label>
<inputpos="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
<scriptsrc=/xflash/xflash.js></script>
<xmptype="xfml">
<preload><fileurl="photo/loading.jpg"/></preload>
<boxpos="c,m-100,104,60"bg="loading.jpg"/><moviepos="c,m,104,12"delay="50"src="loading.jpg"/>
</xmp>
</script>