手机
当前位置:查字典教程网 >网页设计 >Flash教程 >XML动态菜单 (二)flash
XML动态菜单 (二)flash
摘要:在上一期的XML菜单的教程中,我们做了一个简单的纵向排列的XML文字菜单,并且在flash中附加了一个跟随鼠标的缩略图。缩略图的数据也是从X...

在上一期的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

复制代码 代码如下://这次我们添加了些新的变量由于计算方便需要

varmenut:Number=30;

varmenul:Number=300;

varmenub:Number=370;//菜单底部坐标

varmenuw:Number=150;//菜单宽度

varmenuh:Number=menub-menut;//菜单在舞台显示高度(也就是遮罩高度)

varhome:MovieClip=this;

varmlh:Number=20;

vartlh:Number=60;

varspeed:Number=2;

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

mcontainer.onEnterFrame=function()

{

if(_root._xmouse>menul&&_root._xmouse<(menul+menuw))//当鼠标的滑动至菜单的舞台显示区域时激活滑动代码,我们不希望鼠标在舞台上任何地方移动时菜单都在滚动

{

varper:Number=(_root._ymouse-menut)/menuh;//计算鼠标从菜单顶部向下滑动了多少?并处以菜单高度得出鼠标移动的百分比

varmenuth: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菜单教程希望尽快可以出来。 多谢阅读!

【XML动态菜单 (二)flash】相关文章:

flash基础教程-影片剪辑元件、按钮元件、图形元件

FLASH中设置动态文本的半透明效果

flash逐帧动画制作全过程解析

Flash开发移动设备技巧

制作Flash鼠标跟随效果(图)

Flash教程:制作天空中流星划过特效

Flash表单制作实例集锦(2)--存储及查阅信息

Flash制作鼠标划过文字产生光的动画特效

Flex应用程序的性能优化

Flash绘画技巧:绘制女孩面部头像

精品推荐
分类导航