内容简介 本书以 Adobe Flash CS5 Professional 为开发环境, 详细讲解 Flash 动画制作的相关知识 本书以单元 案例的形式进行编写, 尝试将分散的动画知识 经验技巧等有机整合在 13 个单元的案例中, 使学生在边学边练的过程中, 轻松愉快地学会动画制作的基本技能 本书

Transcription

1 中等职业教育 十二五 规划课程改革创新教材中职中专计算机动漫与游戏制作专业系列教材 Flash CS5 动画制作案例教程 官彬彬主编包之明秦秋滢副主编 北京 科学出版社职教技术出版中心

2 内容简介 本书以 Adobe Flash CS5 Professional 为开发环境, 详细讲解 Flash 动画制作的相关知识 本书以单元 案例的形式进行编写, 尝试将分散的动画知识 经验技巧等有机整合在 13 个单元的案例中, 使学生在边学边练的过程中, 轻松愉快地学会动画制作的基本技能 本书在设计案例时由浅到深, 循序渐进, 并充分考虑到职业院校学生的特点, 案例内容力求贴近学生的生活, 生动有趣, 寓教于乐, 学生在实现一个个案例的过程中, 不但能充分感受到设计 创作的满足感和成就感, 而且能逐步掌握 Flash 动画操作的技巧, 以及 ActionScript 3.0 的简单运用, 做到举一反三, 融会贯通 本书可以作为各类职业院校计算机专业 动漫与游戏专业的教学用书, 以及计算机培训学校的培训教材, 也可作为 Flash 爱好者的自学参考书 图书在版编目 (CIP) 数据 Flash CS5 动画制作案例教程 / 官彬彬主编. 北京 : 科学出版社,2014 ( 中等职业教育 十二五 规划课程改革创新教材 中职中专计算机动漫与游戏制作专业系列教材 ) ISBN Ⅰ. 1 F Ⅱ. 1 官 Ⅲ. 1 动画制作软件 - 中等专业学校 - 教材 Ⅳ. 1TP 中国版本图书馆 CIP 数据核字 (2014) 第 号 责任编辑 : 张振华 / 责任校对 : 责任印制 : 吕春珉 / 封面设计 : 出版 北京东黄城根北街 16 号邮政编码 : 北京双清印刷厂印刷 科学出版社发行 2014 年 8 月第一版 2014 年 8 月第一次印刷 * 各地新华书店经销 开本 : /16 印张 :14 1/4 字数 : 定价 :29.00 元 ( 如有印装质量问题, 我社负责调换 < 环伟 >) 销售部电话 编辑部电话 版权所有, 侵权必究举报电话 : ; ;

3 前言 本书主要以 Adobe Flash CS5 Professional 为开发环境进行 Flash 动画的讲解, 通过学习, 使学生掌握基本的动画制作技能 本书共 13 个单元, 均由 案例 单元小结 和 自我测评 3 个环节组成 案例 : 根据知识点与技能要求设计案例, 给出详细的操作步骤, 使学生能按部就班地完成案例 单元小结 : 对本单元所涉及的知识点与技能点进行整理, 突出重点 自我测评 : 以课堂练习的形式, 使学生巩固所学知识 本书所授内容共需 108 学时, 具体学时分配详见授课学时分配建议表 授课学时分配建议表 项目名称 建议学时 项目名称 建议学时 课程导读 Flash CS5 基础知识 2 单元 7 骨骼动画 6 单元 1 绘图工具的应用 10 单元 8 引导线动画 10 单元 2 逐帧动画 4 单元 9 遮罩动画 10 单元 3 动作补间动画 4 单元 10 声音和视频动画 6 单元 4 形状补间动画 4 单元 11 ActionScript 3.0 语法基础 12 单元 5 元件与库 6 单元 12 ActionScript 3.0 应用基础 14 单元 6 滤镜的应用 6 单元 13 ActionScript 3.0 综合运用 14 本书由官彬彬担任主编, 包之明 秦秋滢担任副主编 其中, 课程导读 单元 由 官彬彬编写, 单元 由闭日贡编写, 单元 由秦秋滢 赵玉编写, 单元 由包之明 黄晓敏编写 为了使实例更具有说服力, 本书中引用了有关素材, 这些素材 仅供实例制作使用, 版权归原作者所有, 在此特别声明 由于编者水平有限且编写时间仓促, 书中难免存在不妥和错误之处, 恳请广大读者批评指正 科学出版社职教技术出版中心 编者 2014 年 3 月

4 目录 课程导读 Flash CS5 基础知识 1 单元 1 绘图工具的应用 11 案例 1.1 城市夜景 12 案例 1.2 海岛绿景 17 案例 1.3 乡村风车 21 案例 1.4 圣诞贺卡 25 单元小结 28 自我测评 28 单元 2 逐帧动画 30 案例 2.1 手写字 31 案例 2.2 跳跃的豹子 34 案例 2.3 笑脸 36 案例 2.4 花儿成长 37 单元小结 40 自我测评 40 单元 3 动作补间动画 42 案例 3.1 空中客机 43 案例 3.2 文字变色 46 案例 3.3 文字逼近 48 案例 3.4 雨滴 51 单元小结 55 自我测评 56

5 Flash CS5 动画制作案例教程 单元 4 形状补间动画 58 案例 4.1 变字的枫叶 59 案例 4.2 变化的图形 61 案例 4.3 烛光 64 单元小结 66 自我测评 66 单元 5 元件与库 67 案例 5.1 穿过树林的小火车 68 案例 5.2 火把 72 案例 5.3 变化的按钮 75 案例 5.4 图片欣赏 78 单元小结 80 自我测评 80 单元 6 滤镜的应用 82 案例 6.1 可爱的小青蛙 83 案例 6.2 浓浓的咖啡 87 案例 6.3 文字特效 88 单元小结 91 自我测评 91 单元 7 骨骼动画 92 科学出版社职教技术出版中心 案例 7.1 飞翔 93 案例 7.2 骑自行车的小女孩 96 案例 7.3 舞蹈 99 单元小结 101 自我测评 101 单元 8 引导线动画 103 案例 8.1 行驶的汽车 104 案例 8.2 夏日荷塘 106 iv

6 目录 案例 8.3 星光闪闪 111 案例 8.4 大雪纷纷 115 案例 8.5 宇宙飞船 118 单元小结 120 自我测评 121 单元 9 遮罩动画 122 案例 9.1 百叶窗 123 案例 9.2 红旗飘扬 126 案例 9.3 卷轴画 129 案例 9.4 彩色霓虹 132 案例 9.5 除夕夜 135 单元小结 141 自我测评 141 单元 10 声音和视频动画 143 案例 10.1 诗歌 咏鹅 144 案例 10.2 开心农场 149 案例 10.3 添加视频 151 单元小结 154 自我测评 154 单元 11 ActionScript 3.0 语法基础 155 案例 11.1 创建简单的 ActionScript 3.0 程序 156 案例 11.2 简单的变量运算 159 案例 11.3 条件语句的应用 163 案例 11.4 循环语句的应用 166 案例 11.5 函数的定义和调用 169 案例 11.6 苹果熟了 172 单元小结 174 自我测评 174 单元 12 ActionScript 3.0 应用基础 176 案例 12.1 荷塘夏雨 177 v

7 Flash CS5 动画制作案例教程 案例 12.2 彩色字幕 182 案例 12.3 神奇的日历 186 案例 12.4 欢乐摇骰子 189 单元小结 193 自我测评 193 单元 13 ActionScript 3.0 综合应用 195 案例 13.1 卡通点歌台 196 案例 13.2 唯美风景画册 204 案例 13.3 拼图游戏 212 单元小结 216 自我测评 217 参考文献 218 科学出版社职教技术出版中心 vi

8 课程导读 Flash CS5 基础知识 Adobe Flash CS5 简称 Flash, 是一款优秀的二维矢量动画制作软件 其以便捷 完美 舒 适的动画编辑环境深受广大动画爱好者的喜欢, 同时利用其制作的作品又以文件小 交互功能 强 动画效果好等特点, 成为因特网的 宠儿, 如图 0-1 图 0-2 所示 图 0-1 雅虎网站上的广告与标题栏 图 0-2 松下网站上的广告动画 1.Flash CS5 简介 (1)Flash CS5 的优势在动画制作领域,Flash 只是众多制作软件中的一员 与其他同类型的软件相比,Flash 有着明显的优势, 除了简单易学外, 还包括以下几点优势 1) 使用功能强大的形状绘图工具处理矢量图形时, 能以直观的方式进行变形 擦除 扭曲 组合等 2) 使用内置的滤镜效果 ( 如 阴影 模糊 斜面 高光 渐变斜面 和 颜色调整 ), 可以使动画更具吸引力 3) 在 Flash CS5 中, 可以导入 Photoshop 中生成的 PSD 格式文件, 被导入的文件不但保留了原来文件的分层结构, 而且图层名称也不会发生变化 4) 可以导入 Illustrator 矢量图形文件, 并保留其所有特性, 如颜色 形状 路径等 5) 使用 Flash Player 中的高级视频 On2 VP6 编解码器, 可以在保持小文件的同时制作效果较好的视频 (2)Flash CS5 的特点 1) 使用矢量图形, 文件所占空间小 Flash 是矢量绘图软件, 与位图图形不同的是, 矢量图形产生的文件很小, 而且可以任意缩放尺寸且不影响图形的质量, 如图 0-3 所示

9 Flash CS5 动画制作案例教程 2) 使用 流式 播放技术 Flash 的 SWF 格式文件采用 Stream 信息流传送方式, 流式 播放技术使动画可以边播放边下载, 解决了网页浏览者需下载完文件才能播放的问题, 极大地 缩短了等待时间, 下载过程如图 0-4 所示 图 0-3 用 Flash 绘制的矢量图形 图 0-4 Flash 流式 下载 3) 强大的动画编辑与互交功能 设计者可以随心所欲地用 Flash 设计出高品质的动画, 通过 ActionScript 和 FS Command 可以实现交互性, 使 Flash 具有更大的设计自由度, 如图 0-5 所示 另外, 其与当今最流行的网页设计工具 Dreamweaver 配合默契, 可以直接嵌入网页的任一位置, 非常方便 实用 (3)Flash CS5 的文件类型 图 0-5 yipori 网站互动页面 Flash 支持的最基本的两种文件格式是 FLA 和 SWF 1)FLA 是 Flash 的源文件格式, 使用 Flash 制作的动画应存为 FLA 格式文件, 以便今后进 行编辑修改处理 由于是源文件格式, 这种格式是不能直接播放的 2)SWF 是 Flash 的发布文件, 是网页中最常用的文件格式, 必须使用安装了 Flash 动画播 放插件的浏览器或播放器才能观看 Flash 制作出来的文件能输出的格式也很丰富, 可以根据实际需要输出不同的格式, 方便后 期整合应用 (4)Flash CS5 的应用 Flash 具有强大的动画编辑与互交功能, 目前已经在很多领域得到了广泛的运用, 具有非常 广阔的应用前景 总体来说,Flash CS5 主要有以下四方面应用 1) 网页广告 Flash 广告因其制作简单 文件小 精悍 表现力强等特点, 非常符合网页 广告的要求, 在网页广告制作中得到了广泛的运用, 如图 0-6 所示 科学出版社职教技术出版中心 2) 动态网页 Flash 具备强大的交互功能, 使得广大的网页设计者可以基于 Flash 技术再配 合其他网页工具软件制作出丰富多彩 不同形式 极具个性的动态网页, 如图 0-7 所示 2

