当前位置:软件学习 > Flash >>

利用鼠标跟随做别具特色的导航条

做全flash的网站少不了菜单,当然也少不了导航条,怎么做一个与众不同的导航条效果呢?大家可能在各种网站上已经看到了很多各具特色的导航效果,说不定以及挑花眼了,这些效果有的神奇多变,有的互动精致,而我们在本节要学习的这个效果,有一个最突出的特点,就是简单,几乎是使用最简单的as原理制作出来的,而且动感一点也不逊色于那些复杂的效果,这就告诉我们掌握技术固然重要,更重要的是运用技术的能力,相信经过不断的锻炼,你动动脑筋,发挥自己的想象力,会做得更出色。

  实例效果描述:

  导航条用颜色分为上下两层,下层是导航条的文字,看上去好象没什么特别的,但是当将鼠标移动到文字上,你就会发现,在上层会出现一个灰色的半透明阴影区域,随着你的鼠标而移动,鼠标动得越快,阴影的区域越大,变化得越快,当鼠标静止的时候,阴影区域也就随着消失了。



  实现原理:

  利用鼠标跟随的原理,在鼠标移动的时候得到鼠标的横坐标值,并进行一定处理,将处理后的值设置为跟随鼠标的阴影的横坐标,(主要是要使阴影有追赶鼠标的效果,因此应当将鼠标的坐标值减小一点)将鼠标这一帧与上一帧的横坐标值进行比较,我们就可以知道鼠标的移动是快还是慢,在得到这个差值后,就可以由其决定阴影的宽度,既然判断出鼠标运动的快慢,自然就可以使阴影跟随鼠标运动的速度变化宽度。

  实例制作:

  1) 打开flash,新建一个动画文件,modify-movie 打开movie properties面板,设置frame rate为18fps,宽为400像素,高为100像素。(如图1)


  2) 使用菜单命令insert-symbol新建元件,命名为“背景”,使用rectangle tool(stroke color为无,fill color为兰色)绘制一个矩形,使用菜单命令windows-panels-info,打开info面板,设置矩形的宽度为400像素,高度为100像素。再使用菜单命令windows-panels-align打开align面板,设置矩形居中对齐。(如图2)

  3) 新建一个元件,命名为“黄色框”,使用rectangle tool(stroke color为无,fill color为黄色)绘制一个矩形,使用菜单命令windows-panels-info,打开info面板,设置矩形的高度为20像素,宽度为100像素。再使用菜单命令windows-panels-align打开align面板,设置矩形居中对齐。(如图3)


  4) 新建一个元件,命名为“条纹”,使用rectangle tool(stroke color为无,fill color为兰灰色)绘制一个矩形,使用菜单命令windows-panels-info,打开info面板,设置矩形的高度为100像素,宽度为1像素。再使用菜单命令windows-panels-align打开align面板,设置矩形居中对齐。(如图4)


  5) 新建一个元件命名为“按钮”,并将其属性设置为button,使用rectangle tool stroke color为无,fill color为黄色)绘制一个矩形,在info面板上设置矩形宽为22,高为20。使用text tool输入文字:按钮。Windows-panels-character打开character面板,在此面板上设置文字的大小、颜色与字体。最后使用align面板将矩形与文字都居中对齐。(如图5)


  6) 开始组装各个元件,回到scene 1,使用菜单命令window-library,打开library,从library中拖拽“背景”元件到scene 1,使用align面板将其对齐。Insert-layer在时间轴上新建一层,再从library 中拖拽“条纹”元件到这一层,使用align面板使其如图放置(如图6)。


  使用菜单命令windows-panels-instance打开instance面板,设置“条纹“元件的name属性为“aa”。再新建一层,从library中拖拽“黄色框”元件到这一层,如图放置(如图7)。


  最后新建一层,将“按钮”元件如图放置。(如图8)


  下面我们开始编辑控制动化效果的as命令。


作者:pcking出处: 责任编辑: [ 2002-05-20 14:29 ]
做全flash的网站少不了菜单,当然也少不了导航条,怎么做一个与众不同的导航条效果呢

  7) 下面我们开始编辑控制动化效果的as命令,新建元件命名为as,双击第一帧,在弹出的frame action上输入如下as :
  xx = 100;
  //这是定义一个变量xx,用于进行第一次鼠标位置变化的计算中

  8) 按F6在第二帧新建关键帧,双击第二帧,在弹出的frame action上输入如下as :(如图9)

  yy = math.abs(xx-_root._xmouse)*2;
  xx = _root._xmouse;
  _root.aa:_x = xx-(xx-_root._xmouse)*4;
  _root.aa:_width = yy;

  9) 按F6在第三帧新建关键帧,双击第三帧,在弹出的frame action上输入如下as :
  gotoAndPlay (2);
  //帧间跳转,控制影片在第2,3帧重复播放。


  最后,回到scene 1,从library中拖拽“as”元件到scene 1,就完成了制作。你可以按下CTRL+ENTER来测试动画。

  总结:

  其实这个效果的实现非常的简单,但是重点有两个,一个是怎样想到这样简单却有新意的效果,这需要我们平时对优秀的flash作品的观察,主要是一个想象力与创造力的培养。第二接是如何用最简单的方法实现你所想要的效果,这就需要你对as命令的运用非常哪个熟练,不光是每个单一的命令,综合应用技术的能力是至关重要的,希望大家能意识到这个问题的重要性,多动手,多动脑,这样才会有大的提高。

  源文件下载学习

  本文发表于电脑商情报 ,经作者同意转载于此。
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,