My FAQ,最新最全的IT技术教程
最新100篇 | 推荐100篇 | 专题100篇 | 排行榜 | 搜索 | 在线API文档
首 页 | 程序开发 | 操作系统 | 软件应用 | 图形图象 | 网络应用 | 精文荟萃 | 教育认证 | 硬件维护 | 未整理篇 | 站长教程
ASP JS PHP工程 ASP.NET 网站建设 UML J2EESUN .NET VC VB VFP 网络维护 数据库 DB2 SQL2000 Oracle Mysql
服务器 Win2000 Office C DreamWeaver FireWorks Flash PhotoShop 上网宝典 CorelDraw 协议大全 网络安全 微软认证
硬件维护  CPU  主板  硬盘  内存  显卡  显示器  键盘鼠标  声卡音箱  打印机  机箱电源  BIOS  网卡  C#  Java  Delphi  vs.net2005
  当前位置:> 图形图象 > 网页设计 > Flash
Flash MX 2004 UI组件系列教程(2)
作者:未知 时间:2005-04-04 12:12 出处:ChinaZ.com 责编:MyFAQ
              摘要:Flash MX 2004 UI组件系列教程(2)
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>

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

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

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

  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+"<I>closed.</I>.";
}

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

  9. 继续在帧上加入代码

//改变事件
myTreeListener.change=function(eventObject){
 //选择的节点
 var theSelectedNode=eventObject.target.selectedNode;
 //选中节点的label
 var theSelectedNodeLabel=theSelectedNode.attributes.label;
 //将其显示在textArea组件中
 myStatusArea.text+="<LI>"+theSelectedNodeLabel+"<B>Selected</B>.";
}

  10. 继续加入如下代码。

myTree.addEventListener("nodeOpen",myTreeListener);
myTree.addEventListener("nodeClose",myTreeListener);
myTree.addEventListener("change",myTreeListener);

  在这里要注意的是在注册侦听器时你不能一次注册所有的事件。

  11. 测试你的影片吧。

关闭本页
 
首页 | 投资与合作 | 服务条款 | 隐私政策 | 收藏本站 | 设为首页 | 新用户注册 | 免责声明 | 使用帮助
Copyright ©2005-2008 myfaq.com.cn All rights reserved. www.myfaq.com.cn 版权所有