网站建设  下载中心 社区论坛 信息公告 MY小屋
联系我们
设为首页
加入收藏

 

当前位置:首页>>网络媒体>>Flash>>正文
注:打开慢时请稍等

XML动态菜单

  日期:2007-3-29 13:08:09  来源:蓝色理想  点击:
参加讨论

大家都喜欢XML,因为它省事,我平时做东西也尽可能的用XML,因为实在是日后更新修改太方便了,都不用动fla源文件。

本XML系列教程将分三部分发布,到最后一期我们将拥有一个功能全面,更加友好的XML菜单。本教程这个第一期涉及到了一些XML的基础知识。

这里我们要做的效果是一个纵向排列的动态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菜单的功能。

源码下载kf1_xmlMenu.zip

本新闻共2页,当前在第1页  1  2  


编辑:iyit.net [发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇:巧用Bitmap类制作按钮
下一篇:Flash破解与加密
转载请注明来源:www.iyit.net
特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。

 相关文章
FLASH与ASP通信原理入门 8 其它通讯方式 FLASH与ASP通信原理入门 7 LV与ASP综合 FLASH与ASP通信原理入门 6 LV与ASP综合
FLASH与ASP通信原理入门 5 ASP操作数据 FLASH与ASP通信原理入门 4 LV与ASP通讯 FLASH与ASP通信原理入门 3 ASP中基本的
FLASH与ASP通信原理入门 2 LV类基础讲解 FLASH与ASP通信原理入门1 LoadVars类基 Flash破解与加密 
巧用Bitmap类制作按钮 flash 360度3D虚拟实境(cubicVR)实现 Authorware中自动擦除Flash动画
养成Flash ActionScript代码编写好习惯 Flash文件的破解与加密方法探秘  学习Flash ActionScript编程的注意事项
Flash导航菜单轻松制作好帮手 Flash绘制精致矢量图:斑驳的秋天落叶 新版FlashGet新功能之BT下载抢先试用
FLASH游戏制作基础:响应键盘的四种方法 flash带进度条的Loading制作 Flash 8怎样防止抄袭的办法!!
Dreamweaver中实现flash的透明背景 Flash中利用javascript完全屏蔽右键!
最新更新 热点排行 推荐新闻
FLASH与ASP通信原理入门 8 其它通讯方
FLASH与ASP通信原理入门 7 LV与ASP综
FLASH与ASP通信原理入门 6 LV与ASP综合
FLASH与ASP通信原理入门 5 ASP操作数据
FLASH与ASP通信原理入门 4 LV与ASP通讯
FLASH与ASP通信原理入门 8 其它通讯方
FLASH与ASP通信原理入门 7 LV与ASP综
FLASH与ASP通信原理入门 6 LV与ASP综合
FLASH与ASP通信原理入门 5 ASP操作数据
FLASH与ASP通信原理入门 4 LV与ASP通讯
FLASH与ASP通信原理入门 3 ASP中基本的
FLASH与ASP通信原理入门 2 LV类基础讲
FLASH与ASP通信原理入门1 LoadVars类基
Flash破解与加密 
XML动态菜单 
Flash文件的破解与加密方法探秘 
养成Flash ActionScript代码编写好习惯
Flash纯脚本生成饼图 
flash 360度3D虚拟实境(cubicVR)实现
FLASH与ASP通信原理入门 8 其它通讯方
最新网络游戏:六款网游大作本周开启测
精典悬浮div代码,拖动 隐藏显示效果
77条Windows Vista特性总结
在ASP与ASP.NET之间共享对话状态(2)
QQ2007 Beta1(兼容 Windows Vista) 
熊猫烧香幕后黑手是流氓软件?
网络工程师教程 网络教程 网络工程师
游戏商称90%的游戏与Vista不兼容,Vis
著名的韩国素材网站 韩国素材大全
微软Vista日本遇麻烦 网银电邮无法使用
FLASH与ASP通信原理入门1 LoadVars类基
Flash破解与加密 
XML动态菜单 
巧用Bitmap类制作按钮
flash 360度3D虚拟实境(cubicVR)实现
FLASH与ASP通信原理入门1 LoadVars类基
Flash破解与加密 
XML动态菜单 
巧用Bitmap类制作按钮
flash 360度3D虚拟实境(cubicVR)实现
Flash纯脚本生成饼图 
如何用CSS定义表格与模拟表格 
div+css布局漫谈
电脑开机常见硬件故障大解析
解决了带javascript语句的链接全都打不

设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接
Copyrights © 2004-2007 iYiT.Net All Rights Reserved.
网站合作、广告联系QQ:147007642、466949678
易特网络技术 点击这里给我发消息