Flash MX:网站导航(大众网娱乐)

Flash MX:网站导航

来源：

　网站导航

　　实例说明

　　通过制作简单的Flash片头动画，掌握制作Flash Website的技巧和方法。

　　有关知识

　　控制背景音乐的开关，3D效果的按钮制作，导引线的设置， tell target命令的应用。

　　制作过程

　　步骤1：打开Flash，建立一个新文件。按Ctrl+M键，设置帧速度：18fps，大小：450px*300px，背景颜色：白色(#FFFFFF)。

　　步骤2：从菜单栏中选择插入>添加组件（Insert>New Symbol），在出现的对话框中选按钮(Button)，命名为bu-logo1，用绘图工具制作一个logo，如图1所示。

图1制作按钮

　　步骤3：制作电影片断pic-logo，将已做好的按钮bu-logo1导入pic-logo中，按F6将第2帧也设为关键帧。两个关键帧的Actions都设置为stop。

　　导入一段音效作为背景音效。

　　在属性面板将第1帧中的sound设置为：

effect：custom；sync：start；loops：1000

　　按钮bu-logo1的Actions：

on (release) {

gotoAndStop (2)：

}

跳至并停止帧(2)

　　在属性面板将第2帧中的sound设置为：

effect：none；sync：stop；loops： 0

按钮bu-logo1的Actions：

on (release) {

gotoAndStop (1)：

}

跳至并停止帧(1)

　　这样，电影开始，背景音乐循环播放，按下按钮bu-logo1后，音乐停止。再次按下按钮，背景音乐又开始播放。如图2所示。

图2制作背景音效电影片断

　步骤4：新建图像（Graphic），命名为pic-bu1，绘制3D效果的按钮图形，如图3所示。

图3 3D效果图像

　　步骤5：新建按钮，并将其命名为bu-bu1，将库中的pic-bu1拖入Up帧，选中Down帧，按F5插入帧。新建一层，在Over帧插入关键帧，使用椭圆工具绘制一个圆，并用放射渐变填充，使按钮在滑过状态时产生朦胧效果，如图4所示。

图4制作3D效果按钮

　　步骤6：回到场景中，新建logo层，将电影片断pic-logo1拖放到场景中间。在第10帧处建立关键帧，将pic-logo1放置在场景上方并缩小：在第25帧处建立关键帧，将pic-logo1放置在场景右上方，并且在Frame面板中将关键帧设置为移动渐变(Motion)，使电影播放时产生pic-logo1由场景中间逐渐移动到上方，再右上方的效果。如图5所示：

图5产生移动渐变

　　步骤7：新建daoying层，绘制一条弧形线段，在此层上点右键，从下拉菜单中选properties，在出现的Layer Properties面板中将类型选为导引线(guide)，如图6所示。

　　步骤8：新建6个层，分别命名为1，2，3，4，5，6 层，分别在6个层的第10帧处建立关键帧，分别放置按钮bu-bu1，均匀分布6个按钮，并和导引线对齐，如图7所示。

　　步骤9：分别将1，2，3，4，5，6 层和daoying引导层的第40帧选中，按F6建立关键帧，再返回到第10帧，调整按钮bu-bu1的位置，将按钮拖动到场景外部，并和导引层daoying对齐，将1，2，3，4，5，6层分别在Frame面板中设置为移动渐变(Motion)，并将属性设置为guided。如图8所示。
这样，从电影第10帧处开始，按钮沿着引导线由场景外滑动到场景中，并成弧形排列。

图6设置导引层

图7将按钮与导引线对齐

图8引导层

　　步骤10：新建电影片断mv-t2，在工作区内沿中心点画一个椭圆，用墨水瓶工具

将线段颜色填充为#ff9900，线段粗细设为8px：在Color Mixer面板设置放射渐变填充，将alpha设置为60%左右的半透明。

　　按F6将第2帧设置为关键帧，改变Color Mixer面板的填充色再对椭圆进行填充。

　　将两个关键帧的Actions都设为stop。如图9所示。

　　步骤11：新建电影片断flower，绘制一朵花，对齐工作区中心点.分别在第300，301，600帧处设置关键帧。在301帧处改变flower的颜色。

　　将第1，301关键帧的标签分别命名为a，b，在属性面板设置移动渐变(motion)：旋转(rotate)设置为顺时针一次，如图10所示。

图9制作电影片断mv-t2

图10设置电影片断flower的Frame
　第300，600处关键帧的Actions分别设置为：

gotoAndPlay ("a")：

gotoAndPlay ("b")：

跳至并播放标签”a”

跳至并播放标签”b”

　　步骤12：新建电影片断mv-text，建立7个关键帧。Actions都设置为停止(stop)，在七个关键帧处分别写一些描述性文字。如图11所示。

　　提示：我们想要做的效果是：当场景中鼠标滑过按钮bu-bu1时，产生对网站栏目的介绍。

图11栏目介绍

　　步骤13：回到场景中，新建三个层，分别命名为t2，flower和text.在第40帧处建立关键帧，将电影片断放置mv-t2，flower和mv-text分别在置在相应层并安排好合适位置，并在第40帧处设置Actions为停止(stop)，不要让电影循环播放。

　　在Instance面板将三个电影片断mv-t2，flower和mv-text分别命名为t2，flower，text，如图12所示。

图12给电影片断命名

　　步骤14：分别在1，2，3，4，5，6层的第40帧处设置6个按钮的Actions：

on (press， release， rollOver) {

tellTarget ("/t2") {

gotoAndStop (2)：

}

tellTarget ("/flower") {

gotoAndPlay (301)：

}

tellTarget ("/text") {

gotoAndStop (2)：

}

on (rollOut) {

tellTarget ("/t2") {

gotoAndStop (1)：

}

tellTarget ("/flower") {

gotoAndPlay (1)：

}

tellTarget ("/text") {

gotoAndStop (1)：

}

当鼠标（按下，放开，滑过）

告知目标(“/t2”)

跳至并停止帧(2)

告知目标(“/flower”)

跳至并播放帧(301)

告知目标(“/text”)

跳至并停止帧(2)

告知目标(“/t2”)

跳至并停止帧(1)

告知目标(“/flower”)

跳至并播放帧(1)

告知目标(“/text”)

跳至并停止帧(1)

on (press， release， rollOver) {

tellTarget ("/text") {

gotoAndStop (7)：

}

tellTarget ("/flower") {

gotoAndPlay (301)：

}

tellTarget ("/t2") {

gotoAndStop (2)：

}

on (rollOut) {

tellTarget ("/text") {

gotoAndStop (1)：

}

tellTarget ("/flower") {

gotoAndPlay (1)：

}

tellTarget ("/t2") {

gotoAndStop (1)：

}

当鼠标（按下，放开，滑过）

告知目标(“/text”)

跳至并停止帧(7)

告知目标(“/flower”)

跳至并播放帧(301)

告知目标(“/t2”)

跳至并停止帧(2)

当鼠标(滑出)

告知目标(“/text”)

跳至并停止帧(1)

告知目标(“/flower”)

跳至并播放帧(1)

告知目标(“/t2”)

跳至并停止帧(1)

　　好了，按Ctrl+Enter测试一下电影效果，如图13所示。

　　现在看到的电影还不能说是一个完整的网站界面，所有的按钮动作都没有相应的链接，在这里只是说明制作网站导航界面的基本思路，完成它还需要充分发挥想象力。好的Flash作品创意永远是第一位的，而技术只是实现创意的一种手段。

图13电影输出效果

编辑：