许多网友都用Flash来制作自己的个人主页,想给访问者留下一个深刻的印象,你的Flash一定要有自己的特色,一打开就能吸引住人,其实最简单的方法就是给Flash设计一个有个性的导航菜单,这样既吸引眼球,又介绍了自己的网站栏目,可谓一举两得。
下面我们就来制作这个神奇的弹性导航菜单,此菜单可以随者鼠标的移动而弹性收缩和扩张,效果如图1所示:
图1
1、打开Flash mx,新建一个影片文件,在属性面板中设置影片背景色为灰色,颜色代码为: #999999 ,其余选项均采用默认方式。
2、使用椭圆工具,在按下Shift键的同时在主场景中绘制一个无边框的圆,然后按F8键将其转换为影片剪辑元件,命名为mc1,进入元件的编辑区后,把mc1的中心与场景中的"+"对准,打开混色器面板,点选放射渐变,拖动两个颜色指示器到左右两端,左边的颜色指示器调节为白色,Alpha为100%,右边的颜色指示器调节为 R:153 G: 153 B:153 (与舞台背景色一样) ,Alpha为0%。然后按Ctrl+F3调出属性面板,设置mc1的宽高均为30。按R选取矩形工具画一正方形,填充色为R:239 G:239 B:239,正方形边框颜色为 R:41 G:84 B:79 ,点选属性面板把正方形设置为宽高均为5,最后把这小正方形叠加到mc1上面,注意对准mc1的中心,如图2所示:
图2
3、下面来设置mc1的Alpha渐变过渡效果。在时间轴上点选第15、30帧,按F6各插入一关键帧,点选第15帧的mcl,注意不要连mc1上的小正方形一起选中,按Shift+F9调出混色器面板,把右边的颜色指示器往左移大概1/3,然后在1-15 ,15-30 帧之间作Shape Tweening(形状渐变),这样就完成了圆形从亮变暗再变亮的效果,此时时间轴如图3所示:

图3
4、现在有了mc1,接着再做另两个MC,数量根据你网页的栏目来决定,并均让它们和mc一样有Alpha的渐变效果,分别命名为mc2和mc3。
5、好了,接下来制作三个button按钮,分别命名为 bt1、 bt2 、 bt3 。然后分别把 mc1 、mc2、mc3 影片剪辑从库中拖放到 bt1、 bt2 、 bt3 的UP 帧,并按F5延长1帧到Over帧,如果想得到更好的效果,你可以在Over帧上下点工夫,做一些漂亮的效果,这里就不多说了。
6、继续新建三个MC,分别命名为 ball1、ball2、ball3 ,接着分别把bt1、 bt2 、 bt3 从库中拖放到 ball1、ball2、ball3中去,这样所有的准备工作就完成了,下面开始组织这些元件并添加相应的Action控制代码 。
下面我们开始ActionScript的编写。
ActionScript的编写
7、首先,因为我们要求导航的按钮能够拖动,所以先来设置按钮的AS,在元件ball1中点选元件btl1,给它加上如下代码 :
on(press){ ||鼠标按下
startDrag(""); ||开始拖动
drag=true;
}
on(release, releaseOutside){ ||鼠标释放
stopDrag(); ||停止拖动
drag=flase;
}
以上这段代码大家都很熟悉吧,然后复制这段代码,分别加给 ball2中bt2 和ball3中的bt3 ,因为是用来导航的按钮,所以可以给这三个按钮添加连接功能,比如这里bt3的Action设置为:
on(press){
startDrag("");
drag=true;
}
on(release, releaseOutside){
stopDrag();
drag=false;
}
on (release) {
getURL("mailto:你的邮箱地址");
}
这样就实现了当浏览者点击按钮后,调用系统默认的邮件程序给自己站长发电子邮件了。
8、按Ctrl+E回到主场景,把刚开始作ball1 、ball2、ball3这三个MC从库中拖到主场景,分别命名其Instance Name(实例名称)为:h1、h2 、h3 ,把h1、h2 、h3 在主场景中排好位置,如图4所示:

