flash按钮代码教程

重要提示：Flash 的时代已经过去

在开始之前，请务知：Adobe Flash Player 已于 2025 年 12 月正式停用并被各大浏览器移除。 这意味着任何用旧版 Adobe Flash Professional (Animate CC 之前版本) 制作的 .swf 文件，在现代浏览器中将无法播放。

本教程主要面向以下人群：

1. 学习历史和经典技术：了解 Flash 在 Web 开发史上的地位和交互原理。
2. 维护旧项目：需要修改或理解多年前用 Flash 制作的网站。
3. 使用现代替代品：了解其交互逻辑，以便在当今的 Web 技术（如 HTML, CSS, JavaScript）中实现类似效果。

本教程将使用 ActionScript 3.0 (AS3)，这是 Flash 最主流、最强大的版本。

教程目录

1. 第一部分：制作一个简单的按钮
   • 1 创建按钮元件
   • 2 编辑按钮的四个状态
   • 3 将按钮放入舞台
2. 第二部分：为按钮添加最基础的代码 (AS3)
   • 1 使用时间轴代码（不推荐）
   • 2 使用外部/类代码（推荐）
3. 第三部分：深入理解按钮交互
   • 1 MouseEvent.CLICK 点击事件
   • 2 其他常用鼠标事件 (ROLL_OVER, ROLL_OUT, MOUSE_DOWN)
   • 3 动态改变按钮外观
4. 第四部分：高级功能示例
   • 1 跳转到另一个网页 (navigateToURL)
   • 2 控制动画播放 (gotoAndPlay)
   • 3 制作一个简单的“关闭广告”按钮
5. 第五部分：现代替代方案

第一部分：制作一个简单的按钮

在添加代码之前，你必须在 Flash (Animate) 中创建一个按钮。

1 创建按钮元件

1. 打开 Adobe Flash (Animate)。
2. 选择 插入 -> 新建元件 (或按 Ctrl+F8)。
3. 在弹出的窗口中，名称输入 MyButton，类型选择 “按钮”，然后点击“确定”。

现在你进入了按钮的编辑模式。

2 编辑按钮的四个状态

一个按钮有四个关键帧,分别代表不同的状态：

• 弹起: 鼠标不在按钮上时的默认状态。
• 指针经过: 鼠标悬停在按钮上时的状态。
• 按下: 鼠标在按钮上并按下时的状态。
• 点击: 这是按钮的响应区域，用于定义用户点击的有效范围，它通常是一个透明的矩形,覆盖在其他所有帧之上。

操作步骤：

1. 在 “弹起” 帧，用绘图工具（矩形、圆形等）画一个你想要的按钮外观,比如一个蓝色的圆角矩形。
2. 点击 “指针经过” 帧，按 F6 插入一个关键帧，然后修改这个帧的内容，比如把蓝色矩形改成绿色，或者让它稍微放大一点，这样当鼠标悬停时,按钮就会有视觉反馈。
3. 同样，在 “按下” 帧，按 F6 插入关键帧，并再次修改外观,比如加上一个内发光效果。
4. “点击” 帧是关键，点击它，按 F6 插入关键帧，然后用矩形工具画一个足够大的、覆盖整个按钮区域的透明矩形，这个区域定义了按钮的“热区”。

3 将按钮放入舞台

1. 点击左上角的场景名称（如 场景 1）,回到主舞台。
2. 从 库 面板（按 Ctrl+L 打开）中，将你刚刚创建的 MyButton 元件拖到舞台上。
3. 选中舞台上的按钮实例，在属性面板中给它一个实例名称，myButton。这个名称非常重要，是代码用来识别这个按钮的“身份证”。

第二部分：为按钮添加最基础的代码

我们让这个按钮在点击时执行一个动作：在“输出”面板打印一句话。

1 使用时间轴代码（简单但不推荐）

1. 选中 场景 1 的 “图层 1” 的第 一帧。
2. 打开 “动作” 面板（按 F9）。
3. 在代码编辑区输入以下 AS3 代码：

// 1. 为名为 myButton 的按钮实例添加一个事件监听器
// 当它被点击时，执行一个名为 onButtonClick 的函数
myButton.addEventListener(MouseEvent.CLICK, onButtonClick);
// 2. 定义 onButtonClick 函数
// 这个函数会在按钮被点击时被自动调用
function onButtonClick(event:MouseEvent):void {
    // 在输出面板打印 "Hello, World!"
    trace("Hello, World!");
}

测试方法：按 Ctrl+Enter 测试影片，点击按钮，然后切换回 Flash 软件，查看“输出”面板，你应该会看到 "Hello, World!"。

为什么不推荐？ 把所有代码都写在时间轴上，项目一大就会变得非常混乱,难以管理和维护。

2 使用外部/类代码（推荐的专业做法）

这是现代 Flash 开发的标准做法，代码和内容分离,结构清晰。

1. 创建 ActionScript 文件：

   • 选择 文件 -> 新建。
   • 选择 ActionScript 文件，点击“确定”。
   • 保存这个文件，命名为 Main.as，并保存在与你的 .fla 文件相同的文件夹下。

