重要声明：Flash 技术已过时

在开始之前，我必须强调一个极其重要的事实：Adobe Flash Player 已于 2025 年 12 月 31 日官方停止支持，并被所有主流浏览器（Chrome, Firefox, Edge, Safari 等）禁用。

这意味着，任何使用纯 Flash 技术制作的网站，在今天的互联网上都无法被用户正常访问。 如果你现在学习 Flash 来制作网站,你的作品将无法被任何人看到。

为什么还有人会问 Flash 网站教程？

尽管 Flash 已死，但它仍然在 Web 发展史上占有重要地位,原因如下：

1. 历史意义：在 2000 年代初到 2010 年代中期，Flash 是制作动态、交互式网站和动画的绝对王者，许多经典的网站、游戏、广告和动画都是用 Flash 制作的。
2. 怀旧与学习：对于许多开发者来说，Flash 是他们进入编程和设计领域的启蒙工具，学习 Flash 的基本原理（如时间轴、帧、符号、ActionScript）有助于理解现代前端开发的一些核心概念。
3. 特定领域：Flash 技术仅存于一个非常小的领域——游戏开发，尤其是在 RPG Maker (MZ) 这类游戏引擎中,它仍然被用作事件脚本语言。

本教程的目的

鉴于以上情况，本教程将不教你如何制作一个能在今天发布的网站,而是：

• 带你回顾 Flash 网站制作的核心流程和概念。
• 让你理解为什么它曾经如此强大以及它最终被淘汰的原因。
• 如果你是出于怀旧或学习历史的目的，可以跟着步骤在本地完成一个简单的 Flash 网站。

第一部分：Flash 网站制作的核心理念与流程

在 Flash 中，网站不是由多个 HTML 页面组成的，而是在一个大的 .swf 文件中，通过代码控制时间轴的跳转来模拟“页面”切换。

核心概念

1. 场景：一个 Flash 文档可以包含多个场景，每个场景可以理解为一个独立的“页面”，但更常见的做法是只用一个场景，然后通过代码在不同的“帧”之间跳转来模拟页面。
2. 时间轴：这是 Flash 的灵魂，时间轴由帧 组成，每一帧都记录了该时刻舞台上所有元素的状态，通过在不同帧上放置不同的内容，并设置动画补间,就形成了动画。
3. 帧：是时间轴上的最小单位。
   • 关键帧：用于定义动画或内容变化的点，在关键帧上，你可以添加、修改或删除舞台上的元素。
   • 普通帧：延续前一个关键帧的内容。
   • 空白关键帧：一个空的关键帧,用于清除之前的内容。
4. 元件：可以重复使用的图形、按钮或影片剪辑，这是 Flash 的核心复用机制。
   • 图形：用于静态图像或与时间轴同步的简单动画。
   • 按钮：有“弹起”、“指针经过”、“按下”、“点击”四个状态,用于响应用户交互。
   • 影片剪辑：拥有自己独立时间轴的迷你动画，可以放在主时间轴上循环播放，并且可以为其编写 ActionScript 代码,这是制作交互式组件的核心。
5. ActionScript (AS)：Flash 的编程语言，用于添加交互逻辑，如按钮点击、页面跳转、数据加载等，早期版本是 AS 2.0，后期是更强大的 AS 3.0。
6. 库：存放所有元件、位图、声音等资源的面板。

基本工作流程

1. 规划网站：确定网站有几个“页面”（首页、关于我们、联系方式等）,每个页面的布局和内容。
2. 创建元件：将网站中重复使用的元素（如 Logo、导航栏按钮、背景）制作成元件,存入库中。
3. 构建“页面”：
   • 在主时间轴上，为每个“页面”预留一组连续的帧（首页在第 1-30 帧，关于我们在第 31-60 帧）。
   • 在每一组帧的第一帧创建关键帧,然后在该帧上绘制或放置该页面的所有静态内容。
4. 制作导航：
   • 创建导航按钮元件。
   • 将这些按钮放在每个“页面”的相同位置（所有页面的导航栏都放在第 1 帧）。
   • 为每个按钮编写 ActionScript 代码，点击后让时间轴跳转到对应“页面”的起始帧。
5. 添加动画和交互：使用补间动画让元素动起来,为影片剪辑添加更复杂的交互逻辑。
6. 发布：将 .fla 源文件发布成 .swf 文件（最终在浏览器中播放的文件）和 .html 文件（用于在网页中嵌入 .swf 文件）。

第二部分：动手实践 - 制作一个简单的 Flash 网站

假设我们要制作一个只有两个“页面”的简单网站：首页 和关于我们。

准备工作

1. 安装软件：你需要安装 Adobe Flash Professional（CS6 或 CC 2025 版本，这是最后的经典版本），注意，新版本的 Adobe Animate 主要用于制作 HTML5 Canvas 动画，与传统的 Flash 制作方式不同。
2. 新建文档：打开 Flash，创建一个新的 ActionScript 3.0 文档。

步骤 1：创建导航栏元件

1. 按 Ctrl+F8 (Windows) 或 Cmd+F8 (Mac) 打开“创建新元件”窗口。
2. 名称输入 navButton，类型选择 按钮,点击确定。
3. 你会进入按钮的编辑模式，时间轴上有四帧：弹起、指针经过、按下、点击。
   • 弹起：按钮的默认状态，在这里用文字工具写上“首页”。
   • 指针经过：鼠标悬停时的状态,可以在这里改变文字颜色或添加一个滤镜效果。
   • 按下：鼠标点击时的状态,可以在这里让文字下沉或改变颜色。
