当前位置: 秒速时时彩 > 综合资源 > 课件制作 > 正文

制作实例:跟随鼠标的导航条

[ 作者:佚名 文章来源:转载 更新时间:2007-1-22 14:37:37| 收藏本文 ]
在线投稿】【信箱投稿([email protected])】 【背景:#EDF0F5 #FAFBE6 #FFF2E2 #FDE6E0 #F3FFE1 #DAFAF3 #FFFFFF 默认 字号:
利用鼠标跟随做别具特色的导航条

源代码下载>>>>>>

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

实例效果描述:

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

实现原理:

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

实例制作:

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



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



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



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



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



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



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



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



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

  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命令的运用非常哪个熟练,不光是每个单一的命令,综合应用技术的能力是至关重要的,希望大家能意识到这个问题的重要性,多动手,多动脑,这样才会有大的提高。

[点击关键词在7C教育资源网搜索更多关于制作实例的教学资源]
■文章录入:admin    责任编辑:admin 
三分PK拾平台 幸运赛车 澳洲幸运10开奖结果 秒速时时彩 上海时时乐 财神汇彩票计划群 快乐赛车平台 欢乐生肖 三分PK拾平台 内蒙古快3