导航菜单的制作.ppt

《导航菜单的制作.ppt》由会员分享，可在线阅读，更多相关《导航菜单的制作.ppt（59页珍藏版）》请在三一办公上搜索。

1、第14章 导航菜单的制作,制作网页时，Flash最常用的功能之一就是制作导航菜单。与传统的文字导航和图片导航相比，用Flash制作的导航菜单具有动感强、视觉效果好、交互性高的优点。在网页中适当地加入Flash导航菜单，将会使网页显得生动活跃、具备更强的吸引力，从而增加网站的浏览量。在第4章中介绍了用组件制作动态菜单的方法，但用这种方法制作的菜单无论在外观还是表现形式上都具有一定的局限性，难以适应多层面的需求。本章将会通过几种常见形式导航菜单的制作过程，使读者了解并掌握网页导航菜单的具体制作方法。,14.1 导航菜单的常见形式,导航菜单是为整个网站服务的，根据网站类型的不同，导航菜单也会表现出不

2、同的设计形式。在制作导航菜单之前，首先应当了解该导航菜单所属网站的类型，以及该导航菜单所要实现的功能。然后，根据网站的具体需要选择合适的形式，并完成进一步的设计。,14.1.1 普通导航菜单,这种类型的导航菜单主要由按一定顺序排列的按钮组成。按钮可以是单纯的图片或文字，也可以附加一些简单的动态效果。对于下级链接页面不是特别多、结构也不是很复杂的网站，采用这种形式的导航菜单是比较合理的。,14.1.1 普通导航菜单,效果如下:,鼠标指针经过的按钮与周围按钮在尺寸上形成对比,鼠标指针经过的按钮与周围按钮在色彩显示上形成对比,14.1.2 幻灯片菜单,对于一些以图片为主的网页来说，有时候需要将多幅图

3、片放置在网页中的同一个区域内。当浏览者用鼠标触发相应的导航按钮时，该按钮所对应的图片会显示在该区域内，这种导航菜单一般应用在需要展示多幅尺寸较大的图片，而页面空间有限，同时又不希望增加下级链接页面的网页中。,14.1.2 幻灯片菜单,效果如下:,单击左侧栏中的图片，窗口右侧显示大图片 单击不同的图片，右侧显示的图片也不同,14.1.3 下拉菜单,下拉菜单是网页制作中比较常用的一种导航形式，当浏览者将鼠标指针移动到菜单上时，会显示出隐藏的子菜单。如图14.5和图14.6所示，当鼠标指针移动到主菜单的某一项上时，在该菜单项的下方会出现其子菜单项，浏览者可以直接在子菜单项中选择想要访问的页面。,14

4、.1.3 下拉菜单,网页中的下拉菜单（纵版）,网页中的下拉菜单（横板）,14.1.4 循环滚动菜单,在一些网站上经常可以看到这样的广告在一定区域内，各种产品图片如同走马灯一样不停地循环显示。当浏览者将鼠标指针移动到这个区域内时，所有的产品图片都停止了移动。,14.1.4 循环滚动菜单,不停向右循环滚动的菜单画面,菜单画面停止滚动,14.1.5 与鼠标位置互动的导航菜单,前文的循环滚动菜单，虽然实现了在有限空间内展示大量信息的效果，但是信息循环的主动权并不在浏览者手中。而与鼠标位置互动的导航菜单就可以解决这一问题。如图，当浏览者将鼠标指针移动到导航栏左侧时，图片组会向右侧滑动；而当浏览者将鼠标指

5、针移动到导航栏右侧时，图片组会向左侧滑动。这样，就实现了浏览者对导航菜单的自主控制。,14.1.5 与鼠标位置互动的导航菜单,鼠标指针的位置决定了菜单的移动方向,14.2 普通导航菜单,在网上可以经常看到，有一些网页的导航菜单是一排可爱的卡通形象，不同的卡通形象对应着不同的链接。当鼠标指针移动到这些卡通形象上面时，卡通形象就会放大，或者做出有趣的表情或动作来提示浏览者点击以进入其所链接的页面。如图：,14.2 普通导航菜单,普通导航菜单范例,14.2.1 绘制卡通头像,在制作导航菜单中的按钮之前，首先需要准备好这4个卡通头像的素材，并将其以图形元件的形式保存在库里，以备制作导航按钮时调出使用。

