Flash CS5 是 Adobe 公司推出的经典动画制作软件，虽然现在已被 Animate 所取代，但它依然是学习 2D 动画原理、ActionScript 3.0 编程和传统动画制作的最佳工具之一。

第一部分：入门基础 - 制作一个简单的弹跳小球

这个实例将带您熟悉 Flash CS5 的核心界面和基本动画制作流程：时间轴、图层、帧和补间动画。

目标

制作一个从高处落下、碰到地面后弹起，并逐渐静止的小球动画。

步骤 1：新建文档并设置舞台

1. 打开 Adobe Flash CS5。
2. 选择 文件 > 新建，在弹出的窗口中选择 Flash 文件 (ActionScript 3.0)，然后点击“确定”。
3. 在属性面板中,您可以设置舞台的尺寸，将 宽度 设为 550 像素，高度 设为 400 像素，背景色设为浅灰色。

步骤 2：绘制小球

1. 在工具栏中选择 椭圆工具。
2. 在属性面板中,设置 笔触颜色 为无（或关闭笔触），填充颜色 为你喜欢的颜色（比如红色）。
3. 按住 Shift 键，在舞台上拖动鼠标，绘制一个完美的圆形。
4. 选择 选择工具，点击圆形，然后拖动到舞台的顶部中央位置。

步骤 3：创建下落动画（传统补间）

1. 在时间轴面板,点击 图层 1 的第 1 帧，确保小球被选中。
2. 右键点击时间轴上的第 30 帧，选择 插入 > 关键帧，这会复制第1帧的内容到第30帧。
3. 点击时间轴上的第 1 帧，然后在舞台下方，将小球拖动到舞台的底部。
4. 右键点击时间轴上第 1 帧和第 30 帧之间的 任意一帧，选择 创建传统补间。
5. 按下 Enter 键（或 Ctrl+Enter 测试影片），你应该能看到小球从上到下匀速下落的动画。

步骤 4：制作弹跳效果

1. 在时间轴面板,点击 图层 1 的第 30 帧，确保小球在底部。
2. 右键点击第 60 帧，选择 插入 > 关键帧。
3. 选择第 30 帧，将小球向上拖动一小段距离（模拟弹起）。
4. 右键点击第 30 帧和第 60 帧之间的 任意一帧，选择 创建传统补间。
5. 我们需要让弹跳效果更真实,选中第 30 帧，打开 属性 面板，找到 缓动 选项，将其设置为 -100（或选择“弹跳”预设），这会让小球在弹起时先慢后快，模拟物理效果。

步骤 5：制作逐渐静止的效果

1. 重复步骤 4，在第 60 帧插入关键帧，将小球再向上拖动更短的距离。
2. 在第 90 帧插入关键帧，将小球几乎放回原位。
3. 在第 60 帧和第 90 帧之间创建传统补间，并同样设置缓动为 -100。
4. 继续这个过程,每次弹起的高度都降低，直到小球看起来完全静止，您可以在第 120 帧插入关键帧，并确保小球的位置和上一帧相同，动画到此结束。

测试影片

按下 Ctrl + Enter，观看你的弹跳小球动画！

第二部分：进阶应用 - 制作按钮交互

这个实例将引入 元件 的概念，并使用 ActionScript 3.0 为按钮添加交互功能。

目标

创建一个按钮,当鼠标悬停时按钮会变色，点击后播放一段欢迎文字动画。

步骤 1：创建按钮元件

1. 新建一个 Flash 文件 (ActionScript 3.0)。
2. 按 Ctrl + F8 或选择 插入 > 新建元件。
3. 在弹出的窗口中,名称输入为 myButton，类型选择 按钮，然后点击“确定”。
4. 你会进入按钮元件的编辑模式,时间轴会分为 弹起、指针经过、按下、点击 四个帧。
   • 弹起: 按钮的默认状态，使用矩形工具绘制一个按钮。
   • 指针经过: 鼠标悬停时的状态，在第2帧（指针经过）插入关键帧，然后改变按钮的颜色或大小。
   • 按下: 鼠标点击时的状态，在第3帧（按下）插入关键帧，再次改变颜色或让它看起来被按下去。
   • 点击: 这是按钮的热区，可以定义点击响应的区域，通常在第4帧插入一个和按钮一样大的矩形，但颜色无所谓，因为它不会被看到。
5. 完成后,点击时间轴左上角的 场景 1 返回主舞台。

步骤 2：将按钮放入舞台

1. 打开 库 面板（Ctrl + L），你会看到刚刚创建的 myButton 元件。
2. 将 myButton 从库中拖动到舞台中央。

步骤 3：创建欢迎文字动画

1. 新建一个图层,命名为 text。
2. 在 text 图层的第1帧，使用 文本工具 在舞台上写下“欢迎来到 Flash 世界！”。
3. 在 text 图层的第 20 帧插入关键帧。
4. 选择第1帧,将文字的 Alpha（透明度）在属性面板中设为 0%。
5. 在第1帧和第20帧之间创建 传统补间。
6. 在第20帧,将文字的 Alpha 设为 100%。
7. 在 text 图层的第 40 帧插入普通帧（按 F5），让动画停留在这里。

