作者：未知 来源：未知 加入时间：2004-12-1

Flash 的组件共有影夹、按钮、图片三种类型，前面我们分别对它们进行了讲解，现在试着组合运用它们制作动态的网站导航条按钮。(详情请见 Resource 文件夹中的 Webbutton 文件)

一．制作思路

一共有两个按钮，分别是"菜单一"与"菜单二"；当鼠标移上按钮后字体由深蓝色变为绿色，同时弹出下层的动态菜单；动态菜单有自己的变化，先是由窄窄的一条线扩展成为按钮，然后按钮上的字逐渐显现；"子菜单一"完全显示后再弹出"子菜单二"。重点在第 (7) 点如何让多种组件协同作战。

二．制作步骤

1．演戏之前先搭好台子，通过 Modify(修改)/Movie(电影)命令，将场景的背景色改为蓝色。

2．现在开始安排演员即制作组件。这个动画需要哪些组件呢？既然是动态导航栏上的按钮，那么"菜单一"与"菜单二"两个主按钮不可或缺；鼠标移上主按钮后，弹出两个子菜单，那么还需要两个子菜单组件，由于子菜单组件不需要再引发出动作，所以不需要制作成按钮，图片(Graphic)属性就行了；由于鼠标移上主按钮时播放的是一段动画，因此两个主按钮的鼠标移上动作(Over)还需要两个影夹组件。最后还需要一个组件，作为"互动学校"首页的背景。

制作：

(1)．先制作背景组件(Symbol 1)，新建图片组件(Graphic)，然后在工作区上部输入"互动学校栏目构成"字样。字体下面画一无轮廓矩形，颜色稍浅一点。如图一：

图一

(2)．制作"菜单一"按钮(Symbol 2)。新建按钮组件(Button)，在 Up(一般状态)帧里面画一圆角矩形，Coner 设为 10 就行了，并在 Stroke (描边)面板上将轮廓宽度设为 2 ，轮廓色为深蓝色，填充色为白色，画出的矩形如图二：

图二

新建一层(Layer 2)，然后输入深蓝色字体"菜单一"，字体大小要合适，结果如图三：

图三

提示：输入字体不需要另建一层，新建一层的目的在于对字体进行大小调整时以免干扰层一的内容。

由于鼠标移上的动画还没做好，现在我们暂时将"菜单一"按钮放在一边，等动画做好后再放入按钮的 Over(鼠标移上)帧内。

(3)．制作"菜单二"按钮(Symbol 3)，由于它跟"菜单一"按钮只有字体的不同，其他都是一样的，所以我们直接进入"菜单一"按钮，按住 Shift 键同时选中两层，Edit(编辑)/Copy(拷贝)，然后进入"菜单二"按钮，Edit(编辑)/Paste(粘贴)，又一个"菜单一"图形出现了。选中字体工具(Text Tool)放到"菜单一"的字体旁边，会出现一个字体输入的提示框，选中"菜单一"字样并将其改为"菜单二"。如图四：

图四

同理，由于鼠标移上的动画还没做好，现在暂时不向此按钮的 Over(鼠标移上)帧放内容。点按 Scene 1(场景一)图标退出按钮组件的编辑。

(4)．新建一个图片组件作为"子菜单一"上的按钮(Symbol 4)。制作一个圆角矩形，并在矩形左边添加一条深蓝色线。具体设置请见第(2)点。结果如图五：

图五

(5)．新建一个图片组件用以放置"子菜单一"按钮上的字体(Symbol 5)。在制作时，最好先将刚才做好的按钮拉进工作区，然后再输入"子菜单一"字样并依据按钮大小进行调整，最后再将拉进来的按钮删了，该组件就只剩下字样了。如图六：

图六

提示：为什么不把"子菜单一"上的字体直接放到第(4)步来做？这是因为在动画播放过程中，先是按钮弹出的动画，紧接着才是字体显现的动画，它们隶属于不同的过程，因此有必要将它们制作成分开的组件。

(6)．现在来制作"子菜单二"(Symbol 6)。

由于"子菜单二"跟"子菜单一"不同，它的按钮与字体只有一个逐渐显现的效果，它们隶属于同一个过程，因此可以集中处理。前面已经制作好"子菜单一"按钮以及上面的字样，我们将它们直接拷贝过来，然后将按钮左边的横线删除，并在上部加入竖线。结果如图七：