6、,14.2.1 绘制卡通头像,步骤如下:,在舞台上创建一个椭圆 用铅笔工具绘制线条 卡通头像的最终效果,14.2.1 绘制卡通头像,步骤如下:,绘制其他3个卡通头像,14.2.2 制作水晶按钮图形,接下来制作圆角矩形的水晶按钮图形。步骤如下:,绘制圆角矩形 设置渐变填充色,14.2.2 制作水晶按钮图形,步骤如下:,勾勒出高光区域 圆角矩形最终高光效果 圆角矩形最终效果,将“头像1”元件拖到适当的位置 添加HOME文本 文本最终效果,14.2.3 制作第一个按钮,在制作按钮之前，首先需要完善按钮中所需要的各种素材。步骤如下:,进入“按钮_1”按钮元件内部 添加“指针经过”帧的内容,14.2.3

7、 制作第一个按钮,为按钮添加音效,14.2.4 制作其他3个按钮,制作完成“按钮_1”按钮元件后，其他3个按钮的制作就简单了，只要在“按钮_1”元件的基础上进行小范围的改动即可。,修改后的“按钮图_2”图形元件“按钮图_3”和“按钮图_4”,14.2.5 制作导航,按钮全部制作完成后，就可以制作导航菜单了。具体操作步骤如下：,放置好4个按钮 测试影片效果,14.3 幻灯片菜单,幻灯片形式的菜单经常被应用在以展示信息（尤其是图片信息）为主的网页上，下面通过一个展示产品信息的菜单范例来具体讲解这类菜单的制作方法。,14.3 幻灯片菜单,鼠标指针停在GUN按钮上 鼠标指针停在PHONE按钮上,14.

8、3.1 产品图片和说明文字,本范例将通过gotoAndStop动作实现不同产品图片和说明信息的替换，故应当首先将有关产品的图片和说明信息制作成相应的影片剪辑，以实现按钮对相关信息显示的控制。,14.3.1 产品图片和说明文字,在第1帧放置图片1 在第2帧第6帧放置图片,14.3.1 产品图片和说明文字,添加产品1的说明文字 添加说明文字,14.3.2 制作具有动画效果的按钮,当鼠标指针移动到本范例按钮上方时，按钮会出现一个动画效果。为实现这一效果，需要在按钮的“指针经过”状态放置一个影片剪辑，并在该元件内制作需要的动画。这样一来，当鼠标触发该按钮时，按钮“指针经过”状态上的影片剪辑就会自动播放

9、。,14.3.2 制作具有动画效果的按钮,设置色调 修改实例大小 在“按钮_1”按钮元件中放置元素,14.3.2 制作具有动画效果的按钮,绘制按钮的响应区域 添加文本,14.3.3 完成幻灯片菜单,需要用到的元件已经全部制作完成。剩下的工作就是将各个元件放置在舞台上，并进行排列组合。在这一过程中，要考虑到浏览者的操作习惯以及页面整体美观，对页面进行合理布局。,14.3.3 完成幻灯片菜单,放置“产品图片”影片剪辑 放置说明文字 绘制导航栏轮廓,14.3.3 完成幻灯片菜单,放置按钮 测试影片效果,14.4 下拉菜单,下拉菜单是应用比较广泛的导航菜单形式。使用这种形式的导航菜单，可以有效地节约页

10、面空间，同时使网站的结构更加具有层次感。本节将通过一个下拉菜单的制作来展示这种导航菜单的制作思路。,14.4 下拉菜单,下拉菜单范例,14.4.1 制作主菜单,首先制作主菜单的第1格，即“公司简介”菜单项。当鼠标指针经过该格时，在该格背景上弹出一灰色框。同时，“公司简介”字样放大，COMPANY字样变红。具体制作步骤如下：,14.4.1 制作主菜单,绘制背景图形 绘制按钮响应区域 添加COMPANY文本,14.4.1 制作主菜单,设置COMPANY实例色调 放置“响应区域”按钮“公司简介”项制作完成,14.4.2 制作子菜单,本范例中，当鼠标指针经过主菜单时，在主菜单栏的下方即背景的红色区域会