图4
9、最后使用Flash MX的画线指令把它们用线一一连接起来,在主场景中新建一层,命名为AS ,在第一帧加如下代码:
_root.onEnterFrame = function() {
clear(); ||清除以前的填充设置
_root.lineStyle(1.5, 0xcecece); ||定义画线的样式
_root.moveTo(_root.h1._x, _root.h1._y); ||把线的始端定在h1坐标处
_root.lineTo(_root.h2._x, _root.h2._y); ||从h1画一条线到h2
_root.lineTo(_root.h3._x, _root.h3._y); ||从h2画一条线到h3
_root.lineTo(_root.h1._x, _root.h1._y); ||从h3画一条线到h1
_root.endFill(); || 结束 Fill
}
接着来设置h1、h2 、h3 的鼠标吸引及缓冲效果,点选主场景中的h1,给其加上如下代码:
onClipEvent (load) { ||初始化变量
x = this._x;
y = this._y;
}
onClipEvent (enterFrame) { ||实现鼠标的吸引效果以及MC(h1)的缓冲效果
dis_x = _root._xmouse - x;
dis_y = _root._ymouse - y;
if(!drag){
if ((dis_x * dis_x) + (dis_y * dis_y) < 1500) { ||判断鼠标和MC的距离
newvar_x = _root._xmouse; ||把_root._xmouse 、_root._ymouse赋给
newvar_y = _root._ymouse; ||两个新变量newvar_x 、newvar_y ,此时还没有
} else { ||与MC相联系。
target_x = x;
target_y = y;
}
||设置缓冲效果,可以更改一下具体的参数,体会体会缓冲的效果
xspeed = ((target_x - this._x)*.8)+(xspeed*.65);
this._x += xspeed;
yspeed = ((target_y - this._y)*.8)+(yspeed*.65);
this._y += yspeed;
}
}
然后复制上面的代码,分别给 h2 、h3设置。以上鼠标吸引及缓冲效果的代码还隐藏这样的一个效果,即MC只要偏离原来的坐标就会自动回位。这样,只要隔一段时间就改变MC的位置,则可以实现MC 的" 痉挛抽动 "的效果。
10、接下来将用简单的脚本来实现h1、h2 、h3的" 痉挛抽动"效果,点选主场景第一帧,添加如下代码:
_root.onEnterFrame = function() {
clear();
_root.lineStyle(1.5, 0xcecece);
_root.moveTo(_root.h1._x, _root.h1._y);
_root.lineTo(_root.h2._x, _root.h2._y);
_root.lineTo(_root.h3._x, _root.h3._y);
_root.lineTo(_root.h1._x, _root.h1._y);
_root.endFill();
}
后面加上如下脚本:
setInterval(myball1, 6000);
function myball1() {
if (_root.h1.hitTest(_root._xmouse, _root._ymouse, false)) {
_root.h1._x = _root._xmouse;
_root.h1._y = _root._ymouse;
} else {
_root.h1._x += 70-random(150); ||设置MC的随机坐标
_root.h1._y += 50-random(150);
}
}
setInterval(myball2, 5000);
function myball2() {
if (_root.h2.hitTest(_root._xmouse, _root._ymouse, false)) {
_root.h2._x = _root._xmouse;
_root.h2._y = _root._ymouse;
} else {
_root.h2._x += 70-random(140);
_root.h2._y += 60-random(150);
}
}
setInterval(myball3, 4000);
function myball3() {
if (_root.h3.hitTest(_root._xmouse, _root._ymouse, false)) {
_root.h3._x = _root._xmouse;
_root.h3._y= _root._ymouse;
} else {
_root.h3._x += 70-random(80);
_root.h3._y += 50-random(90);
}
}
其中if (……)这个判断是为了消除鼠标drag的时候由于自定义函数的反复调用,MC坐标发生变化后出现的一个问题。至此,就实现了利用setInterval隔一段时间就反复调用自定义函数使MC的坐标随机发生变化,偏离原来的坐标, 从而实现MC的" 痉挛抽动 "效果。
赶快把这个神奇的导航菜单加到你的网站吧,一定可以使你的主页在浩瀚的网络中脱颖而出!fla源文件下载