第二章　FLASH入门动画

第十五节　弹出式菜单

前面第八、九两节中我们学习了按钮的做法，这一节我们来实践一下，通过按钮和电影片断的结合，来做一个简单的弹出式菜单。菜单具体的样子就如上面的Flash电影中导航条所示，点击导航条会向上弹出一个菜单，再次点击则收回菜单。 要制作这样一个菜单，我们首先来制作一个按钮。新建一个Flash文件，按Ctrl-M将背景颜色设置为蓝黑色，如上图所示。用矩形工具选一个能与背景分得开的颜色绘制一个矩形框，大小如上面的导航条。用文字工具在这个矩形框中选用合适的字体，字号和颜色写下“导航服务”四个字，然后用鼠标或键盘上的方向键把文字移动到矩形的中间位置。现在带文字的填充矩形应和上面的导航条差不多。用箭头工具拉出一个选取框把这个矩形套住，这样文字和矩形同时被选中。按下F8键，将它们转换成一个按钮，取名为Navigation Bar，将类型设为Button。这样我们就做好了一个按钮。 现在我们来查看一下这个按钮。按下Ctrl-L打开图库窗口，双击预览窗口中的按钮进入该图符的编辑画面。观察时间轴，如右图：发现转换成的按钮实际上只是把转换的内容添加到了第1帧也就是Up帧上。因为我们只是做一个简单的菜单，所以其它帧就暂时省掉不做。 然后，我们就利用这个简单的按钮把菜单的弹出和收回过程做成一个电影片断。按Ctrl-F8新建一个图符，起名为Menu，并将类型设置为Movie Clip。 进入该图符的编辑画面，把刚刚做好的按钮从图库预览窗口拖到编辑区中，现在我们就在电影片断中引入了一个按钮实例。 下面我们要为按钮实例加入一些动作，使得它能对鼠标事件做出一定的响应。双击此按钮实例，弹出实例属性对话框，选择Actions标签，进入动作设置窗口。现在我们不需要对Actions了解的很多，因为Actions属于Flash中相对较难的部分，与编程十分类似，利用它可以实现许多特效，以后我们会逐步介绍它的，在这里我们只涉及Actions最基本的一些应用。在没有设置动作的时候，Actions面板中是空的。点击新增动作，在菜单中选择On MouseEvent，用来设置按钮对哪些特定的鼠标事件作出响应。在右边的事件栏中选择Release，使它前面出现对号，这个设置意味着在鼠标释放时会有所响应。接下来我们要设置响应的方式，即在鼠标释放时要执行哪些操作。再点击，在菜单中选择Play。Play没有参数可以设置。设置好的结果应如下图所示。这样的设置表明在鼠标被释放时将会产生播放动作。

现在就让我们来制作将要播放的内容，也就是菜单的弹出和收回动画。我们在电影片断Menu的编辑窗口中，在刚设置好Actions的按钮实例下方用矩形工具拉出一个矩形来，让它的宽度与按钮实例的宽度一致，高度大约为一个菜单的高度。使用箭头工具选中这个矩形，用鼠标或方向键把这个矩形的上边线和按钮实例的下边线对齐重合。如果两者宽度不一致，适当放缩矩形作一调整。 这个矩形就是我们的菜单啦，下面我们就在这个菜单里填入一些可选项目，我在这里就把我主页上的栏目放上去了。选择文字工具，用适当的字体，字号和颜色先写出一个项目的内容来，譬如我先写“幸运鸟其人－版主介绍”，然后再写下一条，直到五条全部写完，这几条文字没有对齐不要紧，我们接下来就来调整它们之间的位置。