2. 编写代码 Main.as：

   • 在 Main.as 文件中输入以下代码：

   // 导入必要的类
   import flash.display.MovieClip;
   import flash.events.MouseEvent;
   // Main 类将作为文档类
   public class Main extends MovieClip {
       // 构造函数，当 SWF 文件加载时自动执行
       public function Main() {
           // 确保 myButton 这个实例在舞台上存在
           if (myButton) {
               // 为 myButton 添加点击事件监听器
               myButton.addEventListener(MouseEvent.CLICK, onButtonClick);
           }
       }
       // 按钮点击事件的处理函数
       private function onButtonClick(event:MouseEvent):void {
           trace("Hello, World from Document Class!");
       }
   }

3. 在 .fla 文件中链接文档类：

   • 回到你的 .fla 文件（我的文档.fla）。
   • 在属性面板中，找到 “类” 这个输入框。
   • 输入你的 ActionScript 文件的类名，即 Main（不要加 .as 后缀）。

4. 测试：按 Ctrl+Enter 测试，效果和之前一样,但代码结构更专业。

第三部分：深入理解按钮交互

1 MouseEvent.CLICK 点击事件

这是最常用的事件,表示用户按下并释放了鼠标按钮。

myButton.addEventListener(MouseEvent.CLICK, onButtonClick);

2 其他常用鼠标事件

示例：实现悬停变色效果

// 假设 myButton 是你的按钮实例
import flash.events.MouseEvent;
// 鼠标悬停时
myButton.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
// 鼠标离开时
myButton.addEventListener(MouseEvent.ROLL_OUT, onRollOut);
function onRollOver(event:MouseEvent):void {
    // 改变按钮的颜色（这里简单举例，实际可能需要用滤镜或切换帧）
    trace("鼠标悬停！");
    // myButton.alpha = 0.8;
}
function onRollOut(event:MouseEvent):void {
    trace("鼠标离开！");
    // myButton.alpha = 1;
}

3 动态改变按钮外观

你可以在事件处理函数中通过代码改变按钮的属性，如 alpha (透明度), scaleX/scaleY (缩放), rotation (旋转) 等。

import flash.events.MouseEvent;
myButton.addEventListener(MouseEvent.ROLL_OVER, onRollOver);
myButton.addEventListener(MouseEvent.ROLL_OUT, onRollOut);
function onRollOver(event:MouseEvent):void {
    // 鼠标悬停时，放大到1.2倍
    myButton.scaleX = 1.2;
    myButton.scaleY = 1.2;
}
function onRollOut(event:MouseEvent):void {
    // 鼠标离开时，恢复原始大小
    myButton.scaleX = 1;
    myButton.scaleY = 1;
}

第四部分：高级功能示例

1 跳转到另一个网页

需要使用 flash.net.navigateToURL 类。

import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
// 假设按钮名为 goToWebsiteButton
goToWebsiteButton.addEventListener(MouseEvent.CLICK, onWebsiteClick);
function onWebsiteClick(event:MouseEvent):void {
    // 创建一个 URLRequest 对象，指定要跳转的 URL
    var url:URLRequest = new URLRequest("https://www.google.com");
    // 在新窗口中打开链接
    navigateToURL(url, "_blank"); 
}

• _self: 在当前窗口打开。
• _blank: 在新窗口打开（最常用）。
• _parent: 在父窗口打开。
• _top: 在顶级窗口打开。

2 控制动画播放

假设你有一个名为 mainAnimation 的 MovieClip，你希望点击按钮后它从第 10 帧开始播放。

import flash.events.MouseEvent;
// 假设按钮名为 playButton
playButton.addEventListener(MouseEvent.CLICK, onPlayClick);
function onPlayClick(event:MouseEvent):void {
    // 让名为 mainAnimation 的影片剪辑跳转到第10帧并播放
    mainAnimation.gotoAndPlay(10);
}

3 制作一个简单的“关闭广告”按钮

这是一个非常经典的交互。

1. 场景设置：

   • 一个背景层。
   • 一个广告层，里面放一个广告图片或 MovieClip，实例名 ad_mc。
   • 一个按钮层，放一个关闭按钮（通常是“X”图标），实例名 closeBtn。

2. 代码：

   • 在第一帧添加代码：

   import flash.events.MouseEvent;
   // 给关闭按钮添加点击事件
   closeBtn.addEventListener(MouseEvent.CLICK, onCloseAd);
   function onCloseAd(event:MouseEvent):void {
       // 移除广告
       // 方法一：将其从显示列表中移除
       this.removeChild(ad_mc);
       // 方法二：如果只是想让它不可见，可以设置其 visible 属性为 false
       // ad_mc.visible = false;
       trace("广告已关闭！");
   }

第五部分：现代替代方案

既然 Flash 已经过时,我们应该如何实现这些效果？

现代 Web 开发的理念是 、样式、行为分离”。

• HTML 负责内容结构。
• CSS 负责视觉表现和样式。
• JavaScript 负责交互逻辑和行为。

虽然实现方式不同，但核心逻辑（事件监听、状态改变、DOM 操作）是相通的，理解了 Flash 按钮的原理，学习现代 Web 技术会事半功倍。