打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
[转载]flash+XML动态菜单
http://madforit.blog.sohu.com/43493169.html
---------------------------------------------------
大家都喜欢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()
{
    varnodes = this.firstChild.childNodes; //提取XML数据
    numMenu= nodes.length;//使用XML的关键,这个变量自动储存XML数据的节数,这样日后我们就可以只更新(添加/减少)XML文件Flash就会自动更新
    for(vari=0; i<numMenu; i++)
    {
        //建立子影片剪辑载入缩略图
        varholder: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);
        
        //建立菜单
        varmenu = 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()
        {
            varwho: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()
        {
            varwho:Number = this.i; //提取当前 i
            varoffy = Stage.height + 50;
            maskdy= offy;//当鼠标滑出菜单时把遮罩和缩略图移出舞台,我们选择移到舞台下方,当然您也可以把它们移到上方看不到的地方,或者自己编写透明度的缓动函数让它们的透明度缓动淡出
            containdy= offy - (tlh * who); //同样缩略图的缓动位置也相对其当前位置相应的移出舞台
            speed= 10; //设置缓动速度,使移出时速度变慢
            menutf= new TextFormat();
            menutf.underline= false;
            this.btxt.setTextFormat(menutf);
        }
        menu.onRelease= function()
        {
            varwho:Number = this.i; //提取当前 i
            varlink: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菜单的功能。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
ecshop图片缩略图质量不清楚
PHP的GD函数库图形类函数(创建缩略图、给图片加水印、给图片加文字、画布划线)
【 Javascript 构建全景系列(一)】——创建自定义一级菜单
thumb.jpg (700×525)
修改缩略图的质量
flash制作旋转图像像册教程
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服