利用鼠标跟随做别具特色的导航条
做全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命令的运用非常哪个熟练,不光是每个单一的命令,综合应用技术的能力是至关重要的,希望大家能意识到这个问题的重要性,多动手,多动脑,这样才会有大的提高。
源文件下载学习
上一个:Flash中背景变色及其实现技巧
下一个:简单制作逼真爆破烟雾效果
- 更多Flash疑问解答:
- 今天教大家学会用U5制作成翻页相册
- Flash MX 2004 ActionScript图文教程(九)
- Flash MX 2004 ActionScript图文教程(八)
- Flash MX 2004 ActionScript图文教程(七)
- Flash MX 视频导入功能详解
- Flash5 画任意直线教程
- FLASH -- 关于变量的问题FLASH -- 关于变量的问题
- Flash本地加密
- flash场景之间相互跳转的实现方法
- Flash那样动感十足制作PPT按钮跟我来
- Flash Mx使用技巧十二则
- 使用Flash mx制作旋转的时钟效果
- PowerPoint中插入Flas易做图的方法
- 用FlashMX制作拖动悬浮窗口
- 在Flash中巧妙替换字体