Flash Banner 教程：从零开始制作你的第一个动画广告

重要提示： Adobe Flash Player 已于2025年1月12日正式停止支持，主流浏览器（如 Chrome, Firefox, Edge）默认不再支持 Flash 内容，本教程的 主要目的不是制作用于商业发布的横幅，而是：

1. 学习和理解经典的 2D 动画原理（补间动画、逐帧动画等）。
2. 掌握 Adobe Animate (Flash 的继任者) 的基本工作流程。
3. 出于怀旧或学习目的，制作一个可在旧版浏览器或特定环境中运行的文件。

我们将使用 Adobe Animate（这是 Adobe 目前推荐的 Flash 创作工具）来完成这个教程，如果你有旧版的 Adobe Flash Professional，操作步骤基本一致。

第一部分：准备工作与项目设置

软件准备

• 安装 Adobe Animate，你可以从 Adobe 官网下载试用版。
• 准备一些素材：一张背景图片、一张产品图片（比如一个 Logo 或商品）、一些文字。

创建新文档

1. 打开 Adobe Animate。
2. 在欢迎界面,选择 “ActionScript 3.0”（这是最常用的版本，功能更强大）。
3. 在弹出的“新建文档”窗口中，进行如下设置：
   • 宽度: 输入横幅的像素宽度，728。
   • 高度: 输入横幅的像素高度，90，这是一个常见的尺寸。
   • 帧频: 保持 24 或 30 即可，这是每秒播放的帧数，数值越高动画越流畅，但文件也可能越大。
   • 背景颜色: 选择一个你喜欢的背景色，或者暂时保持白色，稍后我们用图片填充。
   • 点击 “确定”。

第二部分：制作静态横幅（基础）

我们先来做一个没有动画的静态横幅,这是所有动画的基础。

步骤 1：导入素材

1. 在菜单栏选择 文件 > 导入 > 导入到舞台。
2. 选择你的 背景图片，点击“打开”，图片会直接出现在舞台中央。
3. 选中舞台上的图片,在右侧的 “属性” 面板中，确保它的 X 和 Y 坐标为 (0, 0)，这样它就会完美覆盖整个舞台。
4. 再次使用 “导入到舞台”，导入你的 产品图片 或 Logo。
5. 使用 “选择工具” (Selection Tool, V) 拖动图片到合适的位置。

步骤 2：添加文字

1. 在左侧工具栏选择 “文本工具” (Text Tool, T)。
2. 在舞台上点击一下,输入你的广告语，限时特惠！”。
3. 使用 “选择工具” 选中文字，在右侧的 “属性” 面板中，你可以：
   • 系列: 选择一个易读的字体，如 "Arial" 或 "思源黑体"。
   • 大小: 调整字体大小。
   • 颜色: 选择文字颜色。
   • 对齐: 设置文字的对齐方式。
4. 同样,拖动文字到合适的位置。

步骤 3：保存文件

1. 在菜单栏选择 文件 > 保存。
2. 选择一个位置,将文件保存为 .fla 格式，这是 Animate 的源文件，方便你以后修改。

你已经制作好了一个静态的横幅,按 Ctrl + Enter (Windows) 或 Cmd + Enter (Mac) 可以预览效果，你会看到一个 .swf 文件，这就是最终的 Flash 动画文件。

第三部分：添加动画效果（核心）

静态横幅太无聊了,我们来让它动起来！我们将学习两种最核心的动画技术。

补间动画

补间动画是 Flash 的精髓，你只需要定义好“开始”和“结束”两个状态，Flash 就会自动生成中间的过渡动画。

示例：让文字淡入并移动

1. 创建关键帧：

   • 在 时间轴 上，找到文字所在图层的第 1 帧，它是一个实心圆点，表示一个关键帧。
   • 在时间轴上点击第 20 帧，按 F6 插入一个关键帧，现在第1帧和第20帧都有内容了。
   • 点击第 40 帧，再按 F6 插入一个关键帧。

2. 设置第一段动画 (淡入):

   
   （图片来源网络，侵删）
   • 点击第 1 帧。
   • 选中舞台上的文字,在 “属性” 面板中，找到 “色彩效果” (Color Effect) -> 样式 -> 选择 Alpha。
   • 将 Alpha 值调为 0%，此时文字是完全透明的。
   • 右键点击第 1 帧和第 20 帧之间的任意灰色帧，选择 “创建传统补间动画” (Create Classic Tween)。
   • 你会看到时间轴上出现了一个带箭头的紫色条,按 Ctrl + Enter 预览，文字会从透明逐渐变为不透明。

3. 设置第二段动画 (移动):

   • 点击第 20 帧。
   • 使用 “选择工具” 直接在舞台上拖动文字到新的位置（比如舞台右侧）。
   • 右键点击第 20 帧和第 40 帧之间的灰色帧，再次选择 “创建传统补间动画”。
   • 预览,你会发现文字在淡入后，还会从初始位置移动到新位置。

示例：让图片旋转

1. 选中产品图片所在的图层。
2. 在时间轴上,在第 60 帧按 F6 插入一个关键帧。
3. 点击第 1 帧，使用 “任意变形工具” (Free Transform Tool, Q)。
4. 在图片的 上方会出现一个旋转手柄，按住 Shift 键拖动手柄，将图片旋转一个角度（-30 度）。
5. 右键点击第 1 帧和第 60 帧之间，创建传统补间动画。
6. 在 “属性” 面板中，找到 “旋转” 选项，选择 “自动” 或 “顺时针”/“逆时针”，并设置旋转次数（如 1 次）。
7. 预览,图片就会平滑地旋转了。

