XML动态菜单

大家都爱好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    {
        //建立子影片剪辑载进缩略图
        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; //当鼠标滑出菜单时把遮罩和缩略图移出舞台，我们选择移到舞台下方，当然您也可以把它们移到上方看不到的处所，或者自己编写透明度的缓动函数让它们的透明度缓动淡出