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

在这章里，我们将学习按钮的具体制作过程、补间动画的制作过程或者借助按钮控制电影剪辑的AS代码。希望你们看到AS后不要头大，我们在制作FLASH课件时所使用到的AS并不多，可以说只是AS的冰山一角，所以很容易，如果你记不住AS代码跟格式，只应该把常用得AS保存下去，以后用到的过后稍加修改就成了。

下面开始，首先开启原先制作的图标文件，把界面图层锁定，新建一个图层，我们先用文本工具在图标的左上角输入课件的名称，我这里就用“flash课件制作全过程示例”了，说到这里，想起来之前好像忘了介绍文本软件的属性了，这里简单说下面，看下图：

A处是选用文本的属性，有静态、动态和输入之分flash课件模板制作系列教程之按钮导航(上)，前面已经看到过了。

B处是选用文字的图标，这里列举了你电脑上面所保存的所有图标，如果觉得不够用，可以从网上下别的字体安装。

C处是调整文字大小。

D处是文本的对齐方法。

E处点击后可以调整文字的行距、缩进等。

F处是调整文字方向的，有水平跟垂直。

G处是文字的显示效果，一般我们用动画消除锯齿。

H处是调整文字字间距的。

这些大家都可以调整一下看看能超过哪个效果。

好了，现在在图标的左下方输入版权信息，之后把这两个文本也转移到界面层得第一帧去。这个之后就不用编辑了。

好了，下面开始制作导航图标了，请你们打起精神，别漏掉任何细节。

【第一步】：先输入导航文字内容，并置于合适的位置，用“对齐”面板的功能将它们对齐。然后为她们添加一个发光滤镜。如图：

【第二步】：选择“第一章”文字，按下按键上得F8键，将它转换成按键元件，然后双击这个按键元件，将处于至元件的编辑界面。在FLASH里面，任何元件跟组合，都可以借助双击进入设置，看图：

上图在画面1上面我框选的“第一”就是我给按钮起的名称，显示这个，就表明这次是在按钮的编辑区域。下面是图标得时间线，它的时间线比较特殊，只有四帧，分别是：弹起、指针经过、按下跟点击，下面我分别进行解释。

弹起：是键盘指针不经过按钮时显示的状况。

指针经过：是指当鼠标指针移动至按钮上时，按钮显示的状况。

按下：是当你用鼠标单击图标时它显示的状况。

点击：这个是用来划分按钮的单击区域，就是当光标指针移到哪个区域可以点击这个按键。在这一帧上，你无论画任何东西，它都不会在FLASH里面显示出来。

好了，现在我们在“指针经过”那一帧插入关键帧，并将文字得色调修改成暗红色吧，然后在“按下”这一帧也插入关键帧，再把形状改成红色，文字向右和向左各移动一个像素。最后在“点击”处插入关键帧，用圆形工具画出一个矩形，大小刚好覆盖住文字就可以了。

如图：

【第三步】：现在来帮按钮添加声音效果，首先要找到一个是按钮声音素材，这些大家可以在网上下载，这里我就提供课件里用到的声音文件:点击这里下载

现在点击菜单项的“文件——导入——导入至库”，然后找到刚才下载的声音素材，双击导入到FLASH里面。

好了，现在我们点击指针经过哪一帧，然后开启属性面板，

如图，在声音选项里，我们选取刚才导入到声音，下面的“效果”一般是在编辑较长的声音文件时使用的，比如背景音乐，它可以使声音文件淡入和退出，较少用到。同步选项里的“事件”声音的涵义是，这个声音文件不受时间轴的约束，只要开始播放，除非关闭FLASH，否则就仍然播放完毕为止。按钮上的声音一定要用事件声音，另外，FLASH里面的声音只能添加到帧上，其它地方你想添加也添加不了。点开“同步”选项，会发现也有一种“数据流”格式声音，这种声音正好和“事件”相反，它受时间轴的约束，如果这个声音应该100帧播放完成，如果表演上没有足够的帧，它将只播放至时间轴的结束位置都会停止。这个之后必须添加其他声音的之后，需要按照实际状况来选取用那种，这里理解就可以了。

