艺术的FLASH菜单

文章类别：Flash | 发表日期:2008-9-21 20:08:06

　　本期临摹主题：http://www.redwoodcreek.com

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

菜单奥秘：当我们鼠标指向菜单按钮时，导航条上的矩形，会缓冲式移动到菜单文字上，并且展开下拉菜单，当按钮离开按钮时，矩形会缓冲式离开按钮，回到HOME文字上方。通常大家在使用鼠标的onRollOut（鼠标移开）事件时，无法制作出这样精致的效果，解决的方法就是制作两个隐形按钮，在时间轴上往返的反转和跳转，因为是反转按钮，所以观众在浏览时，反转的按钮只在场景中停留1/12秒，所以，观众根本不可能发现隐形按钮的玄机。
现场临摹菜单效果：
步骤一：在Flash中，我们导入网站的背景图，新建图层，输入五个菜单的文字。然后在按钮热区绘制五个园角矩形，将这五个矩形转换成影片剪辑。
步骤二：在影片剪辑中，将五个矩形转换成按钮。编辑按钮时，将矩形放置在Hit热区。使按钮只有鼠标感应区，没有外形区的隐形按钮，分别取实例名称为home_btn、wine_btn、fire_btn、expl_btn、base_btn。
步骤三：在影片剪辑的第2帧，绘制一个矩形，大小以Flash的场景大小为准，然后挖空这五个按钮的区域，然后转换成按钮，也将这个按钮制作成隐形按钮，取实例名称为prev_btn。

步骤四：在第1、2帧中分别输入代码。
第1帧
第2帧
步骤五：回到场景中，绘制一个圆角矩形，转换成影片剪辑，取实例名称为buffer_mc。在第1帧输入代码。
步骤六：在buffer_mc影片剪辑中，第2帧绘制如wine_btn按钮大小的矩形，第3帧绘制如fire_btn按钮大小的矩形，以此类推。将这些矩形转换成影片剪辑，在影片剪辑中制作下拉菜单的动画。并且在最后一帧stop()。整个实例制作完成。下载地址为：redwoodcreek.rar?。
代码解读：
我们制作了两个隐形按钮，当鼠标指向菜单的隐形按钮时，跳转到第2帧，并且根目录下的矩形影片剪辑缓冲移动到菜单位置，buffer_mc影片剪辑同时跳转到相应的帧，开始播放下拉菜单的动画。而当鼠标指向反转按钮时，buffer_mc将会跳转回HOME位置。整个代码很简单，只是缓冲移动公式有些难度。

上一篇：{实例}利用flash8的bitmap给人物换服装 人气:2146
下一篇：{实例}Flash标准loading制作方法 人气:2787

Flash视频教程