亲宝软件园·资讯

展开

xflash基础语法

人气:0
想了解xflash基础语法的相关内容吗,在本文为您仔细讲解的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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> 

  

加载全部内容

相关教程
猜你喜欢
用户评论