Flash CS5 实例教程：制作一个会跳舞的机器人
本教程将带你完成以下学习目标：
（图片来源网络，侵删）
- 熟悉 Flash CS5 的工作界面。
- 掌握 工具栏 的基本使用（绘制、选择、填充）。
- 学习 时间轴 和 帧 的概念。
- 掌握 元件 的创建与应用（图形、影片剪辑）。
- 学习 补间动画 的制作。
- 了解 图层 的管理。
第一步：准备工作与界面认识
-
启动 Flash CS5
- 打开 Flash CS5。
- 在欢迎界面，选择 “ActionScript 3.0”（这是最常用的类型），然后点击“确定”。
-
认识工作界面 Flash CS5 的界面主要由以下几个部分组成：
- 菜单栏: 位于顶部，包含所有命令，如文件、编辑、插入、修改、文本、控制、调试等。
- 工具栏: 位于左侧，是我们绘制图形、选择对象的主要工具集合。
- 时间轴: 位于界面正上方或下方，是制作动画的核心区域,用于组织和控制动画的播放顺序和时间。
- 舞台: 中间最大的白色区域，是最终动画的显示区域,就像电影的银幕。
- 属性面板: 位于界面右侧，当选中某个对象（如舞台、图形、文本）时，这里会显示其属性,并允许你修改。
- 库面板: 位于右侧，用于存放和管理你创建的“元件”,方便重复使用。
第二步：绘制机器人身体（使用工具栏）
我们将使用工具栏来绘制机器人的各个部分。
-
修改舞台大小
（图片来源网络，侵删）- 点击选中 舞台。
- 在右侧的 属性 面板中，将 “舞台大小” 设置为 550 x 400 像素,背景色可以保持白色或你喜欢的颜色。
-
绘制头部
- 在 工具栏 中，选择 “矩形工具”。
- 在 属性 面板中，设置 笔触颜色 为黑色（
#000000），填充颜色 为灰色（#CCCCCC）。 - 在 舞台 上拖动鼠标,绘制一个矩形作为头部。
-
绘制眼睛
- 选择 “椭圆工具”。
- 设置 填充颜色 为蓝色（
#0000FF），笔触颜色 为无（点击笔触颜色的小方块，然后点击左上角的红色斜杠）。 - 按住
Shift键，在头部矩形上拖动,绘制一个正圆作为左眼。 - 按住
Alt键拖动已画好的眼睛,可以快速复制一个作为右眼。
-
绘制嘴巴
- 选择 “线条工具”。
- 设置 笔触颜色 为黑色，笔触高度 可以调粗一点,3。
- 在眼睛下方画一条横线作为嘴巴。
-
绘制身体
（图片来源网络，侵删）- 再次使用 “矩形工具”,画一个比头部稍长的矩形作为身体。
-
绘制四肢
- 使用 “线条工具” 或 “矩形工具”,为机器人画出胳膊和腿。
你的舞台上的机器人应该是一个静态的、组合在一起的图形，为了方便动画，我们需要把它变成“元件”。
第三步：将机器人转换为元件
元件是 Flash 中可以重复使用的、独立于主时间轴的对象,它分为三种类型：
- 图形: 用于静态图像或与主时间轴同步的简单动画。
- 影片剪辑: 拥有自己独立时间轴的动画,是制作复杂动画的核心。
- 按钮: 用于交互。
我们将把整个机器人转换为一个 影片剪辑，这样我们就可以让机器人本身产生动画（比如眨眼）,同时又能让整个机器人移动。
-
全选所有部件
- 在工具栏中选择 “选择工具” (黑色箭头)。
- 按住
Ctrl + A(Windows) 或Cmd + A(Mac) 全选舞台上的所有机器人部件。
-
转换为元件
- 右键点击选中的所有部件，选择 “转换为元件...”。
- 在弹出的对话框中：
- 名称: 输入
Robot。 - 类型: 选择 “影片剪辑”。
- 点击 “确定”。
- 名称: 输入
-
清理舞台
- 舞台上只剩下一个名为
Robot的实例，打开右侧的 库 面板，你会看到里面也多了一个Robot的元件。 - 双击舞台上的
Robot实例，你会进入它的 “编辑模式”，你会发现，这里也有一个时间轴和舞台,这就是影片剪辑的独立时间轴。 - 为了让机器人眨眼，我们在第10帧按
F6插入一个关键帧。 - 回到第1帧，用 “选择工具” 选中蓝色的眼睛，在 属性 面板中将 填充颜色 改为黑色（模拟闭眼）。
- 在第1帧和第10帧之间，右键点击，选择 “创建传统补间动画”，在影片剪辑的时间轴里,机器人就有了眨眼的动画。
- 点击左上角的 “场景1” 返回主场景。
- 舞台上只剩下一个名为
第四步：让机器人跳舞（制作补间动画）
我们让整个机器人在主舞台上左右移动和旋转。
-
准备图层
- 在 时间轴 的左下角，点击 “插入图层” 按钮，新建一个图层，命名为“地面”。
- 锁定“地面”图层,这样我们就不会误操作机器人图层了。
- 在“地面”图层上，用 “线条工具” 在舞台底部画一条线作为地面。
-
制作移动动画
- 确保你没有选中任何东西，点击 “图层1”（或重命名为“机器人”）的第1帧。
- 在舞台上，将机器人移动到舞台左侧,靠近地面。
- 在时间轴上，点击 第30帧，按
F6插入一个关键帧。 - 将机器人移动到舞台右侧,同样靠近地面。
- 在第1帧和第30帧之间，右键点击，选择 “创建传统补间动画”。
按下
Ctrl + Enter(Windows) 或Cmd + Enter(Mac) 测试一下动画,你应该能看到机器人从左边走到右边。 -
制作旋转动画
- 我们想让跳舞的动作更丰富，在时间轴上，点击 第15帧，按
F6插入一个关键帧。 - 选中第15帧上的机器人实例。
- 打开右侧的 “变形” 面板（如果没有，可以在“窗口”->“变形”中打开）。
- 在 旋转 输入框中，输入
30，然后按回车,机器人就会旋转30度。 - 同样，在第45帧按
F6插入关键帧，将机器人旋转回0度。 - 在第30帧和第45帧之间，再创建一个传统补间动画。
- 我们想让跳舞的动作更丰富，在时间轴上，点击 第15帧，按
第五步：添加背景音乐
-
导入声音
- 点击 “文件” -> “导入” -> “导入到库”。
- 选择一个你喜欢的 MP3 或 WAV 格式的音乐文件，点击“打开”，文件会出现在 库 面板中。
-
将声音放入时间轴
- 新建一个图层，命名为“音乐”。
- 选中“音乐”图层的第1帧。
- 将 库 面板中的声音文件直接拖到舞台上，你会看到“音乐”图层上出现了声音的波形。
-
同步声音
- 选中“音乐”图层的第1帧。
- 在右侧的 属性 面板中，找到 “同步” 选项。
- 将其设置为 “事件”，这表示声音会与动画同步播放,并且会完整播放一次。
第六步：最终测试与导出
-
测试动画
- 反复按下
Ctrl + Enter测试你的动画，检查动画是否流畅,声音是否正常。
- 反复按下
-
发布设置
- 点击 “文件” -> “发布设置”。
- 在 “格式” 选项卡中，确保 “Flash (.swf)” 和 “HTML (.html)” 都被勾选。
- 点击 “Flash” 选项卡，你可以设置导出的版本、播放器版本等,通常保持默认即可。
- 点击 “HTML” 选项卡，你可以设置网页的标题、背景色等。
-
发布动画
- 点击 “文件” -> “发布”。
- Flash 会在你保存文件的同一目录下生成一个
.swf文件（你的动画）和一个.html文件（用于在网页中播放动画）。
恭喜！你已经成功使用 Flash CS5 完成了你的第一个动画实例——“会跳舞的机器人”！
进阶学习方向
完成这个基础教程后，你可以继续探索 Flash CS5 的更多强大功能：
- 遮罩层: 制作探照灯效果、文字填充图片等。
- 引导层: 让对象沿着任意路径（如曲线、圆形）运动。
- 按钮制作: 结合影片剪辑和动作脚本,制作可点击的交互式按钮。
- ActionScript 3.0: 学习编程，为你的动画添加更复杂的逻辑和交互，比如游戏、鼠标跟随效果等。
- 骨骼工具: 为角色创建骨骼，制作更自然的行走、跑动等动画。
这个教程为你打下了坚实的基础，Flash 的世界非常广阔，多练习、多尝试,你很快就能创作出属于自己的精彩动画！