10 Flash CS5 基础知识 课程导读 图 0-6 SONY 网站上的广告动画 图 0-7 MANDE BEM NO ENEM 网站 3) 动画 Flash 动画相对传统动画来说制作更为简单, 成本也更低, 便于修改合成, 制作效率也大为提升 再加上 Flash 是基于矢量图形制作, 对视频及音频的良好支持及以 流式 形式进行播放等特点, 使其非常适合制作二维动画和网络动画, 如图 0-8 所示 4) 游戏 通过 Flash 中的 ActionScript 可以编写游戏程序, 配合互交功能, 能制作出单机和网络在线小游戏, 如图 0-9 所示 图 0-8 拾荒动画出品的 Flash 系列动画 小破孩 图 0-9 cgbrid 出品的 DSHEEP 系列 Flash 交互 游戏 摘星星 2. 认识 Flash CS5 工作界面 Flash CS5 的工作界面在继承原有风格的基础上融入了更多的 Adobe 元素, 相比之前的版本界面更美观, 使用更方便 快捷 启动 Flash CS5, 进入其工作界面, 工作界面由菜单栏 工具 面板 时间轴 面板 舞台 属性 面板 浮动面板等关键区域组成, 如图 0-10 所示 (1)Flash CS5 菜单栏菜单栏由 文件 编辑 视图 插入 修改 文本 命令 控制 调试 窗口 和 帮助 菜单组成, 如图 0-11 所示 1) 文件 菜单 : 对文件的基本操作, 如新建 打开 保存 导出和打印文件等 2) 编辑 菜单 : 对动画的编辑操作, 如复制 粘贴 撤销 全选 编辑元件等 3) 视图 菜单 : 对舞台进行放大 缩小, 显示辅助线 网格及尺标等操作 4) 插入 菜单 : 对编辑的文件进行插入性的操作, 如插入图层 帧 新建元件等 5) 修改 菜单 : 对动画中的帧 图层 场景 元件 形状等各种动画相关对象的属性进行修改 6) 文本 菜单 : 对于输入的文本属性进行设置调整 7) 命令 菜单 : 对各种命令进行管理 8) 控制 菜单 : 对动画进行播放 测试控制 3

11 Flash CS5 动画制作案例教程 图 0-10 Flash CS5 工作界面 9) 调试 菜单 : 对编辑的动画进行调试 10) 窗口 菜单 : 对各种面板进行打开 关闭 切换 组合 11) 帮助 菜单 : 获得 Flash CS5 相关帮助信息 (2)Flash CS5 工具 面板 图 0-11 菜单栏 工具 面板提供了一整套完善的 Flash CS5 常用绘图编辑工具, 用于绘制线 多边形 图 案 路径, 以及上色和选择等, 如图 0-12 所示 工具 面板可分为以下四部分 1) 工具部分 : 包含选择 绘图 上色 路径及多边形工具等 图 0-12 工具 面板 2) 查看部分 : 包含在舞台内移动的 手形工具 和用于缩放的 缩放工具 3) 颜色部分 : 包含用于填充颜色和边框颜色的工具 4) 选项部分 : 用于显示当前选定工具的功能设置按钮 (3)Flash CS5 时间轴 面板 1) 时间轴 面板的组成 科学出版社职教技术出版中心 时间轴 面板是 Flash CS5 界面中的关键部分, 其最重要的组成 部分就是图层与帧, 被用于组织和控制文档中的图层和帧在一定的时间内按照时间轴的排列播放, 如图 0-13 所示 4

12 Flash CS5 基础知识 课程导读 图 0-13 时间轴 面板 时间轴 面板左侧是图层区域, 如图 0-14 所示 图层可以控制舞台中的元件, 在选定的一个图层上编辑对象, 不会影响其他图层 图层就像传统动画用的赛璐片, 可以层层叠加, 上层的图层会覆盖下层的图层, 如果有透明的区域, 则可以透过上层看到下层的对象内容 在图层所属区域上方按钮由左向右分别用于控制图层的显示 锁定和轮廓, 下方按钮由左向右依次是 新建图层 新建文件夹 删除 按钮 图 0-14 图层区域 时间轴 面板右侧就是帧所在的区域, 如图 0-15 所示 帧是创建动画的基础, 也是构成动画的最基本元素 Flash CS5 制作的动画是将时间分为帧来设置动画的播放顺序 时间 帧频等 在其顶部是帧的编号, 下部则显示所编辑动画的状态 图 0-15 帧区域 2) 编辑图层和帧 1 图层 : 右击图层, 在弹出的快捷菜单中选择 属性 命令, 弹出 图层属性 对话框, 如图 0-16 所示 在 图层属性 对话框中可设置图层的名称 图层显示和锁定的控制, 当前所 5

13 Flash CS5 动画制作案例教程 图 0-16 图层属性 对话框 选择图层的类型, 改变图层在图层区所显示的轮廓颜色, 以及改变图层命名区高度 2 帧 : 帧的编辑是通过播放头来进行控制的, 如图 0-17 所示 播放头可在时间轴范围内拖动, 播放头所在时间轴上的位置, 决定了舞台此时动画帧显示的效果 时间轴 面板右下角是时间轴状态显示区域 这一区域可以显示当前编辑动画的相关信息, 如当前显示帧数 帧频及动画运行时间,Flash CS5 默认的帧频是 24 帧 / 秒, 如图 0-18 所示 图 0-17 播放头 图 0-18 时间轴状态显示区域 (4)Flash CS5 舞台舞台 ( 工作区 ) 是放置文件内容的区域, 显示的是文件影片中的单帧内容 可以在舞台中绘制和编辑每帧所包含的图形文件, 也可导入外部其他兼容素材 1) 舞台的组成 编辑区域就是舞台, 右上角的按钮依次是 编辑场景 编辑元件 按钮, 最右侧的文本框用来设定并显示比例, 如图 0-19 所示 2) 舞台的控制 舞台的控制就是指对舞台内的文档进行显示观察 通过改变显示比例可以精确观察文档, 便于编辑处理, 如图 0-20 所示 图 0-19 舞台 ( 工作区 ) 科学出版社职教技术出版中心 图 0-20 显示控制 舞台右上角显示控制所需模式, 主要包括以下几种 1 显示帧 模式 : 用于显示全部的场景 2 显示全部 模式 : 在此模式下能播放整个显示帧的内容 即使场景是空的, 也能被播放出来 6

14 Flash CS5 基础知识 课程导读 3 100% 模式 : 在此模式下, 编辑的文档将以最接近实际的尺寸显示, 也是最佳效果显示 (5)Flash CS5 属性 面板 属性 面板一般位于舞台的下方, 根据所选对象的不同, 显示不同的属性内容, 如图 0-21 所示 图 0-21 属性 面板 (6)Flash CS5 库 面板 库 面板提供动画中的各种数据的信息, 在 库 面板中可以很方便地查找 组织和调用相关资源素材, 如图 0-22 所示 库 面板中储存的素材被称为元件, 可以反复使用 元件是在 Flash CS5 中创建的图形 影片剪辑或按钮 当元件建立一次后, 即可在文档中重复使用 用户所创建的任何元件都会自动添加到当前编辑文档的库中 (7)Flash CS5 浮动面板在 Flash CS5 中, 浮动面板由各种不同功能的面板组成, 其将相关对象和工具的所有参数加以归类, 并放置在不同的面板中, 在制作动画时, 用户可以根据需要将相应面板打开 移动 关闭 如图 0-23 所示为 颜色 面板, 用于创建和编辑纯色渐变 线性渐变 径向渐变 位图填充, 可以调出各种不同的颜色, 也能设置笔触颜色 填充颜色及透明度等 图 0-22 库 面板 图 0-23 颜色 面板 3.Flash CS5 的基本操作 要想更好地学习 Flash, 首先要学会其基本操作, 如软件的启动 文件的新建 保存 打开 7

15 Flash CS5 动画制作案例教程 关闭及发布等 (1) 启动 Flash CS5 在运用 Flash CS5 制作动画之前, 首先应启动软件, 通常有以下两种方法 1) 双击 Flash CS5 图标 2) 单击 开始 按钮, 执行 所有程序 /Adobe /Design Premium CS5/ Adobe Flash Professional CS5 命令 (2) 新建文档在 Flash CS5 中, 新建文档通常用以下方法 1) 执行 文件 / 新建 命令, 弹出 新建文档 对话框, 如图 0-24 所示 2) 切换至 模板 选项卡, 在其中选择相应的选项, 如图 0-25 所示 3) 单击 确定 按钮, 即可从模板中新建文档, 如图 0-26 所示 图 0-24 新建文档 对话框 图 0-25 模板 选项卡 科学出版社职教技术出版中心 图 0-26 利用模板创建的一个新文档 8

16 Flash CS5 基础知识 课程导读 (3) 保存文档当一个动画完成后, 我们需要将其保存起来 1) 执行 文件 / 保存 命令, 由于第一次保存该文档, 因此系统将直接弹出 另存为 对话框, 选择保存的路径, 设置保存的文件名为 小牛, 保存类型为 Flash 文档 (Flash 源文件 ), 方便我们再次修改, 如图 0-27 所示 2) 如果用户需要将当前文件保存到其他位置或以另一个名称保存, 执行 文件 / 另存为 命令或按快捷键 Shift+Ctrl+S (4) 打开文档在编辑动画之前, 先要打开 Flash 文件 通常打开文档的方法有以下三种 1) 执行 文件 / 打开 命令 2) 按快捷键 Ctrl+O 3) 依次按 Alt F O 键 (5) 播放与发布文档 1) 当完成一个动画后, 要进行动画的播放, 执行 控制 / 播放 命令, 就可以观看动画了 或者执行 控制 / 测试影片 / 在 Flash Professional 中 命令, 播放影片的同时系统会自动生成一个 SWF 格式的文件 2) 执行 文件 / 导出 / 导出影片 命令, 弹出 导出影片 的对话框, 单击 保存 按钮确认, 如图 0-28 所示 图 0-27 保存文档 图 0-28 导出文档 3) 执行 文件 / 发布设置 命令, 在弹出的 发布设置 对话框中, 勾选 Flash(.swf) 和 Win 放映文件 复选框, 并单击 确定 按钮确认, 如图 0-29 所示 发布的文件将自动保存在源文件的同一路径下, 如果只要生成 SWF 格式的文件, 在保存完文档后测试影片的同时也会自动生成 SWF 格式的文件 (6) 关闭文档在对同时打开的多个文档进行编辑后, 需要将其关闭, 便于对其他文档进行编辑, 通常可以执行 文件 / 关闭 命令或按快捷键 Ctrl+W, 如果要关闭所有的文档, 执行 文件 / 全部关闭 命令或按快捷键 Ctrl+Alt+W 9

