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

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、在主场景中的第一帧上添加下列代码

 //获取中间的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);   //左边垂直的直线  } } 

　　按CTRL+ENTER测试，本例制作完成。掌握原理后，加上好的创意，相信你能做出更好的特效。