今天给大家介绍一下央视网站的一个 Flash 导航菜单的制作方式，实现起来异常简朴，只用到最基本的动画效果和简朴的 Action Script（动作脚本 AS） ，但是效果异常不错。

　　一、舞台的修饰

　　运行Flash(这里用的是 Flash MX 英文版，文中会尽量给出具体的中英文对照)，打开Document Properties(文档属性)对话框（快捷键 Ctrl+J），设置宽高为 419px 和 246px、帧速为默认值12fps、背景色为 #FFC318，与背景图片的背景色一样，确定后返回场景编辑界面。

　　将预备好的图片导入，菜单:File(文件)-->Import...(导入) 打开Import(导入)对话框，选择已经预备好的几幅图片（可以多选），按打开按钮导入。

　　注重：假如出现下面的对话框说明导入的图片是按一定规律命名的，单击是将导入所有按规律命名的图片，单击否导入选中的图片，单击取消不导入任何图片。

（图1）

　　所有图片导入完成后都将被放置在场景中，将其他图片从场景中删除，只留下用作背景的图片。不用担心，删除的图片还保留在库(Library)中，以后会用到他们。选中背景图片后打开Aligh（排列）面板（如下图）（快捷键 Ctrl+K）,按下 To Stage 按钮 以适应舞台，分别单击按钮 和 使图片在舞台中居中。

（图2）

　　新建一个图形(Graphic)符号（快捷键 Ctrl+F8）,命名为Line_g，确定后进入编辑状态；选择 Line Tool （画线工具 N）,画一竖线，在属性面板中修改属性，设置高为246px（与 Flash 同高）、坐标为(0,0)，颜色比背景色略深、样式设置为点线(如图所示)；再画一线，高度为25（与将要制作的按钮高度一样），颜色为白色，坐标(0,110)（与前一条线重合，底部对齐），其他属性保持默认。

（图3）

　　返回舞台(Ctrl+E)，按新建层按钮 新建两层，将最上层命名为Lines,最下层命名为Back（背景层，已放置好了背景图片），中间层命名为Buttons,锁定 Back 层以免在编辑其他层时误修改了背景图片。

（图4）

　　选择Lines层，打开 Library （库 Ctrl+L），将符号 line_g 拖入场景中，设置横坐标为54（按钮宽度），纵坐标按舞台居中；在舞台中再复制出6个 line_g （共7个），选择一条，设置横坐标为378（54*7），Ctrl+A 选中舞台中所有的符号（因背景层被锁定，所以背景图片不会被选中），单击排列面板中的 To Stage 按钮 取消其按下状态，单击按钮 使符号具有一样的间距，将 lines 层锁定。

　　这样舞台就修饰好了。

　　二、主要动画效果的实现

　　新建一个 MC 命名为 pics_m，用来存放所有按钮中的图片以便制作 MC 的嵌套。

　　按 F6 插入6个要害帧（共7帧），每帧放入一幅图片，并设置图片坐标为(0,0)；再新建一个 MC 命名为 Move_m ，将 pics_m 拖入备用，同时在属性面板中将其 Inatance Name 命名为 pic 以便以后用AS进行控制（图5），并将该层命名为 pic。

（图5）

　　新建一层命名为 Mask，利用 Rectangle Tool (矩形工具 R)在该层画一矩形，在属性面板中设置其宽为54（与按钮一样），高221（与图片的高一样），坐标(0,0)；用鼠标拖拽图片 MC 的右上角至矩形的右上角四周，出现 图6 所示的符号（自动捕捉）松开鼠标即可，选中 Timeline (时间线) 中 pic 层的第37帧，按 F6 插入要害帧，按 F9 弹出 Action 面板，按 Ctrl+Shift+E 转变到可以自由输入脚本的专家模式，输入 stop() 动作；然后按上面类似的方式，拖动图片 MC 的左上角至矩形的左上角进行自动捕捉。

（图6）

　　右键单击pic层前面的帧，在弹出菜单中选择第一项 Create Motion Tween （创建动画 图7）。

（图7）

　　选中 pic 层第10帧，按 F6 创建要害帧；回到第一帧，选中编辑区中的 MC ，在属性面板中设置 Color Styles （样式）为 Alpha（透明），数值为1%（图8），这样一个淡入并移动的动画就制作完成了。

（图8）

　　再选择 Mask 层的第37帧，按 F5 创建内容帧，右键单击 Mask 层，选择弹出菜单中的 Mask 将该层设置为遮罩层，完成后如图9。

（图9）

　　三、按钮的制作

　　首先制作按钮 OVER 帧中要用到的 MC：新建 MC 命名为 btn_mc_1；将 move_m 拖入，设置坐标(0,0)；在 Action 面板中输入下面的 AS:

onClipEvent (load) {
　　pic.gotoAndStop(1);
//使 pics_m 停在第一帧，以显示第一幅图片
}

　　 选择矩形工具，画一矩形，删除边线，设置属性为：宽54，高25，颜色#FFA600；选择矩形，按 F8 转变为图形符号，命名为 btn_back备用；保持 btn_mc_1 的编辑状态，利用自动捕捉的方式，将刚刚创建的矩形符号的左上角与 move_m 的坐下角对齐；设置矩形符号的 Color Styles 属性为 tint 选择一种颜色 （图10），完成后入如 图11 所示。

（图10）（图11）

　　 然后在 Library （库）中右键单击 btn_mc_1 选择弹出菜单中的 Duplicate (复制)弹出 Duplicate Symbol (复制符号)对话框，将名称改为 btn_mc_2，进入 btn_mc_2 的编辑状态，将 move_m 的 Action 的 pic.gotoAndStop(1); 改为 pic.gotoAndStop(2);，btn_back 改为另一种颜色；以此类推再制做出 btn_mc_3 -- btn_mc_7。这样所有按钮的动画就制作完成了。

　　 下面来制作按钮：新建 Button （按钮）符号，命名为btn_1;将 btn_back 拖入编辑窗口中，将其左下角与窗口中的小十字对齐；选中 Hit （按钮响应区域）帧按 F7 创建空白帧，用矩形工具画一矩形，宽54，高246（动画的高），也将其左下角与窗口中的小十字对齐，将该层命名为 back；新建一层命名为 movie 选中 Over 帧按 F6 创建要害帧，将 btn_mc_1 拖入，左下角与窗口中的小十字对齐，选中该层的 down 和 hit 帧，按 Shift+F5 将其删除；新建一层命名为 text ，选择 Text Tool （文字工具 T）在窗口中单击，输入导航文字，在属性面板中设置字号为12，勾选 Use Device Fonts 选项（图12）使字体更清楚（发布后会看到效果）。

（图12）

　　这样第一个按钮就制作完成，按照刚才制作 btn_mc_2 ～btn_mc_7 的方式同样复制出 btn_2 ～ btn_7，需要修改的是导航文字和 over 帧 MC。

　　修改文字不必说了，需要说明的是更换 over 帧 MC 的方式，以 btn_2 为例：双击 Library (库)中的 btn_2 进入编辑状态，选择窗口中的 movie　层的 MC 符号，单击属性面板中的 Swap... （交换）按钮，弹出 Swap Symbol （交换符号）对话框，将其更换为相应的 MC 即可( btn_1 对应 btn_mc_1，以此类推)。

　　四、动画的完成

　　回到舞台，选中 buttons 层，将制作好的 btn_1～btn_7 拖入，并按效果中的样子摆放好，可以利用前面提到过的排列面板。

　　现在这个美丽的导航菜单就制作完成了，从这个例子中我们可以看到，只要创意好，即使最简朴的动画也能实现很美丽的效果。