11、弹出子菜单栏，子菜单上的文字随之落下。,在bar图形元件内绘制圆角矩形 在line图形元件内绘制矩形,14.4.2 制作子菜单,绘制遮罩图形 在sub1 图层上放置sub1影片剪辑元件,14.4.3 制作下拉菜单,主菜单的“公司简介”一项已经制作完成，同时，该菜单的下属子菜单也准备好了。接下来的工作，是通过一些简单的ActionScript语句将“公司简介”项的主菜单和子菜单组合在一起，完成“公司简介”项下拉菜单的制作。然后，按照同样的方法继续完成其他菜单项的制作。,14.4.3 制作下拉菜单,“公司简介”菜单项的下拉菜单效果,测试影片效果,14.5 循环滚动菜单,循环滚动菜单一般多用于大量图

12、片和多行文字的展示。这种菜单的优点是可以在有限的空间内实现大量信息的发布。下面以一个产品促销广告的范例来具体讲解这类菜单的制作方法。,循环滚动菜单范例,14.5.1 制作滚动图片,在制作这类菜单时，滚动图片的制作十分重要。在制作滚动图片的过程中，要精确设计好每张图片的尺寸，以及各图片之间的间隔距离。必要的时候不妨将这些数值记下来，以备在编写ActionScript程序时用到。,14.5.1 制作滚动图片,将图片1拖入shoe_1元件内 在“指针经过”帧绘制矩形边框,14.5.1 制作滚动图片,将其他按钮元件置于allshoes影片剪辑内 在allshoes_u影片剪辑内放置两个allshoes

13、影片剪辑,14.5.2 制作循环滚动菜单,在本范例中，菜单的循环滚动要通过相应的ActionScript代码来实现。,在图层bg上放置背景元素 菜单左侧出现空白,14.5.2 制作循环滚动菜单,图片8出现在图片1的左侧 测试影片效果,14.6 与鼠标位置互动的导航菜单,与鼠标位置互动，顾名思义，就是导航菜单的显示方式与鼠标指针在菜单页面中的位置有关。这种类型的菜单，不但可以加强网页的互动性，而且可以为浏览过程添加不少趣味。下面将通过两个范例来展示一下这种菜单的制作思路。,14.6 与鼠标位置互动的导航菜单,与鼠标位置互动的菜单范例一 与鼠标位置互动的菜单范例二,14.6.1 制作随鼠标位置左右

14、滑动的菜单,第一个范例也是由一系列图片组成的，这里依然以8款篮球鞋产品的图片作为菜单项。与上一节的操作方法一样，首先需要将这些图片整合成一个影片剪辑。,14.6.1 制作随鼠标位置左右滑动的菜单,绘制边框图形 影片的滑动方向和滑动速度取决于鼠标的位置,14.6.2 制作菜单中的提示语,仅有图片的导航菜单未免太过单一，适当地加入一些关于产品的说明性文字是必要的。,鼠标指针变成了针对该产品的文字说明气泡,导航菜单中的提示语,14.6.2 制作菜单中的提示语,在allshoes影片剪辑内放置cue1实例 测试说明气泡的效果,14.6.3 制作随鼠标位置滑出显示的幻灯片菜单,第二个范例是一个幻灯片式的导航菜单，与前面制作的幻灯片菜单不同，该范例会判断鼠标在屏幕上的位置，然后动态地将菜单画面定位到相应的图片。,在slide影片剪辑里放置图片 绘制矩形响应区域,14.6.3 制作随鼠标位置滑出显示的幻灯片菜单,为images影片剪辑添加动作 测试当前菜单效果,14.6.4 增加控制按钮和滑动方向,目前完成的菜单在形式上还比较单调，而且只能在X坐标方向上实现滑动显示。接下来将为该菜单添加一些可以控制图片显示的按钮，并实现菜单在Y坐标方向上的位置改变。,放置其他3张图片 在btn按钮元件中绘制矩形,14.6.4 增加控制按钮和滑动方向,测试菜单的最终效果,