flash课件模板制作系列教程之按钮导航（下）

这一节，我们来制作这种一个效果，当课件打开后，所有的导航图标通过一个动画效果呈现出来，或许很多人要说，不就一个课件吗，搞这么麻烦做哪些？你这么想就错了，同样是课件，同样是用FLASH来做，但是为什么有的人做起来的效果使人看了没什么感到flash课件模板制作系列教程之按钮导航(上)，而有些人做的使人无法印象深刻，况且，从实用角度来讲，使用的课件的大部分是同学，或是辅导这些专业员工的老师，如果你的课件不能否使人造成丝毫学习的兴趣，那么你的课堂就是失败的。曾经看过很多人制作的课件，其中不乏获奖的，但是效果实在不敢恭维，他们反而不考量使用的照片素材的大小，只清楚一味的放大，放大就放大吧，还不等比例的缩放，造成图片内容拉伸的完全变形了，变形就变形吧，还在图片上印上大红大绿的超大字体，无丝毫美感可言。

人都是喜欢美好的事物，喜欢欣赏美丽的东西，我不要求你们为了制作课件去学习音乐知识，只期望大家可在硬件应用娴熟的基础上，尽量的花些心思去考量，怎么样做能够使人看了赏心悦目，什么样的色彩能够使人看到舒服，课件内容适合用什么样的图标背景跟背景音乐等问题。比如：古文课件可以做的古色古香或金戈铁马，散文可以做的滋养柔情让人沉醉其中，当然，这样即便会消耗我们这些的时间来做谋划跟收集素材，但是，效果却是简单的课件所能够比拟的。

其实我们经常在上网的之后，看到不错的素材就考虑一下，以后我在制作课件的之后是不是可能用到？可以的话就拷贝出来备用，久而久之，你的心态跟着提升的同时，也收集了不少实用的素材。这对你现在课件的制作会有巨大的帮助。

跑题了，最后再说一句：“细节决定成败”。好了，下面开始制作.

【第十一步】：我们把“导航层”解锁，其它两个图层锁定，然后把九个导航图标全部选中，按F8将它们转换成一个影片剪辑。就命名为“导航效果”吧。在FLASH里面，元件是可以无限嵌套的，就是影片剪辑里可以包括任意元件，任意元件里能够再包括任意元件.....

好了，现在这九个按钮就是一个完整的电影剪辑，我们双击任意一个flash课件模板制作系列教程之按钮导航(上)，就处于到这个电影剪辑的编辑界面了。

进去后，全选九个按钮，在任意一个上面点击右键，选择“分散到图层”，这样，每个按钮在时间轴上就占据了一个单独的图层，方便我们做动画效果。看下图：

分散后，时间轴上显示如图：

图层1是个空白图层，没什么用了，就删除掉吧。下面的九个图层，从下至上依次“第一章、第二章......总结练习”按钮，图层的名称就是按钮元件的名称，因为不仅“第一章”这个按钮我命名为“第一”，其余的我都没起名字，所以此处显示的就是元件1等。

【第十二步】：全选时间轴上的第八帧，方法是在第一个图层得第八帧处压住鼠标不放，向下拖动。点击右键，插入关键帧，我们要来做动画效果了。看图：

然后在第一帧和第八帧之间随意选一帧，向下拖动，把所有图层得这一帧全部选中，然后单击右键，“创建补间动画”，如图：

好了，现在开启“属性”面板，是不是看到后面这种，“补间”选项就手动选取“动画”了。

记住，只有帧上得内容是一个单独的电影剪辑、按钮和图形三种元件得任意一种时，才可以在两个关键帧之间右键选取“创建补间动画”，如果是形状动画千万不能这样做，切记。在这里，我们顺便把“缓动”选项设置成100。

【第十三步】：我们依次点击所有图层的第一帧，然后用鼠标上的方向键向上把按键移动到下图位置，（按住鼠标上的shift键不放并且按屏幕上得方向键，每次可以移动十个像素），现在，动画效果就回来了，但是还不是我们向要得，我们必须做按钮从透明至完全显示出来，并且按钮效果是当第一个按钮运动三帧后，第二个按钮开始，依次类推，直至所有按钮全部显示。

现在框选所有图层的第一帧按钮，打开“属性面板”，将按钮得透明度（alpha）值调整为0。

我们今天来设置每个图层的动画显示时间，选中“元件1”层上的所有帧，向后拖动三帧，“元件2”层的所有帧向后拖动6帧，依次类推，拖动完毕后，在“元件8”下面的所有图层插入帧，帧得重量跟“元件8”层的一样。如图：

到此处，我们的导航效果就制作完成了，前面谈到，影片剪辑是一只循环播放的，在课件里我可不想使它一遍一遍得在哪放个没完，所以，我们要加一个“stop”的命令。让它播放依次就停止。点击“元件8”图层得最后一个关键帧，打开“动作”面板，输入：“stop();”。彻底完工，赶快测试一下看看效果吧。测试影片得快捷键：ctrl+enter。