图七

(7)．现在开始制作响应鼠标移入事件的按钮动画(Symbol 7)。

新建一个组件，属性设为影夹(Movie Clip)，进入工作区。

在这个动画中包含三个过程：鼠标移入"菜单一"后，"子菜单一"的按钮逐渐弹出；"子菜单一"弹出完毕后，"子菜单一"字样逐渐显现；"子菜单一"字样显示完毕后，"子菜单二"逐渐显现。

A．第一层的动画(Layer 1)：

我们按照动画的先后顺序进行制作：在第一层的第一帧，将 Symbol 4 放入，弹出动画将延续 15 帧，因此在第 15 帧插入关键帧(Keyframe)；所谓的弹出动画，只不过是 Symbol 4 组件由窄窄的一条竖线变成一个完整的按钮的过程，因此它属于缩放变形动画，我们只需要在第一帧将 Symbol 4 组件压缩成一条窄窄的竖线，然后创建一个动作就行了。

在进行缩放前，我们先把"洋葱皮"视图模式打开，以便进行多帧编辑：点按时间轴下面的图标，时间轴会变成如图八的样式：

图八

图八的时间轴上出现了两个圆圈，它们分别代表洋葱皮的起始帧与终止帧，凡是在这个范围内的帧都可在同时间进行显示。现在我们把右边的圆圈拉到第 15 帧，时间轴会变成如图九的样子：

图九

工作区中的内容也会有所变化，从第一帧到第十帧的内容全显示出来了。如图十：

图十

提示：洋葱皮模式的作用在上面说得很清楚，它主要是用来进行多帧编辑的工具，在进行起始帧与终止帧的元素精确定位时，它常常是必不可少的步骤。

光是洋葱皮模式还不够，我们在层面板上把此层改为"外框模式"，改变后层面板如图十一：

图十一

工作区中的内容也变了，只剩下各帧的轮廓图，如图十二：

图十二

前面我们也说过，组件有个注册点，它是缩放与旋转操作的参照点，因此有必要先改变 Symbol 4 的注册点再进行缩放。选中第一帧中 Symbol 4 组件，Modify(修改)/Transform(变形)/Edit Center(中心编辑点)，然后将注册点拉到与第十五帧左边起始位置的重合点上。同时清除从第 2 帧到第 15 帧的内容，因为它们的注册点不符合。完成后再重新在第 15 帧插入关键帧，此时所有帧的注册点都一致了。前面我们做的从第 1 帧到第 15 帧的过渡，只是用来进行原理解说，没有其他用处。如图十三：

图十三

提示：将第一帧的 Symbol 4 组件进行缩窄是不是非要改变注册点位置？你可以试着不改变，将它缩窄后再用鼠标将其拖到第 15 帧左边界上，这种效果也是一样的。

提示：如果没有"洋葱皮效果"与外框模式的支持，你能如此轻易地确定注册点位置吗？

现在将第一帧的 Symbol 4 尽量向左缩窄(Modify/Transform/Scale)，如图十四：

图十四

缩窄后，从第一帧向第十五帧创建动作，鼠标右键并在弹出菜单中选 Creat Motion Tweening(创建移动渐变)，如图十五：

图十五

B．第二层的动画(Layer 2)：

"子菜单一"的按钮图形显示完毕，现在该进行"字菜单一"字样(Symbol 5)逐渐显示的动画了。因为第一层按钮图形的显示动画在第十五帧停止，因此第二层字样显示的动画则应该从第十五帧开始。

选中第二层(Layer 2)的第十五帧，插入关键帧(Keyframe)，并将 Symbol 5 组件拖入工作区，注意其位置，要跟层一的按钮图形相得益章。如图十六：

图十六

想让你的字体动画延续多少帧？这里我们让其延续 13 帧，因此在第 28 帧处插入关键帧，如图十七：

图十七

现在回到第二层(Layer 2)的第 15 帧，并通过 Effect (效果)面板将其 Alpha (透明度)值改为 24% ，并创建从第 15 帧到 28 帧的动画，完成后时间轴如图十八：

图十八

C．第三层的动画(Layer 3)：

"子菜单一"的动画全部完成，现在该播放"子菜单二"(Symbol 6)逐渐显现的动画了。由于"子菜单一"全部动画延续了 28 帧，因此第三层的"子菜单二"动画从第 28 帧开始进行。