逐帧动画

逐帧动画需要你手动创建每一帧的画面,类似于制作翻页动画书，它适用于复杂、不规则的动画。

示例：制作一个简单的闪烁文字效果

1. 新建一个图层,命名为“闪烁文字”。
2. 在第 50 帧按 F5 插入一个普通帧（空心圆点），让图层长度延长到50帧。
3. 回到第 1 帧，使用 “文本工具” 输入文字“点击这里！”。
4. 点击第 2 帧，按 F6 插入关键帧。
5. 选中第2帧的文字,在 “属性” 面板中，将其 Alpha 值改为 0%。
6. 点击第 3 帧，按 F6 插入关键帧。
7. 选中第3帧的文字,将其 Alpha 值改回 100%。
8. 重复这个过程,每隔一帧就让文字可见，再隔一帧就让它消失。
9. 播放动画,你就会看到文字在闪烁了。

第四部分：添加交互性

一个横幅广告通常需要可点击性,点击后能跳转到指定网页。

步骤 1：添加一个隐形按钮

1. 新建一个图层,命名为“按钮”。
2. 在这个图层的第 1 帧，使用 “矩形工具” (Rectangle Tool, R) 在整个横幅上画一个和舞台一样大的矩形（728x90）。
3. 重要： 选中这个矩形，在 “属性” 面板中，将 “填充颜色” 设置为 无，“笔触颜色” 也设置为 无，这样你就创建了一个看不见的、但可以点击的区域。

步骤 2：编写 ActionScript 代码

1. 选中“按钮”图层上的任意一帧（比如第1帧）。

2. 在 “属性” 面板下方，找到 “动作” (Action) 一栏，点击 “编辑” (Edit) 或直接双击该帧。

3. 这会打开 “动作” 面板，在面板中输入以下代码：

   // 当这个按钮被点击时，执行下面的代码
   this.addEventListener(MouseEvent.CLICK, fl_ClickToGoToWebPage);
   function fl_ClickToGoToWebPage(event:MouseEvent):void
   {
       // 在新窗口中打开指定的网址
       navigateToURL(new URLRequest("https://www.example.com"), "_blank");
   }

   代码解释：

   • this: 指代当前时间轴上的这个按钮。
   • addEventListener(...): 添加一个事件监听器，意思是“监听”某个事件。
   • MouseEvent.CLICK: 监听的事件是“鼠标点击”。
   • fl_ClickToGoToWebPage: 当点击发生时，要执行的函数名称。
   • navigateToURL(...): 这是 Animate 的一个函数，用于打开网页。
   • new URLRequest("..."): 你想跳转的网址，请务必替换成你自己的链接。
   • "_blank": 在新标签页中打开链接。

4. 关闭“动作”面板，代码已保存。

第五部分：优化与导出

优化文件大小

Flash 文件如果太大，加载会很慢，影响用户体验。

• 减少关键帧： 只在动画的起始和结束位置设置关键帧，让补间动画自动完成中间过程。
• 简化图形： 避免使用过于复杂的位图，可以使用矢量图形。
• 限制动画长度： 横幅广告不宜过长，3-5秒的循环动画是最佳选择。

导出最终文件

1. 在菜单栏选择 文件 > 导出 > 导出影片。
2. 在弹出的窗口中：
   • 保存类型: 选择 Flash 影片 (.swf)。
   • 点击 “保存”。
3. 接着会弹出一个“导出 Flash 影片”的设置窗口：
   • 版本: 如果目标用户可能使用非常旧的浏览器，可以选择一个较低的版本，如 Flash Player 10，否则保持默认即可。
   • JPEG 品质: 调整图片的压缩质量，数值越高质量越好但文件越大，通常设在 80-90 之间是很好的平衡。
   • 音频流/音频事件: 如果你的横幅有声音，在这里可以设置其压缩格式（如 MP3）。
   • 勾选 “压缩影片”。
   • 点击 “确定”。

你就得到了一个 .swf 文件，你可以将它上传到服务器，并嵌入到 HTML 网页中。

总结与进阶

恭喜你！你已经完成了 Flash Banner 的基础教程，你学会了：

• 如何设置舞台和导入素材。
• 如何使用 补间动画 制作移动、淡入淡出、旋转效果。
• 如何使用 逐帧动画 制作更复杂的视觉效果。
• 如何添加 ActionScript 代码实现点击跳转功能。
• 如何 优化和导出 最终的 .swf 文件。

进阶学习方向：

• 使用遮罩: 制作探照灯效果、文字擦除效果等。
• 使用影片剪辑: 将复杂的动画（如旋转的 Logo）封装成一个“元件”，方便在主时间轴上重复调用和管理。
• 制作按钮的不同状态: 为按钮制作“鼠标悬停”、“鼠标按下”时的不同外观和动画。

虽然 Flash 技术已经式微，但它所蕴含的动画思想和设计理念至今仍在现代的网页动画和视频制作中广泛使用，希望这份教程能帮助你打开 2D 动画世界的大门！