17 Flash CS5 动画制作案例教程 图 0-29 发布设置 对话框 小 结 课程导读主要为大家介绍了 Flash 的优势 特点及应用, 并着重介绍了 Flash 工作界面 ( 如 菜单栏 工具 面板 时间轴 面板 舞台 库 面板 浮动面板等 ), 以及文档的基本操作 ( 如新建 打开 保存 播放 测试 发布等 ), 为后续课程打下基础 自我测评 1.Flash 源文件格式是, 发布文件格式是 2.Flash 有哪些特点? 科学出版社 3.Flash 的应用有哪些? 4.Flash 文件 菜单中新建文件的快捷键是, 打开文件的快捷键是, 关闭文件的快捷键是, 保存文件的快捷键是 5.Flash 工作区放大的快捷键是, 缩小的快捷键是 6. 隐藏和显示 属性 面板的快捷键是, 隐藏和显示 库 面板的快捷键是 7. 在 Flash CS5 默认动画的帧频为帧 / 秒 8. 在 Flash 中, 帧的含义是什么? 9.Flash 时间轴 面板是什么? 其由哪几部分组成? 10.Flash 舞台 ( 工作区 ) 是什么? 如何控制其显示? 职教技术出版中心 10

18 单元 1 绘图工具的应用 单元导读学习目标学习任务 Flash CS5 是基于矢量的动画编辑软件, 具有强大的 矢量图绘制和编辑功能 任何复杂的动画都是由基本的图 形组成的, 因此, 绘制基本图形是制作 Flash 动画的基础 本单元主要介绍绘图工具的使用和操作技巧 1. 掌握线条工具 矩形工具 椭圆工具 多角星形工具 选择工具 任意变形工具的使用方法和操作技巧 2. 掌握铅笔工具 钢笔工具 套索工具 部分选取工具 渐变变形工具的使用方法和操作技巧 3. 掌握刷子工具 颜料桶工具 滴管工具 缩放工具的 使用方法和操作技巧 4. 掌握墨水瓶工具 橡皮擦工具 Deco 工具的使用方法 和操作技巧 1. 绘制城市夜景 2. 绘制海岛绿景 3. 绘制乡村风车 4. 绘制圣诞贺卡

