一个Flash缓冲导航详解 

缓冲公式在制作特效中非常有用，著名的三星导航菜单就用到了此公式。现在许多韩国网站出尽风头，其中缓冲导航是其一大亮点。本文以一德国网站的导航为例，详解缓冲导航的制作。
制作思路

1. 图片缩放控制
   利用缓冲公式设置图片的缩放比例，如果鼠标滑过某图片，放大1.8倍。如果其它图片的序号与此图片的序号相差1，就是此图片两边的图片，放大1.4倍，其它的为原始大小。
   
2. 图片坐标控制
   当某图片放大时，相邻的图片的坐标等于此图片的坐标加上这两张图片的宽度的一半，实现图片无间距排列。
   
3. 线条和文字控制
   线条用画线函数实现，文字的坐标和缩放比例与对应的图片相同。

制作过程
1、启动Flash，新建一个影片，设置影片大小为600px*200px。
准备好如图中的素材，图片的实例名分别为zjs0到zjs4，文字的实例名分别为z0到z4。

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

代码拷贝框

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