Flash导航教程，如何制作交互式导航菜单？-建站教程-锦华智联科技

Flash/Animate 导航菜单教程

本教程将教你如何创建一个专业、现代且具有吸引力的导航菜单，我们将涵盖以下几个核心部分：

（图片来源网络，侵删）

准备工作： 界面介绍和文档设置。
第一步：创建静态按钮。 导航菜单的基础。
第二步：为按钮添加交互。 让按钮能够响应鼠标事件。
第三步：制作动态下拉菜单。 创建更复杂的导航结构。
第四步：添加高级效果。 包括悬停动画、点击反馈和声音。
第五步：整合与发布。 将菜单放入主场景并导出。

准备工作

软件界面认识

打开 Adobe Animate (或旧版的 Adobe Flash Professional)，你会看到几个关键面板：

舞台: 你进行创作和预览的主要区域。
时间轴: 控制动画和对象播放顺序的核心，它由图层和帧组成。
属性检查器: 选中对象后，在这里可以修改其各种属性（位置、大小、颜色等）。
库: 存储你创建的所有元素，如影片剪辑、按钮、图形等，方便重复使用。

新建文档

打开 Animate，选择 文件 > 新建。
选择 ActionScript 3.0 文档（这是目前最常用和推荐的模式）。
在 属性 面板中设置舞台尺寸，800 x 600 像素，背景色为你喜欢的颜色。
将文件保存为 navigation_menu.fla。

第一步：创建静态按钮

一个按钮在 Flash 中是一个特殊的元件，它有四种不同的状态。

创建按钮元件
- 按 Ctrl + F8 (或 Cmd + F8 Mac) 打开“创建新元件”对话框。
- 输入名称,myButton。
- 选择 “按钮” 类型，然后点击“确定”。
编辑按钮的四个状态
（图片来源网络，侵删）
- 进入按钮的编辑界面后,你会看到时间轴上有四帧，分别代表：
  - 弹起: 按钮的默认、未交互状态。
  - 指针经过: 鼠标悬停在按钮上时的状态。
  - 按下: 鼠标在按钮上按下时的状态。
  - 点击: 定义按钮的响应区域（这个帧通常只画一个矩形，不显示任何内容）。
设计按钮外观
- 弹起帧:
  - 选中 弹起 帧，按 F6 插入一个关键帧。
  - 使用 矩形工具 在舞台上画一个圆角矩形，并填充颜色。
  - 使用 文本工具 在矩形上输入文字，如“首页”。
- 指针经过帧:
  - 选中 指针经过 帧，按 F6 插入一个关键帧。
  - 修改这个帧上的内容,改变矩形的颜色、给文字加粗或者添加一个简单的光晕效果。
- 按下帧:
  - 选中 按下 帧，按 F6 插入一个关键帧。
  - 设计一个被“按下”后的效果，比如让矩形看起来稍微“压扁”一点，或者改变文字颜色。
- 点击帧:
  - 选中 点击 帧，按 F6 插入一个关键帧。
  - 画一个比按钮视觉区域稍大的、完全覆盖按钮的矩形（可以填充任意颜色，因为这一帧在最终发布时是看不见的），这确保了用户即使没有点中文字中心，只要点在按钮区域内，按钮也能响应。
返回主场景
- 点击左上角的场景名称（如 场景 1），回到主舞台。
将按钮放入舞台
- 打开 库 面板 (Ctrl + L)。
- 将你刚刚创建的 myButton 元件拖拽到舞台的合适位置。

第二步：为按钮添加交互（链接到网页）

我们的按钮还只是一个“摆设”，需要为它添加代码来执行操作，比如点击后打开一个网页。

（图片来源网络，侵删）

选中按钮
- 在主舞台上,你刚刚拖入的 myButton 实例。
- 打开动作面板 (F9)。
编写 ActionScript 3.0 代码
- 确保你的按钮实例被选中,然后在动作面板中输入以下代码：
```
// 为按钮添加点击事件监听器
// 当按钮被点击时，执行后面的函数
myButton.addEventListener(MouseEvent.CLICK, onButtonClick);
// 定义点击事件触发的函数
function onButtonClick(event:MouseEvent):void {
    // 使用 navigateToURL 函数打开网页
    // new URLRequest("http://www.google.com") 指定了要打开的URL
    navigateToURL(new URLRequest("http://www.google.com"), "_blank");
}
```
- 代码解释:
  - addEventListener: 给对象添加一个“监听器”，让它时刻准备着某个事件的发生。
  - MouseEvent.CLICK: 指定监听的事件是“鼠标点击”。
  - onButtonClick: 当事件发生时，要调用的函数名称。
  - navigateToURL: Animate 的一个内置函数，用于打开一个URL链接。
  - "_blank": 表示在新的浏览器窗口中打开链接。
测试按钮
- 按 Ctrl + Enter (或 Cmd + Enter Mac) 测试影片。
- 当你将鼠标移到按钮上时,应该会看到你在“指针经过”帧设计的样式。
- 点击按钮,浏览器应该会打开你指定的网址。

第三步：制作动态下拉菜单

导航栏通常包含下拉菜单,我们可以用“影片剪辑”来制作下拉菜单，然后用按钮来控制它的显示和隐藏。

