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

推荐：Photoshop与Flash合作制作模糊渐变动画
在一些片头动画里我们经常能看到很炫的模糊效果，极具视觉冲击。高质量的模糊效果大多利用Photoshop处理后才导入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); 

  //左边垂直的直线 

 } 

} 

分享：Flash实例教程：星星跟我走
实例说明在FlashMX当中鼠标的跟踪的制作方法有很多种，为你介绍其中的一种可以有多种变化方式的鼠标跟踪。让星星紧随你的鼠标转动。有关知识绘制实例，star