Flash 动态缓冲图片导航制作详解

　2006-12-30 10:49:58　来源：WEB开发网　　　

核心提示：缓冲公式在制作特效中非常有用，著名的三星导航菜单就用到了此公式，Flash 动态缓冲图片导航制作详解，现在许多网站出尽风头，其中缓冲导航是其一大亮点，掌握原理后，加上好的创意，本文以一德国网站的导航为例，详解缓冲导航的制作

缓冲公式在制作特效中非常有用，著名的三星导航菜单就用到了此公式。现在许多网站出尽风头，其中缓冲导航是其一大亮点。本文以一德国网站的导航为例，详解缓冲导航的制作。这个效果是我和溶剂共同完成的，他提供坐标的算法，我提供缩放的算法。

本例效果演示：查看效果(鼠标划过的部分图片会变大)

制作思路

图片缩放控制

利用缓冲公式设置图片的缩放比例，如果鼠标滑过某图片，放大1.8倍。如果其它图片的序号与此图片的序号相差1，就是此图片两边的图片，放大1.4倍，其它的为原始大小。图片坐标控制

当某图片放大时，相邻的图片的坐标等于此图片的坐标加上这两张图片的宽度的一半，实现图片无间距排列。线条和文字控制

线条用画线函数实现，文字的坐标和缩放比例与对应的图片相同。

制作过程

1、启动Flash，新建一个影片，设置影片大小为600px*200px。

准备好如图中的素材，图片的实例名分别为zjs0到zjs4，文字的实例名分别为z0到z4。

把中间的图片坐标设为(300,130)，选中全部的图片，按CTRL＋K调出排列面板，设置为顶部对齐，使图片的y坐标相同，图片的x坐标通过AS来控制。用同样的方法使方字的y坐标相同，并调整好文字和图片的间距。

2、在主场景中的第一帧上添加下列代码

//获取中间图片的x坐标
for (var i = 0; i<5; i++) {
this["zjs"+i].n = i;
//每个图片MC下定义一个变量
this["zjs"+i].onRollOver = function() {
　control = true;
　//鼠标滑过图片时为真
};
this["zjs"+i].onRollOut = function() {
　control = false;
　//鼠标移出图片时为假
};
}
onEnterFrame = function () {
for (var k = 0; k<5; k++) {
　this["z"+k]._x = this["zjs"+k]._x;
　// 说明文字的x坐标等于本应图片的x坐标
　this["z"+k]._xscale = this["zjs"+k]._xscale;
　this["z"+k]._yscale = this["zjs"+k]._yscale;
　// 说明文字的缩放比例与图片相同
}
if (control) {
　mouse_in();
} else {
　mouse_out();
}
// 条件真或假时调用函数
};
//坐标设置函数
function setX() {
for (var k = -2; k<3; k++) {
　this["zjs"+(k+2)]._x = myx+this["zjs"+2]._width*k;
　//以中间图片为准无间距排列
}
for (var k = Number(temp1)+1; k<5; k++) {
　//temp1为缩放比例最大的图片下的变量值
　var mc1 = this["zjs"+k];
　var mc2 = this["zjs"+(k-1)];
　//此图片右边的其它图片
　mc1._x = mc2._x+(mc2._width+mc1._width)/2-1;
　//设置这些图片的x坐标，1为消除图片间的空隙
}
for (var k = Number(temp1)-1; k>-1; k--) {
　var mc1 = this["zjs"+k];
　var mc2 = this["zjs"+(k+1)];
　mc1._x = mc2._x-(mc2._width+mc1._width)/2+1;
}
//缩放比例最大的图片的左边的图片的x坐标设置
myLine();
//图片下方的线条
}
//比例缩放函数
function move_scale(x, obj) {
speed = (x-obj._xscale)*.65+speed*0.6;
obj._xscale += speed;
obj._yscale += speed;
//缓冲公式，x为图片的缩放比例，obj为MC
}
//鼠标滑过图片时，图片的缩放、x坐标设置函数
function mouse_in() {
for (var i = 0; i<5; i++) {
　var mc = this["zjs"+i];
　//获得实例名
　if (mc.hitTest(_xmouse, _ymouse, true)) {
　 move_scale(180, mc);
　 //如果鼠标位于图片的上方，图片放大1.8倍
　 temp1 = mc.n;
　 //把此图片下的变量赋给变量temp1
　} else if (Math.abs(mc.n-temp1) == 1) {
　 move_scale(140, mc);
　 //两侧的图片比例放大1.4倍
　} else {
　 move_scale(100, mc);
　 //其它的图片为原始大小
　}
}
setX();
//设置图片的x坐标
}
//鼠标移出图片时，图片的缩放、x坐标设置函数
function mouse_out() {
for (var i = 0; i<5; i++) {
　move_scale(100, this["zjs"+i]);
　//缩放比例为1，恢复原始大小
}
setX();
//坐标复原
}
//线条函数
function myLine() {
createEmptyMovieClip("line", 1);
//创建一个空影片
with (line) {
　lineStyle(0.1, 0xff9933, 100);
　moveTo(zjs0._x-zjs0._width/2, zjs0._y+10);
　lineTo(zjs4._x+zjs4._width/2, zjs4._y+10);
　//图片下方水平的直线
　moveTo(zjs0._x-zjs0._width/2, zjs0._y+5);
　lineTo(zjs0._x-zjs0._width/2, zjs0._y+15);
　//右边垂直的直线
　moveTo(zjs4._x+zjs4._width/2, zjs4._y+5);
　lineTo(zjs4._x+zjs4._width/2, zjs4._y+15);
　//左边垂直的直线
}
}