步骤 4：编写 ActionScript 代码

1. 新建一个图层,命名为 actions。

2. 非常重要：在 actions 图层的第1帧，右键点击选择 动作，或者直接按 F9 打开动作面板。

3. 确保在动作面板顶部的目标下拉框中选择 场景 1。

   
   （图片来源网络，侵删）

4. 输入以下代码：

   // 给按钮添加一个侦听器，监听鼠标点击事件
   myButton.addEventListener(MouseEvent.CLICK, onButtonClick);
   // 定义一个函数，当按钮被点击时执行
   function onButtonClick(event:MouseEvent):void {
       // 让 text 图层的动画播放
       // 我们可以通过控制 play() 和 stop() 来实现
       // 但这里我们想让动画从头开始播放，可以简单地在点击后跳转到第1帧并播放
       gotoAndPlay(1);
   }
   // 初始状态下，让动画停在最后一帧，等待用户点击
   stop();

   • 代码解释:
     • myButton.addEventListener(...): 这是在告诉 Flash，“嘿，当 myButton 这个按钮被点击时，请执行 onButtonClick 这个函数。”
     • function onButtonClick(...) { ... }: 这是定义一个函数，即点击后要做什么，这里我们让它跳转到第1帧并重新播放。
     • stop(): 这行代码让动画一开始就停在最后一帧，而不是循环播放，这样用户就能看到按钮，等待点击。

测试影片

按下 Ctrl + Enter，将鼠标悬停在按钮上，你会看到变色效果，点击按钮，欢迎文字的动画会重新播放一遍。

第三部分：综合实例 - 制作一个简单的可拖拽相册

这个实例将结合 影片剪辑、ActionScript 3.0 和 事件处理，创建一个可以拖拽的图片展示区。

目标

创建一个横向排列的图片条,用户可以用鼠标拖拽来左右浏览图片。

步骤 1：准备素材

准备几张横向排列的长图片,或者在 Flash 中绘制几个矩形作为“照片”。

步骤 2：创建图片条影片剪辑

1. 按 Ctrl + F8 新建元件，名称为 PhotoStrip，类型为 影片剪辑。
2. 进入影片剪辑编辑模式。
3. 将你的图片素材（或绘制的矩形）水平排列在一条线上。
4. 给这个图片条起一个实例名,在属性面板中输入 photoStrip。

步骤 3：设置主舞台

1. 返回 场景 1。
2. 将 PhotoStrip 元件从库中拖动到舞台中央。
3. 选中舞台上的 PhotoStrip 实例，在属性面板中给它一个实例名，photoStrip_mc。注意：实例名和元件名不同，这是在代码中调用的名字。

步骤 4：编写拖拽代码

1. 新建一个 actions 图层。

2. 在第1帧打开动作面板（F9），输入以下代码：

   // 导入必要的类，用于处理鼠标事件
   import flash.events.MouseEvent;
   // 定义一个变量，用于记录鼠标是否被按下
   var isDragging:Boolean = false;
   // 定义一个变量，用于记录鼠标按下时的初始位置
   var startX:Number;
   // 定义一个变量，记录图片条当前的 X 位置
   var startStripX:Number;
   // 为图片条添加鼠标按下事件
   photoStrip_mc.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);
   // 定义鼠标按下时的处理函数
   function onMouseDownHandler(event:MouseEvent):void {
       // 设置拖拽状态为 true
       isDragging = true;
       // 记录鼠标按下的初始 X 坐标
       startX = mouseX;
       // 记录图片条当前的 X 坐标
       startStripX = photoStrip_mc.x;
       // 添加鼠标移动和释放事件监听
       stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
       stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
       // 防止拖拽时选中文本
       stage.mouseChildren = false;
   }
   // 定义鼠标移动时的处理函数
   function onMouseMoveHandler(event:MouseEvent):void {
       // 只有在拖拽状态下才执行
       if (isDragging) {
           // 计算鼠标移动的距离
           var deltaX:Number = mouseX - startX;
           // 更新图片条的 X 位置
           photoStrip_mc.x = startStripX + deltaX;
       }
   }
   // 定义鼠标释放时的处理函数
   function onMouseUpHandler(event:MouseEvent):void {
       // 恢复拖拽状态为 false
       isDragging = false;
       // 移除鼠标移动和释放事件监听，优化性能
       stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
       stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
       // 恢复子对象的鼠标交互
       stage.mouseChildren = true;
   }

测试影片

按下 Ctrl + Enter，用鼠标点击并拖动图片条，你就可以左右浏览图片了！

学习资源推荐

1. Adobe 官方文档: 虽然旧，但最权威。
2. YouTube 教程: 搜索 "Flash CS5 tutorial"，有大量英文和中文视频教程，"Flash CS5 for Beginners"。
3. Bilibili (B站): 搜索 "Flash CS5 教程"，有很多国内用户分享的优质视频。
4. 书籍: 《Flash Actionscript 3.0 动画教程》等经典书籍依然是系统学习的优秀资源。

希望这些实例能帮助你快速上手 Flash CS5！Flash 的核心在于 时间轴思维 和 编程逻辑，多练习，多思考，你很快就能掌握它。