- 第一部分：传统 Adobe Flash (Animate) 的制作方法 - 这适用于需要维护旧项目或在特定环境下使用。
- 第二部分：现代 HTML5 Canvas 的制作方法 - 这是目前行业的主流和推荐方法。
第一部分：传统 Adobe Flash (Animate) 制作教程
Adobe Animate 是 Adobe Flash 的继任者，它不仅能制作 Flash SWF 文件，还能导出 HTML5 Canvas 动画，这里我们主要介绍用它制作经典 Flash Banner 的流程。
（图片来源网络，侵删）
准备工作
- 软件安装：安装 Adobe Animate CC (最新版本)。
- 素材准备：准备好你的 Logo、产品图片、背景图等，建议使用 PNG 格式（带透明背景）和 JPG 格式。
- 尺寸设定：确定 Banner 的尺寸，常见的网页 Banner 尺寸有：
- 468 x 60 像素 (全尺寸 Banner)
- 728 x 90 像素 (Leaderboard)
- 300 x 250 像素 (Medium Rectangle)
- 160 x 600 像素 (Skyscraper)
制作步骤
新建文档并设置舞台
- 打开 Adobe Animate，选择“新建” -> “ActionScript 3.0 文档”（虽然 AS3 已不推荐新项目，但这是制作传统 SWF 的标准）。
- 在属性检查器中,点击“编辑文档属性”按钮。
- 设置舞台尺寸（728 x 90），背景色通常设为透明或与网页背景色一致，帧率设为 24 或 30 fps。
导入素材
- 点击“文件” -> “导入” -> “导入到库”。
- 选择你准备好的所有图片素材,点击“打开”，这些素材会出现在“库”面板中。
制作动画（关键帧与补间动画）
动画的核心是“时间轴”上的“关键帧”和“补间动画”。
（图片来源网络，侵删）
-
创建图层：在时间轴上，右键点击图层，选择“插入图层”，为不同元素创建独立图层，方便管理（背景层、Logo层、文字层、按钮层）。
-
放置元素：
- 从“库”中拖动素材到舞台上，放置在正确的位置。
- 使用“选择工具”和“变形工具”调整大小和位置。
-
创建关键帧：
- 在时间轴上,选择一个图层，在想要发生动画变化的位置（例如第 10 帧）右键，选择“插入关键帧”。
- 关键帧表示对象在该时间点的状态,在第 1 帧和第 10 帧之间，你可以改变对象的属性（位置、大小、颜色、透明度等）。
-
创建补间动画：
（图片来源网络，侵删）- 这是 Flash 动画的精髓，在第 1 帧和第 10 帧之间，右键点击任意一帧，选择“创建传统补间动画”。
- Animate 会自动生成中间的过渡帧，你可以移动第 10 帧上的对象，它会从第 1 帧的位置平滑移动到第 10 帧的位置。
- 其他补间类型：
- 形状补间：用于改变对象的形状（一个圆形变成一个方形）。
- 补间动画：Animate 的新功能，更强大，可以同时对位置、旋转、缩放、颜色、滤镜等多种属性进行动画，并且可以沿路径运动。
示例：让一个文字从左侧飞入
- 在“文字层”的第 1 帧，输入文字“欢迎光临”。
- 将文字拖到舞台左侧外面（不可见区域）。
- 在时间轴上,在第 30 帧处插入一个关键帧。
- 将第 30 帧上的文字拖到舞台中央。
- 在第 1 帧和第 30 帧之间右键，选择“创建补间动画”。
- 按下
Enter键（或小键盘上的0），即可在舞台上预览动画效果。
添加交互（ActionScript 3.0）
-
新建图层：创建一个名为 "AS" 的图层，并锁定它，将所有代码放在这个图层。
-
写代码：在 "AS" 图层的第 1 帧选中，按下
F9打开“动作”面板。 -
添加链接：点击 Banner 后跳转到某个网页。
// 给舞台上的一个名为 "myButton" 的按钮添加点击事件 myButton.addEventListener(MouseEvent.CLICK, onClick); function onClick(event:MouseEvent):void { // 使用 navigateToURL 打开链接 var url:URLRequest = new URLRequest("https://www.yourwebsite.com"); navigateToURL(url, "_blank"); // "_blank" 在新标签页打开 }
测试与导出
- 测试：按下
Ctrl + Enter(Windows) 或Cmd + Enter(Mac)，会导出并播放一个 SWF 文件，让你预览最终效果。 - 导出：
- 点击“文件” -> “发布设置”。
- 在“格式”选项卡中，确保勾选了 “Flash (.swf)” 和 “HTML 包装器 (.html)”。
- 在 “Flash” 选项卡中，可以设置 ActionScript 版本（通常为 3.0）。
- 点击“发布”按钮，Animate 会在你的项目文件夹中生成 SWF 和 HTML 文件。
第二部分：现代 HTML5 Canvas 制作教程
这是目前制作网页横幅动画的主流方式,它不依赖 Flash 插件，兼容所有现代浏览器，性能更好，并且更容易与网页交互。
我们将使用 Google 提供的 Google Web Designer (GWD) 工具，它是一个免费的可视化 HTML5 设计工具，可以让你像使用 Flash 一样拖拽制作动画，非常适合初学者。
准备工作
- 软件安装：下载并安装 Google Web Designer。
- 素材准备：同上，准备好 Logo、图片等。
制作步骤
新建文档
- 打开 Google Web Designer。
- 选择“新建” -> “广告”。
- 在“尺寸”中，选择一个预设尺寸（如 728x90）或自定义尺寸。
- 选择“HTML5 Canvas”作为创作类型。
设计舞台
- 主舞台：中间的白色区域就是你的舞台。
- 添加元素：
- 从左侧的“库”面板中，你可以直接拖拽“图片”、“形状”、“文本”等元素到舞台上。
- 双击元素可以编辑其内容（如修改文字、更换图片）。
- 使用右侧的“属性”面板来精确调整元素的位置、大小、颜色等。
制作时间轴动画
GWD 的时间轴概念与 Flash 非常相似。
- 显示时间轴：点击顶部的“时间轴”标签。
- 创建关键帧：
- 在时间轴上,选择一个元素所在的图层。
- 将播放头（红色竖线）拖动到你想要开始动画的时间点（1.5 秒）。
- 在舞台上移动、缩放或旋转该元素。
- GWD 会自动在该时间点为你创建一个关键帧。
- 预览动画：将播放头拖到开头，点击时间轴下方的“预览”按钮即可看到动画效果，你还可以添加“淡入淡出”、“旋转”等预设动画效果。
添加交互
- 选择元素：在舞台上选择你想要添加交互的元素（例如一个按钮或图片）。
- 打开事件面板：在右侧的“属性”面板中，切换到“事件”标签。
- 添加事件：
- 点击“添加事件”按钮。
- 选择一个事件,最常用的是
tap（触摸/点击）。 - 在事件下方,点击“添加操作”。
- 选择
Go to URL。 - 在输入框中填入你的目标网址,
https://www.yourwebsite.com。 - 在“目标”下拉菜单中选择
_blank（在新标签页打开）。
导出
- 点击左上角的“文件” -> “导出” -> “导出为 HTML5...”。
- 选择一个文件夹,点击“导出”。
- GWD 会生成一个包含 HTML、CSS 和 JavaScript 文件的文件夹，你可以直接将
index.html文件上传到你的服务器，或者在网页中引用它。
总结与对比
| 特性 | Adobe Animate (传统 Flash) | Google Web Designer (HTML5 Canvas) |
|---|---|---|
| 技术 | ActionScript 3.0, SWF 文件 | HTML5, CSS3, JavaScript |
| 兼容性 | 差，需要 Adobe Flash Player 插件，现已淘汰。 | 优秀，所有现代浏览器原生支持。 |
| 工具 | 专业，功能强大，学习曲线较陡。 | 免费，可视化，对初学者友好，类似 Flash 的工作流。 |
| 交互 | 通过 AS3 实现复杂交互。 | 通过事件面板和 JavaScript 实现交互，更现代。 |
| 发布 | 生成 SWF 和 HTML 文件。 | 生成纯 Web 文件夹，可直接部署。 |
| 未来 | 已停止发展，仅用于维护旧项目。 | 行业主流，是制作网页广告和交互动画的标准。 |
对于任何新的项目,强烈推荐使用 HTML5 Canvas 的方法，例如使用 Google Web Designer 或 Adobe Animate 的 HTML5 Canvas 模式，它更安全、更兼容、更符合现代 Web 标准，而传统的 Flash 方法只建议用于修改或维护一些非常老旧的网站项目。