我们来帮导航图标添加相应的指令，让人们乖乖的听从我们的指挥，这一节涉及到FLASH的模式问题，并将做重点讲解，希望你们一定要认真的反思，因为现在我们在制作课件的过程中，如果想省些力气并想游刃有余的来控制各个元件的话，就一定要深刻领悟路径的涵义。

【第十四步】：在舞台上新建一个图层，命名为“内容层”，这一层，将放置所有的课件内容，通过我几年来的课件制作经验，认为这些方式是很省时省力的，我的模式是，课件的每一个模块转换成电影剪辑，这个模块所用到的素材和元件全部嵌套在这个电影剪辑里。每个组件在这一个图层上占用一个帧，这样，就可以借助控制相应得导航图标跳转到相应得帧去就可以了。

在“内容层”的第二帧以后的任意地方，插入九个空白关键帧，每个空白关键帧最好间隔几帧，因为以下我们要帮帧来添加“帧标签”，以方便日后我们的更改工作。

【第十五步】：如下图图示，点击第四帧处得那些空白关键帧，打开“属性”面板，我们来给它添加帧标签，这样，即使里面我们要把它移动至此外一个位置，也不再需要改动我们的导航图标代码。因为在FLASH里面，可以借助GOTO命令直接跳转至相应的帧标签所在的帧。好了，我们分别为剩下的八个空白关键帧添加上帧标签。我这儿的标签就是“yizhang、erzhang、sanzhang.....”了。

【第十六步】：好了，现在我们来帮导航图标添加相应的代码。我们点击“导航”层的第一个关键帧，这样就选中了我们之前做好的包括所有导航按钮的哪个电影剪辑，但是，我们看不到导航图标，看下图：

这时，我们可以借助点击上图框选中得那些圆来开启到电影剪辑内部进行编辑。好了，双击进去后，我们点击时间轴上的最后一个关键帧，这样，所有的按钮都显示出来了，我们依次选中他们添加图标代码，先点击“第一章”这个按键，然后开启动作面板，添加以下代码：

on(release){

_root.gotoAndStop("yizhang");

}//当鼠标指针松开时，舞台上的时间轴前进至帧标签为“yizhang”的帧处并停止播放

on(rollOver){

_root.yi_mc.gotoAndPlay(2);

}//当键盘指针移动到按钮上时，舞台上的“yi_mc”这个电影剪接跳转到第二帧播放

on(rollOut){

_root.yi_mc.gotoAndPlay(10);

}//当光标指针移出按钮时，舞台上的“yi_mc”这个电影剪辑跳转到第十帧播放

这里说明以下“//”是FLASH的注解代码，在添加导出影片的之后，“//”后面得文字将会被忽视，它得作用主要是为代码添加相应的文字表明。

上面代码“_root.yi_mc.gotoAndPlay(2);”和“_root.yi_mc.gotoAndPlay(10);”里的“yi_mc”是我们之前制作好的导航图标的背景效果MC,之前我们就早已给她们命好名了。后面得2和10两个数字是“yi_mc”的时间轴要跳转至的帧。看下图：

我们之前在第一帧和第九帧分别添加了“stop”命令，这两句代码就是为了使这个MC执行相应的命令。当然，如果你做得帧和我不一样，那将要改动后面得数字了。

上面代码中的“_root”，指的就是舞台。也就是导航效果MC的上一级，也叫父级，它是FLASH的两种模式之一，称为绝对路径。

Flash的模式有两种：绝对路径和相对路径，绝对路径的代码很简单，就是“_root”，无论你嵌套多少个电影剪辑，都可以借助绝对路径来控制舞台上的任意一个MC或时间线。

“相对路径”就稍微复杂些，它得代码是“_parent”,它可控制父级MC里得任意mc和时间线，同时也可以控制爷级、祖爷级、老祖宗级之类（这几个是我自己起的名字，嘿嘿），比如，有个按钮在表演上的yi这个MC里的er这个mc里，那么，它要控制舞台上得时间轴，代码就必须这么写：_parent._parent.play();,第一个_parent指的是图标所在MC的父级yi这个MC，第二个_parent指的是yi这个MC的父级，也就是舞台。可以理解吗？

不理解的话，我打个比方来说。相对路径，这样来理解，有两天，我从家里出发去上学，在卖烧饼的地方停了一下，买了俩烧饼，又在卖哇哈哈牛奶的地方停了一下，买了瓶爽歪歪，吃着走着到了公司，走到办公室门口，一摸兜，发现钥匙不见了。这时，我们会如何去找呢？

对了，赶紧原路返回，在卖爽歪歪的地方找找，没有，再去卖烧饼的地方找找，也没有，再回来，发现昨天晚上回家时裤子被小强咬了一个碗口大的大坑，而钥匙就在帽子上挂着。

