网管联盟 | 网管论坛 | 网管u家 | 网管博客 | 网管软件 | 网管求职 | 小游戏 | 网管搜索 | 网管原创 | 网管聚合 | 网管读摘 | 网管焦点 | 世界素材 | 会员投稿 | 会员中心 
中国网管联盟
Windows Linux Cisco 网络技术 数据库 黑客攻防 DotNet Java PHP 认证 新闻资讯 服务器 存储资讯 网络设备 网管学堂 技术专题 焦点 网吧频道
 当前位置: > bitsCN.com > 网管学堂 > 网页设计 > Flash > 制作实例 > 制作艺术的FLASH菜单  

制作艺术的FLASH菜单

2006-05-07  作者:中国网管联盟  来源:BitsCN.com整理  点评 投稿 收藏

网管联盟bitsCN@com


  亮点1:精致的画面非常养眼
  亮点2:反转隐形按钮导航条

中国网管论坛bbs.bitsCN.com

  主题观摩:美味的红酒香似乎已经从这个艳丽的水粉画FLASH网站中渗透出来。作者在制作这个网站时,专注静态效果的视觉艺术,图画非常鲜亮;而在处理动画时,只加入了一些镜头的应用和一些简单的移动效果,虽然这样显得互动性大为逊色,但网站以暖色为烘托,冷色调为引导,烘托出了酒文化主题,光欣赏这一幅幅精致的画面就让人留恋往返。
在技术上,网站的亮点就是FLASH反转隐形按钮制作的缓冲式导航条菜单了。这种缓冲效果对观众有很强的视觉吸引力,不过本篇网站中的缓冲元件绘制的有些单调,应该是作者配合水粉画风格网站,不愿过多影响画面的缘故。

网管u家u.bitscn@com

网管网www.bitscn.com


  菜单奥秘:当我们鼠标指向菜单按钮时,导航条上的矩形,会缓冲式移动到菜单文字上,并且展开下拉菜单,当按钮离开按钮时,矩形会缓冲式离开按钮,回到HOME文字上方。通常大家在使用鼠标的onRollOut(鼠标移开)事件时,无法制作出这样精致的效果,解决的方法就是制作两个隐形按钮,在时间轴上来回的反转和跳转,因为是反转按钮,所以观众在浏览时,反转的按钮只在场景中停留1/12秒,所以,观众根本不可能发现隐形按钮的玄机。

网管联盟bitsCN_com

  现场临摹菜单效果:

中国网管联盟bitsCN.com

  步骤一:在Flash中,我们导入网站的背景图,新建图层,输入五个菜单的文字。然后在按钮热区绘制五个园角矩形,将这五个矩形转换成影片剪辑。

网管联盟bitsCN@com

  步骤二:在影片剪辑中,将五个矩形转换成按钮。编辑按钮时,将矩形放置在Hit热区。使按钮只有鼠标感应区,没有形状区的隐形按钮,分别取实例名称为home_btn、wine_btn、fire_btn、expl_btn、base_btn。

网管下载dl.bitscn.com

  步骤三:在影片剪辑的第2帧,绘制一个矩形,大小以Flash的场景大小为准,然后挖空这五个按钮的区域,然后转换成按钮,也将这个按钮制作成隐形按钮,取实例名称为prev_btn。
网管联盟bitsCN_com

中国网管论坛bbs.bitsCN.com


  步骤四:在第1、2帧中分别输入代码。
  第1帧
stop() 
home_btn.onRollOver=function(){ 
nextFrame() 
_root.speed=58 
_root.buffer_mc.gotoAndStop(1) 

wine_btn.onRollOver=function(){ 
nextFrame() 
_root.speed=163 
_root.buffer_mc.gotoAndStop(2) 

fire_btn.onRollOver=function(){ 
nextFrame() 
_root.speed=348 
_root.buffer_mc.gotoAndStop(3) 

expl_btn.onRollOver=function(){ 
nextFrame() 
_root.speed=492 
_root.buffer_mc.gotoAndStop(4) 

base_btn.onRollOver=function(){ 
nextFrame() 
_root.speed=650 
_root.buffer_mc.gotoAndStop(5) 
第2帧
prev_btn.onRollOver=function(){ 
prevFrame() 
_root.speed=58 
_root.buffer_mc.gotoAndStop(1) 
  步骤五:回到场景中,绘制一个圆角矩形,转换成影片剪辑,取实例名称为buffer_mc。在第1帧输入代码。 网管网www.bitscn.com
speed=58 
buffer_mc.onEnterFrame=function(){ 
buffer_mc._x+=(_root.speed-buffer_mc._x)/3 

  步骤六:在buffer_mc影片剪辑中,第2帧绘制如wine_btn按钮大小的矩形,第3帧绘制如fire_btn按钮大小的矩形,以此类推。将这些矩形转换成影片剪辑,在影片剪辑中制作下拉菜单的动画。并且在最后一帧stop()。整个实例制作完成。 网管联盟bitsCN_com

  代码解读: 网管网www.bitscn.com

  我们制作了两个隐形按钮,当鼠标指向菜单的隐形按钮时,跳转到第2帧,并且根目录下的矩形影片剪辑缓冲移动到菜单位置,buffer_mc影片剪辑同时跳转到相应的帧,开始播放下拉菜单的动画。而当鼠标指向反转按钮时,buffer_mc将会跳转回HOME位置。整个代码很简单,只是缓冲移动公式有些难度。 网管网www.bitscn.com


TAGs   菜单   艺术   制作   按钮   影片   剪辑   隐形   缓冲   网站   function      
 上一篇:flash天气预报   下一篇:Flash按钮控制声音具体实现
制作艺术的FLASH菜单 评论:
loading.. 评论加载中…
评论:请自觉遵守互联网相关政策法规,评论不得超过250字。

验证码: 注册用户
本类热门排行:
最新推荐文章:
网管论坛交流: