F1的速度与激情
多媒体娱乐
本期临摹主题
http://www.f1play.com/main/index.html
亮点1：金属效果的UI设计
亮点2：菜单效果和按钮的速度感突出，和F1赛车风格颇似
主题观摩：这个F1赛车的爱好者们做的网站视觉效果特别突出，设计者为了体现F1的动态和质感，以较重的灰度以及一些精致的管材来增加网站的金属质感，可以算是网站设计中的精品之作。在面板设计上采用了传统面板元素如图片等，个人感觉这些面板搭配上F1的相关视频效果会更好。值得一提的还有网站的loading效果，使用黑色的水晶效果制作界面，再用动态模糊滤镜制作效果，让观众在浏览网页时很容易融入F1赛车的动感节奏当中。
__NOTES_loading效果
菜单奥秘： F1play.com的菜单效果制作得相当新颖：菜单由二十多个导航按钮竖向排列组成，但在面板框架中，只显示了七八个按钮，当鼠标在面板框架内移动时，菜单开始跟随鼠标上下移动，犹如钢琴按键般地跳动，相当新颖有趣。这种效果以往通常应用于动态文本中，制作方法是在面板框架中放置一个大的隐形按钮，若鼠标指向面板，判断鼠标的坐标，导航菜单的坐标根据鼠标坐标递增或递减。没有想到应用到导航菜单中，竟能产生出这样意想不到的灵活效果。
现场临摹菜单效果：
步骤一：打开Flash MX 2004，在第一帧导入背景图片，新建一个图层，在背景图的空白区域，绘制一个图形，正好填充了空白的区域。选择这个图形并按F8键，转换成影片剪辑，实例名称为over_mc。
步骤二：新建一个图层，绘制一个按钮的矩形形状，在左端绘制一个矩形，转换成影片剪辑，在影片剪辑中制作一个矩形伸缩的动画，在第5帧和第10帧stop()停止播放。将第1帧设置为空白帧，将影片剪辑取实例名称为effect_mc。
步骤三：把影片剪辑第2帧建立成关键帧，将矩形的色彩调为#3F3C39，在第1帧加入代码如下：
stop()
over_mc.onRollOver=function(){
effect_mc.gotoAndPlay(2)
gotoAndStop(2)
}
over_mc.onRollOut=function(){
effect_mc.gotoAndPlay(6)
gotoAndStop(1)
}
代码解读：指向over_mc影片剪辑时，effect_mc开始播放第2帧，同时跳转到第2帧，如果鼠标离开，就跳回第1帧，effect_mc开始播放第6帧。
步骤四：回到场景，将矩形转换成影片剪辑，取实例名称为motion_mc，在影片剪辑中复制按钮15个，并且输入文字，如下图所示。
步骤五：回到场景，在第1帧加入代码如下：
_root.onEnterFrame=function(){
if(over_mc._ymouse>0 and over_mc._ymouse<115){
motion_mc._y=-(over_mc._ymouse*1.2-220)
}
}
代码解读：当影片开始播放时，如果over_mc影片剪辑的鼠标Y坐标小于0并且大于115时，motion_mc的Y坐标等于over_mc影片剪辑鼠标Y坐标乘以1.2并且减去220的相反数。
步骤六：整个源程序制作完成，请在http://flash.ym8.net/cpcw/f1play.rar处下载源程序对照学习。