用户登录  |  用户注册
首 页软件下载教程中心办公指南flash动画文档下载办公公文
当前位置:中科软件园教程中心媒体动画Flash实例分析flash制作导航菜单
作者:不详  来源:不详  发布时间:2005-09-15 06:36:41

flash制作导航菜单

按钮除可以用来制作交互特效外,还常常被用在网页中用于导航。下面即要制作如下所示的导航菜单。在该导航菜单中,当鼠标移到某个菜单上时,子菜单同时移到对应的菜单下面,且菜单项也随之发生变化。 下面介绍该导航菜单的制作步骤。 (1)将场景大小设为500×280,背景颜色设为黑色。 (2)选择矩形工具,单击矩形工具对应选项区的按钮,在打开的对话框中将矩形的圆角半径设为8,如下

按钮除可以用来制作交互特效外,还常常被用在网页中用于导航。下面即要制作如下所示的导航菜单。在该导航菜单中,当鼠标移到某个菜单上时,子菜单同时移到对应的菜单下面,且菜单项也随之发生变化。

按此在新窗口浏览图片

下面介绍该导航菜单的制作步骤。

1)将场景大小设为500×280,背景颜色设为黑色。

2)选择矩形工具,单击矩形工具对应选项区的按钮,在打开的对话框中将矩形的圆角半径设为8,如下所示。

按此在新窗口浏览图片

3)将笔触颜色设为黄色,填充颜色设为无色,在场景中绘制两个大小分别为495×275440×40的圆角矩形,如下所示,分别按Ctrl+G键将它们组合。

按此在新窗口浏览图片

4)按Ctrl+F8键新建一个图形元件menushape,在其中绘制一个100×30的黄色圆角矩形,并对齐场景中心。

5)按Ctrl+F8键新建一个按钮元件menu,将图形元件menushape添加分别添加到按钮的4个关键帧中,并将Up帧中的元件透明度设为30%,将Over帧中的元件透明度设为70%,将Down帧中的元件透明度设为30%

6)按Ctrl+F8键新建一个按钮元件menu1,将按钮元件menu4个帧复制并粘贴到按钮元件menu1的时间轴中,然后在按钮元件menu1的时间轴中新建一个图层,使用文本工具添加文本“菜单1”。如下所示。

按此在新窗口浏览图片

7)按照类似的方法创建按钮元件menu2~menu4,将其中的文本相应换成“菜单2”、“菜单3”和“菜单4”。

8)按Ctrl+F8键新建一个影片剪辑元件childmenu并进入编辑。

9)选择矩形工具,保持设置的圆角半径为8,将笔触颜色设置为黄色,填充颜色设为白色,在场景中绘制一个大小为120×158的圆角矩形。

10)选中矩形中间的填充部分,按F8键将其转换成图形元件childmenu_inside,然后在“属性”面板中将其透明度设置为30%,效果如下所示。

按此在新窗口浏览图片

11)按Ctrl+G键重新将矩形的轮廓和填充组合在一起。

12)单击按钮新建一个图层,使用文本工具在场景中绘制一个文本框,在“属性”面板中将其设置为动态文本,将文本变量设为menutxt,其他设置如下所示。

按此在新窗口浏览图片

13)放置动态文本,然后配合Ctrl+Shift键拖动鼠标对文本框进行复制,将复制出的动态文本均匀分布,效果如下所示。

按此在新窗口浏览图片

14)单击按钮新建一个图层,将按钮元件menu添加到场景中与动态文本对应的位置。

15)回到主场景,将制作好的各元件添加到如下所示的位置。

按此在新窗口浏览图片

16)选中按钮menu1,在“属性”面板文本框中输入实例名称b1,如下所示。

按此在新窗口浏览图片

17)按照相同的方法依次将menu2~menu4命名为b2~b4

18)选中子菜单childmenu,在“属性”面板文本框中输入实例名称childmenu,如下所示。

按此在新窗口浏览图片

19)选中菜单menu1,按F9键打开其“动作”面板,在其中添加如下脚本:

on (rollOver) {

_root.pos = "b1";

_root.childmenu.menutxt = "子菜单1";

}

20)选中菜单menu2,按F9键打开其“动作”面板,在其中添加如下脚本:

on (rollOver) {

_root.pos = "b2";

_root.childmenu.menutxt = "子菜单2";

}




21)选中菜单menu3,按F9键打开其“动作”面板,在其中添加如下脚本:

on (rollOver) {

_root.pos = "b3";

_root.childmenu.menutxt = "子菜单3";

}


22)选中菜单menu4,按F9键打开其“动作”面板,在其中添加如下脚本:

on (rollOver) {

_root.pos = "b4";

_root.childmenu.menutxt = "子菜单4";

}




23)选中子菜单childmenu,按F9键打开其“动作”面板,在其中添加如下脚本:
   

onClipEvent (load) {

_root.pos = "";

this._visible = false;

}

onClipEvent (enterFrame) {

if (_root.pos != "") {

this._visible = true;

_x += (_root[_root.pos]._x-_x)/5;

} else {

this._visible = false;

}

}




24)双击子菜单childmenu,进入其元件编辑场景。选中图层Layer 3中的第1个按钮menu,在其“动作”面板中添加如下脚本:

on (release) {

_root.pos = "";

_visible = false;

}




25)依次在其他3个按钮中添加相同的脚本。

26)按Ctrl+Enter键测试动画,效果如下所示。

按此在新窗口浏览图片

27)当鼠标指针移到某个菜单上时,子菜单也移到相应的位置,如下所示。

按此在新窗口浏览图片

点这里下载演示效果文件

Tags:

作者:不详

  • 好的评价 如果您觉得此教程好,就请您
      0%(0)
  • 差的评价 如果您觉得此教程差,就请您
      0%(0)

教程评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 1 条,得分 55 分,平均 55 分) 查看完整评论
[回复] 1zjbabyone   打分:55 分  发表时间:2007-12-26
· 看不到效果,汗
版权所有:中科软件园  备案编号:豫ICP备05015809号 “法律声明”
Copyright (C)2004 - 2009 www.4oa.com Info Port. All rights reserved.
有事点这里