巧用Flash 8按钮元件制作下拉式菜单

摘 要：探讨利用Flash 8中按钮元件建立复杂的动画的过程。通过制作一个下拉式菜单，实现超级链接的管理，可实现一个精美而且实用的个人主页。利用按钮的帧间导航建立弹出下拉菜单动画；利用按钮的鼠标滑过响应建立手动下拉菜单动画；利用脚本语言“stop”、“gotoAndStop”等建立帧间跳转动画；利用脚本语言“getURL”建立网络超级链接。

关键词：按钮元件；菜单；脚本程序；图层

DOIDOI：10.11907/rjdk.1511173

中图分类号：TP301

文献标识码：A 文章编号文章编号：16727800（2015）012003303

1 制作菜单项

步骤1：单击【文件】/【新建】命令，新建一个Flash文件。选择【修改】/【文档】命令，打开【文件属性】对话框，将舞台工作区设置为600px×400px。

步骤2：将“图层1”改名为“背景”，执行【文件】/【导入】/【导入到舞台】命令，打开【导入】对话框，导入一幅背景图像，在其【属性】面板中输入图像的高为400，宽为600，X为0，Y为0，这样，图像会完全覆盖舞台工作区，如图1所示。

步骤3：单击【插入】/【新建组件】命令，在弹出的【创建新组件】对话框中，命名为“title”，属性设为【按钮】。

步骤4：选择矩形工具，边框设为无，填充色设为彩虹渐变色，在元件“title”的“弹起”帧上画一个矩形，如图2所示 。

步骤5：在“指针经过”帧单击【插入】/【关键帧】，在“指针经过”帧上插入一个关键帧。选择矩形工具，填充色设为无，在该帧下为画出的矩形添加边框，并在【属性】面板中将边框的线条宽度设为2，如图3所示。

图1插入背景 图2 “弹起”帧上的矩形 图3“指针经过”帧上的矩形

步骤6：单击【插入】/【新建组件】命令，新建一个元件，命名为“menu”，属性设为【按钮】。

步骤7：选择矩形工具，边框设为灰色，线条宽度为1，填充色为“白-黄-白”渐层色，在元件“menu”的“弹起”帧上画一个矩形，然后删除矩形的上下两条边线，如图4所示。

步骤8：在“指针经过”帧单击【插入】/【关键帧】，在元件“menu”的“指针经过”帧上插入一个关键帧，在该帧下将矩形的填充颜色改为“白-蓝-白”渐层色，如图5所示。

图4 “弹起”帧上的矩形 图5 “指标经过”帧上的矩形

步骤9：选择【编辑】/【编辑文档】命令，或单击元件编辑窗口左上角的场景名称，返回到场景编辑舞台。

步骤10：单击选择“背景”图层，然后单击时间轴窗口中图层选单中的添加图层的图标按钮，在“背景”图层的上方添加一个“图层2”，更名为“菜单”。按下Ctrl+L键，从元件库中将元件“title”拖曳到舞台上，并调整大小，继续拖出“title”两次，并将3个元件对齐，如图6所示。

图6 添加元件“title” 图7 添加元件“menu”

步骤11：在“menu”层的第5帧上插入一个关键帧，从元件库中将元件“menu”拖放到舞台上，调整位置与实例“title”对齐，如图7所示。

步骤12：按住Alt键用鼠标拖动并复制实例“menu”到正下方，对齐位置，同样再复制出多个实例，用作不同的菜单选项，如图8所示。

步骤13：单击选中“菜单”图层的第10帧和15帧，按F6键，分别插入一个关键帧。

步骤14：单击选中“菜单”图层的第10帧，将所有的按钮元件“menu”移动到第2个按钮元件“title”下，并对齐位置，如图9所示。

图8 多次复制元件“menu” 图9 移动元件“menu”

步骤14：单击选中“菜单”图层的第15帧，将所有的按钮元件“menu”移动到第3个按钮元件“title”下，并对齐位置。

步骤15：单击选择“菜单”图层，然后单击时间轴窗口中图层选单中的添加图层的图标按钮，在“菜单”图层的上方添加一个“图层3”，命名为“文本”。

步骤16：依照步骤11，选中“文本”图层的第1帧，用文字工具在舞台上输入文字“新闻中心”，并调整文字的大小和位置，使之位于第一个按钮元件 “title”的上方，然后继续输入“网上书库”和“友情连接”，调整它们的位置，分别位于第2个和第3个按钮元件“title”的上方，如图10所示。

步骤17：选中“文本”图层的第5帧，单击【插入】/【关键帧】插入关键帧。选择文字工具，在所有的按钮元件“menu”上输入文字，如图11所示。

图10 元件“title”上输入文本 图11 元件“title”上输入文本

步骤18：依次选中“文本”图层的第10帧和第15帧，单击【插入】/【关键帧】插入关键帧。选择文字工具，在所有的按钮元件“menu”上输入文字，并删除多余的文字。

步骤19：单击选中“菜单”图层的第1帧，在【动作】面板上加入命令行“stop（）”，用来控制动画的播放。

步骤20：分别选中“菜单”图层的第5帧、第10帧和第15帧，在【动作】面板上加入命令行“stop（）”，此时的时间轴窗口如图12所示。

步骤21：选中“菜单”图层第1帧的第1个按钮元件“title”，在实例上单击左键，选择【窗口】/【开发面板】/【动作】，在弹出的【动作】面板中输入如下脚本程序，使在此按钮上单击鼠标后动画跳至第5帧播放。