19 Flash CS5 动画制作案例教程 案例 1.1 城市夜景 通过绘制 城市夜景 动画, 掌握线条工具 矩形工具 椭圆工具 多角星形工具 选择工具 任意变形工具的使用方法和操作技巧 城市夜景 动画主要由房子 路灯 月亮 星星 汽车等元素构成 在绘制时, 利用线条工具和矩形工具绘制房子 ; 利用椭圆工具绘制路灯和月亮 ; 利用多角星形工具绘制星星 ; 综合利用几种工具绘制汽车 ; 最后利用动作补间来完成汽车行驶的动画, 如图 1-1 所示 1. 制作房子 01 如图 1-2 所示 图 1-1 城市夜景 效果图 创建一个新的 Flash 文档, 设置舞台大小为 700*400 像素, 背景为蓝色 (#0033FF), 02 选择 工具 面板中的线条工具 ( 设置笔触颜色为黑色, 笔触高度为 1) 和矩形工具, 绘制一个三角形和一个矩形, 在矩形中再绘制若干个白色的小方块, 这样就完成了房 子 1 的绘制, 如图 1-3 所示 科学出版社职教技术出版中心 03 选中房子 1, 执行 修改 / 组合 命令, 或按快捷键 Ctrl+G, 将房子组合起来, 按住 Ctrl 键复制两个房子, 并调整其大小, 将其中一个房子水平翻转, 组合成房子 2, 如图 1-4 所示 12

20 绘图工具的应用单元 1 图 1-2 新建文档 对话框图 1-3 房子 1 的效果图图 1-4 房子 2 的效果图 提示 在绘制白色小矩形时, 首先在舞台的其他地方绘制好, 然后按快捷键 Ctrl+G 将其组 合后拖到房子里, 按住 Ctrl 键可再复制一个对象 2. 制作路灯 01 利用 工具 面板中的线条工具和椭圆工具, 可以完成 路灯 的绘制 02 打开椭圆工具的 属性 面板, 设置笔触颜色为 无, 填充颜色为黑色, 绘制一个黑色的小圆 03 打开线条工具的 属性 面板, 设置笔触颜色为黑色, 笔触大小为 2, 绘制一条直线 ; 选择椭圆工具, 设置内径为 60, 填充颜色为 无 ; 再绘制一个环 04 最后绘制黄色的灯及椭圆灯座, 这样就完成了路灯的制作, 按快捷键 Ctrl+G 将其组合, 如图 1-5 所示 3. 制作月亮和星星 01 选择 工具 面板中的椭圆工具, 完成 月亮 的绘制 设置笔触颜色为 无, 绘制蓝色和黄色两个圆, 将其叠加在一起, 选中蓝色的圆, 按 Delete 键, 就可以绘制好月亮 按快捷键 Ctrl+G 将其组合, 如图 1-6 和图 1-7 所示 图 1-5 路灯 效果图图 1-6 绘制两个圆图 1-7 月亮 效果图 02 绘制好房子 1 房子 2 路灯 月亮后, 用选择工具移动它们的位置, 按住 Ctrl 键可以复制多个房子和路灯, 用任意变形工具调整房子的大小, 得到高楼林立的效果 03 设置填充颜色为浅黄色 (#FFFFCC), 选择多角星形工具绘制星星, 单击多角星形工具 属性 面板中的 选项 按钮, 弹出 工具设置 对话框, 设置其参数, 如图 1-8 所示, 13

21 Flash CS5 动画制作案例教程 拖动鼠标指针就可以绘制 星星 了 提示 图 1-8 星星 参数的设置 对象绘制完成后, 注意要将其组合 如果没有组合, 一旦连在一起, 就不能分开了 4. 制作汽车 和选择工具 单击 新建图层 按钮, 新建图层 2, 使用线条工具 椭圆工具 矩形工具 来完成汽车的制作 打开椭圆工具的 属性 面板, 笔触颜色设置为黑色, 笔触大小设置为 2, 无填充色 首先绘制一个椭圆, 然后在其下方绘制一个矩形, 再用线条工具 线条, 按 Delete 键将其删除, 效果如图 1-9 所示 所示 绘制两条直线和一个椭圆, 使用选择工具 绘制两条直线, 选中多余的 调整椭圆的弧度, 效果如图 1-10 所示 使用椭圆工具绘制六个圆, 作为车轮, 用选择工具调整其弧度, 效果如图 1-11 图 1-9 绘制汽车轮廓 1 图 1-10 绘制汽车轮廓 2 图 1-11 绘制汽车轮廓 3 选择 工具 面板中的线条工具 椭圆工具和选择工具, 绘制车门 车灯, 并调整其弧度, 这样就完成了汽车轮廓的制作, 如图 1-12 所示 成时 形工具 提示 在使用选择工具调整汽车的弧度时, 当指针变成时, 可调整线的弯曲度 ; 当指针变 时, 可调整线顶端位置 选择 工具 面板中的颜料桶工具和渐变变形工具, 为汽车着色, 并用渐变变 调整渐变的方向, 如图 1-13 所示 科学出版社职教技术出版中心 选择第 70 帧, 按 F6 键插入关键帧, 右击, 在弹出的快捷菜单中选择 创建传统 补间 命令, 将汽车的位置从舞台的右边拖到左边, 就可以完成小汽车缓缓行驶的效果, 时间 14

22 绘图工具的应用单元 1 轴如图 1-14 所示 图 1-12 绘制汽车轮廓 图 1-13 为汽车填充颜色 图 1-14 时间轴动画补间 5. 测试影片 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 城市夜景.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 1. 线条工具使用 工具 面板中的线条工具可以绘制不同属性的线条 选择绘制的线条, 在 属性 面板的 填充和笔触 选项组中可以对线条的属性进行设置, 如图 1-15 所示 属性 面板中主要选项的含义如下 笔触颜色 按钮 : 单击该按钮, 在弹出的颜色面板中选择所需的颜色, 或者单击颜色面板右上角的按钮, 在弹出的 颜色 对话框中对笔触颜色进行设置 笔触高度 文本框 : 用来设置所绘制线条的粗细 可以拖动 笔触 滑块来设置, 也可以在文本框中输入笔触的高度值 笔触 样式 下拉列表框 : 单击右侧的下拉按钮, 可以在弹出的下拉列表框中选择需要绘制的线条样式 按住 Shift 键拖动鼠标可以绘制 45 的线条 ; 按 N 键可以选择线条工具 2. 矩形工具使用矩形工具可以绘制矩形和正方形 通过矩形工具的 属性 面板设置矩形的边框属性和填充颜色等 当拖动 矩形选项 选项组中的 将边角半径控制锁定为一个控件 滑块时, 可以绘制各种不同圆弧半径的圆角矩形, 如图 1-16 所示 按住 Shift 键拖动鼠标可以绘制正方形, 按 R 或 O 键可进行矩形工具与椭圆工具的切换 15

23 Flash CS5 动画制作案例教程 图 1-15 线条工具 属性 面板 图 1-16 矩形工具 属性 面板 3. 椭圆工具 使用椭圆工具 可以绘制椭圆 正圆 环等几何图形 通过对椭圆工具 属性 面板中的 内径参数进行设置, 可以绘制环形 ; 通过设置开始角度和结束角度可以绘制半弧, 如图 1-17 所 示 ; 按住 Shift 键拖动鼠标可以绘制正圆 4. 多角星形工具 使用多角星形工具 可绘制多边形和多角星形 单击多角星形工具 属性 面板中的 选 项 按钮, 在弹出的 工具设置 对话框中可以设置绘制多角星形的样式 边数 星形顶点大 小, 如图 1-18 和图 1-19 所示 图 1-17 椭圆工具 属性 面板图 1-18 多角星形工具 属性 面板图 1-19 工具设置 对话框 5. 选择工具 选择工具 主要用来选择和移动对象 可以选择任意对象, 如矢量图形 元件 位图 ; 选 中对象后还可以对对象进行移动 改变形状等操作 科学出版社职教技术出版中心 单击对象可选择单个对象 ; 按住鼠标左键拖出矩形选取框可以选择单个或多个对象 按住 Ctrl 键, 选中对象, 拖动鼠标, 当鼠标指针变成后, 即可复制对象 16

24 绘图工具的应用单元 1 6. 任意变形工具任意变形工具用来调整对象的宽度 高度 倾斜角度 旋转方向等 使用任意变形工具编辑对象时, 首先要选中被编辑的对象 当鼠标指针移动到对象的边角, 指针变为时, 可以改变对象的大小 当鼠标指针移动到对象的左右边线中部, 指针变为时, 可以改变对象的宽度 当鼠标指针移动到对象的上下边线中部, 指针变为时, 可以改变对象的高度 当鼠标指针移动到对象的边线时, 指针变为时, 可以改变对象的倾斜角度 当鼠标指针移动到对象的边线外部时, 指针变为时, 可以旋转对象 案例 1.2 海岛绿景 通过绘制 海岛绿景 动画, 掌握铅笔工具 钢笔工具 套索工具 部分选取工具 渐变变形工具的使用方法和操作技巧 海岛绿景 动画主要由岛屿 沙滩 椰树 太阳 海鸟等元素构成, 使用椭圆工具 钢笔工具 部分选取工具将其绘制出来, 用颜料桶工具 和渐变变形工具为其着色, 使整个画面栩栩如生, 如图 1-20 所示 图 1-20 海岛绿景 效果图 1. 制作背景 创建一个新的 Flash 文档, 设置舞台大小为 600*450 像素, 背景为白色 双击图层 1, 弹出 图层属性 对话框, 在 名称 文本框内输入 背景 使用矩 17

25 Flash CS5 动画制作案例教程 形工具绘制一个矩形, 填充浅紫 (#9999FF) 白色 (#FFFFFF) 深绿 (#OABAAC) 果绿 (#26C688) 土黄 (#B4CB7D) 的线性渐变, 用渐变变形工具调整渐变的方向, 完成背景的制作 提示 在填充几种颜色的线性渐变时, 打开 颜色 面板, 设置 颜色类型 为 线性渐变, 当鼠标指针变成 颜色 时, 单击即可增加一个滑块, 双击该滑块后弹出颜色面板, 可选择相应的 2. 制作岛屿 01 单击 新建图层 按钮, 新建图层 2, 取名 岛屿 用钢笔工具绘制海岛的形状, 再用部分选取工具选择所有锚点, 拖动控制柄, 可调整曲线的弧度, 或用转换锚点工具调 整曲线的弧度, 调整到满意为止, 如图 1-21 所示 02 用颜料桶工具为岛屿填充深灰 (#666666) 白色 (#FFFFFF) 的线性渐变, 并用渐变变形工具调整其方向 图 1-21 海岛的路径 后, 按 Delete 键将其删除 形工具 02 用颜料桶工具 按快捷键 Ctrl+G 将绘制好的岛屿组合起来, 选择选择 工具, 按 Ctrl 键复制多个岛屿, 并用任意变形工具调整其大小, 放到恰当的位置, 执行 修改 / 排列 / 下移一层 命令, 调整岛屿的前 后位置, 使岛屿高低不齐 3. 制作沙滩 单击 新建图层 按钮, 新建图层 3, 取名 沙滩 用椭 圆工具绘制一个椭圆, 用选取工具将椭圆的下半部分和右侧选中 填充金黄 (#FFCC00) 白色 (#FFFFFF) 的线性渐变, 用渐变变 调整颜色的方向, 这样沙滩就制作完成了 4. 制作椰树 01 单击 新建图层 按钮, 新建图层 4, 取名 椰树 先用钢笔工具绘制椰树的轮廓, 再用部分选取工具和转换锚点工具调整曲线的弧度, 最终完成椰树的制作, 如图 1-22 所示 使用颜料桶工具和渐变变形工具为椰树着色, 如图 1-23 所示 科学出版社职教技术出版中心 图 1-22 椰树的路径 图 1-23 为椰树着色 18

26 绘图工具的应用单元 1 5. 制作太阳 01 单击 新建图层 按钮, 新建图层 5, 取名 太阳 用椭圆工具绘制圆, 使用颜料桶工具填充金黄 红色的径向渐变, 执行 修改 / 形状 / 柔化填充边缘 命令, 弹出 柔化填充边缘 对话框, 在该对话框中进行参数设置, 如图 1-24 所示, 使得绘制出来的太阳带有模糊效果 02 用选择工具选中太阳下半部分, 按 Delete 键将其删除 拖动 太阳 图层至 背景 图层上方, 使太阳在岛屿的后面 6. 制作海鸟 01 单击 新建图层 按钮, 新建图层 6, 取名 海鸟 使用椭圆工具绘制一个白色的椭圆, 再用选择工具选中下半个圆, 将其删除, 用增加锚点工具在半圆的下方增加锚点, 用转换锚点工具和部分选取工具调整曲线的弧度, 得到海鸟的翅膀 02 按住 Ctrl 键拖动鼠标, 复制海鸟的翅膀, 即得到另外一个翅膀 执行 修改 / 变形 / 水平翻转 命令, 将其水平翻转 ; 再绘制一个半圆, 修改其形状, 得到海鸟的身体, 这样一只海鸟就制作完成了, 如图 1-25 所示 图 1-24 柔化填充边缘 参数设置 图 1-25 海鸟形状 03 在第 50 帧插入关键帧, 右击, 在弹出的快捷菜单中选择 创建传统补间 命令, 在 第 50 帧调整 海鸟 的大小和位置, 时间轴如图 1-26 所示 7. 测试影片 图 1-26 时间轴动画补间 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 海岛绿景.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 提示 当制作的动画图层比较多时, 可在编辑完一个图层后将其锁定, 再对其他图层进行编辑 19

27 Flash CS5 动画制作案例教程 1. 铅笔工具 使用铅笔工具 不但可以绘制出不封闭的直线 竖线和曲线, 而且可以绘制出各种不规则 的封闭图形 使用铅笔工具绘制的曲线通常不够精确, 但可以通过编辑曲线进行修整 铅笔模式有 直线化 平滑 墨水 三种, 如图 1-27 所示 直线化 : 选择该模式绘制出的曲线将为直线, 即降低平滑度 平滑 : 选择该模式绘制出的曲线将自动光滑, 即增加平滑度 墨水 : 选择该模式绘制出的曲线将不作处理, 即不改变平滑度 图 1-27 铅笔模式 选项 2. 钢笔工具 使用钢笔工具 可以绘制线条或曲线, 其比铅笔工具更能精确 地调整线条的角度 长度及曲线的斜率 通过添加锚点工具 删 除锚点工具和转换锚点工具来调整曲线 当鼠标指针移动到路径或者路径锚点附近时, 鼠标指针形状有 如下几种形式 当鼠标指针变成时, 可移动整个路径 当鼠标指针变成时, 可移动该处锚点的位置 当鼠标指针变成时, 可调整曲线锚点的控制柄 3. 套索工具 使用套索工具 可以精确地选择不规则图形中的任意区域 选择套索工具, 将鼠标指针移 至舞台中, 按住鼠标左键并拖动鼠标指针至合适的位置, 释放鼠标左键, 即可在图形对象中选 择需要的范围 选择套索工具后, 在 工具 面板的底部显示套索按钮, 其含义如下 魔术棒 按钮 : 用于选择色彩范围 魔术棒设置 按钮 : 用于设置魔术棒选择的色彩范围 多边形模式 按钮 : 对不规则的图形进行比较精确的选择 魔术棒工具能选择图像中颜色相近的区域, 可以除去图像中的背景颜色等 使用方法 : 选 择 工具 面板中的套索工具, 再单击 工具 面板选项栏中的 魔术棒 按钮, 单击要去除 颜色的区域, 再按 Delete 键将选取的区域删除 4. 部分选取工具 部分选取工具 节点和调整节点方向等 5. 渐变变形工具 使用渐变变形工具 是用于修改和调整路径的有效工具, 主要用于选择线条 移动线条 编辑 可以对图形进行渐变色和位图的填充 渐变效果分为线性渐变和径向 渐变, 通过调整填充大小 方向 中心点位置, 使填充渐变效果更好, 如图 1-28 所示 科学出版社职教技术出版中心 20

28 绘图工具的应用单元 1 图 1-28 改变线性渐变时的操作方法 案例 1.3 乡村风车 通过绘制 乡村风车 动画, 掌握刷子工具 颜料桶工具 滴管工具 缩放工具等的使用方法和操作技巧 乡村风车 动画主要由背景天空 云朵 太阳 屋子 向日葵等元素构成 由于元素较多, 在绘制时可以分图层来完成 先用椭圆工具 矩形工具 线条工具 铅笔工具将这些元素绘制出来, 再用渐变变形工具和颜料桶工具对其填充颜色, 最后完成风车转动的动画, 如图 1-29 所示 图 1-29 乡村风车 效果图 1. 制作背景天空 山坡 创建一个新的 Flash 文档, 设置舞台大小为 600*400 像素, 背景为白色 双击图层 1, 在其名称文本框内输入 天空 使用矩形工具 绘制一个矩形, 填充 21

29 Flash CS5 动画制作案例教程 蓝色到白色的线性渐变, 利用渐变变形工具 调整渐变的方向, 完成背景天空的制作 03 单击 新建图层 按钮, 新建图层 2, 并取名为 山坡 使用线条工具 绘制五 段线条, 用选择工具 指向线条的边缘, 拖动鼠标, 使直线变成弧线, 绘制山坡, 填充绿色 (#009900) 深绿色 (#00CC00) 线性渐变, 使用渐变变形工具 调整渐变的方向, 完成背 景山坡的制作 2. 制作云朵 太阳和蝴蝶 01 单击 新建图层 按钮, 新建图层 3, 取名为 云朵 设置笔触颜色为无, 使用椭 圆工具 02 绘制三个椭圆并将其叠加在一起, 这样就完成了云朵的制作 单击 新建图层 按钮, 新建图层 4, 取名为 太阳 设置笔触颜色为无, 使用椭 圆工具 绘制一个圆, 填充红色, 执行 修改 / 形状 / 柔化填充边缘 命令, 在弹出的 柔化填 充边缘 对话框中设置距离为 40 像素, 步骤数为 40, 如图 1-30 所示, 就完成了太阳的绘制 图 1-30 柔化填充边缘 参数设置 03 执行 文件 / 导入 / 导入到库 命令, 弹出 导入到库 对话框将 蝴蝶.jpg 素材导入到库中 单击 新建图层 按钮, 新建图层 5, 取名为 蝴蝶, 将 蝴蝶.jpg 素材拖到舞台, 执行 修改 / 分离 命令, 用魔术棒工具 3. 制作向日葵 形工具 04 选中背景, 按 Delete 键将其删除, 并调整蝴蝶的大小 01 单击 新建图层 按钮, 新建图层 6, 取名为 向日葵 使用椭圆工具和任意变 绘制 花朵 先用椭圆工具绘制一个椭圆, 如图 1-31 所示, 选择任意变形工具, 将 中心小圆移至椭圆的下方, 如图 1-32 所示 ; 打开 变形 面板, 旋转角度设置为 6, 单击 重 制选区和变形 按钮, 如图 1-33 所示 ; 再选择椭圆工具 制一个圆作为花蕊, 最后完成花朵的制作, 如图 1-34 所示, 填充颜色为褐色 (#7D4512), 绘 科学出版社职教技术出版中心 图 1-31 绘制椭圆图 1-32 移动中心小圆位置图 1-33 变形 面板 22

30 绘图工具的应用单元 1 02 进行 叶子 的绘制 使用椭圆工具和部分选取工具来完成 叶子 的制作, 并用颜料桶工具填充黄色 绿色的线性渐变, 调整颜色的方向, 如图 1-35 所示 03 用线条工具绘制 花茎 按住 Ctrl 键, 复制几片 叶子, 调整 叶子 的位置及大小, 最终完成整个 向日葵 的制作, 如图 1-36 所示 图 1-34 花朵 效果图图 1-35 叶子 效果图图 1-36 向日葵 效果图 提示 绘制 叶子 时, 先用椭圆工具绘制一个椭圆, 然后用部分选取工具选中一个锚点, 按 Delete 键将其删除; 将多余的几个锚点删除后, 再选择选择工具, 当鼠标指针变成形状时, 调整椭圆弧度, 就可以将叶子绘制出来了 4. 制作屋子和风车 01 单击 新建图层 按钮, 新建图层 7, 取名为 屋子 选择线条工具, 设置其属性, 笔触颜色为橘红色, 笔触大小为 2, 绘制屋子的轮廓, 用选择工具将房子的部分边缘调整成弧线 02 使用颜料桶工具和渐变变形工具填充屋子的颜色, 效果为浅黄色的屋子, 橘红色 黄色线性渐变的屋顶, 浅蓝色的窗户, 如图 1-37 所示 03 单击 新建图层 按钮, 新建图层 8, 取名为 风车 使用线条工具绘制风车, 并对风车填充橘色 黄色的线性渐变, 如图 1-38 所示 04 在第 30 帧插入关键帧, 右击, 在弹出的快捷菜单中选择 创建传统补间 命令 打开帧 属性 面板, 设置顺时针旋转 1 次, 如图 1-39 所示 图 1-37 屋子 效果图图 1-38 风车 效果图图 1-39 帧属性面板的设置 提示 使用颜料桶工具填充颜色时, 如果不能填充颜色, 说明线条相交处有空隙, 只需单击 工具 面板中的 空隙大小 按钮, 在弹出的列表框中选择 封闭大空隙 选项即可 ; 如果仍然不能进行填充, 可以用铅笔工具将缺口连接后再填充 23

31 Flash CS5 动画制作案例教程 5. 测试影片 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 乡村风车.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 1. 刷子工具使用刷子工具可以利用画笔的各种形状, 为各种物体涂抹颜色 选择刷子工具后, 在 工具 面板下方单击 刷子模式 按钮, 在弹出的列表框中可以选择五种模式, 如图 1-40 所示 各模式的含义如下所述 标准绘画 模式 : 会在同一层的线条和填充上涂色 颜料填充 模式 : 对填充区域和空白区域涂色, 不影响线条 后面绘画 模式 : 在舞台上同一层的空白区域涂色, 不影响线条和填充 图 1-40 刷子模式 选项 颜料选择 模式 : 可将新的填充应用到选区中 内部绘画 模式 : 对刷子笔触开始时所在的填充进行涂色, 但不对线条涂色 2. 颜料桶工具 颜料桶工具 具 面板中单击 空隙大小 按钮具的填充方式, 如图 1-41 所示 3. 滴管工具 滴管工具 可以对选择区域或封闭区域或位图等填充颜色 选择颜料桶工具后, 在 工, 在弹出的列表框中选择一个选项, 从而决定颜料桶工 可以吸取矢量色块属性 矢量线条属性 位图属性 及文字属性等, 并可以将选择的属性应用到其他对象中 4. 缩放工具 缩放工具 用来放大和缩小舞台的显示大小, 在处理图像的细微处时, 使用该工具可以帮 助设计者完成重要细节的修改 选择缩放工具后, 在 工具 面板中会显示 放大 和 缩小 按钮, 用户可以根据需要选择相应的工具 5. 手形工具 科学出版社职教技术出版中心 图 1-41 空隙大小 选项 当舞台的尺寸非常大或舞台被放大, 在工作区域不能完全显示舞台中的内容时, 可以使用手形工具移动舞台 24

32 绘图工具的应用单元 1 案例 1.4 圣诞贺卡 通过绘制 圣诞贺卡 动画, 掌握墨水瓶工具 橡皮擦工具 Deco 工具的使用方法和操作技巧 圣诞贺卡 动画主要由背景 星星 贺卡纸 圣诞老人 圣诞树 礼物等元素构成 贺卡里的星星和圆在不同的位置显示, 如图 1-42 所示 图 1-42 圣诞贺卡 效果图 1. 制作背景 星星 01 创建一个新的 Flash 文档, 设置舞台大小为 600*550 像素, 背景为白色 02 双击图层 1, 在其名称文本框内输入 背景, 使用矩形工具绘制一个矩形, 填充红色 深红色的径向渐变, 利用渐变变形工具调整渐变的位置 03 单击 新建图层 按钮, 新建图层 2, 取名为 星星, 使用多角星形工具绘制大小不一的五角星, 在第 25 帧 50 帧插入关键帧, 调整星星的位置 2. 制作贺卡纸 01 单击 新建图层 按钮, 新建图层 3, 取名为 贺卡纸 02 选择矩形工具, 在其 属性 面板中设置笔触颜色为无, 填充颜色为浅黄色,Alpha 值为 100%, 使用矩形工具绘制一个矩形 25

33 Flash CS5 动画制作案例教程 03 图 1-43 所示 选择椭圆工具, 在其 属性 面板中设置填充颜色为蓝色, 绘制一串小圆, 如 图 1-43 绘制蓝色小圆 将一串蓝色小圆移到矩形边缘, 确定后再移开小圆, 就可以完成制作带齿的贺卡纸 选择任意变形工具, 选中贺卡纸并旋转 3. 制作圣诞树 01 单击 新建图层 按钮, 新建图层 4, 取名为 圣诞树 选择 Deco 工具 其 属性 面板, 设置绘制效果为 树刷子, 高级选项为 圣诞树, 如图 1-44 所示 02 拖动鼠标指针, 完成两颗圣诞树的制作, 效果如图 1-45 所示 4. 完成图片处理 01, 打开 执行 文件 / 导入 / 导入到库 命令, 弹出 导入到库 对话框, 分别将 圣诞老人 礼物 圣诞快乐 三张图片导入库中 02 单击 新建图层 按钮, 新建图层 5, 取名为 圣诞老人 将 圣诞老人 图片拖 入舞台, 执行 修改 / 分离 命令, 设置魔术棒参数, 如图 1-46 所示 图 1-44 Deco 工具属性的设置图 1-45 圣诞树的效果图 1-46 魔术棒参数的设置 03 选择魔术棒工具 理可以使用橡皮擦工具 选择墨水瓶工具, 单击图片中白色的背景, 按 Delete 键删除背景颜色, 局部处, 笔触高度设置为 3, 颜色为白色, 为圣诞老人图片描白色的边 依次分图层完成对 礼物 和 圣诞快乐 两张图片的处理 5. 测试影片 科学出版社职教技术出版中心 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 圣诞贺卡.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 26

34 绘图工具的应用单元 1 1. 墨水瓶工具 的边线 使用墨水瓶工具 可以为绘制好的矢量线段填充颜色, 或为一个填充图形区域添加封闭 2. 橡皮擦工具 橡皮擦工具 用来擦除多余的部分 3.Deco 工具 Deco 工具是 Flash 中一种类似 喷涂刷 的填充工具, 使用该工具可以快速完成大量相同元素的绘制, 也可以制作出很多复杂的动画效果 将其与图形元件和影片剪辑元件配合, 可以制作出效果更加丰富的动画效果 Deco 工具提供了众多的应用方法, 除了使用默认的一些图形绘制以外,Flash CS5 还为用户提供了开放的创作空间, 可以让用户通过创建元件, 完成复杂图形或者动画的制作 Flash CS5 共提供了 13 种绘制效果, 如图 1-47 所示, 通过设置 高级选项 可以实现不同的绘制效果, 如图 1-48 所示 图 种绘制效果 图 1-48 高级选项 设置 (1) 藤蔓式填充利用 藤蔓式填充 效果, 可以用藤蔓式图案填充舞台 元件或封闭区域 通过从库中选择元件, 可以替换叶子和花朵的插图 生成的图案将包含在影片剪辑中, 而影片剪辑本身包含组成图案的元件 (2) 网格填充 网格填充 可以将基本图形元素复制, 并将其有序地排列到整个舞台上, 产生类似壁纸的效果 27

35 Flash CS5 动画制作案例教程 (3) 对称刷子 使用 对称刷子 效果, 可以围绕中心点对称排列元件 在舞台上绘制元件时, 将显示手 柄, 使用手柄增加元件数 添加对称内容或者修改效果, 从而控制对称效果 使用 对称刷子 效果可以创建圆形用户界面元素和旋涡图案 (4)3D 刷子 通过 3D 刷子 效果, 可以在舞台上对某个元件的多个实例涂色, 使其具有 3D 透视效果 (5) 建筑物刷子 使用 建筑物刷子 效果, 可以在舞台上绘制建筑物 建筑物的外观取决于为建筑物属性 选择的值 (6) 装饰性刷子 通过应用 装饰性刷子 效果, 可以绘制装饰线, 如点线 波浪线及其他线条 (7) 火焰动画 火焰动画 效果可以创建程序化的逐帧火焰动画 (8) 火焰刷子 借助 火焰刷子 效果, 可以在 时间轴 面板的当前帧中的舞台上绘制火焰 (9) 花刷子 借助 花刷子 效果, 可以在时间轴的当前帧中绘制程式化的花 (10) 闪电刷子 通过 闪电刷子 效果可以创建闪电效果, 而且还可以创建具有动画效果的闪电 (11) 粒子系统 使用 粒子系统 效果, 可以创建火 烟 水 气泡及其他效果的粒子动画 (12) 烟动画 烟动画 效果可以创建程序化的逐帧烟动画 (13) 树刷子 通过 树刷子 效果, 可以快速创建树状插图 单元小结 本单元着重为大家介绍了绘图工具的使用方法及操作技巧 当绘制的矢量图形中的对象比 较多时, 通常可以采用以下几种方式完成 1) 在同一图层绘制不同对象时, 每绘制完成一个元素将其组合 2) 分图层来绘制不同的对象 3) 当动画中的对象比较多时, 可将某个对象制作成元件, 重复使用 制作元件的方法将在 后续单元里介绍 自我测评 科学出版社职教技术出版中心 1. 制作 荷塘月色 动画 : 宁静的夜晚, 一轮圆月高高挂在天空, 池塘里, 几只蜻蜓在荷 28

36 绘图工具的应用单元 1 叶上休憩, 如图 1-49 所示 图 1-49 荷塘月色 效果图 2. 制作 乡村小屋 动画, 该动画中向日葵 小屋 云朵 树组成了一幅美丽的田园风景, 如图 1-50 所示 所示 图 1-50 乡村小屋 效果图 3. 制作 可爱的小猪 动画, 该动画中小猪 爱心构成一幅温馨的画面, 效果如图 1-51 图 1-51 可爱的小猪 效果图 29

37 单元 2 逐帧动画 单元导读 学习目标 学习任务 根据动画制作技术的不同,Flash 动画分为逐帧动画和补间动画两种基本类型 简单来讲, 逐帧动画是指时间轴上的每一帧中的内容都有所改变, 其原理是在连续的关键帧中分解动画动作, 更改每一帧中的动画内容 因此, 逐帧动画中的每一帧都是关键帧, 制作起来比较烦琐, 而且文件也较大, 但是逐帧动画也有优势, 其灵活性较好, 很适合做细腻的动画, 如人走路 说话等各种动作 1. 了解逐帧动画的制作原理, 掌握逐帧动画的制作方法 2. 学会素材的导入 3. 掌握帧的相关知识 1. 绘制手写字 2. 绘制跳跃的豹子 3. 绘制笑脸 4. 绘制花儿成长 科学出版社职教技术出版中心

38 逐帧动画单元 2 案例 2.1 手写 字 通过制作 手写字 动画, 学习文档属性的设置 图像的导入, 领会逐帧动画的制作原理和操作方法 在精美的背景图片上, 使用铅笔工具依次写出 新年好 三个字, 如图 2-1 所示 图 2-1 手写字 效果图 1. 制作文字的动画 01 创建一个新的 Flash 文档, 设置舞台大小为 400*550 像素, 背景为白色, 帧频为 24 帧 / 秒 02 执行 文件 / 导入 / 导入到舞台 命令, 弹出 导入 对话框, 在该对话框内选择需要导入的图片, 单击 打开 按钮 03 选中舞台中的图片, 执行 窗口 / 属性 命令, 在位图 属性 面板中修改位图的大小与舞台大小一致, 如图 2-2 所示 图 2-2 位图 属性 面板参数的设置 04 选择 工具 面板中的 Deco 工具, 打开其属性面板, 单击 绘制效果 下拉按钮, 在弹出的下拉列表框中选择 花刷子 选项 ; 单击 高级选项 下拉按钮, 在弹出的下拉列表框中选择 玫瑰 选项, 如图 2-3 所示, 在舞台上绘制一束玫瑰花 31

39 Flash CS5 动画制作案例教程 05 单击 新建图层 按钮, 新建图层 2, 选择刷子工具, 设置刷子大小和刷子形状, 如图 2-4 所示 06 用铅笔工具写 新 字的第 1 笔, 再按快捷键 F6 插入关键帧, 写 新 字的第 2 笔, 以此类推, 将 新年好 三个字完成 时间轴如图 2-5 所示 图 2-3 Deco 工具参数的设置 图 2-4 刷子工具笔触的选择 2. 测试影片 图 2-5 手写字 时间轴 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 手写字.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 1. 有关帧的概念 1) 帧 : 构成动画的一系列画面称为帧, 其是 Flash 动画制作的基本单位, 在时间轴上显示 为灰色填充的小方格 2) 帧频 : 动画播放的速度, 它是每秒钟播放的帧数的度量单位 Flash CS5 默认的帧频为 24 帧 / 秒 3) 关键帧 : 用于定义动画变化的帧 制作动画时, 在不同的关键帧上绘制或编辑对象, 再 通过一些设置便能形成动画, 如图 2-6 所示 4) 普通帧 : 延伸关键帧上的内容 制作动画时, 经常需要将某一关键帧上的内容向后延伸, 此时可以通过添加普通帧来实现, 如图 2-6 所示 科学出版社职教技术出版中心 5) 空白关键帧 : 表示该关键帧中没有任何内容, 这种帧主要用于结束前一个关键帧的内容 32

