快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

出色动态导航菜单制作详解

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

  本例效果预览:

« Full Screen »

  制作思路

  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教程
上一教程: 关于控制影片的播放和倒退
下一教程: Flash基础绘画教程:雁儿飞

您可以阅读与"出色动态导航菜单制作详解"相关的教程:
· 仿央视网Flash动态导航菜单
· 制作简朴实用的FLASH导航菜单
· Flash制作实用别致的导航菜单
· Flash实例视频教程:动态手机屏幕背景图制作(1)
· Flash制作一款简朴的滑动菜单
    微笑服务 优质保证 索取样品