图12 时间轴窗口

on （release） {

gotoAndPlay（5）；

}

步骤22：选中“菜单”图层第1帧的第2个按钮元件“title”，在实例上单击左键，选择【窗口】/【开发面板】/【动作】，在弹出的【动作】面板中输入如下脚本程序：

on （release） {

gotoAndPlay（10）；

}

步骤23：选中“菜单”图层第1帧的第2个按钮元件“title”，在实例上单击左键，选择【窗口】/【开发面板】/【动作】，在弹出的【动作】面板中输入如下脚本程序：

on （release） {

gotoAndPlay（15）；

}

步骤24：依次选中“菜单”图层第5帧、第10帧和第15帧，依照步骤21到步骤23，将所有关键帧中的按钮元件“title”全部加上脚本程序。

步骤25：下面以“菜单”图层的第15帧“新浪”按钮添加动作为例，说明实现网页超级链接的方法。在“新浪”按钮上单击左键，选择【窗口】/【开发面板】/【动作】，在弹出的【动作】面板中输入如下脚本程序，使鼠标单击按钮后，动画回到第1帧，并打开新的网页窗口浏览网页“http：//www.sina.com.cn”。

on （release） {

getURL（"http：www.sina.com.cn"， "_blank"）；

gotoAndPlay（1）；

}

步骤26：现在对动画进行测试，可以实现跳转功能，这时动画效果如图13所示。但美中不足的是，如果不选择菜单中的一项，菜单就不能缩回去，下面就来弥补这个缺陷。

在使用“getURL”命令时，可以使用绝对和相对两种路径的寻址方式。举例说明：对于相对路径，默认以该动画所在网页的目录为根目录，假设为“Home”，在“URL”栏中填入“/book/index.htm”，就指向“Home/book/index.htm”文件。如果要使用绝对路径，只需在地址前加上盘符（例如“D：＼”）或者超级链接的标志性说明“错误！超链接引用无效。”。

2 动画控制脚本编写

步骤1：单击【插入】/【新建组件】命令，创建一个新元件，命名为“返回”，属性设为【按钮】。

步骤2：选中按钮元件“返回”的“弹起”帧，选择矩形工具，边框设为无，填充色任意， 在舞台上画一个矩形，如图14所示。

图13 动画效果图 图14 绘制一个矩形

步骤3：用黑箭头工具选中矩形，在【混色器】面板上将矩形的透明度设为“0%”。

步骤4：选择【编辑】/【编辑文档】命令，或单击元件编辑窗口左上角的场景名称，返回到场景编辑舞台单击选择“背景”图层，然后单击时间轴窗口中图层选单中的添加图层的图标按钮，在“背景”图层的上方添加一个新图层，并命名为“返回”，用来放置刚刚画好的透明矩形。

步骤5：选中“返回”层的第3帧，从元件库中把元件“返回”拖放到舞台上，调整实例的大小和位置，使它与整个菜单重合并比菜单大一些，如图15所示。

步骤6：在实例“返回”上单击左键，选择【窗口】/【开发面板】/【动作】，在弹出的【动作】面板中输入如下脚本程序，使鼠标从矩形上移过时动画回到第1帧。

on （rollOver） {

gotoAndPlay（1）；

}

步骤7：单击选择“文本”图层，然后单击时间轴窗口中图层选单中添加图层的图标按钮，在“文本”图层的上方添加一个新图层，命名为“名称”，在这层上选择文字工具。单击【窗口】/【属性】命令，打开【属性】面板，在面板中设置合适的字体格式。在场景中输入文字“网虫乐园”，调整它在场景中的位置，如图16所示。

步骤8：选择该文本，执行【修改】/【分离】命令2次，把文本打碎，然后在【混合器】面板中选择放射状彩虹渐变颜色，将文本填充，如图17所示。

图15 第5帧显示的矩形大小 图16 输入名称

步骤9：至此制作已全部完成，按下Ctrl+Enter键进行测试，可以看到下拉式菜单效果。最终效果图如图18所示，动画时间轴窗口如图19所示。

图17 填充文本 图18 最终效果图

图19 时间轴窗口

3 结语

按钮元件在Flash 8.0中发挥很重要的作用，在制作Flash动画时有着不可替代的效果。本文探讨综合利用按钮元件建立复杂动画的技巧。利用按钮的帧间导航建立弹出下拉菜单动画；利用按钮的鼠标滑过响应建立手动下拉菜单动画；利用脚本语言“stop”、“gotoAndStop”等建立帧间跳转动画；利用脚本语言“getURL”建立网络的超级链接。

本文创作思路：首先创建菜单项，然后利用按钮元件建立下拉菜单动画，最后利用透明按钮实现下拉菜单的自动收回。本实例扩展应用为大型动画中的菜单项目动画。通过本文的实例制作，读者可以尝试在自己的主页上加上菜单，实现超级链接的管理，可以完成一个非常精美且实用的个人主页。

参考文献参考文献：

[1] 《Flash 8 中文版实用教程》李敏.Flash 8 中文版实用教程[M].北京：机械工业出版社，2007.

[2] 潘明寒.Flash 8动画与交互动画制作教程[M].北京：北京航空航天大学出版社，2008.

[3] 林华，姜灵敏.Flash8.0中文版动画制作[M].广州：华南理工大学出版社，2008.

[4] 邢素萍.巧用Flash移动遮罩技术制作特效动画[J].软件导刊，2014，13（12）：134136.

（责任编辑：陈福时）