如上左图所示，这五条菜单项并没有对齐，而且之间的间距也不相等。我们首先选择箭头工具，按住Shift键，用鼠标依次点取这五条文本框，将它们全部选中，现在的状态如上右图所示。接下来，按Ctrl-K键打开对齐(Align)参数设置框，如下图所示。选择如图所示的设置，图中所示的对齐方式含意很明显，我就不多说了，有一点需要说明的是，这样选择以后，这几条文字框将具有相同的间距并左对齐。其中间距的大小是由起初最上和最下一条文字的位置决定的，五条文字在这个范围内平均分配间距，而向左对齐实际上是向起初位于最左端的文字对齐。

设置好对齐方式后，对齐的效果如下左图所示，我们发现虽然文字已经完全对齐了而且间距也合适，但是太偏左了，于是我们用方向右键把这五条文字向右移动到菜单中央，如下中图所示，现在我们的菜单内容就基本上做好了。为了更方便操作，我们用箭头工具拉出一个大框，把画面上所有的内容都框住，按Ctrl-G键把它们集合在一起，现在所有的内容做为一个整体出现，操作起来方便多了。用鼠标点一下菜单，发现选中的是整个菜单，如下右图所示。

菜单的形状和内容我们都已经做好了，现在我们来制作菜单弹出和收回的动画。在第5帧按F6生成一个关键帧，因为弹出的过程是向上的，所以我们需要在这一帧把菜单向上移动一段距离。移好后菜单的新位置与原来位置的关系是，新位置的菜单下面的那条边与原来位置导航条的下边重合。为了精确定位，我们可以采用第九节中说过的方法，在第5帧选中菜单按Ctrl-C复制，再按Ctrl+Shift-V将复制的菜单粘帖回原处，这时画面中会有两个菜单重合在一起，用键盘上的向上方向键移动当前选中的菜单，直到刚才说过的合适位置为止。选中原先那个未被移动的菜单，把它删除掉即可。 同样，我们在第9帧也按F6插入一关键帧，在这一帧菜单应完成收回过程，因此这一帧菜单的位置应与其初始位置相同，所以我们用鼠标左键选中第1帧，按Ctrl+Alt-C复制这一帧的内容，再点一下第9帧，按Ctrl+Alt-V把第1帧的内容粘帖到第9帧。 下面，我们为关键点之间加入运动渐变，分别双击第1帧和第5帧，在弹出的帧属性对话框中渐变标签下选Tweening为Motion。现在我们就做完了大半工作了，但是还有一些重要的步骤还没有做。我们希望在一次点击导航条时菜单弹出，再次点击时菜单收回，所以还需要对帧的属性做一些设置。双击第1帧，弹出帧属性对话框，选Actions标签，点号新增一个动作，选Stop，使得电影片断在这里停住。同样，在第5帧也把Actions设为Stop。在第9帧时，点号后选择Goto，则这时系统会自动设置Actions为Go to and Stop (1)，表示当播放到此帧时将跳转到第1帧并停止播放。设置好的时间轴应如下图所示：

下面我们来分析一下这样设置Actions的目的。首先第1帧设置为Stop，目的在于控制电影片断不会自动播放。因为导航条按钮的Actions设置为当鼠标释放时执行播放动作，所以在第1次按下导航条并释放时，将从第1帧开始播放电影片断，由于第5帧的Actions也是Stop，所以播放到这一帧时停止，这样就实现了一次点击导航条，菜单弹出并停住的过程。再次点击时，将从第5帧开始播放电影片断，由于第9帧的Actions设置为跳转到第1帧并停止，这样也就实现了菜单收回的动画。

现在我们的导航菜单完全做好了。回到主场景中，把电影片断Menu从图库预览窗口拖到舞台右下角，如上面Flash电影中的位置所示。然后在场景中加些文字或图片修饰一下。按Ctrl-Enter看一看效果，大家对这个菜单还算满意吧！ 如果还有什么不理解的地方，点这里下载源文件，回去多看看就明白了。

好好看一下哦!~

简单的讲就三个，一是经过，二是点击，三是弹起，在其相应的帧上按自己的爱好进行设置就行了