第一节 网站导航(5)

正六边形效果和【工具设置】对话框的参数设置情况如图11-1-19所示。

图11-1-19六边形工具设置及效果

5．制作导航菜单元件

     此处是本例的主要效果，“菜单”元件是表演鼠标通过按钮时激发出相应的说明动画，为了容易理解，我们分解成5个步骤来讲解。

（1）整理主场景

上面几个步骤主要完成动画中需要的一些组件，下面的操作将在主场景中进行，先看看主场景的图层结构。

主场景有5层，由下向上，分别是：背景层、闪客启航、语音学校、菜单及联线、action层。

如图11-1-20所示。

图11-1-20 主场景的图层结构

在【背景层】中放的是一张背景图，已经在前面的步骤中中完成；【闪客启航】层中放的是“闪客启航”元件，它的位置在场景左上角，作为网站的标题；“语音学校”元件放在【语音学校】层的第1帧中，位置在“闪客启航”元件的下面。

请在以上已经完成的3个图层第165帧处加普通帧，使帧内容延续到该处。

下面对【菜单及联线】层进行编辑。

（2） 创建“菜单”元件

在【菜单及联线】第90帧插入关键帧，用【线条工具】画一条引导线，颜色任意，如图11-1-21所示。

图11-1-21 画引导线

选中引导线，按键盘上的F8键，把它转换成名称为“菜单”的影片剪辑元件。

（3）编辑“菜单”元件

双击刚刚转换成的“菜单”影片剪辑，进入“菜单”元件的编辑场景，对这个元件进行编辑，完成后的元件结构如图11-1-22所示。

图11-1-22 菜单元件的时间轴面板

下面我们来完成它。当前编辑场景如图11-1-23所示，图中的数字“1~6”是为下面叙述方便所加。

图11-1-23 在主场景中编辑菜单元件

步骤1 添加引导层

单击时间轴上的【添加引导层】按钮，为【图层1】创建引导层，此时【图层1】会自动缩进到引导层下面，单击缩进了的这一层，在时间轴上连续单击【插入图层】按钮四次，在引导层下方创建好五个缩进的被引导层，它们的图层名从下到上分别为网站首页、语音教室、教程总汇、论坛交流、作品上传。

剪切刚才画好的引导线，把它粘到引导层的第1帧中。

步骤2 设置被引导层动画

5个按钮飞出的顺序是由远到近，最先飞出的是“作品上传”按钮。选择【作品上传】图层为“当前图层”，把库中名为“作品上传”的按钮拖到第一帧，放在图11-1-23中数字“1”的位置，在第15帧插入关键帧，再把“作品上传”按钮移到图11-1-23中数字“2”的位置，在第1帧建立动作补间动画，并在【属性】面板中设置该帧的按钮大小为10×10，透明度为10%。

这样做，是为了使按钮在飞出时发生由小变大，由模糊到清晰的效果，请按照前面学到的方法，把按钮元件的起始、终点分别对准引导线两端。

图11-1-24是“作品上传”按钮在第15帧上的位置。

图11-1-24 “作品上传”按钮在第15帧的位置