新建一层(Layer 3)并选中第 28 帧，插入关键帧(Keyframe)，并将 Symbol 6 拖入工作区。请注意它的位置，应该与前面两层的组件相适应。如图十九：

图十九

提示：应该在第一层将按钮背景也显示出来才能显示出按钮的外框来，因此应该将第一层的动画延续到第 28 帧。

我们要让"子菜单二"的动画延时 12 帧即 1 秒钟，因此在第 40 帧处插入关键帧，然后回到第 28 帧，通过 Effect (效果)面板将其 Alpha (透明度)值改为 10% ，如图二十：

图二十

创建从第 28 帧到第 40 帧的动画，完成后时间轴如图二十一：

图二十一

D．后期调整：

"子菜单二"显示完毕后并不是立即回到第一帧重新播放第一帧内容，而是有 5 帧的延迟展示，因此我们在第三层(Layer 3)的第 45 帧插入过渡帧(Frame)，完成后时间轴如图二十二：

图二十二

在整个动画中，Layer 1 与 Layer 2 的内容始终可见，因此回到第二层与第一层，并分别为它们插入第 45 帧的过渡帧，完成后时间轴如图二十三：

图二十三

"菜单一"的动画全部完成。

(8)．"菜单二"的动画制作：(Symbol 7 Copy)

明白了第 (7) 点的制作原理就可以很轻松地制作此类动画了，我们在此偷个懒，将菜单一的动画拷贝过来作为菜单二的动画，因此本组件的名字为 Symbol 7 Copy ，表示是 Symbol 7 的拷贝。如图二十四：

图二十四

(9)．现在把"菜单一"的动画拖到按钮中去：

进入"菜单一"按钮(Symbol 2)，在第一层(Layer 1)与第二层(Layer 2)的 Over(鼠标移上)帧里插入关键帧(Keyframe)，并将第二层的字体由蓝色变为绿色；然后新建一层用来放响应鼠标事件的动画，在 Layer 3 的 Over 帧里拖入"菜单一"的动画组件(Symbol 7)。如图二十五：

图二十五

(10)．现在把"菜单二"的动画拖到按钮中去：

进入"菜单二"按钮(Symbol 3)，并在 Over(鼠标移上)帧里将字体由蓝色改为绿色，再新建一层，同样将"菜单二"动画组件(Symbol 7 Copy)拖进 Over 帧。如图二十六：

图二十六

(11)．现在回到场景一(Scene 1)，将"互动学校"背景组件拖进工作区并调整其大小，最好能铺满工作区，如图二十七：

图二十七

(12)．最后将"菜单一"按钮(Symbol 2)与"菜单二"按钮(Symbol 3)拖到工作区内的合适位置并按 Ctrl+Enter 键进行测试。如图二十八

图二十八

三．总结

正如前面所说， Flash 制作有时只是各种组件的堆砌，因此无论多么复杂的动画，首先你就得将所需组件制作出来，然后根据不同需要进行安排。组件采用哪种属性是有讲究的，图片型组件(Graphic)重在展示，按钮组件(Button)重在响应鼠标事件，而影夹组件(Movie Clip)则重在自动播放一段预先做好的动画，三种组件常常互相套用。

常常有朋友问及如何制作 MTV ，相信有了前面的基础，大家应该能非常轻松地制作 MTV 了。首先将要用到的图片资料与音乐凑齐，然后将它们输入到 Flash 中并做成组件，最后再按照我们的意愿将它们通过时间轴与层组织起来就行了。

提示：正如上面的制作，如果你需要一幅图或一句歌词从哪一帧(即什么时候)开始，那就建一个层并在相应的帧插入关键帧，并将组件拖进去，然后辅以一定的变形、位移，或 Alpha 透明就行了。

提示：制作 MTV 是一个相当费时的过程，其中大部分时间在于处理音乐与组件同步的问题。以前的老办法是一句一句地听，然后将歌词组件或图片组件在合适的时间进行插入；现在有个新方法了，那就是去下载个 Lyric 软件，此软件能将每句歌词延续的时间标示出来，你可以根据 1 秒 12 帧的原理，决定哪一个组件该在哪一帧插入；饶是如此，要精确地控制它们的同步，你还是得费很多的时间。当然，如果你对此感兴趣可以试着做一下，有什么问题的话可以再看看上面的例子，相信应该可以解决了。

（出处：赛迪网）