打印

[应用] [教程] XML动态菜单 (二)

http://madforit.blog.sohu.com/43493584.html
-----------------------------------------------------
在上一期的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条记录。如果你在做一个相册,里面有上百张照片,这个可以是个不错的选择,滚动的简单文字标题和缩略图,使用起来应该很友好的。

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

[ 本帖最后由 markmaoji 于 2007-4-25 16:34 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
本帖最近评分记录
好贴,学习中,XML使用.
不错,再加上3D效果就完美了
呵呵,下一期的XML教程我会考虑。

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
学习中,感谢。

TOP

引用:
原帖由 markmaoji 于 2006-12-27 09:45 发表
呵呵,下一期的XML教程我会考虑。
期待~

TOP

样式很漂亮。偷了。哈哈
if(_root._ymouse < menut)mcontainer._y = menut;

。。原来不用加大括号也能正常运行,学习。。。

TOP

多谢各位大侠,下一次我们弄个复杂点的XML怎样。其实下一期教程我觉得叫XML菜单已经不太合适了,更像XML支持的flash网站。

TOP

引用:
原帖由 markmaoji 于 2006-12-27 19:25 发表
多谢各位大侠,下一次我们弄个复杂点的XML怎样。其实下一期教程我觉得叫XML菜单已经不太合适了,更像XML支持的flash网站。
非常赞同!~并期待!~例如支持动态links之类
好想睡觉~

TOP

太强了。。。建议你做版主呀。

还有,能帮我解决下这个问题吗?
http://www.webstudio.com.cn/forum/showthread.php?p=6083#post6083

麻烦楼主看看,也是XML的,想在flash中的gotoandplay来调用外部xml中的一节点属性名。
能帮我吗。

TOP

应该是一样的道理,不过有空我帮你试试。不知道是否onLoadInit会跳出for循环。

[ 本帖最后由 markmaoji 于 2007-1-4 11:18 编辑 ]

TOP

为什么最后有几条信息没显示出来`?
总是有几条没显示出来 你把那个遮罩去掉看看。。。。

TOP

底部的地位是有个小BUG ,最后几条还真是显示不出来,  我把底部-160 去遮罩可以显示了,不过我看还是要出个表达式  不过我看缓冲的效果和MASK好象会档住最后几项.
你敢说我不英俊吗?FLASH CS3群:51180994

TOP

真的很不错。

真的很不错。

TOP

真的非常的漂亮了。。

TOP

var menuth:Number = mlh * numMenu; 改为:
var menuth:Number = this.height;
就没问题了

TOP

引用:
原帖由 emobaby 于 2007-2-2 10:49 发表
var menuth:Number = mlh * numMenu; 改为:
var menuth:Number = this.height;
就没问题了
多谢emobaby了,我抽空看看。抱歉,杂事缠身。

TOP

手快 打错字了  是:
var menuth:Number = this._height;才对

TOP

好极了,学习中,谢谢楼主!

TOP

楼主创意不错哦!
个人主页http://www.jskx.net

TOP

第一个还没完全明白,再来看看第二个吧..呵呵.

TOP

不错,学习了!!!!!!!!!!

TOP

感谢楼主,写的的确不错,支持一下.另外还有一个问题,请指点一下喽

能不能通过code直接修改或者添加外面所调用的xml文件啊,这样保存的时候,就能保持动态更新了.谢谢

TOP

回复 #23 myfire1 的帖子

太好了呀   本人一直在找这方面的例子呀    谢谢了楼主顶一下

TOP

这贴不顶不行啊

TOP

如果把XML文件的最后一个NAV值改成“最后一行”。。。大家注意看一下。。鼠标向下滑。。拉是不会出现最后一行的。。。。公式哪里出错了。。。。大侠再认真检查下行不???

TOP

继续发问!!
想把点击连接到网址 换成 LOAD SWF进来在左侧
可我 在里面加了个MC 固定位置 ,XML菜单也改了,就是LOAD不了

就是说把目前的LINK 变成 LOAD SWF,在XML改菜单的同时,也可以改相对的SWF!
高手赐教!!!!!!!!!!!!!

[ 本帖最后由 duanmu1984 于 2007-8-29 13:45 编辑 ]

TOP

好好学习

TOP

编码是不是有问题 简体中文不支持吧,改了几种编码都不行

TOP

下载来看看,谢谢楼主!!
因为专业,所以选择..技术群:11162579

TOP