全球第一免费源码下载基地!
首 页文章中心下载中心繁體中文
首页 ASP源码 | PHP源码 | CGI源码 | JSP源码 | .NET源码 | flash源码 | 其它源码 | 网页模板 | 常用软件 | 字体下载 | 视频教程
站长学院 | 网络编程 | 网页设计 | 图形图像 | 操作系统 | 数据库 | 多媒体 | 黑客攻防 | 编程开发 | Seo专区 | 小说连载
您当前的位置:中文源码之家 -> 站长学院 -> 软件教学 -> 文章内容 退出登录 用户管理
栏目导航
· 软件报道 · 软件教学
· 游戏娱乐 · 小说连载
热门文章
· [推荐] 卡巴斯基v6.0..
· [新闻] 超级解霸3500..
· [推荐] 冰点还原精灵..
· [组图] 一键GHOST硬盘..
· [组图] PQMagic──硬..
· [新闻] 2006年世界顶..
· [图文] 一键GHOST 优..
· [推荐] 征途小宝外挂..
· [新闻] 下载:IE 7 简..
· ASP自动解压RAR文件..
相关文章
· Youtube将抛弃FLV格..
· 如何禁止flash动画的..
· [图文] 徒手下载Flas..
· 脱离浏览器 Adobe将..
· 学习FLASH、认识FLE..
· [新闻] 免费金山毒霸..
· [图文] Flash也能玩鼠..
· [组图] Flash绘中秋贺..
· Flash电子书鼠标拖拽..
· Photoshop与Flash合..
精彩激情游戏推荐
Flash动态缓冲图片导航制作详解
作者:佚名  来源:不详  发布时间:2006-10-8 15:28:20  发布人:aijun

减小字体 增大字体

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

  本例效果演示


鼠标划过的部分图片会变大

  制作思路

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

[] [返回上一页] [打 印] [收 藏]
上一篇文章:C#中对注册表的操作
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论...]
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图
Copyright 2005-2006 Chcodes.Com.中文源码之家 All Rights Reserved .
Powered by:NewAsp SiteManageSystem Version 2.1 SP1 1030