在上一期的XML菜单的教程中，我们做了一个简单的纵向排列的XML文字菜单，并且在flash中附加了一个跟随鼠标的缩略图。缩略图的数据也是从XML中提取的。

在我们XML菜单教程的第二期，我们来解决另外一个问题。

我们都知道XML的方便，随意的更改，删除和添加数据。请注意，更改和删除还好，如果添加的话，这里就会有一个界面排版和用户使用的问题的。拿我们上一次的XML菜单来演示，我把我们的XML文件有添加了几十条内容，结果我们的XML菜单变成这样了：
http://www.keyframe1.com/tute/xmlMenu2/index2.htm

下面的菜单看不到了，可能很多人马上已经想到了解决这种问题的办法。对！我们要让我们的用户可以滚动浏览我们的XML菜单，就像这样：
http://www.keyframe1.com/tute/xmlMenu2/

现在你可以看到所以XML文件里的几十条记录全部在舞台上，并可以让用户来滚动浏览。无论你如何修改XML文件，永远是鼠标放在菜单顶端会停留在菜单的第一条，当鼠标滑动至菜单的底端时会停留在菜单的最后一条，无论XML文件的纪录条数，如果很短，滚动会自然不存在，如果超出规定菜单高度，就会像刚才所说的那样的规律来滚动，即便XML中有1000条记录也如此。

由于是建立在上一期教程的基础上的，一些在上一期中重复使用了的代码就不再讲解了。上一期XML菜单教程地址： XML动态菜单 （一）

第一步， 分析项目：
  > 组成部分
      - XML文件；
      - FLASH源文件；
      - 缩略图JPG文件，50px X 50px 存放在 thumb文件夹；
  > 步骤
      - 要使XML菜单可以滚动，最简单的办法就是把所有装有XML菜单的影片剪辑都放在一个母影片剪辑中；
      - 计算出正确的等式；

第二步，开始建立我们需要的一些元素，并把它们摆到大概理想的位置：
  > 一个放所有装有XML菜单的影片剪辑的母影片剪辑，我们叫做mcontainer 150px宽，高340px；
  > 两个上下箭头，只是为了美观；
  > 把mcontainer 影片剪辑在工作去摆到(310, 30)；

第三步，actionscripting

//这次我们添加了些新的变量由于计算方便需要

var menut:Number = 30;
var menul:Number = 300;
var menub:Number = 370; //菜单底部坐标
var menuw:Number = 150; //菜单宽度
var menuh:Number = menub - menut; //菜单在舞台显示高度 （也就是遮罩高度）
var home:MovieClip = this;
var mlh:Number = 20;
var tlh:Number = 60;
var speed:Number = 2;

//关于XML的读取我们就不再解释了，请参考上一期教程。我们直接进入本期教程的核心代码：鼠标滚动计算等式：

mcontainer.onEnterFrame = function()
{
    if(_root._xmouse > menul && _root._xmouse < (menul + menuw)) //当鼠标的滑动至菜单的舞台显示区域时激活滑动代码，我们不希望鼠标在舞台上任何地方移动时菜单都在滚动
    {
        var per:Number = (_root._ymouse - menut) / menuh; //计算鼠标从菜单顶部向下滑动了多少？并处以菜单高度得出鼠标移动的百分比
        var menuth:Number = mlh * numMenu; //利用菜单文字行距和XML记录总条数算出菜单实际高度
        //滚动菜单原理是：鼠标从菜单顶部向下滑动了百分之多少，菜单就相应的向上移动自己实际高度的百分之多少，然后再加上鼠标向下移动的实际像素数。呵呵，慢慢琢磨下应该不难理解，实在是没有更简单的解释方法，本身就是那么个单纯的事情
        mcontaindy = menut - menuth * per + menuh * per;
        mcontainoldy = this._y;
        this._y += (mcontaindy - mcontainoldy) / speed;
        if(_root._ymouse < menut)mcontainer._y = menut; //如果鼠标小于菜单顶部坐标，把菜单坐标写死到顶部坐标；
        if(_root._ymouse > menub)mcontainer._y = menut - menuth + menuh; //同样如果鼠标大于菜单底部坐标，把菜单坐标写死到底部坐标；
    }
}

这个就是本期最主要的代码了，其他的相信看过上一期教程的看看源文件的注解应该可以搞明白的。

现在我们可以真正随意修改，删除，添加我们的XML文件了，我们的XML菜单都可以满足用户的正常浏览使用。试试添加它500条记录。如果你在做一个相册，里面有上百张照片，这个可以是个不错的选择，滚动的简单文字标题和缩略图，使用起来应该很友好的。

源码下载：kf1_xmlMenu2.zip

下一期XML菜单教程希望尽快可以出来。 多谢阅读！

经典论坛讨论：
http://bbs.blueidea.com/thread-2707711-1-1.html

请继续关注 陆续更新

本文链接：http://www.blueidea.com/tech/multimedia/2007/4461.asp　

出处：蓝色理想
责任编辑：blue

上一页 XML动态菜单 [1] 下一页

◎进入论坛Flash专栏版块参加讨论