40 逐帧动画单元 2 或用于分隔两个相连的补间动画 空白关键帧在 时间轴 面板中以一个空心圆表示, 如图 2-6 所示 图 2-6 帧的介绍 2. 不同种类动画的表示方法 1) 动作补间动画 : 在关键帧之间有一条水平指向右的黑色箭头, 帧单元格为蓝色背景 2) 形状补间动画 : 在关键帧之间也有一条水平指向右的黑色箭头, 但单元格为浅绿色背景 3) 虚线 : 表示在创建过渡动画中存在错误, 无法正确完成动画的制作 3. 帧的操作 1) 常用的插入关键帧的方法有以下几种 选择某帧, 按快捷键 F6 选择某帧, 执行 插入 / 关键帧 命令 将鼠标指针移到要插入关键帧的帧上, 右击, 在弹出的快捷菜单中选择 插入关键帧 命令 2) 常用的插入帧的方法有以下几种 选择某帧, 按快捷键 F5 选择某帧, 执行 插入 / 帧 命令 将鼠标指针移到要插入关键帧的帧上, 右击, 在弹出的快捷菜单中选择 插入帧 命令 按住 Alt 键, 将鼠标指针移到关键帧处, 当鼠标指针呈黑色箭头形状时, 向右拖动关键帧, 即可产生一个或多个普通帧, 但最后一个是关键帧 3) 常用的插入空白关键帧的方法如下 选择某帧, 按快捷键 F7 选择某帧, 执行 插入 / 空白关键帧 命令 将鼠标指针移到要插入关键帧的帧上, 右击, 在弹出的快捷菜单中选择 插入空白关键帧 命令 4) 编辑帧 在 Flash CS5 中, 系统提供了强大的帧编辑功能, 用户可以根据需要在 时间轴 面板中编辑各种帧 编辑帧可以通过在菜单中选择命令来完成, 也可右击需要编辑的帧, 在弹出的快捷菜单中选择各种编辑帧的命令, 如图 2-7 所示 可以对选择的帧进行移动 翻转 复制 转换 删除和清除等操作 33

