标题 | 巧用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. (责任编辑:陈福时) |
随便看 |
|
科学优质学术资源、百科知识分享平台,免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。