第一节 网站导航(7)

至此，一个按钮就编辑好了，我们可以把刚才的操作成果“复制”到其它4个按钮中，以提高工作效率。

按住Shift键，单击【联线】、【说明文字】、【声音】这3个图层的第2帧，使这纵向的2个关键帧被选中，然后单击鼠标右键，在弹出菜单中选择【复制帧】命令，再分别打开库里的“语音教室”、“教程总汇”、“论坛交流”、“作品上传”4个按钮，在这4个按钮中各新建1层，在新建层的第2帧插入关键帧，单击右键，在弹出菜单中选择【粘贴帧】命令，就把我们刚才的编辑内容复制到了各个按钮中了。

（3）创建5个影片剪辑

细心的读者可能会问：已经建好的5个按钮中，在【说明文字】图层中，只有一个六边形对象，“菜单说明”的功能并未体现呀？问得好，下面我们来完成这个效果：

回到主场景，单击第90帧，选择“菜单”元件（参考图11-1-27），双击它，进入“菜单”元件的编辑场景；再单击第75帧，就能看到场景中的5个按钮了，先编辑第1个“网站首页”按钮，双击“网站首页”按钮，进入按钮编辑场景（参看图11-1-29），选中【说明文字】层中的六边形，用鼠标右键单击它，在弹出的菜单中选择【转换为元件】命令，将六边形对象转换为名为“网站首页剪辑”的影片剪辑元件，如图11-1-30所示。

图11-1-30 选择【转换元件】

再双击该六边形，进入“网站首页剪辑”元件的编辑场景，我们来编辑这个元件，编辑后的图层结构如图11-1-31所示。

图11-1-31 “网站首页剪辑”的时间轴

5个影片剪辑的结构都一样，各有5个图层，按图11-1-31建好所有图层，在【flash标记】层的第8帧插入关键帧，把库中名为“flash标记”的元件拖到六边形的中间；在【action】层的最后一帧加脚本“stop();”；然后按住Shift键，用鼠标左键单击上图中的5个图层，将它们全部选中，用鼠标右键单击选中的帧，选择【复制帧】命令，复制刚才编辑的全部内容。

下面的操作目的是把其它4个按钮也作同样编辑，最快捷的方法是单击时间轴面板上方的“菜单”标签名称，切换到“菜单”元件的编辑场景，如图11-1-32所示。

图11-1-32 时间轴面板上的编辑界面标签

接下来，你可依次双击场景中的其余4个按钮，分别选取“说明文字图层”中的六边形，将其转为影片剪辑元件，分别命名为“语音教室剪辑”、“教程总汇剪辑”、“论坛交流剪辑”、“作品上传剪辑”，再分别在每个影片剪辑中单击鼠标右键，选择【粘贴帧】，这样，就快速生成了5个说明按钮名称的影片剪辑。

（4）编辑5个剪辑

上面我们已经完成了5个相同的说明效果影片剪辑，最后的工作就是让它们显示不同的内容，我们就以“网站首页”影片剪辑为例来说明编辑过程。

进入“网站首页剪辑”编辑场景（参考图11-1-31），在【网站首页】图层中，把库中名为“网站首页文字”的元件拖到第1帧，第8帧插入关键帧，把它放到六边形的右侧边缘；回到第一帧，适当缩小尺寸（本例的大小是10px*10px），拖放在场景的右侧，然后建立补间动画。

在【文字介绍】图层的第8帧插入关键帧，输入“闪客启航欢迎你，网址：http://www.flasher123.com/”，文本类型为【静态文本】，字体为【隶书】，字体大小25。

选择【六边形】层，选中“六边形”在属性面板上点击【颜色】后的下拉三角，选【色调】，改变【色调】为“#FF0000” 【透明度】为70%。如图11-1-33所示。

图11-1-33图形颜色及透明度的调整

第8帧插入关键帧，回到第一帧，缩小尺寸至10px*10px，与“联线”元件放置在同一位置。建立补间动画。

选中【flash标记】层，同样在【属性】面板上设置Flash标志【色调】为红色，【Alpha】为70%；

另外4个影片剪辑依照上述一一编辑，五个影片剪辑中的参数依照表11-1-2。

按钮名称

按钮说明

文字说明

六边形

Flash标志

网站首页

网站首页

闪客启航欢迎你，网址：http://www.flasher123.com/

颜色#FF0000

透明度70％

原色彩

透明度70％

语音教室

语音教室

首创网络语音教学方式，边听边做，授课、作业、提问。

颜色#FF0000

透明度40％

#FF99FF

透明度50％

教程总汇

教程总汇

丰富的教程：Flash、Dreameaver、Firework、Photoshop等。

黄色#FFFF00

透明度80％

黄色#FFFF00

透明度50%

论坛交流

论坛交流

在这里，你可以发布作品，尽情的和朋友们交流、讨论。

绿色#00FF00

透明度50％

黄色#FFFF00

透明度50％

作品上传

作品上传

这里是你发布正式作品的地方，想欣赏大家的精品，就快来吧。

原元件，不做改变

#00FFFF

透明度50%

表11-1-2五个影片剪辑中的参数

7．加上导航指向

好了，终于可以完成了，最后的工作是为5个按钮添加相关网页的“超链接”指令。

进入“菜单”影片剪辑，分别选择各个按钮，在【动作】面板中加入“超链接”指令，以“语音教室”按钮为例，它的“超链接”指令为：

on (release) {

    getURL("http://280739.chat.yinsha.com", _blank);

}

相应的【动作】面板如图11-1-34所示。

图11-1-34 语音教室按钮的导航指向指令

各按钮的超链接导航指向网址如表11-1-3所示。

按钮名称

超链接导航网址

网站首页

http://www.flasher123.com/

语音教室

http://280739.chat.yinsha.com

教程总汇

http://tutorials.flasher123.com/

论坛讨论

http://bbs.flasher123.com/

作品上传

http://up.flasher123.com/

图11-1-3按钮的超链接导航

本范例终于完成了，按快捷键Ctrl+Enter，测试一下动画效果吧！