41 Flash CS5 动画制作案例教程 图 2-7 帧的快捷菜单 案例 2.2 跳跃的豹子 通过制作 跳跃的豹子 动画, 学会如何导入素材, 逐步掌握图像 逐帧动画的制作方法 跳跃的豹子 动画通过导入外部八幅豹子不同动作的位图, 并将其 分别放置在时间轴八个不同的帧上, 连续播放而产生豹子跳跃的效果, 如图 2-8 所示 科学出版社职教技术出版中心 图 2-8 跳跃的豹子 效果图 34

42 逐帧动画单元 2 1. 导入素材 01 创建一个新的 Flash 文档, 设置文档的尺寸大小为 300*250 像素, 背景颜色为浅蓝色 (#99CCFF) 02 执行 文件 / 导入 / 导入到库 命令, 弹出 导入到库 对话框, 在 素材 文件夹中, 选中 位图 1 ~ 位图 8 八幅图片素材, 单击 打开 按钮, 将图片导入 库 面板中 2. 利用素材制作逐帧动画 01 选择图层 1 第 1 帧, 从 库 面板中将 位图 1 拖到舞台, 执行 窗口 / 对齐 命令, 在弹出的 对齐 面板中勾选 与舞台对齐 复选框, 选择 水平中齐 和 垂直中齐, 将位图相对舞台居中, 如图 2-9 所示 02 执行 修改 / 分离 命令或按快捷键 Ctrl+B, 进行图像的打散, 选择 工具 面板中的魔术棒工具, 单击白色的背景后按 Delete 键, 删除背景 03 在第 2 帧按快捷键 F7, 插入空白关键帧, 从 库 面板中将 位图 2 拖到舞台, 并将位图相对舞台居中, 并且对白色的背景进行处理 04 参照上述操作方法, 在第 3~8 帧插入空白关键帧, 每帧一幅位图, 依次从 库 面板中将 位图 3 ~ 位图 8 拖到舞台, 将位图相对舞台居中, 并对白色的背景进行处理 图 2-9 对齐 面板参数设置 3. 测试影片 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 跳跃的豹子.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 提示 删除位图背景的方法如下 : 将位图图像拖入舞台后, 首先将位图分离 ( 执行 修改 / 分离 命令, 或按快捷键 Ctrl+B ), 再选择 工具 面板中的魔术棒工具, 单击图片的背景, 按 Delete 键, 即可删除背景 Flash CS5 提供的绘图工具和公用库的内容对于制作一个大型的项目而言是不够的, 因此需要从外部导入所需的素材文件 在 Flash CS5 中可导入的文件格式类型有矢量图形 位图图像 视频和音频等 1. 导入位图执行 文件 / 导入 / 导入到库 命令, 弹出 导入到库 对话框, 在该对话框内可以选择文 35

43 Flash CS5 动画制作案例教程 件类型 文件夹 文件, 如图 2-10 所示, 再单击 打开 按钮, 即可将选定的素材导入库中, 使用时打开 库 面板将其拖入舞台即可 2. 导入矢量图形执行 文件 / 导入 / 导入到库 命令, 弹出 导入到库 对话框, 在该对话框内可以选择 Illustrator 文件 01.ai, 再单击 打开 按钮, 弹出 将 01.ai 导入到库 对话框, 如图 2-11 所示, 单击 确定 按钮, 即可导入所选 Illustrator 文件 在导入的 Illustrator 文件中, 所有的对象都将组合成一个组, 如果要对导入的文件进行编辑, 需将群组打散 图 2-10 导入到库 对话框 图 2-11 将 01.ai 导入到库 对话框 案例 2.3 笑 脸 通过绘制 笑脸 动画, 学习怎样使用绘图工具绘制简单图形, 逐 步掌握图像逐帧动画的制作方法 笑脸 动画主要利用椭圆工具来绘制 眼睛和嘴巴, 通过眼睛和嘴巴的变化产生动画, 如图 2-12 所示 科学出版社职教技术出版中心 图 2-12 笑脸 的效果图 1. 绘制笑脸 01 白色 创建一个新的 Flash 空白文档, 设置大小为 200*200 像素, 帧频为 24 帧 / 秒, 背景为 36

44 逐帧动画单元 2 02 选择 工具 面板中的椭圆工具, 设置笔触颜色为黑色, 笔触高度为 2, 填充颜 色为黄色, 绘制一个正圆 03 单击 新建图层 按钮, 新建图层 2, 使用线条工具 绘制嘴巴 04 单击 新建图层 按钮, 新建图层 3, 使用椭圆工具 绘制眼睛 2. 修改嘴巴和眼睛 在第 5 帧 第 10 帧 第 15 帧 第 20 帧按快捷键 F6, 插入关键帧 分别修改图层 2 的第 5 帧 第 10 帧 第 15 帧嘴巴的形状, 如图 2-13 所示 图 2-13 嘴巴 的三种不同形状 03 单击图层 3 的第 5 帧, 修改眼睛的形状, 执行 窗口 / 变形 命令, 打开 变形 面板, 调整眼睛大小到 120%, 如图 2-14 所示 04 单击图层 3 的第 15 帧, 修改眼睛的形状 第 5 帧和第 15 帧眼睛的形状如图 2-15 所示 3. 测试影片 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 笑脸.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 图 2-14 变形 面板的参数设置 图 2-15 眼睛 的两种形状 案例 2.4 花儿成长 通过制作 花儿成长 动画, 进一步了解逐帧动画的制作原理, 掌握逐帧动画的制作方法 先用铅笔工具绘制背景, 然后依次绘制绿叶 花茎 花朵, 连续播放产生 花儿的成长 动画效果, 如图 2-16 所示 37

45 Flash CS5 动画制作案例教程 图 2-16 花儿成长 效果图 1. 制作背景 01 创建一个新的 Flash 文档, 设置帧频为 3 帧 / 秒, 背景为水湖蓝色 (#99FFFF) 02 选择铅笔工具绘制一条曲线, 再用线条工具绘制三根直线, 将其与曲线相连, 组成一个闭合的图形 03 选择颜料桶工具填充土黄色 (#996600), 如图 2-17 所示 2. 制作绿叶 绘制一片绿叶 择工具 择工具 图 2-17 背景效果 单击 新建图层 按钮, 新建层图 2, 将图层 2 与图层 1 的位置交换 选择刷子工具, 设置刷子大小为最小, 笔触形状为圆形, 颜色为绿色 (#33CC00), 选择第 2 帧, 按快捷键 F6, 插入关键帧, 用刷子工具 调整绿叶的形状 选择第 3 帧, 按快捷键 F6, 插入关键帧, 用任意变形工具 选择第 4 帧, 按快捷键 F6, 插入关键帧, 用刷子工具 调整绿叶的形状 选择第 5 帧, 按快捷键 F6, 插入关键帧, 用刷子工具 科学出版社职教技术出版中心 添加第二片绿叶, 用选 调整叶子的高度 添加第三片绿叶, 用选 添加第四片绿叶, 用选 38

46 逐帧动画单元 2 择工具调整绿叶的形状 07 选择第 6 帧, 按快捷键 F6, 插入关键帧, 用任意变形工具用选择工具调整绿叶的形状 绿叶效果如图 2-18 所示 调整叶子的高度, 并 3. 制作花茎 按快捷键 F6, 插入关键帧, 用刷子工具绘制花茎, 每增加一个关键帧都将花茎加长, 一共增加四个关键帧 第四帧效果如图 2-19 所示 图 2-18 第 1~6 帧绿叶的效果 图 2-19 绿叶及花茎效果 01 圆工具 制作花朵 选择第 11 帧, 按 F6 键, 插入关键帧, 设置填充颜色为橘黄色 (#FF9900), 用椭绘制一个椭圆, 执行 修改 / 组合 命令 选择 工具 面板中的任意变形工具, 执行 窗口 / 变形 命令, 打开 变形 面 板, 设置旋转的角度为 30, 并单击 重制选区和变形 按钮 11 次, 得出整个花朵 选择第 11 帧, 按 F6 键, 插入关键帧, 直到第 23 帧, 均插入关键帧 选择第 11 帧中的对象, 按 Delete 键, 将其他多余的花瓣删除, 只留一片花瓣 ; 选择第 12 帧中的对象, 按 Delete 键, 将其他多余的花瓣删除, 只留两片花瓣 ; 选择第 13 帧中的对象, 按 Delete 键, 将其他多余的花瓣删除, 只留三片花瓣 ; 以此类推, 这样就可 以将所有花瓣显示出来了 05 选择工具箱中的椭圆工具, 设置颜色为褐色 (#663300), 绘制一个正圆, 执行 修 改 / 组合 命令, 并调整其位置 06 在第 30 帧按快捷键 F5, 插入帧, 其效果如图 2-20~ 图 2-22 所示 图 2-20 第 11~15 帧的效果 39

47 Flash CS5 动画制作案例教程 图 2-21 第 16~20 帧的效果 图 2-22 第 21~23 帧的效果 5. 测试影片 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 花儿成长.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 单元小结 本单元为大家介绍了逐帧动画及帧的有关知识 在制作过程中, 应注意以下几个原则 1) 根据动画显示的先后顺序进行制作 2) 如果前后两帧关联很大, 建议使用快捷键 F6 插入关键帧 3) 如果前后两帧无关联, 建议使用快捷键 F7 插入空白关键帧, 然后重新绘制新的内容 自我测评 1. 用逐帧动画的方法制作 闪客天堂 四个字的打字效果, 如图 2-23 所示 科学出版社职教技术出版中心 图 2-23 闪客天堂 效果图 40