创建下拉菜单的影片剪辑
- 按 Ctrl + F8，新建一个名为 dropDownMenu 的 “影片剪辑”。
- 在影片剪辑的时间轴上创建两个图层：actions 和 menu。
- 在 menu 图层上，绘制一个背景，并创建几个子菜单按钮（使用我们第一步创建的 myButton 元件）。
- 在 actions 图层的第1帧，添加代码：stop();，这确保影片剪辑不会自动播放。
制作下拉动画
- 在 menu 图层上，在第10帧按 F6 插入关键帧。
- 在第1帧,将整个菜单向上移动，使其完全隐藏在主按钮下方。
- 在第10帧,将菜单移动到正确位置。
- 在第1帧到第10帧之间,右键点击，选择 “创建传统补间动画”，这样就有了平滑的下拉效果。
添加反向动画
- 在第20帧按 F6 插入关键帧。
- 在第10帧到第20帧之间,再次创建传统补间动画，将菜单移回隐藏位置。
- 在第20帧添加代码：stop();。
在主场景中整合
- 回到主场景。
- 从库中拖入一个主按钮（如“产品”）。
- 再拖入一个 dropDownMenu 影片剪辑实例，把它放在主按钮下方。
- 给 dropDownMenu 实例命名一个实例名，myDropDown。

编写控制代码

选中主按钮（“产品”），打开动作面板，添加以下代码：

// 鼠标悬停时，播放下拉动画（从第1帧到第10帧）
myButton.addEventListener(MouseEvent.MOUSE_OVER, showMenu);
function showMenu(event:MouseEvent):void {
    myDropDown.gotoAndPlay(1);
}
// 鼠标移出时，播放收起动画（从第10帧到第20帧）
myButton.addEventListener(MouseEvent.MOUSE_OUT, hideMenu);
function hideMenu(event:MouseEvent):void {
    myDropDown.gotoAndPlay(10);
}

测试： 现在当你鼠标移到“产品”按钮上时，下拉菜单会平滑出现；移开时，它会平滑收起。

第四步：添加高级效果

让你的导航栏更炫酷。

悬停动画效果

不要只在“指针经过”帧改变颜色，可以制作更复杂的动画。

在按钮元件的 指针经过 帧插入关键帧。
在该帧上,为按钮元素（如线条、色块）创建一个简单的补间动画，比如放大、旋转或改变透明度。

点击反馈

当用户点击一个导航项时,可以改变整个导航栏的样式来提示“当前所在页面”。

在主场景中,为每个导航按钮（如“首页”、“关于我们”）创建实例。
给它们分别命名实例名,如 homeBtn, aboutBtn。

为每个按钮添加点击事件,当 homeBtn 被点击时，除了跳转链接，还执行以下代码：

homeBtn.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
    // 1. 跳转
    navigateToURL(new URLRequest("home.html"), "_self");
    // 2. 改变按钮样式表示“激活”状态
    homeBtn.gotoAndStop("active"); // 假设你在按钮元件里有一个名为 "active" 的帧
    aboutBtn.gotoAndStop(1); // 重置其他按钮
});

你需要在按钮元件中额外创建一个名为 active 的关键帧，设计一个“当前页面”的样式。

添加声音

准备一个简短的音效文件（如 .mp3 或 .wav）。
将其导入到库中 (文件 > 导入 > 导入到库)。
在库中右键点击声音文件,选择 “链接...”。
勾选 “为 ActionScript 导出”，并给一个类名，buttonClickSound。

在按钮的 按下 帧添加代码：

// 在按下帧上
var sound:buttonClickSound = new buttonClickSound();
sound.play();

第五步：整合与发布

整合到主场景
- 将你制作好的所有按钮（包括主按钮和下拉菜单）整齐地排列在舞台顶部，形成完整的导航栏。
- 可以将导航栏的所有元素放在一个单独的图层中。
发布设置
- 在发布前,可以检查 文件 > 发布设置。
- 格式: 确保勾选了 Flash (.swf) 和 HTML (.html)。
- Flash: 可以设置版本、加载顺序等。
- HTML: 可以设置模板、页面标题等。
发布
- 按 Ctrl + Shift + Enter (或 Cmd + Shift + Enter Mac) 进行发布。
- Animate 会在你的 .fla 文件同目录下生成一个 .swf 文件和一个 .html 文件。
- 用浏览器打开那个 .html 文件，你就可以看到并测试你的最终导航栏了。

总结与进阶

通过以上步骤,你已经掌握了创建一个功能完整的 Flash/Animate 导航菜单的核心技术，从基础的静态按钮到复杂的动态下拉菜单，再到交互和音效，这是一个循序渐进的过程。

进阶方向：

使用 ActionScript 类: 将导航栏的逻辑封装到一个独立的 .as 文件中，使代码更清晰、更易于管理和复用。
动态加载内容: 使用 Loader 类来加载外部的 SWF 文件或图片，实现单页应用的导航效果。
响应式设计: 虽然 Flash 时代已过，但 Animate 现在支持发布为 HTML5 Canvas，你可以研究如何使用 Animate 的现代功能来创建适应不同屏幕尺寸的导航。

希望这份详细的教程能帮助你顺利上手！祝你创作愉快！