xflash基础语法

使用方法
=========================================================
<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>