48 逐帧动画单元 2 2. 利用绘图工具逐帧绘制花朵的生长过程, 效果如图 2-24 所示 图 2-24 花朵的成长 效果图 3. 利用矩形工具绘制几幅简单的机器人运动的动画, 效果如图 2-25 所示 图 2-25 运动的机器人 效果图 4. 利用魔术棒工具处理小狗的背景, 完成 小狗奔跑 动画, 效果如图 2-26 所示 图 2-26 小狗奔跑 效果图 41

49 单元 3 动作补间动画 单元导读 学习目标 学习任务 在 Flash 动画制作中, 除了逐帧动画外, 最常见的就是补间动画 补间动画就是在两个关键帧之间, 由计算机自动产生过渡动画效果 补间动画分为动作补间动画和形状补间变动画, 本单元主要介绍动作补间动画的操作方法和使用技巧 1. 了解动作补间动画的制作原理, 掌握传统补间动画 ( 原来的动画补间动画 ) 和补间动画 ( 新增的补间动画 ) 操作的区别 2. 了解文本的类型, 掌握文本工具的使用方法 3. 填充的扩展与收缩功能的使用方法 4. 柔化填充边缘功能的使用方法 1. 绘制空中客机 2. 绘制文字变色 3. 绘制文字逼近 4. 绘制雨滴 科学出版社职教技术出版中心

50 动作补间动画单元 3 案例 3.1 空中客机 通过制作 空中客机 动画, 了解什么是动作补间动画, 以及如何制作一个动作补间动画 通过改变飞机的位置和大小, 产生飞机在蓝天渐飞渐远的效果, 如图 3-1 所示 图 3-1 空中客机 效果图 1. 制作背景 蓝天 的动画 01 创建一个新的 Flash 文档, 设置舞台大小为 640*480 像素, 背景为白色 02 双击 图层 1, 将 图层 1 重命名为 蓝天 03 执行 导入 / 导入到舞台 命令, 弹出 导入 对话框, 找到素材文件夹中的 蓝天 图片, 将其导入到舞台, 执行 窗口 / 对齐 命令, 对齐舞台中央 04 在第 30 帧插入关键帧, 选择第 1~30 帧的任意单元格, 右击, 在弹出的快捷菜单中选择 创建传统补间 命令 05 选中 蓝天 图片, 将其向左平移 30 像素, 产生背景缓慢向左移动的效果 2. 制作 飞机 的动画 01 新建图层 2, 将图层重命名为 飞机 02 执行 导入 / 导入到舞台 命令, 弹出 导入 对话框, 找到素材文件夹中 飞机 图片, 将其导入到舞台 43

51 Flash CS5 动画制作案例教程 03 执行 修改 / 分离 命令或按快捷键 Ctrl+B, 将飞机图片分离 04 选择 工具 面板中的魔术棒工具, 选中飞机图片的背景, 按 Delete 键, 去除背景, 局部没有处理干净的地方, 可用橡皮擦工具来完成 05 把处理好的飞机图片移到舞台左侧外, 选择任意变形工具, 调整飞机的大小, 当鼠标指针变成时, 调整飞机的角度 06 选中 飞机 图层, 右击第 30 帧插入关键帧, 在弹出的快捷菜单中选择 创建传统补间 命令, 并将飞机移到舞台右侧外 07 为了让飞机产生渐渐远去的效果, 选中第 30 帧, 打开 变形 面板, 将飞机缩小到 40%, 如图 3-2 所示 打开 属性 面板, 将 飞机 的 Alpha 值调整到 50%, 如图 3-3 所示, 产生飞机在蓝天渐飞渐远的效果 图 3-2 变形 面板的参数设置图 3-3 Alpha 参数的设置 3. 测试影片 提示 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 空中客机.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 制作动作补间动画时, 两个关键帧上的对象可以是元件实例, 也可以是文本 位图 群 组 绘制对象等, 但不能是分散的矢量图形 尤其要注意的是, 同一个图层上的每个关键帧 必须是同一个对象才能创建补间动画 科学出版社职教技术出版中心 1. 动作补间动画补间动画分为动作补间动画和形状补间动画, 动作补间动画也称为动作渐变动画, 运用它可以设置元件的大小 位置 颜色 透明度 旋转等属性, 该动画渐变的过程很连贯, 制作过程也很简单, 只需在动画的第一帧和最后一帧中创建动画即可 例如, 在 Flash 中看到的旋转 44

52 动作补间动画单元 3 放大 缩小及直线运动等类型的动画都属于动作渐变动画 构成动作渐变的元素是元件, 包括图形元件 影片剪辑和按钮等 除了元件, 其他元素包括文本对象都不能创建动作渐变动画, 所以要将对象转换为元件后才能创建动作补间动画 2. 传统补间动画与新增补间动画的区别在 Flash CS4 之后的版本, 出现了传统补间动画 ( 原来的动画补间动画 ) 和补间动画 ( 新增的补间动画 ), 其区别如下 创建传统补间动画的顺序, 首先在时间轴上的两个不同时间点插入关键帧 ( 每个关键帧都必须是同一个 MC), 然后在关键帧之间创建传统补间, 动画就形成了 因此, 传统补间动画的操作是定头 定尾 做动画 ( 开始帧 结束帧 创建动画动作 ) 新增的补间动画则是在舞台上画出一个 MC 以后, 不需要在时间轴的其他地方插入关键帧 直接在某层上创建补间动画, 该层变成蓝色之后, 只需要先在时间轴上选择需要添加关键帧的单元格, 然后直接拖动舞台上的 MC, 即自动形成一个补间动画 这个补间动画的路径可以直接显示在舞台上, 并且可以利用调动手柄进行调整, 如图 3-4 所示 图 3-4 手动控制柄 传统补间是两个对象生成一个补间动画, 而新增的补间动画是一个对象的两个不同状态生 成一个补间动画, 这样就可以利用新补间动画来完成大批量或更为灵活的动画调整 45

53 Flash CS5 动画制作案例教程 案例 3.2 文字变色 通过制作 文字变色 动画, 了解文本的类型及文本工具的使用, 掌握元件实例 颜色 属性参数的设置 文字变色 动画通过改变不同关键帧上实例的颜色 透明度 亮度, 产生文字变色的效果 1. 输入文本 01 创建一个新的 Flash 文档, 设置舞台大小为 500*100 像素, 背景颜色为深蓝色 (#000099) 02 用文本工具在舞台中输入 Flash, 设置字体样式为 Arial, 大小为 100 点, 颜色为黄色 (#FFFF00), 字符间距为 20, 如图 3-5 所示 03 执行 窗口 / 对齐 命令, 对齐舞台中央, 如图 3-6 所示 图 3-5 字符 的参数设置 2. 变色文字的制作 分别在第 15 帧 第 30 帧 第 45 帧插入关键帧 图 3-6 对齐 面板参数设置 右击关键帧, 在弹出的快捷菜单中选择 创建传统补间 命令 科学出版社职教技术出版中心 单击第 15 帧, 选中舞台上的文本, 在 属性 面板的 色彩效果 选项组中调整 Alpha 值, 将其值设置为 45%, 如图 3-7 所示 04 单击第 30 帧, 选中舞台上的文本, 在 属性 面板的 样式 列表框中选择 高级 选项, 参数设置如图 3-8 所示 05 单击第 45 帧, 选中舞台上的文本, 在 属性 面板的 样式 列表框中选择 亮度 选项, 将其值设置为 80%, 如图 3-9 所示 46

54 动作补间动画单元 3 图 3-7 Alpha 参数的设置 图 3-8 高级 效果的参数设置 图 3-9 亮度 的参数设置 3. 测试影片 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 文字变色.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 提示 制作动作补间动画时, 除了通过改变不同关键帧上的对象的位置 大小 旋转等产生动画效果, 还可以改变不同关键帧上的对象实例的颜色 亮度 透明度等, 产生变色 变光等动画效果 制作时首先要将对象转换成图形元件 1. 文本的类型在 Flash CS5 中, 文本是一种特殊的对象, 其既具有图形组合和实例的某些属性, 又具有独特的属性 ; 既可以作为运动渐变的对象, 又可以作为形状渐变动画的对象 在创建文本前, 首先了解文本的类型 在 Flash CS5 中, 文本的类型分为静态文本 动态文本和输入文本 静态文本是用来显示不会动态更改字符的文本, 一般由文本工具创建 ; 动态文本是用来显示动态更改的文本 ; 输入文本是用户输入的任何文本, 或用户可以编辑的动态文本 2. 文本工具 1) 文本的设置 文本类型 位置 大小 字体 颜色 间距 对齐方式等可以通过文本 属性 面板的设置来完成, 如图 3-10 所示 2) 文本的变形 在制作动画的过程中, 根据用户的不同需求, 可以对文本进行缩放 旋转 倾斜和编辑等操作 47

55 Flash CS5 动画制作案例教程 图 3-10 文本 属性 面板 案例 3.3 文字逼近 通过制作 文字逼近 动画, 学习填充的扩展与收缩 柔化填充边 缘功能, 掌握动作补间动画的操作方法和技巧 文字逼近 动画主要使用绘图工具完成背景的制作, 利用动作补间 动画完成文字由小到大再变小的渐变效果, 如图 3-11 所示 科学出版社职教技术出版中心 图 3-11 文字逼近 效果图 48

