巧用Flash 8按钮元件制作下拉式菜单
作者：邢素萍
来源：《软件导刊》2015年第12期
作者：邢素萍
来源：《软件导刊》2015年第12期
摘 要：探讨利用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帧和第html怎么做下拉式多级导航栏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”。
on （release） {
getURL（"http：www.sina"， "_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 输入名称
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论