到此处，第一个按钮我们就做好了，下面的导航图标制作过程跟这个一样，这里就不再重复，大家进去时候一个一个的做起来，相信全部做完后，按钮的制作方式跟原理经常烂熟于心了。

【第四步】：只有那些按钮效果，感觉更加单调，我们再来为按钮再添加一些特殊效果，使它非常惊艳一些。现在我们重回主画面里去。点击“时间轴”上面的“场景1”，这样就跑到主画面里去了。

现在我们把现有的两个图层锁定，然后新建一个图层，命名为：导航效果，将“导航效果”层拖动放到“导航”层以下，这样做的目的是将文字层一直显示在更上面，在FLASH里面，每向上一个图层图层，那么以下跟它重叠的图层就会被覆盖。好了，在这一层上我们画出一个矩形出来，具体大小看下图：

这个矩形从“第一章”按钮的上线到以下的分割线为止，不需要很准确，大家可以自己看到绘制，绘制的之后最好把画面放大，这样可尽量准确一些，放大画面的快捷键是按住ctrl的同时，按下键盘上的“+”键，缩小是按“-”键。好了，绘制下来后，我们为它添加渐变色，就用红色吧，渐变滑块左边的色调值是：#442463，透明度79%，右边的颜色值：#9A8AAA，透明度18%，当然，这里我说的色彩值跟透明度都是参考值，你也可以自己调色。

好了，用“填充变形工具”把形状调整到后面的样子就可以了。做到这里你可能会问，为何边上多余出来很多，这里先卖个关子，做下来你就明白了。

【第五步】：下面我们要学习FLASH的颜色渐变动画了，请集中精神，仔细看。选中矩形，F8将它转换成影片剪辑，双击矩形，进入到影片剪辑的编辑界面，我们在第八帧处点击右键插入关键帧。

然后再点击图层1的第一帧，打开“属性”面板，如图：

补间选项选择“形状”，这时，在遮罩1的第一帧和八帧之间就已然形成图案渐变动画了。“形状动画”，顾名思义就是从一个颜色变换成另外一个形状的动画效果。比如你在图层1第一帧画一个圆，第十帧画一个正方形，然后创建颜色动画，那么从时间轴上的第二帧开始，就是一帧帧的漫画，动画内容就是一个圆慢慢的做成正方形。“形状动画”只能应用到能编辑的矢量图形上，另外一种补间是“动画”，只有将图形转换成元件后才会使用，这个之后再说。

另外，当选取“动画”或“形状”里的任意一项后，在“补间”选项的后面会有“缓动”设置，这里将缓动调为10。“缓动”只有正值和负值，极限大小分别为100和-100，当缓动值为0时，动画是匀速运动，当缓动值为100，动画效果是由快至慢，当缓动值为-100，动画效果是由慢至快。当做一些模拟物体运动的之后，经常会用到它，比如做皮球的弹跳效果等。我在制作课件的之后，几乎所有的动画效果都要用到“缓动”，这样会使动画效果富有张力。至于“补间”的涵义，大家可以理解成填补中间的空白的意思。

好了，现在我们来设置第一帧的颜色，点击时间轴上的第一个关键帧，然后选中矩形，打开属性面板，将圆形的高度设置成1，好了，现在回到时间轴上，点击第一帧，按下换行键，预览一下效果看看吧。

【第六步】：因为我们制作的效果是当键盘指针移动到按钮上的之后，导航背景MC播放起来，而移出后，它在反向播放直到消失。昨天我们只制作起来了指针移回去时的效果，现在我们来制作移出时的效果。

大家需要发现了，导航背景MC在舞台上只显示出来一条横向的直线，这是因为MC在表演上只显示第一帧的理由，我们今天双击这个MC，进入到它的编辑界面。然后单击点击第一帧，选择“复制帧”，如图：

然后在时间轴的第十六帧处，右键单击，选择“粘贴帧”，这样第十六帧处的矩形就跟第一帧处的一模一样而且处在同样的位置，好了，在第八帧和第十六帧中间任意点击下面，打开属性面板，补间里选择“形状”，缓动仍然是100。