56 动作补间动画单元 3 1. 制作背景 01 创建一个新的 Flash 文档, 设置舞台大小为 600*300 像素, 背景为黑色 (#000000) 02 选择椭圆工具 设置笔触的颜色为白色, 笔触高度为 1, 使用椭圆工具 绘制一个 椭圆, 填充浅蓝 (#33CCFF) 白色 (#FFFFFF) 浅紫 (#3333FF) 的线性渐变, 并用渐变 变形工具 03 调整渐变的方向 执行 修改 / 形状 / 柔化填充边缘 命令, 弹出 柔化填充边缘 对话框, 设置距离 为 30 像素, 步长数为 30, 如图 3-12 所示, 单击 确定 按钮 04 单击 插入图层 按钮, 新建图层 2 使用铅笔工具 绘制一条曲线, 再椭圆工具 绘制一个椭圆, 其大小与背景的椭圆相同, 调整椭圆的位置, 使其与曲线相连, 这样就完成了 岛屿 的轮廓, 如图 3-13 所示 图 3-12 柔化填充边缘 参数设置 图 3-13 岛屿 的轮廓 05 选择 工具 面板中的颜料桶工具, 填充天蓝 (#33FFFF) 白色 (#FFFFFF) 深蓝 (#0033FF) 的线性渐变, 并用渐变变形工具调整渐变的方向, 如图 3-14 所示 图 3-14 为 岛屿 填充颜色 2. 制作文字的动画 01 单击 新建图层 按钮, 新建图层 3 选择文本工具, 设置字体为 Bickham Script Pro Regular, 大小为 80, 粗体, 输入 F 02 执行 修改 / 分离 命令, 选择 工具 面板中的颜料桶工具, 填充红色到黑色的径向渐变, 并用渐变变形工具调整渐变的方向 03 选中第 10 帧, 右击, 在弹出的快捷菜单中选择 插入关键帧 命令, 或按快捷键 F6, 创建传统补间 04 选中第 10 帧中的对象, 执行 窗口 / 变形 命令, 在 变形 面板中将文字放大到 49

57 Flash CS5 动画制作案例教程 150%, 如图 3-15 所示 设置对象的属性 Alpha 为 45%, 如图 3-16 所示 图 3-15 变形 面板的参数设置 图 3-16 Alpha 参数的设置 05 选中第 20 帧, 右击, 在弹出的快捷菜单中选择 插入空白关键帧 命令, 或按快捷键 F7, 插入空白关键帧 06 选中第 1 帧, 右击, 在弹出的快捷菜单中选择 复制帧 命令 ; 再选中第 20 帧, 右击, 在弹出的快捷菜单中选择 粘贴帧 命令 07 按上述方法, 以此类推, 分别从第 5 帧 第 10 帧 第 15 帧 第 20 帧开始, 设置四种不同颜色, 制作 L A S H 文字效果 文字逼近 时间轴如图 3-17 所示 3. 测试影片 提示 图 3-17 文字逼近 时间轴 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 文字逼近.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 正确创建动画补间动画的条件 :1 被操作对象必须在同一图层上 ;2 动作不能发生在多 个对象上 因此, 我们将 FLASH 这个单词的五个字母分五个图层来完成 1. 填充的扩展与收缩 执行 修改 / 形状 / 扩展填充 命令, 在弹出的 扩展填充 对话框中设置图形扩展填充的 距离和方向, 对所选图形的外形进行修改, 如图 3-18 所示 扩展 : 以图形的轮廓为界, 向外扩展 放大填充 插入 : 以图形的轮廓为界, 向内收紧 缩小填充 科学出版社职教技术出版中心 50

58 动作补间动画单元 3 图 3-18 扩展填充 效果 2. 柔化填充边缘与 扩展填充 命令相似, 柔化填充边缘 命令也是对图形的轮廓进行放大或缩小填充 不同的是, 柔化填充边缘 命令可以在填充边缘产生多个逐渐透明的图形层, 形成边缘柔化的效果 选择需要编辑的图形后, 执行 修改 / 形状 / 柔化填充边缘 命令, 在弹出的 柔化填充边缘 对话框中设置边缘柔化效果, 如图 3-19 所示 距离 : 边缘柔化的范围, 数值为 1~144 步长数 : 柔化边缘生成的渐变层数, 最多可以设置 50 个层 方向 : 选择边缘柔化的方向是向外扩展还是向内插入 图 3-19 柔化填充边缘 效果 案例 3.4 雨 滴 通过制作 雨滴 动画, 学习图层的基本操作, 进一步掌握动作补间动画的操作方法和技巧 雨滴 动画主要用矩形工具绘制背景, 用椭圆工具绘制雨滴和水波, 最后创建动作补间动画, 并修改实例 Alpha 值, 如图 3-20 所示 51

59 Flash CS5 动画制作案例教程 图 3-20 雨滴 效果图 1. 制作背景 01 创建一个新的 Flash 文档, 设置舞台大小为 550*300 像素, 背景为黑色 (#FFFFFF) 02 选择 工具 面板中的矩形工具绘制一矩形, 填充蓝色到白色的线性渐变, 并用渐变变形工具调整渐变的方向, 如图 3-21 所示 2. 制作雨滴 图 3-21 背景 效果 单击 新建图层 按钮, 新建图层 2, 双击图层 2, 将图层 2 取名为 雨滴 1 用椭圆工具绘制一个椭圆, 再用部分选取工具单击椭圆的边缘, 并选中要删 科学出版社职教技术出版中心 除的描点, 按 Delete 键将其删除, 如图 3-22 所示 这样就完成了雨滴的制作, 如图 3-23 所示 图 3-22 选中并删除锚点 图 3-23 雨滴 效果 提示 选中的锚点为红色小方块, 未被选中的锚点为空心红色小方块 52

60 动作补间动画单元 3 3. 制作雨滴的动画 01 分别选中第 10 帧和第 25 帧, 右击, 在弹出的快捷菜单中选择 插入关键帧 命令, 创建动画补间 02 选中第 1 帧的雨滴, 用任意变形工具缩小雨滴 03 单击 雨滴 1 图层的第 1 帧, 按住 shift 键, 再单击第 25 帧, 将 1~25 帧选中, 右击, 在弹出的快捷菜单中选择 复制帧 命令, 如图 3-24 所示 图 3-24 选择 复制帧 命令 04 单击 新建图层 按钮, 新建图层 3, 双击图层 3, 将图层 3 取名为 雨滴 2 05 选中 雨滴 2 图层的第 26 帧, 按 F7 键插入空白关键帧, 右击, 在弹出的快捷菜单中选择 粘贴帧 命令 06 单击 新建图层 按钮, 新建图层 4, 双击图层 4, 将图层 4 取名为 雨滴 3 07 选中 雨滴 3 图层的第 52 帧, 按 F7 键插入空白关键帧, 右击, 在弹出的快捷菜单中选择 粘贴帧 命令 此时 雨滴 时间轴如图 3-25 所示 图 3-25 雨滴 时间轴 4. 制作水的动画 01 单击 新建图层 按钮, 新建图层 5, 双击图层 5, 将图层 5 取名为 水 1 选中第 26 帧, 按 F7 键插入空白关键帧 02 选择 工具 面板中的椭圆工具, 设置填充颜色为白色, 内径为 60, 如图 3-26 所示 绘制一个环, 制作 水 的效果, 如图 3-27 所示 53

61 Flash CS5 动画制作案例教程 图 3-26 椭圆 内径 参数设置 03 图 3-27 水 的效果 右击第 75 帧, 在弹出的快捷菜单中选择 插入关键帧 命令, 创建动画补间 调整 该对象的透明度 (Alpha 值为 0) 和大小 04 按住 Shift 键, 单击第 26 帧和第 75 帧, 将 26~75 帧选中, 右击, 在弹出的快捷 菜单中选择 复制帧 命令 05 单击 新建图层 按钮, 新建图层 6, 双击图层 6, 将图层 6 取名为 水 2 选中第 52 帧, 按 F7 键插入空白关键帧 06 选中图层 水 2 的第 52 帧, 按 F7 键插入空白关键帧, 右击, 在弹出的快捷菜 单中选择 粘贴帧 命令 07 单击 新建图层 按钮, 新建图层 7, 双击图层 7, 将图层 7 取名为 水 3 选中第 77 帧, 按 F7 键插入空白关键帧 08 选中图层 水 3 的第 77 帧, 按 F7 键插入空白关键帧, 右击, 在弹出的快捷菜 单中选择 粘贴帧 命令 此时 雨滴 时间轴如图 3-28 所示 5. 测试影片 图 3-28 雨滴 时间轴 科学出版社职教技术出版中心 执行 文件 / 保存 命令, 或按快捷键 Ctrl+S, 以 雨滴.fla 为名保存文件 执行 控制 / 测试影片 / 测试 命令, 或按快捷键 Ctrl+Enter, 预览动画效果 Flash 中的图层就像一张透明的纸, 而动画中的多个图层, 就相当于一叠透明的纸, 通过 调整这些纸的顺序, 就可以改变动画中图层的上下关系 在 Flash CS5 中, 可以对图层进行选 择 移动 复制及删除等操作 54

62 动作补间动画单元 3 1. 创建图层在 Flash CS5 中, 可以通过以下三种方法创建图层 1) 执行 插入 / 时间轴 / 图层 命令 2) 在图层列表中的某一个图层上右击, 在弹出的快捷菜单中选择 插入图层 命令 3) 单击 时间轴 面板底部的 新建图层 按钮 2. 选择图层在 Flash CS5 中, 在时间轴中选择一个图层就能将该图层激活, 当图层的名称旁边出现一个铅笔图标时, 表示该图层是当前的工作图层 ( 每次只能有一个图层是工作图层 ) 3. 移动图层在时间轴图层控制区内, 拖动要移动的图层至目标处, 即可完成图层的移动, 从而改变图层的顺序 4. 复制图层在制作动画的过程中, 有时需要复制一个图层, 将该图层拖到 新建图层 按钮上就可以复制一个同样的图层 5. 删除图层在制作动画的过程中, 对于多余的图层, 需要删除, 可以单击 时间轴 面板底部的 删除 按钮, 或者右击需要删除的图层, 在弹出的快捷菜单中选择 删除图层 命令 6. 重命名图层在默认情况下, 系统会以 图层 1 图层 2 的名称为图层命名 当图层较多时, 双击需要重命名的图层, 在其名称文本框中输入新名称就可以进行图层的重命名 7. 显示和隐藏图层在场景中图层比较多时的情况下, 对单一的图层进行编辑会感到不方便, 用户可以将不需要的图层隐藏起来, 使舞台变得整洁以提高工作效率 单元小结 本单元为大家介绍了动作补间动画及其操作方法 动作补间动画是 Flash 动画制作中常见的一种动画技术, 其特点是以元件为对象, 便于修改 无论是图形还是文字等, 都可制作成元件 元件实例可以通过 属性 面板中的 颜色 选项进行设置, 达到不同的效果 55

63 Flash CS5 动画制作案例教程 自我测评 1. 制作 flash 这串字符不停地上下跳跃的动画效果, 效果图和时间轴分别如图 3-29 和 图 3-30 所示 图 3-29 上下跳跃的字符 效果图 提示 1) 将 flash 这串字符分散到图层 ; 图 3-30 上下跳跃的字符 时间轴 2) 利用参考线, 使每个字符跳跃的高度一致 ; 3) 创建补间动画 2. 制作 残影效果 动画 : 一串文字顺时针旋转, 边旋转文字边看不到, 效果图如图 3-31 所示, 时间轴如图 3-32 所示 科学出版社职教技术出版中心 图 3-31 残影效果 效果图 56

64 动作补间动画单元 3 图 3-32 残影效果 时间轴 提示 1)7 个图层的效果是一样的, 只是出现的时间不同, 可以复制图层 1 的所有帧 ; 2) 设置第二个关键帧的实例 Alpha 值为 0% 57