关于我们 广告服务 社区论坛
设为首页 加入收藏

行业新闻
服 务 器
模版下载
建站指南
冲浪宝典
办公软件
网站运营
操作系统
QQ 专题
网页制作
安全防御
视频教程
网络编程
SEO专区
软件下载
图像设计
Cisco
网页特效
Wap 技术
联盟赚钱
网页素材
 首页 | 企业建站 | 网页制作 | 网站运营 | 网络编程 | 图像设计 | 冲浪宝典 | 操作系统 | SEO专区 | 联盟赚钱 | Cisco

欢迎来到e天下网络首页>>图像设计>>FLASH>>正文|精彩动态导航菜单制作详解

精彩动态导航菜单制作详解

[ 来路:闪客帝国      时间:2007-7-10 3:28:21    点击: ]

 

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

  本例效果预览:

  制作思路

  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;  //获取中间图片的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测试,本例制作完成。掌握原理后,加上好的创意,相信你能做出更好的特效。

  源码下载

::::站长友情提示:多花一分钟学点什么都好::::

 

上一篇:FLASH中实现眨眼睛的动画效果  下一篇:动态MC按钮的制作教程

 ::热点信息::

 

= = 免责声明 = =

① 欢迎转载我网所刊信息,请注明“来源:E天下网络”。
② 凡本网注明“来源:XXX(非E天下网络)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。
※联系方式:Airtofly@163.com

::推荐文章::

 

Photoshop 轻松打造神秘银河系

::网页制作::

 

初学:什么是DIV+CSS?有什么
网页制作实例CSS用一张图片实
用CSS控制图片自适应大小的方
小技巧:CSS列表标签出现问题
CSS网页设计中使用背景图片须
想让DIV居中,如何编写CSS的
总结两年以来使用DIV网页排版
DIV CSS技巧:对CSS命名的一
更多内容..

 

 

关于我们 广告服务 友情链接 合作伙伴 社区论坛 免责声明

Copyright © 2007   21kn.com Inc. All rights reserved.e天下网络工作室

网站白天客服QQ:26875416 (非24小时)  合作QQ:597004688    粤ICP备06026423号