4. 重复以上步骤，再创建一个名为 aboutButton 的按钮。

步骤 2：在主时间轴上构建“页面”

1. 回到场景 1，时间轴上默认只有第 1 帧。

2. 创建首页：

   • 在第 1 帧创建一个关键帧（如果还不是的话）。
   • 从库中将 navButton 和 aboutButton 拖到舞台上,排列成导航栏。
   • 在舞台下方用文字工具写上“欢迎来到我的网站！”,这就是首页的内容。

3. 创建“关于我们”页面：

   
   （图片来源网络，侵删）
   • 在时间轴上，点击第 2 帧，按 F6 插入一个关键帧，这一帧将用于“关于我们”页面。
   • ：删除“欢迎来到我的网站！”文字，写上“这里是关于我们的信息。”。
   • 隐藏导航按钮：选中舞台上的 navButton，在属性面板中将其 Alpha（透明度） 设置为 0%。
   • 显示“关于我们”按钮：选中 aboutButton，将其 Alpha 设置回 100%。

   更专业的方法：为了保持导航栏的完整性,更好的做法是：

   • 在第 1 帧放置所有导航按钮。
   • 为“首页”按钮的 点击 帧添加一个关键帧，让它在视觉上表示“当前选中”。
   • 为“关于我们”按钮的 点击 帧添加一个关键帧。
   • 通过 ActionScript 来控制哪个按钮处于“选中”状态。

步骤 3：编写 ActionScript 实现页面跳转

1. 创建图层：在时间轴上新建一个图层，命名为 Actions，并将其拖到所有图层的最下方，这是一个好习惯,避免误操作舞台上的元素。

2. 编写代码：

   • 选中 Actions 图层的第 1 帧，按 F9 打开“动作”面板。
   • 输入以下代码：

   // 为首页按钮添加点击事件
   navButton.addEventListener(MouseEvent.CLICK, goToHome);
   // 为关于我们按钮添加点击事件
   aboutButton.addEventListener(MouseEvent.CLICK, goToAbout);
   // 定义跳转到首页的函数
   function goToHome(event:MouseEvent):void {
       // 让时间轴跳转到第 1 帧
       gotoAndStop(1);
   }
   // 定义跳转到关于我们的函数
   function goToAbout(event:MouseEvent):void {
       // 让时间轴跳转到第 2 帧
       gotoAndStop(2);
   }

   • 代码解释：
     • addEventListener：为按钮添加一个“监听器”，等待特定事件（如 MouseEvent.CLICK，鼠标点击）的发生。
     • goToHome 和 goToAbout：是当事件发生时执行的函数。
     • gotoAndStop(帧号)：这是最核心的导航命令,它停止播放并跳转到指定的帧。

步骤 4：测试和发布

1. 测试：按 Ctrl+Enter (Windows) 或 Cmd+Enter (Mac)，Flash 会编译并播放你的 .swf 文件，你应该能看到首页，点击“关于我们”按钮,内容会切换。
2. 发布：
   • 按 Ctrl+Shift+S (Windows) 或 Cmd+Shift+S (Mac) 保存你的 .fla 源文件。
   • 按 F12 或通过 文件 -> 发布设置，设置好格式（通常选择 Flash 和 HTML），然后点击“发布”，你会在保存 .fla 文件的同一目录下得到一个 .swf 文件和一个 .html 文件。

第三部分：Flash 的替代品与现代 Web 开发

既然 Flash 已死,我们应该用什么来制作网站呢？

1. HTML + CSS + JavaScript：这是现代网页开发的基石。

   • HTML：负责搭建网站的结构和内容（骨架）。
   • CSS：负责网站的样式和布局（皮肤和衣服）,包括动画效果。
   • JavaScript：负责网站的交互和动态行为（大脑和神经）。
   • 优点：跨平台、开放标准、SEO 友好、性能优异,所有现代网站都基于此。

2. 前端框架：基于 JavaScript，可以让你更高效地构建复杂的单页应用，体验类似 Flash 的流畅切换。

   • React, Vue, Angular：这些框架通过“组件化”和“虚拟 DOM”技术，实现了在无需刷新页面的情况下更新内容,创造出非常流畅的用户体验。

3. 动画库：

   • GSAP (GreenSock Animation Platform)：业界顶级的 JavaScript 动画库，功能强大，性能卓越，可以轻松实现媲美 Flash 的复杂动画。
   • Lottie：一个由 Airbnb 推出的库，可以将 Adobe After Effects 制作的动画导出为 JSON 文件，然后在网页和 App 上完美还原，这是目前 UI 动画的主流方案。

• 不要用 Flash 制作面向公众的网站,因为它无法运行。
• 学习 Flash 的历史可以帮助你理解 Web 动画和交互的演进。
• 现代网站开发的核心是 HTML, CSS, JavaScript 以及相关的框架和工具。
• 如果你想制作动画，请学习 GSAP 或 Lottie，如果你想制作交互式网站，请学习 React 或 Vue。

希望这个教程能帮助你理解 Flash 的过去，并指引你走向现代 Web 开发的未来。