该菜单效果如下
点击浏览该文件
制作过程
1、打开flash MX 2004,新建一600px*50px的文档,背景色为浅蓝。
2、把第一层命名为背景,画一浅黑色的长方形作为菜单开始显示的背景。如下图所示
3、新建一电影剪辑,在该电影剪辑中包含二层,如图2所示
在btn层的第一帧,是一个浅黑色的方形,作为按钮,在text层的第一帧,是一动态文本,var为text,输入文字home。btn层的其它帧,是各种颜色的方形,即鼠标经过时相应区域变成的颜色。text层的其它帧,是一些文字,如闪客帝国、闪客影院等,具体请参见源文件。
4、在主场景中新建一层,名称为主菜单。把第3步制作的电影剪辑从库中拖出,放在场景的左上角,其实例名为zjs。
5、制作子菜单,这可是一个累活,把每项主菜单下的子菜单制作成一个电影剪辑,实例名分别为z0到z8。如图3是其中的一个电影剪辑
6、编写程序
在主场景中新建一层,命名为程序,输入下列AS
var b = ["home", "news", "theater", "mobiler", "games", "mall", "school", "about"];
//开始时主菜单显示的文字
for (var i = 1; i<9; i++) {
zjs.duplicateMovieClip("zjs"+i, i);
//复制电影剪辑
var mc = this["zjs"+i];
mc.n = i;
//每个电影剪辑下建一个变量n
mc.text = b[i-1];
//显示文字
mc._x = zjs._x+(i-1)*(zjs._width+2);
//电影剪辑的水平排列
}
//下面为子菜单的运动函数
MovieClip.prototype.slide = function(ty) {
var mc = this;
mc.onEnterFrame = function() {
mc._y += (ty-mc._y)*0.4;
if (Math.round(mc._y-ty) == 0) {
delete (mc.onEnterFrame);
}
};
};
选中主场景左上角的电影剪辑,找开属性面板输入下AS//开始时主菜单显示的文字
for (var i = 1; i<9; i++) {
zjs.duplicateMovieClip("zjs"+i, i);
//复制电影剪辑
var mc = this["zjs"+i];
mc.n = i;
//每个电影剪辑下建一个变量n
mc.text = b[i-1];
//显示文字
mc._x = zjs._x+(i-1)*(zjs._width+2);
//电影剪辑的水平排列
}
//下面为子菜单的运动函数
MovieClip.prototype.slide = function(ty) {
var mc = this;
mc.onEnterFrame = function() {
mc._y += (ty-mc._y)*0.4;
if (Math.round(mc._y-ty) == 0) {
delete (mc.onEnterFrame);
}
};
};
on (rollOver) {
_parent["z"+n].slide(37.5);//相应的子菜单运动
_parent["zjs"+n].gotoAndStop(n+1);//跳到相应的帧,颜色变化
if (_parent.temp != n) {
_parent["z"+_parent.temp].slide(12.5);//子菜单恢复原来位置
_parent["zjs"+_parent.temp].gotoAndStop(1);//颜色复原
}
}
on (rollOut) {
_parent.temp = n;
}
源文件:_parent["z"+n].slide(37.5);//相应的子菜单运动
_parent["zjs"+n].gotoAndStop(n+1);//跳到相应的帧,颜色变化
if (_parent.temp != n) {
_parent["z"+_parent.temp].slide(12.5);//子菜单恢复原来位置
_parent["zjs"+_parent.temp].gotoAndStop(1);//颜色复原
}
}
on (rollOut) {
_parent.temp = n;
}
点击浏览该文件OK,这个导航条制作挺实用的,希望大家好好学习一下^_^
