Flash MX 2004 UI组件系列教程(2) (1)

趁年轻great

趁年轻great

2016-03-18 17:19

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是Flash MX 2004 UI组件系列教程(2) (1),一起来学习了解下吧!
The Tree Component组件允许你显示一个树状结构的导航,而且可以是图形化的。其实你已经很了解它了,因为它和我们经常使用的资源管理器是十分相似的。 

  1. 创建一个400*200大小的新的FLASH文件,使用下列的图示做为参照进行布局。

 

  2. 创建两个新分层,从上到下分别将新层命名为:action,tree component,text area component。

  3. 选择tree component层的第一帧。从组件库中将tree component拖放到层中打开属性面板将其宽设为172高设为180。并且将其实例名命名为myTree。

 

  4. 选择text area component层上第一帧,从组件库中将text area component组件拖至此层上,打开属性面板,将其宽设为188高设为180,并将其实例名命名为myStatusArea,设置其html属性为true。因为我们要将它的内容显示为html格式。同时要将它的换行属性设为true。

  5. 使用记事本找开你下载的xml文件tree_source.xml来观看它的结构。观看它是如何包括文件目录以及一些未包括的文档。

?xml version="1.0" encoding="iso-8859-1"?
NODE label="Personal Folders"
    NODE label="Inbox"
        NODE label="First message" /
        NODE label="Second message" /
        NODE label="Third message" /
    /NODE
    NODE label="Drafts"
        NODE label="First message" /
    /NODE
    NODE label="Outbox" isBranch="true"
        NODE label="No messages." /
    /NODE
    NODE label="Sent Items"
        NODE label="First message" /
        NODE label="Second message" /
    /NODE
/NODE

    

[1] 200806/15073_2.html'>[2] 200806/15073_2.html'>下一页

  6. 在action层的第一帧上输入如下代码:

//载入并指定数据源myTreeDataProvider=new XML();//在xml中忽略空格,这在xml中是很重要的。myTreeDataprovider.ignoreWhite=true;//载入外部xml文件myTreeDataProvider.load("tree_source.xml");//xml的onload事件myTreeDataPrTulaoshi.comovider.onLoad=function(){ myTree.dataProvider=myTreeDataProvider;}

  以上代码是用来载入数据源,同时将这个XML文件作为数据源提供给TREE COMPONENT。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/flash/)

  7. 继续在下方加入如下代码

//设置tree component的侦听器。myTreeListener=new Object();//节点打开事件myTreeListener.nodeOpen=function(eventObject){ myStatusArea.text+="LI"+eventObject.node.attributes.label+"opened.";}

  以上代码建立侦听器,来侦听节点打开事件。

  8. 继续加入代码如下:

//节点关闭事件myTreeListener.nodeClose=function(eventObject){ myStatusArea.text+="LI"+eventObject.node.attributes.label+"Iclosed./I.";}

  向上面代码一样建立关闭事件。

  9. 继续在帧上加入代码

//改变事件myTreeListener.change=function(eventObject){ //选择的节点 var theSelectedNode=eventObject.target.selectedNode; //选中节点的label var theSelectedNodeLabel=theSelectedNode.attributes.lab

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/flash/)

200806/15073.html'>上一页  200806/15073.html'>[1] [2] 

展开更多 50%)
分享

猜你喜欢

Flash MX 2004 UI组件系列教程(2) (1)

FLASH flash教程
Flash MX 2004 UI组件系列教程(2) (1)

Flash MX 2004 UI组件系列教程(1)

flash教程
Flash MX 2004 UI组件系列教程(1)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Flash MX 2004 UI组件系列教程(2)

flash教程
Flash MX 2004 UI组件系列教程(2)

Flash MX 2004 UI组件系列教程(5)

flash教程
Flash MX 2004 UI组件系列教程(5)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Flash MX 2004 UI组件系列教程(6)

flash教程
Flash MX 2004 UI组件系列教程(6)

Flash MX 2004 UI组件系列教程(3)

flash教程
Flash MX 2004 UI组件系列教程(3)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

MAYA教程:利用贯穿动态拉出一造型物

MAYA教程:利用贯穿动态拉出一造型物

Photoshop调出婚纱相片柔美的晨曦暖黄色效果教程

Photoshop调出婚纱相片柔美的晨曦暖黄色效果教程
下拉加载更多内容 ↓