一个Flash缓冲导航详解

　　缓冲导航详解

　　这个效果是我和溶剂一起完成的，他提供坐标的算法，我提供缩放的算法

　　如有什么问题，欢迎到我的blog交流

　　http://zjs35.edujh.cn

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

　　制作思路

　　

　　
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 /><br />　　//获取中间图片的x坐标<br /><br />　　for (var i = 0; i<5; i ) {<br /><br />　　this["zjs" i].n = i;<br /><br />　　//每个图片MC下定义一个变量<br /><br />　　this["zjs" i].onRollOver = function() {<br /><br />　　control = true;<br /><br />　　//鼠标滑过图片时为真<br /><br />　　};<br /><br />　　this["zjs" i].onRollOut = function() {<br /><br />　　control = false;<br /><br />　　//鼠标移出图片时为假<br /><br />　　};<br /><br />　　}<br /><br />　　onEnterFrame = function () {<br /><br />　　for (var k = 0; k<5; k ) {<br /><br />　　this["z" k]._x = this["zjs" k]._x;<br /><br />　　// 说明文字的x坐标等于本应图片的x坐标<br /><br />　　this["z" k]._xscale = this["zjs" k]._xscale;<br /><br />　　this["z" k]._yscale = this["zjs" k]._yscale;<br /><br />　　// 说明文字的缩放比例和图片相同<br /><br />　　}<br /><br />　　if (control) {<br /><br />　　mouse_in();<br /><br />　　} else {<br /><br />　　mouse_out();<br /><br />　　}<br /><br />　　// 条件真或假时调用函数<br /><br />　　};<br /><br />　　//坐标配置函数<br /><br />　　function setX() {<br /><br />　　for (var k = -2; k<3; k ) {<br /><br />　　this["zjs" (k 2)]._x = myx this["zjs" 2]._width*k;<br /><br />　　//以中间图片为准无间距排列<br /><br />　　}<br /><br />　　for (var k = Number(temp1) 1; k<5; k ) {<br /><br />　　//temp1为缩放比例最大的图片下的变量值<br /><br />　　var mc1 = this["zjs" k];<br /><br />　　var mc2 = this["zjs" (k-1)];<br /><br />　　//此图片右边的其他图片<br /><br />　　mc1._x = mc2._x (mc2._width mc1._width)/2-1;<br /><br />　　//配置这些图片的x坐标，1为消除图片间的空隙<br /><br />　　}<br /><br />　　for (var k = Number(temp1)-1; k>-1; k--) {<br /><br />　　var mc1 = this["zjs" k];<br /><br />　　var mc2 = this["zjs" (k 1)];<br /><br />　　mc1._x = mc2._x-(mc2._width mc1._width)/2 1;<br /><br />　　}<br /><br />　　//缩放比例最大的图片的左边的图片的x坐标配置<br /><br />　　myLine();<br /><br />　　//图片下方的线条<br /><br />　　}<br /><br />　　//比例缩放函数<br /><br />　　function move_scale(x, obj) {<br /><br />　　speed = (x-obj._xscale)*.65 speed*0.6;<br /><br />　　obj._xscale = speed;<br /><br />　　obj._yscale = speed;<br /><br />　　//缓冲公式，x为图片的缩放比例，obj为MC<br /><br />　　}<br /><br />　　//鼠标滑过图片时，图片的缩放、x坐标配置函数<br /><br />　　function mouse_in() {<br /><br />　　for (var i = 0; i<5; i ) {<br /><br />　　var mc = this["zjs" i];<br /><br />　　//获得实例名<br /><br />　　if (mc.hitTest(_xmouse, _ymouse, true)) {<br /><br />　　move_scale(180, mc);<br /><br />　　//假如鼠标位于图片的上方，图片放大1.8倍<br /><br />　　temp1 = mc.n;<br /><br />　　//把此图片下的变量赋给变量temp1<br /><br />　　} else if (Math.abs(mc.n-temp1) == 1) {<br /><br />　　move_scale(140, mc);<br /><br />　　//两侧的图片比例放大1.4倍<br /><br />　　} else {<br /><br />　　move_scale(100, mc);<br /><br />　　//其他的图片为原始大小<br /><br />　　}<br /><br />　　}<br /><br />　　setX();<br /><br />　　//配置图片的x坐标<br /><br />　　}<br /><br />　　//鼠标移出图片时，图片的缩放、x坐标配置函数<br /><br />　　function mouse_out() {<br /><br />　　for (var i = 0; i<5; i ) {<br /><br />　　move_scale(100, this["zjs" i]);<br /><br />　　//缩放比例为1，恢复原始大小<br /><br />　　}<br /><br />　　setX();<br /><br />　　//坐标复原<br /><br />　　}<br /><br />　　//线条函数<br /><br />　　function myLine() {<br /><br />　　createEmptyMovieClip("line", 1);<br /><br />　　//创建一个空影片<br /><br />　　with (line) {<br /><br />　　lineStyle(0.1, 0xff9933, 100);<br /><br />　　moveTo(zjs0._x-zjs0._width/2, zjs0._y 10);<br /><br />　　lineTo(zjs4._x zjs4._width/2, zjs4._y 10); <p class="article-con-biaoqian mt-20"> <span>标签：</span> </p> <p class="banquan">版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com<br/> 特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有 </p> </div> <a href="https://love.4c.cn/" target="_blank"><img src="http://www.west999.com/www/wp-content/uploads/2019/10/-20" alt=""/></a> <div class="other-article mt-10 font14"> <p><span class="mr-20">上一篇：<a href='/info/html/wangyezhizuo/Flash/20080403/53523.html'> FlashMX2004时间轴特效周详讲解</a> </span></p> <p><span class="mr-20">下一篇：<a href='/info/html/wangyezhizuo/Flash/20080403/53527.html'> FlashMX2004模拟出打字效果的制作方法</a> </span></p> </div> <div class="relative-link mt-20"> <div class="relative-tab"> <span class="relative-tab-active">相关文章</span> </div> <div class="relative-con"> <div class="relative-list mt-20"> <ul> </ul> </div> </div> </div> </div> <div class="category mt-20"> <p><span>IDC资讯：</span> <a href="/info/html/IDCzixun/xunizhuji/">主机资讯</a> <a href="/info/html/IDCzixun/yumingzhuce/">注册资讯</a> <a href="/info/html/IDCzixun/zhujizuyong/">托管资讯</a> <a href="/info/html/IDCzixun/vpszhuji/">vps资讯</a> <a href="/info/html/IDCzixun/zhinenjianzhan/">网站建设</a> </p><p><span>网站运营：</span> <a href="/info/html/wangzhanyunying/jianzhanjingyan/">建站经验</a> <a href="/info/html/wangzhanyunying/cehuayingli/">策划盈利</a> <a href="/info/html/wangzhanyunying/sousuoyouhua/">搜索优化</a> <a href="/info/html/wangzhanyunying/wangzhantuiguang/">网站推广</a> <a href="/info/html/wangzhanyunying/mianfeiziyuan/">免费资源</a> </p><p><span>网站联盟：</span> <a href="/info/html/wangzhanlianmeng/lianmengxinwen/">联盟新闻</a> <a href="/info/html/wangzhanlianmeng/lianmengjieshao/">联盟介绍</a> <a href="/info/html/wangzhanlianmeng/lianmengdianping/">联盟点评</a> <a href="/info/html/wangzhanlianmeng/wangzhuanjiqiao/">网赚技巧</a> </p><p><span>行业资讯：</span> <a href="/info/html/xingyezixun/sousuoyinqing/">搜索引擎</a> <a href="/info/html/xingyezixun/wangluoyouxi/">网络游戏</a> <a href="/info/html/xingyezixun/dianzishangwu/">电子商务</a> <a href="/info/html/xingyezixun/guanggaochuanmei/">广告传媒</a> </p><p><span>网络编程：</span> <a href="/info/html/wangluobiancheng/DotNetBianCheng/">Asp.Net编程</a> <a href="/info/html/wangluobiancheng/Aspbiancheng/">Asp编程</a> <a href="/info/html/wangluobiancheng/Phpbiancheng/">Php编程</a> <a href="/info/html/wangluobiancheng/Xmlbiancheng/">Xml编程</a> <a href="/info/html/wangluobiancheng/Access/">Access</a> <a href="/info/html/wangluobiancheng/Mssql/">Mssql</a> <a href="/info/html/wangluobiancheng/Mysql/">Mysql</a> <a href="/info/html/wangluobiancheng/qita/">其它</a> </p><p><span>服务器技术：</span> <a href="/info/html/fuwuqijishu/Webfuwuqi/">Web服务器</a> <a href="/info/html/fuwuqijishu/Ftpfuwuqi/">Ftp服务器</a> <a href="/info/html/fuwuqijishu/Mailfuwuqi/">Mail服务器</a> <a href="/info/html/fuwuqijishu/Dnsfuwuqi/">Dns服务器</a> <a href="/info/html/fuwuqijishu/anquanfanghu/">安全防护</a> </p><p><span>软件技巧：</span> <a href="/info/html/ruanjianjiqiao/qitaruanjian/">其它软件</a> <a href="/info/html/ruanjianjiqiao/Word/">Word</a> <a href="/info/html/ruanjianjiqiao/Excel/">Excel</a> <a href="/info/html/ruanjianjiqiao/Powerpoint/">Powerpoint</a> <a href="/info/html/ruanjianjiqiao/Ghost/">Ghost</a> <a href="/info/html/ruanjianjiqiao/Vista/">Vista</a> <a href="/info/html/ruanjianjiqiao/QQkongjian/">QQ空间</a> <a href="/info/html/ruanjianjiqiao/QQ/">QQ</a> <a href="/info/html/ruanjianjiqiao/FlashGet/">FlashGet</a> <a href="/info/html/ruanjianjiqiao/xunlei/">迅雷</a> </p><p><span>网页制作：</span> <a href="/info/html/wangyezhizuo/FrontPages/">FrontPages</a> <a href="/info/html/wangyezhizuo/Dreamweaver/">Dreamweaver</a> <a href="/info/html/wangyezhizuo/Javascript/">Javascript</a> <a href="/info/html/wangyezhizuo/css/">css</a> <a href="/info/html/wangyezhizuo/photoshop/">photoshop</a> <a href="/info/html/wangyezhizuo/fireworks/">fireworks</a> <a href="/info/html/wangyezhizuo/Flash/">Flash</a> </p><p><span>程序设计：</span> <a href="/info/html/chengxusheji/Javajishu/">Java技术</a> <a href="/info/html/chengxusheji/C-C--/">C/C++</a> <a href="/info/html/chengxusheji/VB/">VB</a> <a href="/info/html/chengxusheji/delphi/">delphi</a> </p><p><span>网络知识：</span> <a href="/info/html/wangluozhishi/wangluoxieyi/">网络协议</a> <a href="/info/html/wangluozhishi/wangluoanquan/">网络安全</a> <a href="/info/html/wangluozhishi/wangluoguanli/">网络管理</a> <a href="/info/html/wangluozhishi/zuwangfangan/">组网方案</a> <a href="/info/html/wangluozhishi/Ciscojishu/">Cisco技术</a> </p><p><span>操作系统：</span> <a href="/info/html/caozuoxitong/Win2000/">Win2000</a> <a href="/info/html/caozuoxitong/WinXP/">WinXP</a> <a href="/info/html/caozuoxitong/Win2003/">Win2003</a> <a href="/info/html/caozuoxitong/Mac-OS/">Mac OS</a> <a href="/info/html/caozuoxitong/Linux/">Linux</a> <a href="/info/html/caozuoxitong/FreeBSD/">FreeBSD</a> </p> </div> </div> <div class="rightcon f-r ml-20"> <div class="sider-img"> <a href="https://www.west.cn/cloudhost/?ReferenceID=zzxxw999" target="_blank" title="云服务器仅需0.69元/天起！快速备案，无需幕布！"><img src="http://www.west999.com/www/wp-content/uploads/2019/10/-12"></a> </div> <div class="right-sider mt-20"> <div class="sider-title clearfix"><strong class="f-l"><i class="iconfont font20 icon-read"></i>热门词条</strong></div> <div class="biaoqian-con"> </div> </div> <div class="right-sider mt-20"> <div class="sider-title"><strong><i class="iconfont font20 icon-liebiaodaohang_zixun"></i>最新资讯</strong></div> <div class="sider-con pt-10"> <ul> <li><a href="/info/html/wangyezhizuo/photoshop/20210526/4674019.html"><i class="radius"></i>Photoshop绘制立体风格的微笑表情</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674018.html"><i class="radius"></i>PS文字特效教程：制作公路上个性的涂鸦</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674017.html"><i class="radius"></i>Photoshop设计卷边效果的变形金刚电影</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210525/4674016.html"><i class="radius"></i>PS色彩修复教程：利用色阶工具快速给红</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674015.html"><i class="radius"></i>PS半透明物体抠图：利用通道选区工具抠</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674014.html"><i class="radius"></i>PS海报设计技巧教程：学习制作个性的扭</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674013.html"><i class="radius"></i>PS图片特效制作教程：学习给铁塔图片制</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674012.html"><i class="radius"></i>学习用photoshop把浑浊的海水照片后期</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674011.html"><i class="radius"></i>PS古风照片教程：给古风美女打造出女侠</a></li> <li><a href="/info/html/wangyezhizuo/photoshop/20210524/4674010.html"><i class="radius"></i>PS个性人物海报制作：设计创意时尚的玻</a></li> </ul> </div> </div> <div class="right-sider mt-20"> <div class="sider-title"><strong><i class="iconfont font20 icon-remen"></i>热门关注</strong></div> <div class="sider-con pt-10"> <ul> <li><a href="/info/html/wangyezhizuo/Flash/20180623/4223756.html"><i class="radius"></i>Flash实例：漂亮的翻书动画制作(1)</a></li> <li><a href="/info/html/wangyezhizuo/Flash/20090513/121431.html"><i class="radius"></i>图文教程：查看高清影片视频码率的技巧</a></li> <li><a href="/info/html/wangyezhizuo/Flash/20080403/54068.html"><i class="radius"></i> 利用Flash制作一个能够自由拨动的时钟</a></li> <li><a href="/info/html/wangyezhizuo/Flash/20180623/4223748.html"><i class="radius"></i>Adobe发布Flash Player 10英文版</a></li> <li><a href="/info/html/wangyezhizuo/Flash/20090513/121487.html"><i class="radius"></i>FMS3系列(三)：基于FMS的流媒体播放程</a></li> <li><a href="/info/html/wangyezhizuo/Flash/20080403/54524.html"><i class="radius"></i> 用Flash制作“拖曳配对题”</a></li> <li><a href="/info/html/wangyezhizuo/Flash/20090513/121484.html"><i class="radius"></i>FMS3系列(一)：FMS程序连接到FMS服务器</a></li> <li><a href="/info/html/wangyezhizuo/Flash/20090513/121427.html"><i class="radius"></i>VMD MOVIE MAKER转换VID视频的教程</a></li> <li><a href="/info/html/wangyezhizuo/Flash/20080403/54892.html"><i class="radius"></i> Flash制作逼真的太阳地球月亮运动漂亮</a></li> <li><a href="/info/html/wangyezhizuo/Flash/20180623/4223740.html"><i class="radius"></i>FLASH中使用打印机功能（可设置打印部</a></li> </ul> </div> </div> <div class="right-sider mt-20"> <div class="sider-title clearfix"><strong class="f-l"><i class="iconfont font20 icon-tag"></i>热门标签</strong></div> <div class="biaoqian-con pt-10"></div> </div> </div> </div> </div> <div id="footer"> <div class="gray-line"></div> <div class="white-line"></div> <!-- 页脚中间部分 --> <!-- 页脚底部部分 --> <div class="footer-bottom"> <p>为学习和知识分享目的，本站文章部分自网络，本站文章部分自网络，如有侵权，请联系：2653426586@qq.com QQ：2653426586 </p> <p>如有其他需求，请联系：2653426586@qq.com QQ：2653426586 </p> <p> <span>友情链接：</span>  <a href="https://www.lnmpweb.cn/" target="_blank">网络安全</a>  <a href="https://www.ysidc.top/" target="_blank">运维经验</a>  <a href="https://blog.mydns.vip" target="_blank">IT技术分享</a>  <a href="https://www.jdian.vip/" target="_blank">运维随笔录</a>  <a href="http://www.aihuaju.com/" target="_blank">鲜花</a>  <a href="https://www.dongjiaospa.vip/" target="_blank">东郊到家</a>  <a href="https://www.wangyuespa.vip/" target="_blank">往约到家</a> </p> </div></div><iframe src="https://market.aliyun.com/products/57742013/cmjj00059601.html?" width="0" height="0"></iframe><iframe src="https://market.aliyun.com/products/57742013/cmjj00060340.html?" width="0" height="0"></iframe><!-- 统计代码 开始 --><div style=" display:none;"> <script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?db46b5f21c293739bcbcfa2490e39804"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script><!--百度推送代码--><script>(function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s);})();</script></div><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-1045757556');</script> <script type="text/javascript"> $(".relative-link").slide( { mainCell:".relative-con", titCell:".relative-tab > a", titOnClassName:"relative-tab-active", effect:"fold" }); </script> </body> </html>