导航按钮的制作

作者佚名技术来源服务器技术浏览发布时间 2012-07-10

这是一种导航按钮的效果，如下：

点击浏览该文件

[全屏欣赏]
以前看过一种与此类似的全代码实现的，代码很复杂，以下教程并非全代码实现的效果，用到了MC，按钮元件，老鸟可以直接下载源文件，看一眼代码就会明白，如果你是初学者或者对脚本语言不是很熟悉，那么不要急，这个教程就是面向初学者的，只要你一步步按照我说的做，包你成功，不成功你揍我！

废话不多说，下面开始：
步骤一：制作各种相关元件：

1.)用矩形工具，文本工具，以及线条工具制作导航栏底色，文字，分割符，制作好的效果如图（一）所示；
按此在新窗口浏览图片

2.)制作一个矩形的按钮元件，复制7个（共8个）分别放在没每个文字的上面，调整其透明度为0 调节透明度前的情形如图（二）；

按此在新窗口浏览图片

3.)制作一个矩形的MC，大小与按钮（占四个字的按钮）一致，如图（三），进入MC的编辑状态，把他做成一个在原地沿X方向缩小的形状渐变，如图（四）所示；

按此在新窗口浏览图片

4.)调整图层间的位置关系，具体参看我的源文件（最后会给出）；

步骤二：添加脚本语言，以实现最终动画效果：

在“首页”按钮上添加代码（如图（五））：

按此在新窗口浏览图片

on(rollOver){ //鼠标滑过按钮时执行代码；
_root.xx=90.0; //给主场景中的xx变量赋值；
_root.mc._xscale=80; //因为首页按钮相对较小，所以把MC沿X方向缩小一些；其他按钮上是：_root.mc._xscale=100；
_root.mc.gotoAndStop(2); //让MC停止在第2帧；
//着色
_root.mc.c=new Color(_root.mc) //为mc对象建立一个颜色调整器；
_root.mc.c.setRGB(random(0xFFFFFF)); //调整mc的颜色，随即取一种颜色；

}

on(rollOut){ //鼠标滑出按钮时执行代码；
//_root.xx=-62.0; //这个代码加与不加是两种效果，试一试便知道了；
_root.mc.gotoAndPlay(2); //mc开始播放，只到mc消失；
}

在mc上添加代码（如图（六））：

按此在新窗口浏览图片

onClipEvent(enterFrame){
dx1 = _root.xx-this._x;//把mc当前的位置和目标位置间的距离赋值给变量dx1；
dx2 = dx1/2; //dx2为弹性系数；mc越接近目标位置，速度越慢；
this._x += dx2; //坐标值自加，使mc移动，直到到达目标位置；
}

注意：一，每个按钮上的代码几本相同，唯一的区别，也是最重要的是给_root.xx这个变量所赋的数值不一样，拿最后一个按钮“信息服务”为例：这个按钮自身的X坐标是：588，而MC的宽度为60左右，那么在这个按钮上应该给_root.xx这个变量赋值588+30+10=628；其中的30表示MC宽度的一半，10表示从文字到左分割符的距离；其他的依次类推......

二.主要思想是鼠标移过按钮，_root.xx的数值改变，从而激发MC位置的改变；

步骤三：附上主要函数的用法介绍（整理自AS字典）：
myColor.setRGB(color_value)
参数： myColor：已经存在的 Color 对象。（本实例中是 _root.mc.c）
Color_value:16 进制的

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: Flash MX 编程深层次应用-网络连线游戏(6)下一篇: Flash手绘一副帅气眼镜(3)

关于导航按钮的制作的所有评论

随机推荐