第14章导航菜单的制作.pptVIP

第14章 导航菜单的制作 制作网页时，Flash最常用的功能之一就是制作导航菜单。与传统的文字导航和图片导航相比，用Flash制作的导航菜单具有动感强、视觉效果好、交互性高的优点。在网页中适当地加入Flash导航菜单，将会使网页显得生动活跃、具备更强的吸引力，从而增加网站的浏览量。 在第4章中介绍了用组件制作动态菜单的方法，但用这种方法制作的菜单无论在外观还是表现形式上都具有一定的局限性，难以适应多层面的需求。本章将会通过几种常见形式导航菜单的制作过程，使读者了解并掌握网页导航菜单的具体制作方法。 14.1 导航菜单的常见形式 导航菜单是为整个网站服务的，根据网站类型的不同，导航菜单也会表现出不同的设计形式。在制作导航菜单之前，首先应当了解该导航菜单所属网站的类型，以及该导航菜单所要实现的功能。然后，根据网站的具体需要选择合适的形式，并完成进一步的设计。 14.1.1 普通导航菜单 这种类型的导航菜单主要由按一定顺序排列的按钮组成。按钮可以是单纯的图片或文字，也可以附加一些简单的动态效果。 对于下级链接页面不是特别多、结构也不是很复杂的网站，采用这种形式的导航菜单是比较合理的。 14.1.1 普通导航菜单 效果如下: 14.1.2 幻灯片菜单 对于一些以图片为主的网页来说，有时候需要将多幅图片放置在网页中的同一个区域内。当浏览者用鼠标触发相应的导航按钮时，该按钮所对应的图片会显示在该区域内， 这种导航菜单一般应用在需要展示多幅尺寸较大的图片，而页面空间有限，同时又不希望增加下级链接页面的网页中。 14.1.2 幻灯片菜单 效果如下: 14.1.3 下拉菜单 下拉菜单是网页制作中比较常用的一种导航形式，当浏览者将鼠标指针移动到菜单上时，会显示出隐藏的子菜单。如图14.5和图14.6所示，当鼠标指针移动到主菜单的某一项上时，在该菜单项的下方会出现其子菜单项，浏览者可以直接在子菜单项中选择想要访问的页面。 14.1.3 下拉菜单 14.1.4 循环滚动菜单 在一些网站上经常可以看到这样的广告——在一定区域内，各种产品图片如同走马灯一样不停地循环显示。当浏览者将鼠标指针移动到这个区域内时，所有的产品图片都停止了移动。 14.1.4 循环滚动菜单 14.1.5 与鼠标位置互动的导航菜单 前文的循环滚动菜单，虽然实现了在有限空间内展示大量信息的效果，但是信息循环的主动权并不在浏览者手中。而与鼠标位置互动的导航菜单就可以解决这一问题。如图，当浏览者将鼠标指针移动到导航栏左侧时，图片组会向右侧滑动；而当浏览者将鼠标指针移动到导航栏右侧时，图片组会向左侧滑动。这样，就实现了浏览者对导航菜单的自主控制。 14.1.5 与鼠标位置互动的导航菜单 14.2 普通导航菜单 在网上可以经常看到，有一些网页的导航菜单是一排可爱的卡通形象，不同的卡通形象对应着不同的链接。当鼠标指针移动到这些卡通形象上面时，卡通形象就会放大，或者做出有趣的表情或动作来提示浏览者点击以进入其所链接的页面。如图： 14.2 普通导航菜单 14.2.1 绘制卡通头像 在制作导航菜单中的按钮之前，首先需要准备好这4个卡通头像的素材，并将其以图形元件的形式保存在库里，以备制作导航按钮时调出使用。 14.2.1 绘制卡通头像 步骤如下: 14.2.1 绘制卡通头像 步骤如下: 14.2.2 制作水晶按钮图形 接下来制作圆角矩形的水晶按钮图形。 步骤如下: 14.2.2 制作水晶按钮图形 步骤如下: 14.2.3 制作第一个按钮 在制作按钮之前，首先需要完善按钮中所需要的各种素材。步骤如下: 14.2.3 制作第一个按钮 14.2.4 制作其他3个按钮 制作完成“按钮_1”按钮元件后，其他3个按钮的制作就简单了，只要在“按钮_1”元件的基础上进行小范围的改动即可。 14.2.5 制作导航 按钮全部制作完成后，就可以制作导航菜单了。具体操作步骤如下： 14.3 幻灯片菜单 幻灯片形式的菜单经常被应用在以展示信息（尤其是图片信息）为主的网页上，下面通过一个展示产品信息的菜单范例来具体讲解这类菜单的制作方法。 14.3 幻灯片菜单 14.3.1 产品图片和说明文字 本范例将通过gotoAndStop动作实现不同产品图片和说明信息的替换，故应当首先将有关产品的图片和说明信息制作成相应的影片剪辑，以实现按钮对相关信息显示的控制。 14.3.1 产品图片和说明文字 14.3.1 产品图片和说明文字 14.3.2 制作具有动画效果的按钮 当鼠标指针移动到本范例按钮上方时，按钮会出现一个动画效果。为实现这一效果，需要在按钮的“指针经过”状态放置一个影片剪辑，并在该元件内制作需要的动画。这样一来，当鼠标触发该按钮时，按钮“指针经过”状态上的影片剪