Flash菜单制作教程，难不难学？-建站教程-锦华智联科技

本教程将带你从零开始，使用 Adobe Animate 和 ActionScript 3.0 制作一个基础但功能完善的交互式菜单。

（图片来源网络，侵删）

Flash/Animate 交互式菜单制作教程

第一部分：准备工作与目标

软件准备：确保你已安装 Adobe Animate (CC 2025 或更高版本均可)。
目标菜单：我们将制作一个常见的导航菜单，包含以下功能：
- 菜单项垂直排列。
- 鼠标悬停时，菜单项会高亮显示（放大、改变颜色）。
- 点击菜单项,会在输出面板中打印出对应的名称。
- 点击菜单项，可以跳转到指定的网页（URL）。

第二部分：创建菜单元素

步骤 1：新建文档

打开 Adobe Animate。
选择 文件 > 新建。
在“新建文档”窗口中，选择 ActionScript 3.0，然后点击“确定”。（非常重要！ActionScript 2.0 的语法完全不同）。

步骤 2：绘制菜单项

选择左侧工具栏的 矩形工具。
在舞台上绘制一个矩形，作为菜单项的背景,可以设置一个你喜欢的颜色。
保持矩形被选中的状态，打开右侧的属性面板。
在 实例名称 输入框中，为这个矩形命名，我们命名为 menuItem1。实例名称是 ActionScript 识别这个对象的关键！
选中矩形，按 Ctrl + D (Windows) 或 Cmd + D (Mac) 复制一份,将复制的矩形向下移动一些距离。
选中第二个矩形，在属性面板中将其 实例名称 改为 menuItem2。
重复此操作，创建第三个菜单项，并命名为 menuItem3。

步骤 3：添加菜单文本

选择左侧工具栏的 文本工具。
在第一个矩形 menuItem1 上方输入文字，首页”。
同样，为 menuItem2 和 menuItem3 分别添加“关于我们”和“联系方式”的文字。

你的舞台应该看起来像这样：

第三部分：编写 ActionScript 代码

这是让菜单“活”起来的关键部分。

步骤 1：打开动作面板

点击时间轴上 图层 1 的第一帧（也就是唯一的一帧）。
按下快捷键 F9，或者点击顶部菜单 窗口 > 动作，这将打开动作面板。

步骤 2：编写悬停效果代码

我们将为每个菜单项添加鼠标悬停和离开时的事件监听器。

在动作面板中,输入以下代码：

// 为 menuItem1 添加事件监听
menuItem1.addEventListener(MouseEvent.ROLL_OVER, onMenuItemOver);
menuItem1.addEventListener(MouseEvent.ROLL_OUT, onMenuItemOut);
// 为 menuItem2 添加事件监听
menuItem2.addEventListener(MouseEvent.ROLL_OVER, onMenuItemOver);
menuItem2.addEventListener(MouseEvent.ROLL_OUT, onMenuItemOut);
// 为 menuItem3 添加事件监听
menuItem3.addEventListener(MouseEvent.ROLL_OVER, onMenuItemOver);
menuItem3.addEventListener(MouseEvent.ROLL_OUT, onMenuItemOut);
// 定义鼠标悬停时要执行的函数
function onMenuItemOver(event:MouseEvent):void {
    // event.target 指向触发事件的那个对象（menuItem1）
    // scaleX 和 scaleY 控制对象的缩放，1.2 表示放大到 120%
    event.target.scaleX = 1.2;
    event.target.scaleY = 1.2;
}
// 定义鼠标离开时要执行的函数
function onMenuItemOut(event:MouseEvent):void {
    // 将对象恢复原始大小
    event.target.scaleX = 1.0;
    event.target.scaleY = 1.0;
}

代码解释：

addEventListener(): 为一个对象（如 menuItem1）添加一个“监听器”，等待某个事件（如 MouseEvent.ROLL_OVER）发生。
MouseEvent.ROLL_OVER: 当鼠标指针移到对象上时触发。
MouseEvent.ROLL_OUT: 当鼠标指针移出对象时触发。
function onMenuItemOver(event:MouseEvent):void: 定义一个函数，当 ROLL_OVER 事件发生时,这个函数就会被执行。
event.target: 这是一个非常重要的概念，它代表了当前触发事件的具体菜单项，这样我们就可以用一套代码控制所有菜单项,而不需要为每个项都写一遍。
scaleX, scaleY: 修改对象的水平和垂直缩放比例。