在整个举例里，我们可以把我晚上得遇到变成一个完整的FLASH影片，而钥匙、家、烧饼铺、爽歪歪铺、公司，当成一个个得电影剪辑，因为我们不确定钥匙是忘家里了还是掉路上了，所以要返回一个一个的寻求。（相对路径）而即使确认在家里的话，就可以往家里打电话，让小强直接给我送来。（绝对路径）

这样理解吗？如果还不理解，那唯有使出我最终得杀手锏了。

舍弃相对路径不用，只用绝对路径......

比如在1后面的2里面的3里面的4里面的5这个按钮，想控制3里面的6这个电影剪辑，用绝对路径代码要如何写？自己反思一下吧。

最后，我想你们必须注意到了，“.”出现的太经常，它做哪些用得？这个，如果硬要用英文翻译的话，你就理解成“的”吧。

FLASH的模式就提到这里，下面，我们接着为图标添加代码，“第二章”的代码如下：

on(release){

_root.gotoAndStop("erzhang");

}

on(rollOver){

_root.er_mc.gotoAndPlay(2);

}

on(rollOut){

_root.er_mc.gotoAndPlay(10);

}

因为只改动了一个帧标签跟MC的例子名称，其它的都不需要再改动，所以可以直接复制“第一章”的代码过去，然后设置一下帧标签跟实例名称就可以了。

依次类推，把所有得按钮代码都加上去。好了，到此处就完成了，我们可以在内容层的几个关键帧上轻易添加一些内容测试一下看看效果。

这一环节，我们来学习FLASH的一种特效——遮罩，它的功能是可以使FLASH只显示我们指定的个别，其余部分完全看不到。这是个更强大的效果，如果利用得当得话，能做出这些炫目的特效。好了，开始。

【第十七步】：打开我们之前制作的源文件，但愿你都成功的保存了，否则只有重头来做。在“导航效果”层上方新建一个图层，命名为：“遮罩”。

解除“界面”图层的锁定，选中那个红色的边框线，复制，然后单击“遮罩”层的第一个关键帧，ctrl+shift+v黏贴到当前位置。还把“界面”层锁定，选中遮罩层的边框线，因为它是个红色跟黑色线框的组合，我们今天只必须一个就行了，所以要打散一下，ctrl+b打散后，删除掉一个，留下得一个再执行一次打散命令，这样它就可以直接在表演上编辑了。

看下图，打散成这种后，我们就可以再矩形框里进行填充了。

【第十七步】：点击工具栏里的“填充工具”，颜色随意，在圆形框旁边点击一下，然后我们再双击矩形的边线，删除掉，我们即使填充就可以了。好了，现在你必须提到一个矩形，把导航图标全部覆盖住了。如下图：

到此处，我们的遮罩就制作好了，下面是关键的方法了。我们在“遮罩”层上单击右键，然后选择“遮罩层”，如下图图示：

点击后你会看到，“遮罩”层跟后面得“导航效果”层中间得图标变了，这两个图标得意义说明了人们之间得关系，上面的是遮罩，下面的是被遮罩。打个比方来说，小强站在一间屋子里面，门开启后，他只好看着门前面的东西，其它地方的看不到，在这里，遮罩就像这扇门，被视口的遮罩就像屋子里得所有东西。这样需要很容易理解了吧？

好了，现在测试一下影片，再把鼠标移到导航图标上去，看看效果是不是好多了。

遮罩的原理只要理解了，其实可以变幻出这些特殊效果出来，同时，遮罩层也可以变成动画，例如做成一个百叶窗打开的效果，做成无数碎点组合而成的效果之类，但是有一点要记住，遮罩层一定要是矢量图形，否则遮罩不起效果。复杂些的遮罩效果制作在制作课件内容的之后会提到，今天，只要求你们理解遮罩的机理，并可做出简单的遮罩效果就行了。

今天得内容不多，主要是因为遮罩这项功能实在很重要了，大家一定要熟悉熟悉再熟悉，多做起来几个不一样的，直到熟练运用为止。

最后，我们顺便也把关闭按钮的代码添加上吧，解除“界面”层的锁定，选中关闭按钮，打开“动作”面板，输入下面代码进去：

on(release){

fscommand("quit");

//当键盘指针松开，关闭课件

}

这里按钮经过、按下的效果我就不再制作了，前面已经对按钮的编辑做了具体的讲解。大家既然想使按钮很炫目一些，可以自行更改编辑，另外有一点说明，除了文字类得还要添加“点击”区域，其它的例如圆形，方形之类的就不需要了，除非你有一些特殊要求，因为文字不仅笔画之外有很多空白的地方，做成按钮后即使不添加“点击”区域的话，那么这个按键只有当键盘移动到笔画上时才可以点，这样更不便于，而完全实心的就没这个问题了。