欢迎光临
我们一直在努力

Flash使用技巧--用Flash 5巧做“弹出”效果菜单-网页设计,Flash

建站超值云服务器,限时71元/月

   windows应用程序的菜单都具有统一的风格,当鼠标移到主菜单按钮上时,菜单按钮凸起,单击主菜单按钮时,弹出下级菜单,鼠标移到下级菜单项时,下级菜单项变成蓝底白字。在许多网站上的导航菜单也使用了类似的效果,但很多都是用dhtml结合javascript制成的。其实,flash 5也可制作类似的菜单效果,本文就介绍如何用flash 5强大的actionscript做一个类似windows菜单效果。

  前期制作

  1、启动flash 5.0,新建一个文件,舞台的背景色及舞台大小可根据需要设置;

  2、选择insert→new symbol命令,弹出symbol properties(符号属性)对话框,在name(名称)输入框中输入mainmenu,behavior(作用)选择button(按钮),进入按钮符号编辑窗口;

  3、在up帧上绘制一个矩形,填充色和边框色均选灰色(c0c0c0),边框宽度1.0即可;

  4、单击工具箱中的文本工具,在矩形框上写上“文件”二字,颜色选黑色,字体、字号根据需要设置;

  5、单击over帧,按f6键在该帧上插入一个关键帧,使用ink bottle tool(墨水瓶工具)调整矩形左边框和上边框的颜色为白色(ffffff),下边框和右边框的颜色为深灰色(666666),以使鼠标移到按钮上时有凸起的效果(如图1所示);

Flash使用技巧--用Flash 5巧做“弹出”效果菜单-网页设计,Flash
图1

  6、与上面类似,在down帧上插入一个关键帧,调整左边框和上边框的颜色为深灰色(666666),下边框和右边框的颜色为白色(ffffff),并稍微向右下方移动文字,使鼠标在按钮上单击时有凹下的效果,主菜单按钮到此制作完毕。

  制作菜单项

  1、用window→library命令打开库面板,选中mainmenu,右击鼠标,在弹出的菜单中选择copy(复制),制作mainmenu的4个副本,分别命名为submenu1、submenu2、submenu3和submenu4(也可另外制作4个按钮);

  2、在库面板中双击submenu1的图标使之进入编辑状态,把submenu1各帧的文字改为新建,用填充工具和墨水瓶工具分别把over、down两帧的填充色和边框色均改为深蓝色(000099),用character(字符)面板把文字颜色改为白色,以达到鼠标移到按钮上时改变背景色和文字颜色的效果。

  制作menu的电影剪辑

  1、选择insert→new symbol命令,弹出symbol properties(符号属性)对话框,在name输入框中输入menu,behavior(作用)选择movie clip(电影片段);

  2、在menu的第一帧上放置mainmenu按钮实例,方法是从库中拖出mainmenu,放到合适的位置;

  3、在menu的第二帧上插入关键帧,分别把submenu1~submenu4拖到舞台上,并且用align(排列)面板把它们排列整齐;

  4、在第一个关键帧上双击打开object actions(对象动作)面板(或用window→actions打开),在其中加入gotoandstop(1)语句,使电影在开始时不自动播放;

  5、在第10帧处插入一个关键帧,在其帧动作中加入gotoandstop(1),目的是当鼠标离开子菜单后,延迟显示子菜单一段时间,加入帧动作后的时间线如图2所示;

  6、选择mainmenu按钮的第1帧,加入以下动作:

  on(release){
gotoandstop(2)

}

   

Flash使用技巧--用Flash 5巧做“弹出”效果菜单-网页设计,Flash
图2

  即单击第1帧的按钮后,转到第2帧,并停在该帧;

  7、用“ctrl+i”打开instance(实例)面板,依次选择第二帧中的各按钮,在instance面板中,把options(选项)选为track as menu item(菜单项目);

Flash使用技巧--用Flash 5巧做“弹出”效果菜单-网页设计,Flash
图3

  8、打开“object actions”面板,依次为第二帧中加入以下动作(如图3)。

  on(rollout){
gotoandplay(3)

}
on(rollover){
gotoandstop(2)
}

  目的是当鼠标停到各按钮上时,保持第2帧的状态,当鼠标离开按钮后,延迟一段时间后,回到第一帧,只显示主菜单按钮,即原来的状态。

  这样一个弹出菜单的电影剪辑就制作完成了。如果制作的是导航菜单,各按钮上还应加入一个单击时的geturl动作。

Flash使用技巧--用Flash 5巧做“弹出”效果菜单-网页设计,Flash
图4

  9、回到场景1,从库中把menu拖放到舞台上,就可看到你的劳动成果了。用f12在浏览器中测试一下效果(如图4),是不是很酷?

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » Flash使用技巧--用Flash 5巧做“弹出”效果菜单-网页设计,Flash
分享到: 更多 (0)

相关推荐

  • 暂无文章