`
hgfghw8
  • 浏览: 37049 次
  • 性别: Icon_minigender_2
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

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

阅读更多

缓冲公式在制作特效中非常有用,著名的三星导航菜单就用到了此公式。现在许多网站出尽风头,其中缓冲导航是其一大亮点。本文以一德国网站的导航为例,详解缓冲导航的制作。这个效果是我和溶剂共同完成的,他提供坐标的算法,我提供缩放的算法。
  本例效果演示
鼠标划过的部分图片会变大
 
  [1b]制作思路[/1b]
图片缩放控制
利用缓冲公式设置图片的缩放比例,如果鼠标滑过某图片,放大1.8倍。如果其它图片的序号与此图片的序号相差1,就是此图片两边的图片,放大1.4倍,其它的为原始大小。
图片坐标控制
当某图片放大时,相邻的图片的坐标等于此图片的坐标加上这两张图片的宽度的一半,实现图片无间距排列。
线条和文字控制
线条用画线函数实现,文字的坐标和缩放比例与对应的图片相同。   [1b]制作过程[/1b]
  1、启动Flash,新建一个影片,设置影片大小为600px*200px。
  准备好如图中的素材,图片的实例名分别为zjs0到zjs4,文字的实例名分别为z0到z4。
  把中间的图片坐标设为(300,130),选中全部的图片,按CTRL+K调出排列面板,设置为顶部对齐,使图片的y坐标相同,图片的x坐标通过AS来控制。用同样的方法使方字的y坐标相同,并调整好文字和图片的间距。
  2、在主场景中的第一帧上添加下列代码

//获取中间图片的x坐标
for (var i = 0; i-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按CTRL+ENTER测试,本例制作完成。掌握原理后,加上好的创意,相信你能做出更好的特效。
本文转自:http://www.5uflash.com/flashjiaocheng/Flashdonghuajiaocheng/2027.html
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics