在flash中使用XML动态菜单
作者:markmaoji 来源:蓝色理想 发布时间:2007-09-06 19:16:00
本XML系列教程将分三部分发布,到最后一期我们将拥有一个功能全面,更加友好的XML菜单。本教程这个第一期涉及到了一些XML的基础知识。
大家都喜欢XML,因为它省事,我平时做东西也尽可能的用XML,因为实在是日后更新修改太方便了,都不用动fla源文件。
这里我们要做的效果是一个纵向排列的动态XML的菜单,并且当鼠标滑动到菜单上显示相应的缩略图,这个我们在很多摄影作品展示flash网站经常见到的。在线展示:http://www.keyframe1.com/tute/xmlMenu/
第一步, 分析项目:
组成部分:
- XML文件;
- FLASH源文件;
- 缩略图JPG文件,50px X 50px 存放在 thumb文件夹;
步骤:
- 先写XML文件 (这个很简单,我们将不再讲怎么写XML文件);
- 在FLASH中建立所需元素;
- actionscripting
第二步,开始建立我们需要的一些元素,并把它们摆到大概理想的位置:
一个放所有缩略图的母影片剪辑,我们叫做container 50px宽,高尽量大些;
一个遮罩影片剪辑,叫做mask 50px X 50 px;
一个外框影片剪辑,只是为了美观,叫做br,尺寸比mask大一圈就可以了;
把这三个影片剪辑在工作去摆到大概理想的位置,确定它们的X坐标,Y坐标无所谓因为下面我们要用AS来控制它们的Y坐标的;
(好了,主时间工作区的事情就是这些,现在我们建立一个代码的图层,把剩下所有的工作交给actionscript)
第三步,actionscripting
//先声明一些变量
var menut:Number = 30; //菜单顶部Y坐标
var menul:Number = 300; //菜单左侧X坐标
var home:MovieClip = this;
var mlh:Number = 20; //菜单文字行距
var tlh:Number = 60; //缩略图行距
var speed:Number = 3; //缓动速度
//建立XML对象,提取XML数据,建立菜单的鼠标滑动触发的缩略图,遮罩影片剪辑的代码... 内容较多,尽量解释
var myx:XML = new XML();
myx.ignoreWhite = true;
myx.onLoad = function()
{
var nodes = this.firstChild.childNodes; //提取XML数据
numMenu = nodes.length; //使用XML的关键,这个变量自动储存XML数据的节数,这样日后我们就可以只更新(添加/减少)XML文件 Flash就会自动更新
for(var i=0; i<numMenu; i++)
{
//建立子影片剪辑载入缩略图
var holder:MovieClip = container.createEmptyMovieClip("holder" + i, i); //在母影片剪辑里建立相等数量的字影片剪辑以载入缩略图
container["holder" + i]._x = 0; //定位
container["holder" + i]._y = tlh * i;
container["holder" + i].loadMovie(nodes[i].attributes.thumb); //载入缩略图
//建立遮罩
container.setMask(mask);
//建立菜单
var menu = home.createEmptyMovieClip("menu" + i, i+40); //建立相等数量的空影片剪辑以存放菜单文字
menu._x = menul;
menu._y = menut + (mlh * i);
menu.moveTo(menul, menut);
menu.createTextField("btxt", 0, 0, 0, 150, 20); //建立动态文本存放文字
menu.btxt.html = true;
menu.btxt.wordWrap = true;
menu.btxt.text = (nodes[i].attributes.nav); //载入文字
//菜单文字样式
btntf = new TextFormat();
btntf.color = 0x666666;
btntf.font = "verdana";
btntf.leading = 10;
btntf.size = 10;
menu.btxt.setTextFormat(btntf);
//储存i的值,这一步非常重要
menu.i = i;
//菜单鼠标滑入,滑出,点击时的代码
menu.onRollOver = function()
{
var who:Number = this.i; //提取当前 i
maskdy = menut + (mlh * who) - 15; //遮罩位置根据当前 i,即当前菜单按钮来计算
containdy = maskdy - (tlh * who); //遮罩中缩略图的位置根据在遮罩位置的基础上再根据当前 i 计算出来
speed = 3; //当鼠标滑入菜单是把速度提高 (speed值越小,速度越高,因为缓动函数中y的位移根speed是相除关系,这里我们的设置将使鼠标滑入菜单按钮时提高遮罩和缩略图的缓动速度,当然随便您啦,您当然也可以相反让他们变得更慢,完全是个人喜好
menutf = new TextFormat();
menutf.underline = true; //鼠标滑入时菜单上文字加下划线
this.btxt.setTextFormat(menutf);
}
menu.onRollOut = function()
{
var who:Number = this.i; //提取当前 i
var offy = Stage.height + 50;
maskdy = offy; //当鼠标滑出菜单时把遮罩和缩略图移出舞台,我们选择移到舞台下方,当然您也可以把它们移到上方看不到的地方,或者自己编写透明度的缓动函数让它们的透明度缓动淡出
containdy = offy - (tlh * who); //同样缩略图的缓动位置也相对其当前位置相应的移出舞台
speed = 10; //设置缓动速度,使移出时速度变慢
menutf = new TextFormat();
menutf.underline = false;
this.btxt.setTextFormat(menutf);
}
menu.onRelease = function()
{
var who:Number = this.i; //提取当前 i
var link:String = nodes[who].attributes.url; //把XML中url储存到变量link中
getURL(link, "_blank");
}
}
}
myx.load("xmlMenu.xml")
//到这里基本上完成了,下面只需要把用到一些缓动函数加上就可以了;
//遮罩影片剪辑的缓动函数
mask.onEnterFrame = function()
{
maskoldy = this._y;
this._y += (maskdy - maskoldy) / 7;
}
//缩略图母影片剪辑的缓动函数
container.onEnterFrame = function()
{
containoldy = this._y;
this._y += (containdy - containoldy) / 7;
}
//缩略图外框的缓动函数
br.onEnterFrame = function()
{
brdy = maskdy;
broldy = this._y;
this._y += (brdy - broldy) / 7;
}
//初始化遮罩缩略图位置
maskdy = menut + (mlh * 0) - 15;
containdy = maskdy - (tlh * 0);
下面这个是这里我们用到的XML文件
<?xml version="1.0" encoding="ISO-8859-1"?>
<xmeMenu>
<menu nav="Volkswagen Phaeton" url="http://www.keyframe1.com/kf1/work/phaeton/" thumb="thumb/1.jpg" />
<menu nav="Volkswagen Touareg" url="http://www.keyframe1.com/kf1/work/touareg/" thumb="thumb/2.jpg" />
<menu nav="KeyFrame1 Digital" url="http://www.keyframe1.com" thumb="thumb/3.jpg" />
<menu nav="I-Jar Layout" url="http://www.keyframe1.com" thumb="thumb/4.jpg" />
<menu nav="CGRN e-Learning" url="http://www.cgrn.cn" thumb="thumb/5.jpg" />
<menu nav="Wild Product" url="http://www.keyframe1.com" thumb="thumb/6.jpg" />
<menu nav="Chinese Made Easy" url="http://www.chinesemadeeasy.net" thumb="thumb/7.jpg" />
<menu nav="Jin Shun Jin Da" url="http://www.keyframe1.com/kf1/work/jinshun/" thumb="thumb/8.jpg" />
<menu nav="KeyFrame1 Flash beta" url="http://beta.keyframe1.com" thumb="thumb/9.jpg" />
<menu nav="Volkswagen New Beetle" url="http://www.keyframe1.com/kf1/work/nb/" thumb="thumb/10.jpg" />
<menu nav="Volkswagen Revamp" url="http://www.volkswagen.com.cn" thumb="thumb/11.jpg" />
<menu nav="VW New Beetle Cabriolet" url="http://www.keyframe1.com/kf1/work/nbc/" thumb="thumb/12.jpg" />
<menu nav="KeyFrame1 Flash beta" url="http://beta.keyframe1.com" thumb="thumb/9.jpg" />
<menu nav="Volkswagen New Beetle" url="http://www.keyframe1.com/kf1/work/nb/" thumb="thumb/10.jpg" />
<menu nav="Volkswagen Revamp" url="http://www.volkswagen.com.cn" thumb="thumb/11.jpg" />
<menu nav="VW New Beetle Cabriolet" url="http://www.keyframe1.com/kf1/work/nbc/" thumb="thumb/12.jpg" />
</xmeMenu>
现在可以试着修改,删除或者添加我们的XML,你会发现我们的swf文件自动更新数据了。在未来的XML菜单系列教程中,我们会在这个教程的基础上继续丰富这个XML菜单的功能。
猜你喜欢
- 快捷键可以帮助我们有效提高效率,我们来看看网页设计软件FrontPage有哪些快捷键。相关文章:Dreamweaver快捷键大全、photo
- 为了能够使用ERWin能够进行基于MySQL数据库的物理设计,可以采用以下方法步骤(假设你已经有了一个设计好的LOGICAL MODEL):
- 一、备份数据库1、打开SQL企业管理器,在控制台根目录中依次点开Microsoft SQL Server2、SQL Server组-->
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到,但它的输
- 最近很少写CSS了,以后也可能写的会很少了,所以还是想把自已的一些经验能和大家分享一下,希望能给大家一些帮助!这篇文章主要写的提高网页在客户
- 版权所有:Copyright 1997 Netscape Communications Corporation原文链接:Object Hie
- 问:把数据从MySQL迁移到Oracle需要注意些什么?答:以下是MySQL迁到Oracle需要掌握的注意事项,希望对你有所帮助。1.自动增
- 4. 选择最有效率的表名顺序(只在基于规则的优化器中有效)ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,因此FROM子句中
- 如何使用数据绑定控件实现不换页提交数据?Chunfeng.html' 提交页面< html><
- 下面提供生成XML的Google SiteMap代码[ASP版本]。这个代码是生成全站文件链接的地图:<%Server.S
- 如何做一个自己的QQ?这不是什么新鲜的东西,看看代码:refresh.htm<HTML><HEAD><titl
- 忽然想起一个CSS的特性,写一段代码玩玩:<style type="text/css">body {font
- 阅读是在网站中的一个很重要的部分,可以说是网站的核心。网站最终要呈现给用户的就是内容。尤其是文本内容。豆瓣豆瓣前段时间小改了一下,页面拉宽,
- 背景:在做项目时,经常会遇到这样的表结构在主表的中有一列保存的是用逗号隔开ID。如,当一个员工从属多个部门时、当一个项目从属多个城市时、当一
- 来自某个nb招聘的题目:请给Array本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重
- 首先说说框架(Frameworks)这个词,框架就是为我们提供了一个平台一个运行环境,在如此统一的前提下我们做相关开发才能“有章可循”,要充
- 看到这篇文章的人,如果我没有估计错的话,八成是从事互联网的人,其中又有八成是做设计的。如果真是这样,可以一起庆幸一下。首先,庆幸从事着一个没
- location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.hre
- 对设计“以人为本”和“绿色设计”两个观点的反思——兼与设计界同仁商榷Reflection of Two Views: “People-ori
- 使用MySQL,目前你可以在三种基本数据库表格式间选择。当你创建一张表时,你可以告诉MySQL它应该对于表使用哪个表类型。MySQL将总是创