因为我们想要的效果是当鼠标移到按钮上，它才显示，移出后，它会逐渐消失，所以第一帧必须是空白关键帧。我们在第十六帧处按住鼠标不放并往前拖动，直到把所有的帧全部选中，然后鼠标单击黑色部分，向后移动一帧，这时，在第一帧处会手动插入一个空白关键帧，如图：

到这里，影片剪辑就制作完成了，或许有同学会问，既然鼠标移出按钮后会消失，为什么最终一帧不插入空白关键帧呢？其实里面即使你认真看的话，就会了解到MC的特点来，它是一只不停的循环播放，在第一帧处，我们令它停止，当鼠标移动至按钮上时，我们令他播放到第八帧停止，当鼠标移出时，我们令它再次播放，直到第一帧处，因为此处添加至有中止播放的代码，所以它会再停止到此处，这就是一个循环。

【第七步】：现在开始添加控制代码，点击第一帧，打开“动作”面板，输入“stop();”,或是单击左边的“全局变量——时间轴控制——stop”，如图：

这个代码的含义就是，当时间轴播放到这一帧的之后，让它停止下来不在播放。如果有点英文基础，代码的涵义很容易理解flash课件模板制作系列教程之按钮导航(上)，但是格式千万不能错，否则在导出影片的之后会提示脚本错误。

好了，再点击时间轴上的第八帧，同样为它添加一个stop();的代码。到此处，这个电影剪辑就完全制作好了，我们重回场景里去。

【第八步】：现在，你在画面里早已看不到这个电影剪辑了，但是，在这个MC所在位置的左上角，会显示出一个黑框白底的圆，看下图：

我们可以借助点击它来选中这个MC，同时也可以双击这个圆进入到电影剪辑里。现在我们必须把它再复制下来八份，分别放到每个导航图标的左上面，但是，我们看不到它的最后效果，不太容易确认放的位置。这确实是个更难受的难题，最显然它使我最初的时侯头疼了一段时间，但是，后来还是想到了缓解的方法，我们可以先把这个MC转换成图形元件，然后固定显示某一帧的内容。嘿嘿，这是个很实用的小技巧，千万要熟练运用。否则会降低你的制作难度。

好了，现在我们点击这个圆，然后开启属性面板，看下图：

在A处选取“图形”，因为我们的MC是在第八帧完整显示出来的，所以B处改为“8”，好了，回车确定，再看看舞台上的MC，是不是就全部显示出来了。

【第九步】：按住alt和shift键不放，鼠标拖动复制下来八份，有人又要问了，为什么需要按住shift键？当然，你也可以不按，按住它是为了使复制下来的MC左右跟被复制至对齐。复制完成后就是下面这个样子。

或许有些细心的同学看起来了，复制下来的MC下面离分割线还有一段距离，这个没关系，我们可以用变形工具把拉伸其中的一个，拉伸至分割线的顶部为止，然后开启属性面板，看它的高度是多少，复制出来，然后把其他复制下来的MC的高度都设置成这个值就可以了。

好了，现在电影剪辑复制修改完了，我们就不需要再见到它了，把所有的MC框选，然后开启属性面板，还把他们改成“影片剪辑”。在FLASH里面，很多元件的属性是可以批量修改的，只要全部选中，打开属性面板就可以设置了，这样也省掉了我们非常大的一部分工作量。

【第十步】：现在，我们得帮这九个MC分别起个名字，还举导演的事例，如果你要使某位艺人登台表演，你总得叫他把，你总不能叫“喂，那个谁，你下台演某某某。”在FLASH里面同样，MC就像演员，想控制它，得首先给它命名。我们选中第一个MC，打开“属性”，

面板，看下图：

红线框选的部分就是给MC起名的地方，这里我帮它起了个“yi_mc”的例子名称，很多初学FLASH的同学会把案例名称跟库后面的元件名称搞混，这里做下表明，库后面的元件名称是为了便于你查找而随意起的，实例名称才是控制MC的关键，实例名称的名字规则是不能有英文，不能和flash的as代码冲突。

好了，下面分别为剩下的八个MC起例子名称，我这儿就是“er_mc”、“san_mc”.....“jiu_mc”了。