第14节 导航菜单的制作.ppt

14.3.3 完成幻灯片菜单 需要用到的元件已经全部制作完成。剩下的工作就是将各个元件放置在舞台上，并进行排列组合。在这一过程中，要考虑到浏览者的操作习惯以及页面整体美观，对页面进行合理布局。 14.3.3 完成幻灯片菜单 放置“产品图片”影片剪辑 放置说明文字 绘制导航栏轮廓 14.3.3 完成幻灯片菜单 放置按钮 测试影片效果 14.4 下拉菜单 下拉菜单是应用比较广泛的导航菜单形式。使用这种形式的导航菜单，可以有效地节约页面空间，同时使网站的结构更加具有层次感。本节将通过一个下拉菜单的制作来展示这种导航菜单的制作思路。 14.4 下拉菜单 下拉菜单范例 14.4.1 制作主菜单 首先制作主菜单的第1格，即“公司简介”菜单项。当鼠标指针经过该格时，在该格背景上弹出一灰色框。同时，“公司简介”字样放大，COMPANY字样变红。具体制作步骤如下： 14.4.1 制作主菜单 绘制背景图形 绘制按钮响应区域 添加COMPANY文本 14.4.1 制作主菜单 设置COMPANY实例色调 放置“响应区域”按钮 “公司简介”项制作完成 14.4.2 制作子菜单 本范例中，当鼠标指针经过主菜单时，在主菜单栏的下方即背景的红色区域会弹出子菜单栏，子菜单上的文字随之落下。 在bar图形元件内绘制圆角矩形 在line图形元件内绘制矩形 14.4.2 制作子菜单 绘制遮罩图形 在sub1 图层上放置sub1影片剪辑元件 14.4.3 制作下拉菜单 主菜单的“公司简介”一项已经制作完成，同时，该菜单的下属子菜单也准备好了。接下来的工作，是通过一些简单的ActionScript语句将“公司简介”项的主菜单和子菜单组合在一起，完成“公司简介”项下拉菜单的制作。然后，按照同样的方法继续完成其他菜单项的制作。 14.4.3 制作下拉菜单 “公司简介”菜单项的下拉菜单效果 测试影片效果 14.5 循环滚动菜单 循环滚动菜单一般多用于大量图片和多行文字的展示。这种菜单的优点是可以在有限的空间内实现大量信息的发布。下面以一个产品促销广告的范例来具体讲解这类菜单的制作方法。 循环滚动菜单范例 14.5.1 制作滚动图片 在制作这类菜单时，滚动图片的制作十分重要。在制作滚动图片的过程中，要精确设计好每张图片的尺寸，以及各图片之间的间隔距离。必要的时候不妨将这些数值记下来，以备在编写ActionScript程序时用到。 14.5.1 制作滚动图片 将图片1拖入shoe_1元件内 在“指针经过”帧绘制矩形边框 14.5.1 制作滚动图片 将其他按钮元件置于allshoes影片剪辑内 在allshoes_u影片剪辑内放置两个allshoes影片剪辑 14.5.2 制作循环滚动菜单 在本范例中，菜单的循环滚动要通过相应的ActionScript代码来实现。 在图层bg上放置背景元素 菜单左侧出现空白 14.5.2 制作循环滚动菜单 图片8出现在图片1的左侧 测试影片效果 14.6 与鼠标位置互动的导航菜单 与鼠标位置互动，顾名思义，就是导航菜单的显示方式与鼠标指针在菜单页面中的位置有关。这种类型的菜单，不但可以加强网页的互动性，而且可以为浏览过程添加不少趣味。下面将通过两个范例来展示一下这种菜单的制作思路。 14.6 与鼠标位置互动的导航菜单 与鼠标位置互动的菜单范例一 与鼠标位置互动的菜单范例二 14.6.1 制作随鼠标位置左右滑动的菜单 第一个范例也是由一系列