一个 Flash 缓冲导航详解

缓冲导航详解
这个效果是我和溶剂共同完成的，他提供坐标的算法，我提供缩放的算法
如有什么问题，欢迎到我的blog交流
http://zjs35.edujh.cn

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

www.it55.com在线教程

制作思路 sflj www.it55.com kg^&fgd

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

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

45398 www.it55.com it55学习IT知识，享受IT生活 4dfkjn

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

代码拷贝框
var myx = this["zjs"+2]._x;//获取中间图片的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); //左边垂直的直线 }} </p> <p>（阅读次数：<script src="http://www.it55.com/plus/count.php?view=yes&aid=60582&mid=0" language="javascript"></script>）</p> </div> <div id="fy"><div class="maotop"><a href="#"><img src="http://www.it55.com/templets/it55/images/top.gif" alt="返回顶部" /></a></div>共2页: 上一页 1 <a href='60582_2.html'>[2]</a> <a href='60582_2.html'>下一页</a> 　</div> </div> <script type="text/javascript"> document.getElementById("cl").style.height=document.getElementById("cr").scrollHeight+"px" </script> </div><div style="clear:both"></div> <div class="ad5"><script type="text/javascript"><!-- google_ad_client = "pub-7322138056288108"; google_alternate_color = "E6E6E6"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text_image"; //2007-07-09: www.it55.com google_ad_channel = "7079307182"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <div id="neighbour">上一篇：<a href='http://www.it55.com/html/xueyuan/wangyezhizuo/Flashjiaocheng/20070712/60581.html'>FLASH缓冲滚动升级版本</a>   下一篇：<a href='http://www.it55.com/html/xueyuan/wangyezhizuo/Flashjiaocheng/20070712/60583.html'>MX2004--AS2.0 新特性实例教程</a> </div> <div style="clear:both"></div> </div> <div id="comment"> <div class="title"><h4>网友评论</h4>[以下评论为网友观点，不代表本站。请自觉遵守互联网相关政策法规，所有连带责任均有评论者自负。]</div> <div id="coml"> <ul> <script src="http://www.it55.com/plus/feedback_js.php?arcID=60582"></script> </ul> </div> <div id="comr"> <form action="http://www.it55.com/plus/feedback.php?action=send" method="post" name="feedback"> <input type="hidden" name="arcID" value="60582"> <label for="username">用户名：</label><input id="username" name="username" class="input" /> <label for="pwd">密码：</label><input id="pwd" name="pwd" class="input" /> <label for="notuser">匿名：</label><input id="notuser" name="notuser" type="checkbox" value="1" /> <textarea id="msg" name="msg" cols="22" rows="10" tabindex="4">