步骤 3：编写点击效果代码

我们让菜单项在被点击时执行操作。

在刚才的代码下方,继续添加：

// 为每个菜单项添加点击事件监听
menuItem1.addEventListener(MouseEvent.CLICK, onMenuItemClick);
menuItem2.addEventListener(MouseEvent.CLICK, onMenuItemClick);
menuItem3.addEventListener(MouseEvent.CLICK, onMenuItemClick);
// 定义点击时要执行的函数
function onMenuItemClick(event:MouseEvent):void {
    // 获取被点击菜单项的实例名称
    var clickedName:String = event.target.name;
    // 使用 trace() 在输出面板中打印信息，方便调试
    trace("你点击了: " + clickedName);
    // 根据不同的菜单项执行不同的操作
    switch(clickedName) {
        case "menuItem1":
            // 使用 navigateToURL 打开一个网页
            // 需要导入 flash.net 包
            var url1:URLRequest = new URLRequest("https://www.google.com");
            navigateToURL(url1, "_blank"); // "_blank" 在新标签页中打开
            break;
        case "menuItem2":
            var url2:URLRequest = new URLRequest("https://www.github.com");
            navigateToURL(url2, "_blank");
            break;
        case "menuItem3":
            var url3:URLRequest = new URLRequest("https://www.bilibili.com");
            navigateToURL(url3, "_blank");
            break;
        default:
            // 如果点击的不是我们预设的项，可以什么都不做
            break;
    }
}

代码解释：

MouseEvent.CLICK: 当鼠标在对象上单击时触发。
event.target.name: 获取被点击对象的 实例名称（如 "menuItem1"）。
trace(): 一个调试函数，会将括号内的内容输出到 Animate 的“输出”面板中。
switch...case: 一个条件判断结构，根据 clickedName 的值来执行不同的代码块。
URLRequest: 一个 URLRequest 对象，用于指定要打开的 URL 地址。
navigateToURL(): 一个函数，用于在浏览器中打开指定的 URL。注意： 这个函数在 Flash/Animate 中用于测试，但要在网页中正常工作，通常需要配合 JavaScript（使用 ExternalInterface）。

第四部分：测试你的菜单

按下快捷键 Ctrl + Enter (Windows) 或 Cmd + Enter (Mac)。
Animate 会编译你的影片,并在一个新的播放器窗口中打开它。
将鼠标移动到菜单项上,你应该能看到它们放大了。
将鼠标移开,它们会恢复原状。
点击菜单项，系统会默认用你的默认浏览器打开对应的网页，切换回 Animate 窗口，查看“输出”面板，你应该能看到 trace 打印出的信息。

第五部分：优化与进阶

使用影片剪辑：更专业的做法是，将每个菜单项（包括矩形和文本）组合成一个 影片剪辑，然后为这个影片剪辑设置实例名称，这样做的好处是代码结构更清晰，也更容易添加动画效果（如悬停时的淡入淡出）。
动态创建菜单：如果菜单项很多，一个一个地在舞台上创建会很麻烦，你可以使用 ActionScript 的 for 循环来动态创建菜单项，这对于从数据源（如 XML、JSON）加载菜单尤其有用。
添加声音效果：可以为鼠标悬停或点击添加音效,增强用户体验。
使用 JavaScript 通信（网页部署）：当你的动画被嵌入到 HTML 页面中时，navigateToURL 可能会被浏览器安全策略阻止，更可靠的方法是使用 ExternalInterface 与页面上的 JavaScript 通信，让 JavaScript 来完成页面跳转。

// 在 AS3 中调用 JavaScript
import flash.external.ExternalInterface;
// 在点击事件中
ExternalInterface.call("window.open", "https://www.google.com", "_blank");

然后在你的 HTML 页面中需要确保允许这种调用。

恭喜你！你已经成功制作了你的第一个 Flash/Animate 交互式菜单，这个教程涵盖了 ActionScript 3.0 事件处理的核心概念：事件监听器、事件对象和事件处理函数，这是所有交互式 Flash 内容的基础。

虽然 Flash 作为网页技术已经落幕，但它在游戏开发、动画制作和交互式内容创作领域的精神和技能，通过 Adobe Animate 和其他现代工具依然传承了下来,希望这个教程能帮助你打开交互式创作的大门！