中等职业教育 十一五 规划教材 中职中专计算机类教材系列 Flash 动画设计与实训 纪伟娟主编 李太陈民黄斌邓云娇副主编续永刚主审 省级精品课程 北 京

Transcription

1 社 版 中心 出 版 学 出 cn 科 术 k. 技 boo 教.a 职 ww w

2 中等职业教育 十一五 规划教材 中职中专计算机类教材系列 Flash 动画设计与实训 纪伟娟主编 李太陈民黄斌邓云娇副主编续永刚主审 省级精品课程 北 京

3 内容简介本书详细介绍了新版本的动画设计软件 Flash 8, 其最大的特点是融合了传统教学与项目教学的优点, 结构清晰 内容由浅入深, 既有传统教材中知识介绍全面 系统的优点, 又具有项目教学中实例典型 操作性强的优点, 真正实现了理实一体化的指导思想 本书素材中收集了各章实例的源文件及相关素材, 便于读者学习 本书适合作为中职学校和技校的动画设计教材, 也非常适合爱好动画设计的读者进行自学 书繁体字版名为 SolidWorks 2001 PLUS 教学范本, 由知城数位科技股份图书在版编目 (CIP) 数据 Flash 动画设计与实训 / 纪伟娟主编. 北京 : 科学出版社,2008 ( 中等职业教育 十一五 规划教材 中职中专计算机类教材系列 ) ISBN Ⅰ.F Ⅱ. 纪 Ⅲ. 动画 设计 图形软件,Flash 专业学校 教材 Ⅳ. TP 中国版本图书馆 CIP 数据核字 (2008) 第 号 责任编辑 : 韩洁 / 责任校对 : 耿耘责任印制 : 吕春珉 / 封面设计 : 耕者设计工作室 出版北京东黄城根北街 16 号邮政编码 : 北京双清印刷厂印刷科学出版社发行各地新华书店经销 2008 年 4 月第一版 2008 年 4 月第一次印刷印数 : * 开本 : /16 印张 :12 1/2 字数 : 定价 :20.00 元 ( 如有印装质量问题, 我社负责调换 < 环伟 >) 销售部电话 编辑部电话 版权所有, 侵权必究举报电话 : ; ; 科学出版社职教技术出版中心

4 前 言 用 Macromedia 公司发布的 Flash 软件制作的动画文件, 可以将音乐 声效 夸张的表现方法 新颖的创意等有机结合在一起, 制作出超 炫 超 酷 的动画作品, 因为文件体积小 传输速度快 视觉效果好 交互功能强等特点, 使 Flash 动画在网络上乃至电视上迅速传播, 吸引了越来越多的人投入到动画制作的学习中来, 也使更多的动画爱好者成为 闪客 家族中的一员 随着多媒体技术的发展,Flash 动画那精彩纷呈的画面已无处不在, 如用于制作多媒体课件和幻灯片 制作创意广告 制作网络小游戏等,Flash 动画已深入我们的生活与学习中 本书采用 Flash 软件的新版本 Flash 8, 在内容的安排上由浅入深 结构清晰, 并结合项目教学方法的优点, 以提高操作技能为主, 提供了大量实例和练习, 同时又继承了传统教材中知识讲解相对完整和系统的优点, 将知识点和制作技巧融于各个实例中 全书共十个项目, 详细介绍了各种动画的制作方法和制作技巧 每个项目都围绕一个主题展开, 各章列举的典型实例都是编者在长期的教学工作中精心挑选出来的, 每个实例都有详细的制作步骤, 同时做到图文并茂 练学结合, 从而使读者迅速掌握 Flash 动画的基础知识和动画制作的技巧 通过对本书的学习, 初学者可轻松地用 Flash 来制作简单的动画 动画爱好者则可借助本书充分发挥自己的想象力, 制作出更复杂 更酷的动画 本书较好地遵循了教学规律, 语言通俗易懂, 实例由易到难 循序渐进, 既适合 Flash 动画初学者的学习和使用, 动画爱好者也可通过本书的学习来提高自己的动画制作水平, 并早日成为动画制作高手 本书作者长期从事 Flash 的教学, 在实际工作中积累了丰富的教学经验 纪伟娟编写了项目一 二, 陈民编写了项目三 七 八, 邓云娇编写了项目四 五 六, 黄斌编写了项目九 十 读者可与作者联系索取本书介绍的所有实例及练习的素材, 联系方式 : jwjmm@163.com, 也可到 上下载 由于编者水平有限, 书中难免有疏漏之处, 恳请广大读者给予批评指正

5 目 录 项目一 Flash 8 基础知识... 1 任务一 Flash 8 概述... 2 知识一 Flash 8 简介... 2 知识二 Flash 动画的应用... 2 知识三 Flash 8 的新增功能... 2 任务二 Flash 8 窗口介绍... 4 知识一 开始 页... 4 知识二舞台窗口... 5 知识三时间轴窗口... 5 知识四图层窗口... 6 知识五面板组 知识六工具箱 任务三 Flash 8 的基本操作 知识一设置工作参数 知识二设置工作环境 知识三新建 打开与保存文件 知识四发布动画 习题 项目二 Flash 绘图 任务一 选取 工具 知识一 选择 工具 知识二 部分选取 工具 知识三 索套 工具 任务二绘图工具 知识一 直线 工具 知识二 钢笔 工具 知识三 文本 工具 知识四 椭圆 工具与 矩形 工具 知识五 铅笔 工具 知识六 刷子 工具 知识七 任意变形 工具 科学出版社职教技术出版中心

6 iv Flash 动画设计与实训 知识八 填充变形 工具 知识九 墨水瓶 工具 知识十 颜料桶 工具 知识十一 滴管 工具 知识十二 橡皮擦 工具 任务三查看工具 知识一 手形 工具 知识二 缩放 工具 任务四绘图实例 知识一绘图小技巧 知识二实例一 : 绘制西瓜 知识三实例二 : 绘制牵牛花 习题 项目三逐帧动画 任务一逐帧动画概述 知识一动画的分类与区别 知识二逐帧动画的概念与特点 知识三相关的知识概念 知识四逐帧动画中经常使用的工具 任务二实例一 : 写字效果 知识一效果说明 知识二设计思路 知识三制作步骤 任务三实例二 : 打字效果 知识一效果说明 知识二设计思路 知识三制作步骤 任务四实例三 : 美丽图案 知识一效果说明 知识二设计思路 知识三制作步骤 任务五实例四 : 砖体字 知识一效果说明 知识二设计思路 知识三制作步骤 任务六实例五 : 倒计时扫描 知识一效果说明... 55

7 目录 v 知识二设计思路 知识三准备要求 知识四制作步骤 小结 习题 项目四形变动画 任务一 动画的基本类型 任务二 形状补间动画的制作 任务三 制作普通的变形动画 任务四 绘图纸外观 技术的使用 任务五 制作可控的变形动画 习题 项目五运动 轨迹动画 任务一元件的创建 知识一元件的概述和类型 知识二元件的创建 任务二动作补间动画的制作 任务三应用举例 任务四引导层动画的制作 知识一引导层动画的制作原理 知识二简单引导层动画的制作 知识三引导层动画应用实例 习题 项目六遮罩动画 任务一 遮罩动画的制作原理 任务二 简单遮罩动画的制作 任务三 应用举例 习题 科学出版社职教技术出版中心 项目七文字特效 任务一文字特效概述 知识一文字特效的概念 知识二相关的知识概念 知识三静态特效文字 知识四通用的基本操作

8 vi Flash 动画设计与实训 任务二空心文字 天人合一 知识一效果说明 知识二制作步骤 任务三荧光文字 吃吧 知识一效果说明 知识二制作步骤 任务四立体文字 A 知识一效果说明 知识二制作步骤 任务五多彩文字 魅力 知识一效果说明 知识二制作步骤 任务六雪堆文字 圣诞 知识一效果说明 知识二制作步骤 任务七旋转文字 知识一效果说明 知识二设计思路 知识三制作步骤 任务八发光文字 知识一效果说明 知识二设计思路 知识三制作步骤 任务九变形文字 知识一效果说明 知识二设计思路 知识三制作步骤 任务十遮罩文字 知识一效果说明 知识二设计思路 知识三制作步骤 任务十一闪光字 知识一效果说明 知识二设计思路 知识三制作步骤 任务十二黑暗中的文字 任务一效果说明 任务二设计思路

9 目录 vii 任务三制作步骤 习题 项目八鼠标特效 任务一鼠标特效概述 知识一相关知识介绍 知识二光标位置与对象位置的关系 任务二实例一 : 移动探照灯 知识一效果说明 知识二设计思路 知识三制作步骤 任务三实例二 : 隐藏的文字 知识一效果说明 知识二设计思路 知识三制作步骤 任务四实例三 : 取景框 知识一效果说明 知识二设计思路 知识三制作步骤 任务五实例四 : 心跳的感觉 知识一效果说明 知识二设计思路 知识三制作步骤 任务六实例五 : 花开花落 知识一效果说明 知识二设计思路 知识三制作步骤 任务七实例六 : 星光灿烂 知识一效果说明 知识二设计思路 知识三制作步骤 任务八实例七 : 提示跟随 知识一效果说明 知识二设计思路 知识三制作步骤 任务九实例八 : 网络时代 知识一效果说明 知识二设计思路 科学出版社职教技术出版中心

10 viii Flash 动画设计与实训 知识三制作步骤 任务十实例九 : 海底鱼群 知识一效果说明 知识二设计思路 知识三制作步骤 习题 项目九制作 MTV 任务一素材准备工作 知识一音乐素材 知识二图片素材 知识三整理总结 任务二 MTV 动画制作 知识一序幕场景 知识二歌词同步 知识三场景动画 知识四落幕场景 知识五整理总结 习题 项目十小游戏的制作 任务一素材准备工作 知识一收集素材 知识二制作瞄准器 知识三制作靶环 任务二游戏的制作 知识一场景制作 知识二制作游戏对话框 知识三制作鼠标指针 知识四制作移动靶环 知识五添加动作脚本 知识六整理总结 习题

11 1 主要内容 了解计算机的发展历史 Flash 8 的新增功能 了解计算机的特点 应用及分类 Flash 8 的窗口内容 理解 PC 的主要技术指标 图层与面板的操作 理解计算机中数和字符的表示 Flash 文档的新建与保存 掌握计算机系统的组成 参数设置及工作环境设置掌握各进制之间的转换方法 学习目的 了解 Flash 8 的新增功能, 熟悉 Flash 8 的窗口界面 掌握图层与面板的操作方法 能创建新文件, 并能根据要求设置工作环境 Flash 8 基础知识 科学出版社职教技术出版中心

12 2 Flash 动画设计与实训 任务一 Flash 8 概述 知识一 Flash 8 简介 Flash 8 是 Macromedia 公司的最新版本的多媒体矢量动画软件, 通过添加图片 声音 视频等内容可以制作成各种各样的动画 演示文稿 应用程序等, 而文件体积小是其在网页制作中得到普遍使用的最主要原因 知识二 Flash 动画的应用 Flash 主要有以下方面的应用 : 1) 可将制作的动画放在网页上, 如 Logo 广告, 也可用于制作整个网站 2) 制作多媒体课件 幻灯片 3) 制作交互游戏 4) 用于其他娱乐目的 ( 如 MTV 贺卡 屏保 卡通片等) 知识三 Flash 8 的新增功能比起以前的版本,Flash 8 的功能更加强大, 在许多方面都有了较大的改进, 可以说有了质的飞跃, 下面对其主要改进和新功能做一简单介绍 1. 滤镜功能 Flash 8 新增了图形滤镜功能 通过使用滤镜特效, 可以使文本 按钮和影片剪辑产生更有趣的视觉效果, 如投影 模糊 发光 斜角 渐变发光 渐变斜角 调整颜色等 通过菜单 窗口 属性 滤镜 命令, 可以打开 滤镜 面板, 实现滤镜功能, 如图 1.2 所示 图 1.1 未使用滤镜效果 图 1.2 使用了模糊滤镜的效果 2. 对象绘制模式在 Flash 8 的 工具 面板中, 新增加了 对象绘制 按钮 通过该按钮, 可以将图形设置为独立的对象, 各形状之间不会相互干扰, 在叠加时不会合并

13 项目一 Flash 8 基础知识 3 在工具面板中, 只有选择了 铅笔 工具 钢笔 工具 刷子 工具 椭圆 工具和 矩形 工具后, 在相应的选项中才会出现 对象绘制 模式 如图 1.3 所示, 在绘制圆时未选择 对象绘制 模式, 当另一个小圆叠加到大圆上时, 将使大圆产生变化, 移开小圆后, 这种变化便显示了出来 图 1.3 未使用 对象绘制 模式的效果 在绘制大圆时选择 对象绘制 模式, 使大圆成为一个独立的对象, 当将小圆叠加 到大圆上时, 对大圆不会产生任何影响, 移开小圆后, 大圆没有变化, 如图 1.4 所示 3. 脚本助手 图 1.4 使用了 对象绘制 模式的效果 为方便用户操作,Flash 8 的脚本助手更具人性化特点, 既照顾到了专业设计人员的 需求, 也方便了初级人员的操作与使用, 如图 1.5 所示 4. 混合模式 图 1.5 脚本助手 科学出版社职教技术出版中心 使用混合模式, 混合不同对象的颜色, 可以创建复合图像, 从而创造出独特的效果, 如变暗 变亮 叠加 反转等 混合模式只能在影片剪辑和按钮上使用 混合模式在属

14 4 Flash 动画设计与实训 性面板上设置, 如图 1.6 所示 图 1.6 混合模式设置 5. 增强笔触功能 Flash 8 可以选择多种笔触接合点和端点的形状, 并且可以将渐变色应用于笔触 6. 改进的面板管理 Flash 8 改进了对面板的管理, 用户可根据自己的需要优化工作环境, 可以根据自己的爱好对面板进行重新组合, 甚至可以对面板重命名 7. 改进的 首选参数 对话框改进后的 首选参数 对话框变得更加人性化, 更符合一般用户的操作习惯, 通过执行菜单 编辑 首选参数, 打开 首选参数 对话框 Flash 8 提供了两种撤销操作方式, 一种是文档级别, 一种是对象级别, 用户可以在两种方式间自由切换 任务二 Flash 8 窗口介绍 知识一 开始 页安装好 Flash 8 后, 就可以启动 Flash 来体会其强大的功能了 选择 开始 程序 Macromedia Macromedia Flash 8 命令即可启动 Flash 8 双击某一 Flash 文件也可以启动 Flash 8 如果在不打开文档的情况下运行 Flash, 便会显示如图 1.7 所示的开始页 开始页包含以下 4 个区域 : 1) 打开最近项目 : 用于打开最近编辑过的文档, 也可通过单击 打开, 显示 打开文件 对话框 2) 创建新项目 : 通过单击列表中所需的文件类型来快速创建新文件

15 项目一 Flash 8 基础知识 5 3) 从模板创建 : 列出了 Flash 文档最常用的模板, 通过单列表中所需的模板创建新文件 4) 扩展 : 单击它会链接到 Macromedia Flash Exchange Web 站点, 可以下载 Flash 的助手应用程序 Flash 扩展功能及相关信息 如果要创建一个新的动画文件, 可单击上述第二个区域 创建新项目 中的第一项 Flash 文档 从而进入编辑窗口, 如图 1.7 所示 如果在单击某个项目时勾选上 不再显示此对话框, 那么下次启动时将不再出现图 1.7 所示的开始页, 建议不选择此对话框 如果关闭开始页后想再次启动, 需在编辑菜单中的首选参数中设置 进入动画文件的编辑窗口后, 分别有标题栏 菜单栏 工具栏 图层窗口 时间轴窗口 舞台窗口 工具箱 面板等 知识二舞台窗口 图 1.7 启动后的开始页 舞台是用户在创建 Flash 文档时的主要工作区, 如图 1.8 所示 舞台相当于显示 Flash 文档的矩形空间, 默认为 100%, 用户可以在工作时放大或缩小以更改舞台中的视图 知识三时间轴窗口 科学出版社职教技术出版中心 时间轴用于组织和控制文档内容在一定时间内播放的先后次序, 由各个帧组成, 时 间轴窗口有帧编号 帧居中按钮 绘图纸按钮 当前帧指示器 帧频指示器和运行时间指示器, 如图 1.8 所示 时间轴上播放头所在的帧即为当前帧, 播放动画时播放头从左向右通过时间轴

16 6 Flash 动画设计与实训 帧视图 弹出菜单 帧居中按钮当前帧指示器 绘图纸按钮 帧频指示器 运行时间指示器 舞台窗口 图 1.8 舞台窗口 知识四图层窗口 图层在 Flash 中是一个重要概念, 大多数动画都包含若干个图层, 用户可以通过层组合出各种复杂的动画 准确地对图层进行操作, 可缩短动画制作时间, 改善动画性能, 如为了在编辑某一图层对象时不致误改其他图层的内容, 可锁定图层 ; 为更好地区分动画中的对象, 可将动画元素进行简单分类, 将不变的元素 有动作的元素 音效等元素分别放在不同的图层中, 以方便自己进行编辑与修改 所有图层都放在时间轴左侧的 图层 面板上, 如图 1.9 图 1.9 图层窗口所示 根据图层的特点可将图层分为普通层 引导层 遮罩层三种, 对图层的操作主要有以下几种 1. 新增图层 通常新创建的 Flash 影片只有一个图层, 而一个比较复杂的动画往往包含背景图像 声音 文字 动作设置等, 因此仅有一个图层是远远不够的, 这时就要增加图层 增加图层的方法主要有三种 : 方法一 : 单击图层窗口左下角的按钮 方法二 : 在某一图层上右击选择 插入图层 命令, 新增加的图层位于该图层的上方 方法三 : 执行菜单 插入 时间轴 图层 命令

17 项目一 Flash 8 基础知识 7 2. 改变图层顺序 当有多个图层存在时, 位置在上面的图层的对象会遮挡位置在下面的图层中的对象, 用户可以通过调整图层的上 下次序, 来调整图层中相应对象之间的上下位置关系 操作步骤 用鼠标左键选定要移动的图层, 然后按住鼠标向上或向下拖动, 拖动过程中会出 现一条虚线, 当虚线到达预定位置后松开鼠标, 图层即被放置到新的位置, 如图 1.10 图 1.11 所示 图 1.10 文本图层在上 背景图层在下的效果 3. 重命名图层 图 1.11 背景图层在上 文本图层在下的效果 系统默认的图层名称为 图层 1 图层 2 等, 这样的名称不容易辨别与区分各图层的内容, 因此, 为方便自己了解该图层中的实际内容, 通常都对图层进行重命名操作, 修改后的名称一般都与该图层的内容相一致 对图层重命名的方法有以下两种 方法一 : 在图层名称上双击, 输入新的图层名字 方法二 : 在需重命名的图层上右击, 选择 属性 命令, 在随便弹出的图 1.12 所示的对话框中输入新的图层名字 科学出版社职教技术出版中心 图 1.12 图层属性对话框

18 8 Flash 动画设计与实训 4. 复制图层 制作动画时, 可以将某一图层中的所有对象复制到另一图层中, 复制图层的操作实际上是对该图层上所有的帧进行复制 操作步骤 1) 在图层名称上单击以选取整个图层 2) 选择 编辑 复制 命令 ; 或在该层右边的时间轴上右击, 选择 复制帧 命令 3) 单击要粘贴到的目标图层的第 1 帧, 选择 编辑 粘贴到当前位置 命令 5. 删除图层 选取要删除的图层后单击图层窗口右下方的删除图层层拖到垃圾桶中 按钮 ; 或直接将要删除的图 6. 设置图层模式 图层有 4 种模式, 如图 1.13 至图 1.16 所示 用户可根据实际需要将图层设为不同模式 图 1.13 该层处于当前模式 图 1.14 该层处于隐藏模式 图 1.15 该层处于锁定模式 图 1.16 该层处于轮廓模式 (1) 当前模式用鼠标单击图层的名称或单击该图层上的某一帧, 就选取了该图层为当前层, 当前层名称栏上会显示一个铅笔图标 只有图层成为当前层才能进行编辑, 同一时间只有一个图层处于当前图层模式 单击图层的名称, 则该层上的所有帧都被选中 (2) 隐藏模式隐藏图层可以使一些图像隐藏起来, 从而减少不同图层之间的图像干扰, 使整个工作区保持整洁, 只显示要编辑的图层 单击图层上与隐藏图标相对应的黑点, 该图层名称右边就会出现图标, 表示该图层处于隐藏状态, 当图层隐藏后, 图层名称后还会出现一个图标, 表示不能再进行各种编辑了, 如图 1.14 所示

19 项目一 Flash 8 基础知识 9 处于隐藏状态中的图层内容, 在舞台中是看不到的, 再次单击与隐藏图标相对应的黑点, 将使该图层处于显示状态, 舞台中就会重新显示该图层的内容, 如图 1.17 所示 2 个图层上分别有 1 个图形隐藏图层 2 后只显示图层 1 中的图形 图 1.17 图层的隐藏 (3) 锁定模式在动画制作的过程中, 为防止对某个图层上的内容误操作, 可以将该图层锁定 方法是 : 单击图层上与锁定图标相对应的黑点, 该图层即被锁定, 图层被锁定后, 就不可以再修改该层的对象了 再次单击, 将使该图层解锁 图层被锁定后, 图层名称后将会出现一个图标, 这时在舞台上用户可以看见该层上的内容, 但无法对其进行编辑 如果要将所有图层都锁定, 可单击图层窗口上方的锁定图标, 再次单击该图标, 则所有图层都被解锁 在编辑过程中, 最好将编辑层以外的其他层都锁定, 以免对其他层产生误操作 (4) 轮廓模式在制作动画时, 为了使众多图层上的内容互相不干扰, 可以点击隐藏图标将不需要显示的图层内容暂时隐藏起来, 以方便对当前图层的编辑, 但有时在编辑当前层的对象时, 又需要参照其他图层上的对象, 如查看相应的位置或大小, 这时可以将有参照价值的对象以轮廓方式显示出来, 只显示外部轮廓而不显示全部, 这样既不影响对当前层的编辑, 同时又给当前层中的对象提供了位置和大小参考 每一图层上的轮廓标记都用不同的颜色方块表示, 表示原样显示, 表示只显示 轮廓, 单击该图层的轮廓标记可在原样显示与轮廓显示之间转换, 如图 1.18 所示 科学出版社职教技术出版中心 2 个图层上分别有 1 个图形图层 2 的内容以轮廓方式显示 图 1.18 图层的轮廓

20 10 Flash 动画设计与实训 7. 图层文件夹管理利用 Flash 8 的图层文件夹管理, 可以根据图层内容将多个图层放在同一个图层文件夹下, 单击图层窗口的左下方图标, 如图 1.19 所示, 即可新建一个空的图层文件夹, 使用拖曳方法可将多个图层拖到图层文件夹中 默认新建的图层文件夹名称为文件夹 1, 可以对该图层文件夹进行重命名 删除等操作, 操作方法与图层的操作方法相似 在图层文件夹的左边有一个向右的箭头, 箭头向右, 表示该图层文件夹为折叠状态, 单击可展开该图层文件夹, 同时该箭头变为向下, 箭头向下, 表示该图层文件夹为展开状态, 如图 1.20 所示 在图层文件夹下, 还可以再建立图层文件夹 图 1.19 图层目录折叠状态 图 1.20 图层目录展开状态 知识五面板组各种类型的工具面板是 Flash 软件的重要组成部分, 可以帮助用户查看 组织和更改文档中各元素的属性 默认情况下面板以组合形式显示在工作区的下方和右侧 所有面板既可以折叠或展开, 也可以浮动在程序窗口中, 对面板的主要操作如下 1. 打开与关闭面板用户可直接单击 窗口 菜单下的相应面板, 打开所需面板, 但为了方便操作, 我们常常将不用的面板与面板组直接关掉 如图 1.21 所示, 若要关闭 颜色 面板中的 混色器, 先单击 混色器, 再右击 颜色 面板的标题栏, 单击 关闭混色器 即可, 如果单击 关闭面板组, 则会关闭整个 颜色 面板 折叠与展开按钮 图 1.21 关闭面板

21 项目一 Flash 8 基础知识 面板的折叠与展开 在面板组中, 各面板的位置是可以改变的, 移动面板时, 只要将鼠标放在面板标题栏左上角的虚孔上, 当鼠标箭头变成时, 按住鼠标左键即可拖动 单击虚孔旁边的 折叠与展开按钮, 如图 1.21 所示, 可折叠面板或展开面板 3. 重新组合面板组 用户可以根据自己的需要将多个面板组合到一起 如图 1.22 所示, 属性 滤镜 参数 面板在一个面板组中, 动作 面板为单独一个面板, 如果要将 动作 面板组合到 属性 & 滤镜 & 参数 面板中, 可以在 动作 面板的标题栏上右击, 或单击 动作 面板标题栏右侧的菜单按钮, 在弹出的菜单中依次选择 将动作面板组合至 属性 / 滤镜 / 参数 命令, 这时 动作 面板与 属性 / 滤镜 / 参数 面板就合为一个面板组, 如图 1.23 所示 图 1.22 执行组合面板的命令 4. 常用面板 图 1.23 属性 滤镜 参数 动作 面板已组合在同一面板组中 (1) 对齐 & 信息 & 变形面板对齐面板 ( 图 1.24): 选择 窗口 对齐 命令可打开对齐面板, 它的主要作用 是调整多个对象的对齐 分布 匹配大小 间隔等, 如对齐方式下的 6 个按钮分别代表 科学出版社职教技术出版中心 左对齐 水平中齐 右对齐 上对齐 垂直中齐和底对齐, 用户可根据需要进行选择 对单个对象也可进行上述操作, 只要单击对齐面板上的 相对于舞台 按钮后即可 图 1.24 对齐面板 图 1.25 信息面板

22 12 Flash 动画设计与实训 信息面板 ( 图 1.25) 的作用是在编辑过程中向用户提供所选定对象的大小和所处位置, 以及当前光标所在位置的坐标值 颜色和透明度 使用该面板可以对物体进行精确定位 变形面板 ( 图 1.26) 主要用于对所选对象进行各种变形操作, 如缩放 旋转 倾斜等, 进行绽放操作时如果选择 约束 选项, 则横向和纵向将同比例缩放 面板右下角有两个按钮, 其中 复制并应用变形 按钮用于将变形后的对象在原位置进行复制 ; 重置 按钮用于将对象还原到变形前的状态 (2) 场景面板场景面板 ( 图 1.27) 是 Flash 中的一个重要面板, 如果电影中包含多个场景, 那么这些场景会按照在场景面板中排列的顺序依次播放 图 1.26 变形面板 图 1.27 场景面板 对场景的操作主要有 : 复制场景 添加场景 删除场景 调整场景位置等 在场景面板的右下角有三个按钮, 分别用于复制场景 添加场景和删除场景, 如果想要改变某个场景的播放次序, 只需用鼠标选中该场景后上下拖动到合适位置即可 (3) 动作面板动作面板 ( 图 1.28) 是为了方便用户使用脚本编程语言 ActionScript 而提供的简易操作界面, 单击 脚本助手 可打开脚本助手, 用户只需移动鼠标添加合适的动作命令并进行必要的设置即可自由应用 ActionScript 图 1.28 动作面板 (4) 库面板库面板 ( 图 1.29) 是存储和组织在 Flash 中创建的各种元件的地方, 还可用于存储和组织导入的文件, 包括位图文件 声音文件和视频剪辑等 可按照类型对库中的项目

23 项目一 Flash 8 基础知识 13 进行排序 在库面板下有 新建元件 新建文件夹 属性 删除 这几个按钮, 以方便对元件进行操作 排序按钮 知识六工具箱 图 1.29 库面板 工具箱提供了绘制图形的各种工具, 由 4 部分组成 : 选项工具 绘图工具 查看工 具 颜色工具, 各工具的使用方法将在下一章学习 知识一设置工作参数 任务三 Flash 8 的基本操作 在制作动画前, 通过对首选参数进行合理的设置, 可以使工作环境更适合自己的习 惯和要求, 提高工作效率 单击菜单 编辑 首选参数 命令, 即可打开 首选参数 对话框 在首选参数的类别列表框中有 7 个选项, 分别是 : 常规 ActionScript 自动套用格式 剪贴板 绘画 文本和警告, 如图 1.30 所示 如果制作的动画没有特殊要求, 一般不需要对首选参数中的设置进行改变, 保持默 认值即可, 仅在有特殊需要时才需进行相应参数的设置 常规 : 设置 Flash 的整体环境 ActionScript: 用于设置用户在使用 ActionScript 时的编程环境 自动套用格式 : 主要用于定义 ActionScript 代码显示的格式 剪贴板 : 主要用于设置位图的各种参数 绘画 : 主要用于设置 钢笔 等与绘制图形相关的一些参数 科学出版社职教技术出版中心

24 14 Flash 动画设计与实训 文本 : 主要用于设置与字体 文本相关的参数 警告 : 主要用于设置当程序出现可识别错误时, 出现的相应的警告信息, 一般采用默认设置 知识二设置工作环境 1. 设置标尺和网格 图 1.30 首选参数 中的 常规 选项 制作动画时, 为了将对象的位置设置得更精确, 可以给舞台加上标尺和网格 标尺和网格只起辅助定位作用, 在动画播放时不会显示网格线与标尺 图 1.31 所示的即为显示了标尺和网格的舞台 显示或隐藏标尺可通过单击菜单 视图 标尺 命令完成, 选中该菜单项, 菜单左边出现 符号, 此时显示标尺, 再次单击, 取消标尺 单击菜单 视图 网格 显示网格 命令, 在 显示网格 前会出现 符号, 这时将显示网格, 再次单击该命令, 显示网格 前的 符号消失, 将隐藏网格 如果单击菜单 视图 网格 编辑网格 命令, 将打开图 1.32 所示的 网格 对话框, 在对话框中, 可以设置网格线的颜色 选择是否 显示网格 舞台对象是否要 贴紧至网格, 还可修改网格的大小以及对齐精确度 图 1.31 显示了标尺和网格的舞台 图 1.32 网格 对话框

25 项目一 Flash 8 基础知识 15 文本框用于设置网格线的水平间距 文本框用于设置网格线的垂直间距 对齐精确度 : 表示对象能自动被网格捕获的距离范围 2. 设置 Flash 文件属性在开始制作动画前, 必须先设计好动画文件的屏幕大小 放映速度等属性, 如果在制作过程中再改变这些属性, 动画文件将会受到破坏, 将要多付出几倍的功夫来一一调整对象, 以适应后来的改动 因此, 在新建文件后, 一般首先要设置 Flash 文件属性 在工作区空白区域单击鼠标, 属性 面板上将会显示 Flash 文件的相关属性, 如图 1.33 所示 图 1.33 属性 面板上显示的文件属性单击 大小 选项右边的按钮, 打开 文档属性 对话框, 如图 1.34 所示, 即可进行相应设置, 设置完毕单击 确定 按钮, 如果要将该设置应用于所有文档, 则可单击 设为默认值 按钮 知识三新建 打开与保存文件 1. 新建 Flash 文件 图 1.34 文档 属性对话框 科学出版社职教技术出版中心 在 Flash 8 中, 用户可以通过以下方法创建新文件 : 方法一 : 在启动界面上单击 创建新项目 中的 Flash 文档, 如图 1.7 所示 方法二 : 单击菜单 文件 新建 命令

26 16 Flash 动画设计与实训 方法三 : 单击工具栏上的 新建 按钮 Flash 默认的新建文件的名称是 未命名 -1 未命名 -2 以此类推 2. 打开 Flash 文件 在 Flash 8 中, 用户可以通过以下方法打开已有的 Flash 文件 : 方法一 : 双击电脑上已有的 Flash 文件, 如果电脑上已安装好 Flash 8, 那么将会启动 Flash 8 软件并打开该文件 方法二 : 在启动界面上单击 打开最近项目 中的 打开, 在弹出的打开对话框中选定要打开的文件, 双击该文件或选定该文件后单击确定即可 方法三 : 单击菜单 文件 打开 命令 方法四 : 单击工具栏上的 打开 按钮 3. 保存 Flash 文件 单击菜单 文件 保存 命令或单击工具栏上的 保存 按钮, 即会保存当前编辑的 Flash 动画 如果是第一次保存, 将会弹出 另存为 对话框, 选择保存的位置并输入文件名后, 单击 确定 即可 知识四发布动画 1. 作品的优化 要准备在其他应用程序中使用 Flash 内容, 可以使用导出命令, 要在 Web 上发布影片, 可以使用 Flash 提供的发布命令 在发布动画时应尽量减小作品的大小, 可以执行以下操作优化作品减小作品大小 1) 对于在影片中多次使用的元素, 应将其制作成元件后再多次调用, 以减小作品大小 2) 尽量使用关键帧动画, 因为这类动画所占的资源比逐帧动画少 3) 尽可能少用特殊线条, 如虚线 点线等, 实线比特殊线条所占的资源少, 用铅笔工具绘制的线条占用的内存比用刷子工具绘制的线条占用的内存少 4) 将动画播放过程中发生变化的元素同不发生变化的元素存放在不同的层中 5) 对于声音文件, 请尽量使用压缩后的文件格式, 如 MP3 格式 6) 可以组合的元素应尽量用 Ctrl+G 键或 修改 组合 命令将元素组合起来 2. 作品的测试 虽然 Flash 影片可以边下载边播放, 但如果影片播放到某一帧, 而所需的数据还未完全下载的时候, 影片就会出现停顿直到数据下载完毕, 所以通常应事先测试影片的下载速度, 找出下载过程中可能造成停顿的地方, 并做出相应的调整 在 Flash 编辑状态下, 按 Ctrl+Enter 快捷键或选择 控制 测试影片 命令, 进入测试模式, 如图 1.35 所示 如果画面中没有出现显示测试数据及每帧大小的柱状图, 可选择 视图 带宽设置 命令 在模拟带宽分布图中, 方框代表帧的数据量, 如果方框在红线上, 表示动画

27 项目一 Flash 8 基础知识 17 的下载速度慢于播放的速度, 动画将会在这些地方停顿, 用户可在影片的相应帧处做出调整 3. 导出影片 (1)SWF 动画 SWF 动画是在浏览网页时常见的具有交互功能的动画, 以.swf 为后缀, 拥有动画 声音等全部内容 在 文件 导出 导出影片 对话框的 保存类型 下拉列表框中选择 Flash 影片 (*.swf) 格式, 输入保存的文件名后单击 确定 按钮, 将弹出 导出 Flash Player 对话框, 如图 1.36 所示, 该对话框中的主要设置如下 图 1.35 测试影片 图 1.36 导出 Flash Player 对话框 1) 版本 : 默认的是 Flash Player 8, 低版本对某些效果不支持 2) 加载顺序 : 可从下拉列表框中选择打开动画时的显示次序, 选择 由下而上, 动画将会从下方的层开始显示 ; 选择 由上而下, 动画将从顶部的层开始显示 3)ActionScript 版本 : 默认的是 Flash 8 的 ActionScript 2.0 增强版本 4) 选项 : 生成大小报告 : 勾选此项, 可产生一份详细记载帧 元件及声音压缩后大小的报告 防止导入 : 勾选此项, 可防止别人通过 Flash 的 文件 导入 命令来导入文件 省略 trace 动作 : 勾选此项, 可取消跟踪指令 允许调试 : 勾选此项, 播放时右击鼠标弹出的快捷菜单中会增加 Play Loop 等控制选项 压缩影片 : 增加对压缩的支持 5) 密码 : 当选择 防止导入 复选框后, 在此输入密码 (2)GIF 动画目前网页中见到的大部分动态图标几乎都是 GIF 动画, 由 Flash 影片生成的 GIF 动 科学出版社职教技术出版中心

28 18 Flash 动画设计与实训 画不支持声音及交互, 而且比不包含声音的 SWF 文件大 在 文件 导出 导出影片 对话框的 保存类型 下拉列表框中选择 GIF 动画 (*.gif) 格式, 输入保存的文件名后单击 确定 按钮, 将弹出 导出 GIF 对话框, 如图 1.37 所示 图 1.37 导出 GIF 对话框 Flash 8 能导出的文件格式除了以上两种外, 还有许多, 读者可一一进行查看与设置 4. 发布设置与预览 Flash 影片可以导出多种格式的文件, 为了避免每次输出时都进行设置, 可以用 文件 发布设置 命令打开 发布设置 对话框, 如图 1.38 所示 选择需要发布的全部格式并指定设置, 即可一次性输出所有选定的格式文件, 这些文件将存放于 Flash 影片文件所在的同一文件夹中 图 1.38 发布设置 对话框

29 项目一 Flash 8 基础知识 19 在 格式 选项中勾选要导出的文件格式, 可在右边的文本框中设置文件名, 如果单击 使用默认名称 按钮, 则使用默认的影片文件名 还可在对话框的上部选择某一选项进行相应设置 单击 发布 按钮, 就可输出所选的文件 习 题 一 选择题 1. 如果想再次启动开始页, 需在下列编辑菜单中的 ( ) 中设置 A. 首选参数 B. 查找 C. 控制 D. 自定义工具面板 2. 可对图层进行的操作有 ( ) A. 增加图层 B. 删除图层 C. 复制图层 D. 将图层拖至舞台工作区 3. 显示或隐藏标尺可单击 ( ) 菜单中的标尺命令完成 A. 编辑 B. 视图 C. 命令 D. 窗口 4. 用户可直接单击 ( ) 菜单打开所需的面板 A. 编辑 B. 视图 C. 命令 D. 窗口 5. 首选参数设置包括 ( ) 项目 A. 常规 B.ActionScript C. 自动套用格式 D. 剪贴板 6.( ) 用于组织和控制文档内容在一定时间内播放的图层数和帧数 A. 图层 B. 时间轴 C. 舞台工作区 D. 工具栏面板 7.( ) 面板是存储和组织各种元件的地方 A. 场景 B. 动作 C. 信息 D. 库 8. 若文档中包含未保存的修改时, 在文档标题栏和应用程序标题栏中的文档名称 后会出现一个 ( ) 符号 A.# B.% C.& D.* 9. 要对遮罩图层进行编辑, 可单击 ( ) 解锁, 要再次显示遮罩效果, 可再次 单击该按钮 A. B. C. D. 二 问答题 1.Flash 8 有哪些新增功能? 2.Flash 8 中的图层有哪几种模式? 分别适合在何种情况下使用? 3.Flash 8 中对齐面板有哪些功能? 如何打开对齐面板? 4.Flash 8 可以输出的文件格式有哪些? 5. 导出的文件是否越小越好? 为什么? 三 上机操作题 1. 请新建一个动画文件并保存 2. 请将自己制作的动画以不同格式输出 科学出版社职教技术出版中心

30 20 Flash 绘图 主要内容 了解各种工具及其选项按钮的作用 掌握常用工具的使用方法 学习目的 熟悉工具栏中各种工具的使用方法和作用 能熟练使用常用绘图工具绘制较复杂的图形

31 项目二 Flash 绘图 21 任务一 选取 工具 利用 Flash 中绘图工具可以绘制很多精美的图形, 绘图工具如图 2.1 所示 选择工具任意变形工具 线条工具 钢笔工具 椭圆工具 铅笔工具墨水瓶工具 滴管工具 手形工具 笔触颜色 填充色 黑白 没有颜色贴紧至对象 部分选取工具 填充变形工具 索套工具 文本工具 矩形工具刷子工具 颜料桶工具橡皮擦工具 缩放工具 交换颜色 知识一 选择 工具 平滑 图 2.1 Flash 中的绘图工具 选择 工具 ( ) 是所有工具中最常用的工具, 主要有选择对象 移动对象 编 辑对象 3 种功能 1. 选择单一对象 在编辑对象之前, 必须先选择对象, 被选择的对象将被亮点填充或被方框包围, 选 择单个对象十分简单, 只需在选取的对象上单击鼠标左键即可, 如果要同时选取填充区和它的边框, 则可以双击, 如图 2.2 所示 伸直 科学出版社职教技术出版中心 单击鼠标选取填充区 双击鼠标选取填充区和边框 图 2.2 选取单一对象

32 22 Flash 动画设计与实训 2. 选取多个对象需同时选取多个对象时, 可以使用以下两种方法之一 方法一 : 在空白区域按住鼠标左键向对象拖曳, 将要选取的对象都包含在一个矩形内, 松开鼠标后, 矩形框内的所有对象都将被选中, 包括对象的边框和填充区, 如图 2.3 所示 方法二 : 按住 Shift 键, 依次单击所需选取的对象, 这种方法能比较精确地选中我们要选取的多个对象, 如图 2.3 所示 使用方法一选取对象 使用方法二选取对象 图 2.3 选取多个对象 3. 移动对象 用 选择 工具指向已经选取的对象, 按住鼠标左键并拖曳, 就可以将对象拖到指定位置, 如果选取了多个对象, 这几个对象将一起移动 4. 编辑对象 如果选取对象时选定的是填充区, 没有选定边框, 那么拖动对象时边框部分将不会移动 选择工具还可以改变对象的形状, 利用选择工具编辑对象主要有以下 3 种操作 : 1) 如果将鼠标移向对象附近, 鼠标指针变成时, 按住鼠标左键拖曳, 可以改变线条的曲率, 如图 2.4 所示 编辑对象时, 必须使该对象处于未选定状态, 否则就成了移动对象的操作 将鼠标移向对象 按住鼠标左键拖曳改变线条曲率 图 2.4 改变线条曲率 2) 如果将鼠标移向对象的角点时, 鼠标指针变成时, 按住鼠标左键拖曳, 可以

33 项目二 Flash 绘图 23 拉伸对象, 同时形成拐角的线条仍然保持为直线, 如图 2.5 所示 将鼠标移向对象 按住鼠标左键拖曳使对象拉伸 线条拉伸前 拉伸中 拉伸后 图 2.5 拉伸对象 3) 按住 Ctrl 键, 同时用鼠标在一线条上拖动, 可以生成一个新的角点, 如图 2.6 所示 鼠标靠近对象按住 Ctrl 同时拖动鼠标松开鼠标后 5. 选项栏 图 2.6 增加角点 选中选择工具后, 在选项栏有三个选项按钮, 如图 2.1 所示 (1) 贴紧至对象 按钮 贴紧至对象 按钮也被称为磁铁或捕获按钮, 在用鼠标拖曳一个对象靠近另一对 象里, 被拖曳对象一旦到达另一对象的捕捉范围时, 它就像被磁铁吸引一样, 自动向另一对象靠拢 (2) 平滑 按钮 平滑 按钮可以使对象变得更加平滑 选中对象后每单击一次该按钮, 对象就被平滑一次 (3) 伸直 按钮 伸直 按钮可以使对象变得更加棱角分明 选中对象后每单击一次该按钮, 对象就被拉直一次 知识二 部分选取 工具 科学出版社职教技术出版中心 用 部分选取 工具 单击工作区中的曲线时, 曲线上会显示出空心小点, 这些空 心小点被称为节点, 这时可以对这些节点进行以下 4 种操作

34 24 Flash 动画设计与实训 部分选取 工具没有选项 1. 删除节点 选中其中的一个节点, 该节点将变成实心的小方点, 按 Delete 键可以删除该节点, 如图 2.7 所示 选择节点 a 节点 a 已删除 图 2.7 删除节点 2. 移动节点 用鼠标拖动任意一个节点, 可以将该节点移动到新的位置, 如图 2.8 所示 选择节点 a 移动节点 a 图 2.8 移动节点 3. 将角点转换为曲点 用 部分选取 工具拖曳角点时, 按住 Alt 键, 可将角点转换为曲点, 如图 2.9 所示 变形中 变形后 图 2.9 节点转换为曲点 4. 调节曲率 选中一个曲点, 用鼠标拖动调节柄, 可以调整其控制的线段的曲率, 如图 2.10 所示 调整中 调整后 图 2.10 调整曲率

35 项目二 Flash 绘图 25 知识三 索套 工具 索套 工具可以用来选取任何形状范围的对象, 而选择工具只能拖出矩形的选取范围, 因此在选取功能上要更强些 使用时只需按住鼠标左键拖曳, 画出要选择的范围, 松开鼠标后, 会自动选取 索套 工具圈定的封闭区域, 如图 2.11 所示 当线条没有闭合时, 会用直线连接起点和终点, 自动闭合曲线 图 2.11 使用 索套 选定不规则图形 选中 索套 工具后, 在选项栏内会出现三个辅助选项按钮, 如图 2.12 所示 魔术棒多边形模式 魔术棒设置 图 2.12 索套 选项 (1) 魔术棒 按钮用魔术棒单击位图图像时,Flash 将选中与单击点颜色相近的区域 此按钮主要用于对位图的操作, 对矢量图形无效 (2) 多边形模式 按钮使用此按钮后, 每次单击鼠标就会确定一个端点, 端点之间用直线连接, 鼠标回到起始处附近时双击将会选定被包围的区域, 如图 2.13 所示 依次单击鼠标确定端点逐渐向起点处靠拢双击后被选定的区域 图 2.13 使用 多边形模式 按钮选取对象 科学出版社职教技术出版中心 (3) 魔术棒设置 按钮单击该按钮可弹出 魔术棒设置 对话框 对话框中的 阈值 用于定义与选取范围内相邻像素色值的接近程度, 数值越高, 魔术棒选取时的容差范围也越大, 如果数值为 0, 像素色值即为单击点处像素值完全一致 平滑 用于定义位图边缘的平滑程度, 包括像素 粗略 标准和平滑 4 个选项

36 26 Flash 动画设计与实训 任务二绘图工具 知识一 直线 工具 直线 工具就是用来绘制直线的工具, 选中该工具即可画出直线, 如果在绘制直线的过程中按住 Shift 键, 可以绘制垂直和水平的直线, 或是 45 角的斜线 选中 直线 工具后, 在工作区下面的属性面板中可以设置直线的属性, 如图 2.14 所示 笔触颜色 笔触高度 笔触样式 图 2.14 直线 工具的属性面板该属性面板中各个组件的含义如下 : 1) 笔触样式 : 在该下拉列表框中可以选择不同的线条样式, 如实线 点线 短划线等 2) 笔触高度 : 笔触高度也就是线条的宽度, 在该文本框中直接输入数字后按 Enter 键, 即可改变线条的宽度, 也可单击文本框右侧的下拉箭头, 用鼠标拖动滑块, 也可改变线条的粗细 3) 笔触颜色 : 单击该按钮, 将出现调色板, 可以选择一种颜色作为直线的颜色 在调色板中还可以设置颜色的 Alpha 值 4) 自定义 : 单击该按钮, 会打开 笔触样式 对话框, 可以进一步对直线的属性进行设置 图 2.15 和图 2.16 为虚线的设置, 对比两图, 可看出图 2.16 的线段略短, 线段间距略长, 由此可知类型下的 2 个文本框的作用, 左侧文本框可设置线段的长度, 右侧文本框可设置线段的间距 其他线条类型的设置, 请读者自行验证 图 2.15 自定义直线属性 5) 端点 : 在 Flash 中, 可以给线条的终点加上端点, 以美化线条和实现线条之间的平滑连接 单击端点右边的按钮, 在弹出的菜单中有三个选项 : 无 圆角 方型 图 2.17 所示的分别是这三种选项的效果图

37 项目二 Flash 绘图 27 图 2.16 自定义直线属性 6) 接合 : 单击接合右边的按钮, 弹出三个选项 : 尖角 圆角 斜角 图 2.18 所示 的分别是这三种接合选项的效果图 图 2.17 端点的效果图 图 2.18 接合的效果图 所示 7) 选项 : 选取 线条 工具后, 对应的选项栏中有两个辅助选项按钮, 如图 2.19 对象绘制 贴紧至对象 图 2.19 线条 工具选项栏 贴紧至对象 : 按下该按钮, 启动自动捕捉功能, 当鼠标绘制的直线接近其他对象时, 直线将自动连接到其他对象上, 用户可以根据实际情况决定是否选择该选项 对象绘制 : 按下该按钮, 所绘制的线条将作为独立的对象, 不与其他对象相互影响 知识二 钢笔 工具 1. 画直线 选中 钢笔 工具后, 每单击一次鼠标左键, 就会产生一个节点, 并且同前一个 节点自动用直线相连, 前后两节点间的距离决定了中间连接线段的长度 在绘制的同时, 如果按住 Shift 键, 则可以绘制出与舞台的水平线成 角的线段 要结束图形的绘制, 可以进行以下操作 1) 要完成一个开放区域, 只需双击最后一个节点, 或者单击工具箱中的 钢笔 工具, 还可以按 Ctrl 键并同时单击 2) 要完成一个封闭区域, 可将 钢笔 工具定位于第一个节点处, 这时在笔尖状的鼠标指针旁会出现一个小圆圈, 接着单击鼠标左键就可形成一个封闭区域 2. 画曲线 科学出版社职教技术出版中心 选择 钢笔 工具, 单击鼠标创建第一个节点, 在另一位置按下鼠标左键产生第二节点后不要松开, 拖曳鼠标, 在拖曳时将出现曲线的调节柄, 若此时同时按住 Shift 键,

38 28 Flash 动画设计与实训 则调节柄的方向将为 45 角的整数倍 绘制曲线的过程如图 2.20 所示 拖曳第二个节点 拖曳第三个节点 完成后的曲线 图 2.20 曲线的绘制 3. 调整节点 (1) 移动节点用 部分选取 工具选定要移动的对象, 并将鼠标指针移动到节点上, 按住鼠标左键不放并拖曳即可移动节点, 如图 2.21 所示 移动时, 也可使用键盘上的方向键进行精确移动 移动的前段选定后移向节点按住鼠标左键拖动松开鼠标后移动后的线段 图 2.21 移动节点的步骤 (2) 角点与曲点的相互转换角点转换为曲点 : 选择 部分选取 工具, 按住 Alt 键, 拖曳节点即可, 如图 2.22 所示 曲点转换为角点 : 选择 钢笔 工具, 将鼠标移向曲点, 单击该曲点即可, 如图 2.23 所示 转换前的形状按住 Alt 键拖曳节点松开鼠标后的形状转换后的形状 图 2.22 角点转换为曲点

39 项目二 Flash 绘图 29 转换前的形状选定对象后移向节点单击曲点转换后的形状图 2.23 曲点转换为角点 (3) 添加节点选择 钢笔 工具, 然后将笔尖对准线段上要添加节点的位置, 当鼠标指针显示为时, 单击即可添加节点 (4) 删除节点删除角点 : 用 钢笔 工具的笔尖对准角点, 当鼠标指针显示为时, 单击即可删除该角点 删除曲点 : 用 钢笔 工具的笔尖对准曲点, 连续单击两次即可删除该曲点 第 1 次单击可将曲点转换为角点, 第 2 次单击将删除该点 选择部分选取工具, 单击节点后按 Delete 键也可删除节点 知识三 文本 工具 使用 文本 工具 可以在动画中添加文字, 选中 文本 工具后, 在属性面板中 可设置文本的各种属性, 如字体 字体大小 文本颜色 文本类型等 文本属性面板如图 2.24 所示 知识四 椭圆 工具与 矩形 工具 图 2.24 文字属性面板 科学出版社职教技术出版中心 椭圆 工具和 矩形 工具用于绘制椭圆 正圆 矩形和正方形, 椭圆 工具的使用和 矩形 工具的使用方法大致相似, 所以这里仅介绍矩形工具的使用, 椭圆 工具的使用方法可以此类推 图 2.25 所示为 矩形 工具的属性面板 图 2.25 矩形 工具属性面板

40 30 Flash 动画设计与实训 在 矩形 工具的属性上, 有两个颜色选择工具, 用于设置边框颜色, 用于设置填充色 单击边框颜色的选择按钮时会弹出调色板, 如果想把边框色设置为无, 可单击调色板上的, 表示在不使用边框色, 如图 2.26 所示 填充色的选择与设置与边框色的设置相同 图 2.26 调色板选择 矩形 工具后, 在工具箱的选项下会出现一个工具, 这是 椭圆 工具没有的, 使用该工具可以绘制任意的圆角矩形, 单击该按钮后将弹出如图 2.27 所示的对话框 图 2.27 边角半径为 20, 边框线大小为 5, 填充色为无的矩形和矩形设置对话框 在绘制图形时若同时按住 Shift 键, 那么, 用 椭圆 工具可以画出正圆, 用 矩形 工具可以画出正方形 ; 按住 Alt 键时, 将从起始点向四周发散来绘制图形 ; 按住 Alt+Shift 键则可以从起始点向四周发散来绘制正圆或正方形 按住 矩形 工具 2~3 秒, 屏幕上会弹出如图 2.28 所示的菜单, 选择 多角星形 工具后按住鼠标左键在舞台上拖曳就能绘制多边形了, 单击 多角星形 工具的属性面板上的 选项 按钮, 将弹出如图 2.29 所示的对话框, 在其中可以对 多边形 工具的属性进行设置 在样式下拉列表框中有 多边形 和 星形 两个选项, 默认的是 多边形 图 2.30 所示的是用 多角形 工具绘制的效果图 从左往右分别是 : 样式为星形 边数为 5 星形顶点大小为 0.50 的效果 ; 样式为星形 边数为 5 星形顶点大小为 0.10 的效果 ; 样式为多边形 边数为 5 星形顶点大小为 0.50 的效果 图 2.28 多角星形 工具 图 2.29 工具设置 对话框

41 项目二 Flash 绘图 31 图 2.30 用多角星形工具绘制的效果图 知识五 铅笔 工具 使用 铅笔 工具 可以画各种形式的线条, 绘制时如果同时按下 Shift 键, 则可 将线条约束在水平 垂直和 45 角的方向 单击 铅笔 工具的选项栏中的按钮, 可以选择绘制模式, 如图 2.31 所示伸直模式 : 可以绘制直线, 如果绘制的是不规则的三角形 椭圆 矩形, 只要绘图轨迹接近于三角形 椭圆或矩形, 将被强制变为相应的规则几何形状 平滑模式 : 可以绘制平滑曲线, 使用该模式, 即使绘图时鼠标稍图 2.31 绘制模式有抖动, 也能绘制出较平整的线条 墨水模式 : 选择这种模式, 绘制的自由型线条将基本保持原样 知识六 刷子 工具 刷子 工具的使用方法和 铅笔 工具基本相同, 使用 刷子 工具绘图时可使用导入的位图作为填充物 使用 刷子 工具的具体步骤如下 : 1) 在工具箱中选择 刷子 工具后选择一种填充色 2) 单击 刷子模式 按钮, 在弹出的菜单中选择 刷子模式, 如图 2.32 所示 标准绘画 : 若选择此项, 刷子将会覆盖原图的线条和填充区域 颜料填充 : 刷子只覆盖填充区域, 线条不受影响, 如图 2.33 所示 图 2.32 刷子 工具的 5 种绘图模式 科学出版社职教技术出版中心 图 2.33 颜料填充 模式绘画效果 后面绘画 : 刷子只对同层工作区上的空白区域进行绘图, 线条及填充区域不受影响 颜料选择 : 刷子只涂改被选中的区域, 因此在使用这种模式绘画时, 必须先选中要绘画的区域 内部绘画 : 选择这种模式, 刷子只在第一笔所在的封闭区域内绘画, 且不影响线条, 如图 2.34 所示 3) 在工具箱中选择刷子大小和刷子形状 4) 在工作区上运用刷子工具进行绘制, 如果在绘制的同时按住 Shift 键, 则可将刷子约束在水平或垂直的方向绘图

42 32 Flash 动画设计与实训 图 2.34 内部绘画 模式绘画效果 知识七 任意变形 工具 任意变形 工具可以对图形进行各种各样的变形, 可进行缩放 旋转 倾斜 翻转 扭曲 封套等变形 选择 任意变形 工具后, 在工具箱底部的选项区域中选择变形模式, 如图 2.35 所示 旋转与倾斜 按钮 : 选择 任意变形 工具后, 用鼠标单 击要旋转的对象, 这时对象周围会出现黑色边框, 边框上共有 8 个控制点, 对象中央的圆点为旋转中心点, 旋转时将以该圆点图 2.35 任意变形工具为中心旋转, 中心点的位置可以用鼠标移动 单击选项栏中的的选项栏旋转与倾斜按钮, 鼠标移动到对象四个角上的控制点时, 鼠标光标变成旋转光标, 这时可拖曳鼠标旋转对象 鼠标移到四条边线上时, 光标将变成倾斜光标, 拖曳鼠标即可倾斜变形对象 缩放按钮 : 可用来调整对象大小 扭曲按钮 : 用来调整对象的形状, 使之自由扭曲变形 封套按钮 : 按下该按钮, 对象的每个边上会新增 4 个控制点, 鼠标移近这些控制点时, 光标将变成封套光标, 这时拖曳鼠标, 可使对象的形状发生奇妙的变化, 获得不同的效果 知识八 填充变形 工具 填充变形 工具是用来调整渐变色填充对象或位图填充对象的重要工具 选择该工具后在工作区中单击要编辑的填充对象, 对象周围会出现一个边框, 边框上带有编辑手柄, 当鼠标指针落在这些手柄上时, 指针的形状会发生相应的改变, 指针的形状可以指示出对应的手柄的作用 图 2.36 所示的是对位图填充对象的操作效果 第一步第二步第三步 图 2.36 填充变形 工具的使用

43 项目二 Flash 绘图 33 操作步骤 1) 在工作区画一圆 2) 选定圆中的填充部分, 在颜色面板中混色器的类型中选择事先导入的位图, 也可通过点击导入来重新选择图片 3) 选择 填充变形 工具后在圆上单击, 按住按钮拖动鼠标, 调整填充位图至合适位置 图 2.37 为使用不同编辑手柄产生的效果 鼠标移到中心圆点处变为 时按住拖动 拖动 后的效果 图 2.37 编辑手柄的调整效果 利用 填充变形 工具编辑渐变色填充对象时, 可在混色器面板的类型中选择 线性 或 放射状, 如图 2.38 所示 在设置渐变色时, 可拖动渐变色定义条上的滑块来调整填充颜色所占的位置, 如果需要增加填充颜色, 可将鼠标放到渐变色定义条上, 当鼠标变为时, 单击便会产生一个新的颜色点, 如果需将多余的颜色点删掉, 将按住颜色点滑块拖出即可, 双击 颜色点滑块会打开调色板, 以方便选择颜色 设置好渐变色后, 即可选择 填充变形 工具来调整填充对 象了, 各手柄的使用方法与位图的手柄调整方法相同 知识九 墨水瓶 工具 墨水瓶 工具用于更改线条的颜色 线宽和样式等属性 使用 墨水瓶 工 具的具体步骤如下 : 1) 选择 墨水瓶 工具后在图 2.39 所示的属性面板上设置线条的样式 颜色和线宽 2) 用 墨水瓶 工具直接单击要修改的线条, 即可改变线条的样式 颜色和线宽 该方法也可为一无边框的封闭区域加上边框线 图 2.38 线性填充 科学出版社职教技术出版中心 图 2.39 墨水瓶 工具的属性面板

44 34 Flash 动画设计与实训 知识十 颜料桶 工具 与 墨水瓶 工具相对应, 颜料桶 工具的功能是更改填充区域的颜色, 它可以填充封闭区域或不完全封闭区域, 但如果不封闭图形的缺口太大, 那么就需要手工封闭缺口后才能再填充 它可以使用纯色 渐变色和位图填充 选择颜料桶工具后, 单击工具箱选项区的空隙大小按钮会弹出 4 种填充方式, 如图 2.40 所示 不封闭空隙 : 若选择这种模式, 颜料桶只填充完全封闭的区域, 对所有不完全封闭的区域都无效 封闭小空隙 : 选择这种模式, 颜料桶可以填充有较小缺口的区域 封闭中等空隙 : 选择这种模式, 颜料桶可以填充中等缺图 2.40 颜料桶工具的 4 种口的区域 填充方式封闭大空隙 : 选择这种模式, 颜料桶可以填充较大缺口的区域 知识十一 滴管 工具 滴管 工具用于吸取填充或线条的颜色值, 选择 滴管 工具后, 单击边框 时, 滴管 工具会自动变为 ; 单击填充区时, 滴管 工具会自动变为 然后在其他边框或填充区内单击, 则新的颜色将被应用到该边框或填充区内 知识十二 橡皮擦 工具 橡皮擦 工具可以擦除工作区上的边框和填充, 选中 橡皮擦 工具后, 在工作区中拖曳鼠标时, 鼠标拖过的区域会被擦除 橡皮擦 工具有 3 个选项按钮 : 橡皮擦模式 橡皮擦形状 和 水龙头, 如图 2.41 所示 图 2.41 橡皮擦 工具的选项栏 图 种擦除方式 橡皮擦模式 按钮 : 用鼠标单击该按钮, 将弹出 5 种橡皮擦模式, 如图 2.42 所示 1) 标准擦除 : 选择该模式, 可以擦除同一图层上的所有的边框线和填充色 2) 擦除填色 : 选择该模式, 只擦除填充区, 不擦除边框线 3) 擦除所选填充 : 选择该模式, 只擦除被选中部分的填充色, 所以在使用前要先选中对象 4) 内部擦除 : 选择该模式, 只擦除第一笔所在的封闭区域, 封闭区域外的对象不受影响, 并且不擦除边框线

45 项目二 Flash 绘图 35 水龙头 按钮 : 按下该按钮, 可快速擦除边框或填充区, 当按下该按钮时, 鼠 标指针变成了水龙头的样子, 用鼠标单击任何对象, 此对象就会被完全擦除 任务三查看工具 知识一 手形 工具 当窗口无法同时显示所有的内容时, 可用 手形 工具 操作方法是 : 选中该工具后直接用鼠标拖动图形即可 调整图形的显示区域 知识二 缩放 工具当编辑的图形过大或过小时, 可利用 缩放 工具对图形的尺寸进行调整 选择 缩放 工具后, 在选项栏有两个选择按钮 : 放大和缩小 操作方法是: 选中其中一个按钮后, 再用鼠标单击工作区即可 也可用鼠标在工作区中拉出一个待缩放的矩形区域, 松开鼠标后该区域的图形将做相应的缩放变化 知识一绘图小技巧 1. 几何图形法 双击 缩放 工具, 可使图形恢复到原样, 即 100% 任务四绘图实例 在绘图过程中可多利用规则的几何图形, 如圆 椭圆 矩形 多边形等, 通过修改与加工, 如添加节点 改变曲率等, 形成不规则图形 2. 辅助线法 在绘图过程中为了填充某一开放区域, 可临时添加一些辅助线以封闭缺口, 完成填充后再将该辅助线删除, 为使添加的辅助线与作图线能准确区分, 可将添加的辅助线设为其他特定的颜色 3. 移位法 科学出版社职教技术出版中心 如果绘制的图像较复杂, 在绘制局部区域时为了防止修改到其他部分, 可先将零部

46 36 Flash 动画设计与实训 件画在旁边, 画好后再移到原图像指定的位置 4. 导入位图可事先导入位图放入一图层中, 并锁定该图层, 在其余图层上绘画, 导入的位图可用于对比绘画新图时的位置 形状以及颜色 知识二实例一 : 绘制西瓜 操作步骤 1) 启动 Flash 8, 在开始页中选择新建文档, 在工具箱中选定 线条 工具, 在工作区上画出一条直线 2) 选择 选择 工具, 将鼠标移向工作区的直线中间, 当光标变为时, 按住鼠标拖动, 如图 2.43 所示 图 2.43 直线向拖曳的方向弯曲图 2.44 对曲线进行缩放 图 2.45 以直线封口 3) 将已弯曲的线条再复制一个, 选择 任意变形 工具后在其选项栏中选择 缩放 按钮, 将下面的线条缩放成如图 2.44 所示 4) 使用 线条 工具, 在旁边画一条直线, 然后用 选择 工具选定该直线, 将直线移向曲线上方进行封口, 如图 2.45 所示, 也可用键盘上的光标键移动直线 如果有超出部分, 用选择工具选定后删除即可 封口后应选择中的工具, 单击图形以放大图形, 查看线条间是否有缺口, 若有缺口, 如图 2.46 所示, 用 选择 工具拖动线条以封口 有缺口时对底部填充颜色时将无法填充颜色 图 2.46 没有完全封口上述图形也可用椭圆工具画出椭圆, 复制椭圆并缩小至合适大小后, 将 2 个椭圆合并在一起, 用直线工具画一直线, 删除多余的线, 如图 2.47 所示 5) 选择 颜料桶 工具, 选择填充色填充西瓜的底部, 填充时可选择 封闭中等空隙模式 同样方法将西瓜上部填充为红色, 如图 2.48 所示

47 项目二 Flash 绘图 37 图 2.47 西瓜的另一种画法 6) 放大图形, 并使用 刷子 工具, 选择刷子颜色和大小后, 在西瓜上画出瓜子 如图 2.49 所示 7) 用 选择 工具选定整个图形后, 单击 任意变形 工具的 旋转与倾斜 按钮, 将图形稍旋转一些角度, 最后删除多余的线条, 即得到图 2.50 图 2.48 填充颜色图 2.49 添加瓜子图 2.50 画好后的西瓜 知识三 实例二 : 绘制牵牛花 操作步骤 1) 选择工具箱中的 椭圆 工具, 在混色器中设置填充的类型为 放射状, 选择 渐变色, 在工作区画一椭圆 选择 任意变形 工具中的 扭曲 按钮, 对椭圆略微扭曲一下, 再用 选择 工具稍做修改, 再用 调整变形 工具对填充颜色进行修改, 得到如图 2.51 所示的图形 调整时可将图形放大至 200% 或更高百分比, 以下的绘画都在 200% 百分比下进行 图 2.51 对椭圆稍作修改 科学出版社职教技术出版中心 2) 用 线条 工具在椭圆的旁边画一直线, 再用 选择 工具拖动线条, 如实例一中的第 2 步, 得到图 ) 用 钢笔 工具在曲线上增加节点, 如图 2.53 所示 4) 用 部分选取 工具拖动最上面的两个节点, 改变曲线形状, 如图 2.54 所示

48 38 Flash 动画设计与实训 图 2.52 在椭圆旁画曲线图 2.53 增加节点图 2.54 改变曲线形状 5) 用 铅笔 工具画出完整的茎, 可结合使用 直线 工具对图形进行修改操作 花茎画好后, 选择 颜料桶 工具, 设置填充色, 填充类型为放射状, 填充花茎, 如图 2.55 所示 图 2.55 画牵牛花的茎 6) 在花朵旁边, 用 椭圆 工具和 铅笔 工具画出牵牛花的花心, 填充色为白色, 将画好的花心用快捷键 Ctrl+G 组合起来, 然后移动到花朵上, 如图 2.56 所示 图 2.56 画上牵牛花的花心 7) 用 刷子 工具在花朵上刷出些阴影, 如图 2.57 所示 8) 选定整个花朵, 按 Ctrl+C 键复制后再用 Ctrl+V 键粘贴, 在原花朵的旁边再复制一朵, 用 任意变形 工具将刚复制的花朵缩小一些, 选定原来的花朵包括所有花茎, 移到新复制的花朵上, 如图 2.58 所示 图 2.57 为牵牛花加些阴影 图 2.58 复制产生第二朵花

49 项目二 Flash 绘图 39 9) 在花朵旁边用 铅笔 工具画出叶子, 用 钢笔 工具和 部分选取 工具修 改图形, 得到图 2.59 的效果 图 2.59 画叶子 10) 选中整片叶子后, 用 Ctrl+G 快捷键组合, 用 任意变形 工具缩放至合适大小, 复制 粘贴产生另 2 片叶子, 用 任意变形 工具分别调整 3 片叶子的大小并略旋转后, 将 3 片叶子分别放在花茎上, 如图 2.60 图 2.61 所示 一 填空题 图 2.60 放大为 200% 的效果图 习 题 图 % 的效果图 1. 套索 工具有 3 个附属工具, 分别是 2. 橡皮擦 工具有 3 个附属工具, 分别是 3. 如果要对文字的局部进行变形, 首先要 文字, 使其转换成, 然后才可以对转换过的字符进行各种变形 4. 刷子 工具有 5 种绘图模式, 分别是 和 二 选择题 1.Flash 8 中的文本类型下拉列表框中可设置的文本类型是 ( ) A. 静态文本 动态文本和输入文本 B. 动态文本和输入文本 C. 静态文本和动态文本 D. 静态文本和输入文本 科学出版社职教技术出版中心

50 40 Flash 动画设计与实训 2.( ) 工具可以将对象按比例缩放, 也可在水平方向及垂直方向分别放大或缩小 A. 任意变形 B. 填充变形 C. 套索 D. 选择 3. 用部分选取工具拖曳角点时, 按住 ( ) 键, 可将角点转换为曲点 A.Alt B.Ctrl C.Shift D.Tab 4. 下列 ( ) 工具可用来画引导层中的引导线 A. 钢笔 B. 铅笔 C. 刷子 D. 直线 5. 如果要同时选择对象的填充区和它的边框, 可以 ( ) 鼠标 A. 单击 B. 双击 C. 拖曳 D. 右击 6. 用直线工具绘制垂直和水平的直线或 45 角的直线时, 应同时按 ( ) 键 A.Ctrl B.Alt C.Shift D.Tab 7. 当对某个物体的某个区域进行放大以利于编辑时, 就使用 ( ) 工具 A. B. C. D. 三 上机操作题 绘制一个如图 2.62 所示的标志 图 2.62 会标

51 41 逐帧动画 主要内容 逐帧动画的特点 三种帧的含义 区别与不同应用 逐帧动画的造型基础 制作步骤, 并 深入了解逐帧动画的运动规律 学习目的 掌握逐帧动画的制作方法 了解逐帧动画的应用范围并制作相应实例 科学出版社职教技术出版中心

52 42 Flash 动画设计与实训 任务一逐帧动画概述 从这一章开始, 我们将正式开始接触动画的制作 那么, 到底什么是动画呢? 你对动画了解多少呢? 所谓动画, 是指利用人的视觉残留特性使连续播放的静态画面相互衔接形成的动态效果 计算机动画是由传统的卡通动画 (cartoon) 发展起来的 在早期 Walt Disney 的制作室, 高级动画师设计卡通片中的关键画面, 也就是下面我们将要讲到的 关键帧, 然后由助理动画师设计中间帧 随着技术的进步, 计算机逐渐取代了助理动画师制作中间帧的工作, 产生了所谓的计算机辅助动画 (computer assisted animation) 20 世纪 70 年代后期, 随着计算机图形学和硬件技术的发展, 计算机造型技术和真实感图形绘制技术得到了长足的进步, 出现与卡通动画有质的区别的三维计算机动画 当然, 在这里我们现在主要研究的是二维矢量动画, 也就是通常所说的 平面动画 为了让我们对动画的理解更深入, 同时让我们对 Flash 动画的不同制作方法有全面的了解, 下面, 我们将以 逐帧动画 为例, 详细讲解传统动画的制作原理, 并指导大家在实际应用中根据需要熟练使用逐帧动画的制作技术 知识一动画的分类与区别在具体制作之前, 我们首先要了解,Flash 动画在制作的过程中, 根据不同的划分标准, 可以将动画进行不同的分类 根据动画效果的不同, 可以将 Flash 动画分成形变动画 引导线 ( 轨迹 ) 动画 遮罩动画 旋转动画 光影动画等 根据动画制作技术的不同, 又可以将 Flash 动画分成两大类 : 逐帧动画与补间动画 其中, 补间动画又可以分为形变动画与动作动画 从制作技术与制作步骤的复杂角度看, 逐帧动画的制作复杂程度最低, 但制作花费的时间最长, 工作量最大 ; 而补间动画一般只需要重点制作动画片断的开始和结束内容, 中间的动画过程可以由计算机自动产生, 因而相对制作效率较高 从动画文件大小的角度看, 由于逐帧动画会保存每个完整帧的值, 因此逐帧动画的体积一般会比普通动画的体积大 知识二逐帧动画的概念与特点那么, 什么是逐帧动画呢? 逐帧动画的特点又是什么呢? 在传统卡通动画的制作过程中, 导演首先将剧本分成一个个分镜头, 然后由高级动画师确定各分镜头的角色造型, 并绘制出一些关键时刻各角色的造型 最后, 助理动画师根据这些关键形状绘制出从一个关键形状到下一个关键形状的自然过渡, 并完成填色及合成工作

53 项目三逐帧动画 43 这个过程就是 逐帧动画 的制作过程, 也可以称之为逐帧动画的制作原理 简单 地讲, 逐帧动画是更改每一帧中的舞台内容, 将其连续排列在一起形成动画效果 它最适合于每一帧中的动画对象都在更改而不是仅仅简单地在舞台中移动的复杂动画 在 Flash 动画制作的过程中, 要创建逐帧动画, 需要将每个帧都定义为关键帧, 然后给每个帧创建不同的图像, 每个新关键帧最初包含的内容和它前面的关键帧是一样的, 因此可以递增修改动画中的帧 知识三相关的知识概念 1. 帧的概念与定义 与电影 电视一样, 计算机动画中连续画面的基本单位为单幅静态画面, 在图形学和动画中都称为一帧 (frame) 根据 1927 年制定的工业标准, 电影按每秒 24 帧的速度进行拍摄和播放 电视的播放速度与电影略有不同, 为每秒钟 25 帧 而在我们现在的 Flash 动画制作的过程中, 一般默认的动画播放速度是每秒 12 帧 ; 当然, 这个速度是可调的, 根据你的需要进行播放速度的提高或降低 2. 三种不同的帧 在逐帧动画中, 涉及到时间轴上三种不同用途的时间帧, 分别是关键帧 空白关键帧 普通帧, 根据动画设计的不同需要, 在不同的时间片上, 应用不同的帧, 如图 3.1 所示 图 3.1 三种不同的帧 (1) 关键帧如图 3.1 所示, 关键帧是 Flash 动画中最重要的帧, 尤其是在补间动画, 如形变动画 动作动画中, 关键帧决定了动画过程的开始和结束 看到关键帧, 就表示这个帧内有动画内容, 而且在动画过程中起着关键作用 插入方法 : 在时间轴上单击右键, 选择 插入关键帧 即可 (2) 空白关键帧首先它也是关键帧, 在动画过程中也起着关键作用, 但这个帧中没有动画内容, 俗称 空帧 一旦这个帧中放置了动画内容, 则空白关键自动转换为关键帧 ; 同理, 如果将一个关键帧内的动画内容全部删除, 则这个关键帧自动转换为空白关键帧 因此, 关键帧与空白关键帧的最大区别, 就在于帧内是否有动画内容 插入方法 : 在时间轴上单击右键, 选择 插入空白关键帧 即可 科学出版社职教技术出版中心

54 44 Flash 动画设计与实训 (3) 普通帧既然称为普通帧, 也就是说, 在动画过程中, 这个帧并不起关键作用, 只是用来继续显示左边离它最近的那个关键帧或空白关键帧的内容, 延续动画的播放时间 插入方法 : 在时间轴上单击右键, 选择 插入帧 即可 3. 三种帧之间的关系本动画共 20 帧, 其中, 第 1 帧是关键帧, 因为该帧有动画内容 ; 第 10 帧是空白关键帧, 因为该帧是空的, 没有动画内容 ; 剩下的 18 个帧, 都是普通帧, 而其中的第 2~9 帧, 用于显示第 1 关键帧的内容, 延长该关键帧的显示时间, 其中的第 11~20 帧, 因为第 10 空白关键帧的原因, 也都是空白显示 4. 不同帧之间的转换 图 3.2 三种帧之间的关系 (1) 关键帧与空白关键帧的转换 1) 删除关键帧的内容, 关键帧自动转换为空白关键帧 2) 给空白关键帧添加内容, 空白关键帧自动转换为关键帧 (2) 普通帧与关键帧 空白关键帧的转换根据左边最近的关键帧的性质, 只要在时间轴上单击右键, 选择对应的 转换为关键帧 或 转换为空白关键帧 即可 知识四逐帧动画中经常使用的工具 1) 橡皮擦 工具 : 直接擦除多余的内容 2) 选择 工具 : 选择部分对象, 一般为规则区域, 然后删除 3) 套索 工具 : 可以选择不规则的区域, 然后删除 任务二实例一 : 写字效果 现在我们就开始进行第一个 Flash 逐帧动画的制作, 通过亲自动手操作, 来体会上面说到的一些知识和技巧, 你准备好了吗?

55 项目三逐帧动画 45 知识一效果说明 中国人注重书法, 写字一向很讲究的, 而且认为练习书法能锻炼人的意志 培养人的品性 在这个例子里, 我们将按照写字的笔画顺序, 逐步写出一个最简单而又意义深远的中文字 人 字, 不错吧! 知识二设计思路 知道 胸有成竹 什么意思吗? 我们制作动画, 也一定要事先有个大概的整体思路, 然后才能动手一步步地操作, 否则, 后果不堪设想啊 1) 利用 文本 工具输入文本 2) 利用 任意变形 工具调整文字大小 3) 利用菜单 修改 分离 (Ctrl+B) 操作将文字分离成矢量图形 4) 利用 橡皮擦 工具擦除不需要的笔画 知识三制作步骤 这可是我们第一个 Flash 动画作品哟, 如果你什么都不会, 或者到目前为止头脑还不算太清楚的话, 一定要严格按照下面的步骤操作哟 一旦你操作失误, 或者操作效果与给的例子不同, 一定要及时回到上一步骤 记得 Ctrl+Z 键这个操作吧, 它能让你及时还原, 不至于一错再错 操作步骤 1) 新建一个空白文档, 设置场景大小为 像素, 表示最后动画作品的界面为正方形, 边长为 250 个像素 至于别的设置, 就暂时不要修改了 2) 利用左边工具中的 文本 工具在 图层 1 的场景中输入文字 人, 如图 3.3 所示 3) 可以通过图 3.4 的属性栏修改字体 字号 颜色等基本信息 图 3.4 修改文字属性 图 3.3 输入文字 人 科学出版社职教技术出版中心 4) 利用工具中的 选择 工具选中刚才输入的文字, 然后利用工作中的 任意变形 工具, 通过 8 个控制点将刚才输入的文字放大到合适大小, 建议与场景的大小匹配, 如图 3.5 所示 5) 单击菜单 修改 分离 (Ctrl+B), 将文字分离成矢量图形 ( 表面出现很多小点 )

56 46 Flash 动画设计与实训 图 3.5 调整文字大小 图 3.6 分离文字 6) 按下键盘上的 F6 键, 软件自动在 图层 1 的时间轴上增加一个新的关键帧, 如图 3.7 所示 7) 利用左边工具中的 橡皮擦 工具, 将场景中的文字擦除一小部分, 如图 3.8 所示 图 3.7 增加关键帧 图 3.8 擦除部分文字 8) 重复以上的第 6 7 步, 依次擦除一小部分文字, 直到全部擦除 ( 本例共用 19 个关键帧 ) 图 3.9 时间轴最终图示 由于最后第 19 帧将文字全部擦除, 所以时间轴上该帧没有黑点, 也就是上面我们提到的 空白关键帧 9) 第 18 帧的内容如图 3.10 所示 10) 利用工具中的 选择 工具全部选中时间轴上的全部帧, 然后单击右键, 在弹出的菜单中选择 翻转帧, 如图 3.11 所示 图 3.10 第 18 帧的内容 图 3.11 翻转帧 操作

57 项目三逐帧动画 47 11) 软件自动将 19 个帧的顺序完全翻转, 如图 3.12 所示 图 3.12 翻转之后的时间轴图示 12) 单击菜单 控制 测试影片 (Ctrl+Enter), 测试影片 13) 确定无误后, 保存文件, 起名 写字效果, 产生 fla 的源文件, 如图 3.13 所示 14) 然后重新单击菜单 控制 测试影片 (Ctrl+Enter), 测试影片, 并自动产生 swf 文件, 如图 3.14 所示 图 3.13 源文件图 3.14 动画文件成功了吗? 看到你第一个 Flash 动画作品了吗? 如果你要把你的作品给别人欣赏, 你现在只要把那个.swf 文件复制给别人就可以了, 千万不要随便把你的动画源文件给别人, 现在可是维护知识产权的年代了 话说回来, 你对第一个 Flash 动画作品满意吗? 关键是, 你能举一反三, 利用这个原理, 制作别的内容的写字效果动画了吗? 1) 如果写一个更复杂的文字, 如 天, 该怎么做? 2) 如果要写一个词组, 如 天下无双, 又该如何实现? 知识一效果说明 任务三实例二 : 打字效果 写字是人做的事情, 打字才是计算机的特长 接下来, 我们这个例子将模拟显示器上显示键盘输入文字的效果 你准备好了吗? 知识二设计思路 科学出版社职教技术出版中心 同样道理, 制作之前, 还是先要在自己的脑海里进行一下整体设计, 而不是冲动地直接就动手做, 明白吗? 1) 利用 文本 工具输入英文文本 2) 利用 任意变形 工具调整文字大小 3) 利用菜单 修改 分离 (Ctrl+B) 操作将文字分离

58 48 Flash 动画设计与实训 4) 利用 选择 工具选择并删除不需要的字母 知识三制作步骤 操作步骤 1) 新建一个空白文档, 设置场景大小为 , 背景为黑色, 帧频为 10 帧 / 秒 ( 什么意思? 就是每秒钟播放 10 个时间帧片的内容, 这个速度比电影和电视慢, 但在计算机上还是能清楚显示的 ), 如图 3.15 所示 图 3.15 文档属性设置 2) 修改 图层 1 名称为 字母 ( 这样以后看的时候就很清楚, 尤其是图层多的时候, 能从名称中辨别这个图层中有哪些内容, 干什么用的 这可是个良好的习惯, 要好好培养 ) 3) 利用 文本 工具输入文字 Good Morning, 利用 任意变形 工具调整文字大小与场景大小相适应, 如图 3.16 所示 4) 单击菜单 修改 分离 (Ctrl+B), 将文字分离 ( 分离一次, 将英文单词分离成单独的字母 ; 分离两次, 将每个字母分离成矢量图形 ) 这里, 我们只要分离一次即可, 如图 3.17 所示 图 3.16 输入文字并调整大小与位置 图 3.17 分离成单独的字母 5) 按下键盘上的 F6 键, 软件自动在 字母 图层的 时间轴上增加一个新的关键帧 利用 选择 工具 选择 图 3.18 删除最后一个字母 最后一个字母, 然后删除, 如图 3.18 所示 6) 重复步骤 5, 每次删除最后的一个字母, 直到所有的字母都删除, 此时该帧为空白关键帧, 时间轴如图 3.19 所示 7) 利用工具中的 选择 工具 全部选中时间轴上的全部帧, 然后单击右键, 在 弹出的菜单中选择 翻转帧, 时间轴效果如图 3.20 所示 图 3.19 时间轴设置图 3.20 翻转后的时间轴设置 8) 增加一个图层, 修改名称为 指针

59 项目三逐帧动画 49 9) 利用 线条 工具在 指针 图层的第 1 帧, 绘制一条白色的短线, 如图 3.21 所示 10) 在 指针 图层连续按下 F6 键 2 次, 分别在该层的第 2 第 3 帧插入关键帧, 将第 2 个关键帧转换为空白关键帧, 如图 3.22 所示 11) 在 指针 图层第 4 帧插入关键帧, 根据下层字母的位置, 重新设置短线的显示位置, 如图 3.23 所示 12) 重复第 11 步操作, 在 指针 图层依次插入关键帧, 并根据下层字母的位置调整短线的显示位置, 直到所有字母都显示完全, 如图 3.24 所示 13) 最后的时间轴如图 3.25 所示 图 3.21 绘制短线图 3.22 转换为空白关键帧图 3.23 中间结果 图 3.24 调整输入指针的位置 图 3.25 时间轴的最终设置 14) 单击菜单 控制 测试影片 (Ctrl+Enter), 测试影片, 然后根据动画效果保 存文件 成功了吗? 动画效果看上去是不是有点黑客在 DOS 下操作的味道? 如果满意的话, 再思考一下下面的问题 1) 如果要实现一行文字的依次显示, 还能有别的方法吗? 2) 如果要产生从右往左的 删除 效果, 该怎么修改与实现? 知识一效果说明 任务四实例三 : 美丽图案 动画不是光用来模拟写字或打字的, 那多单调多没意思啊 这次, 我们将制作一个 多彩而有趣的动画, 就是一个由多个简单图形组合的图案逐步消失的动画 科学出版社职教技术出版中心

60 50 Flash 动画设计与实训 知识二设计思路 先想好, 整体设计思路是什么样的? 1) 利用 椭圆 工具绘制基本图案 2) 利用 颜料桶 工具配合 混色器面板 填充颜色, 如图 3.26 所示 3) 基本图案制作成功后, 建议用 Ctrl+G 键组合成一个对象 4) 利用 任意变形 工具改变对象的中心 5) 利用 Ctrl+T 键, 调出 变形面板, 进行重置操作, 形成规则图案, 如图 3.27 所示 图 3.26 混色器面板 图 3.27 变形面板 知识三制作步骤 操作步骤 1) 新建一个空白文档, 设置场景大小 , 修改背景颜色, 以及帧频为 10 帧 / 秒, 如图 3.28 所示 图 3.28 文档属性设置 2) 利用 椭圆 工具绘制一个椭圆, 如图 3.29 所示 3) 在 颜色 面板的 混色器 中, 调制出如图 3.30 所示的 放射状 渐变色 说到 混色器, 我还得说说 这是个很常用的面板, 根据不同的选项设置, 能调出不同效果的颜色, 正如 类型 中显示的一样, 有纯色 线性 放射状 位图四种, 你操作试试, 看看有什么不同, 然后我们简单说一下 纯色, 就是单一的颜色, 红 黄 蓝, 你选中什么颜色, 就用这种颜色填充 线性, 就是两种以上线性渐变的颜色填充, 如黑白渐变, 就是用从黑渐变到白色的颜色填充, 渐变的方向一般是从左往右渐变的 调制的时候, 一般分别选取好开始和结束的颜色, 中间的渐变色是由计算机自动计算出来的 例如, 填充圆柱的内壁时, 就用线性渐变的颜色, 更有光学效果

61 项目三逐帧动画 51 图 3.29 绘制椭圆 图 3.30 混色器面板设置 放射状, 就是从中间往外放射的效果颜色, 其原理与灯泡发光是一样的 调制的方法与线性渐变是类似的, 一般分别选取好中间和外围的颜色, 其两色中的过渡则是由计算机自动计算的 例如, 在填充灯光 星球时, 就用放射状的颜色, 更有真实感 位图, 则是用导入到文件中的图片或图像进行填充, 根据填充区域与图片的大小, 进行自动计算位图的个数 4) 利用 颜料桶 工具, 给刚才的椭圆填充调制好的放射状渐变色, 如图 3.31 所示 5) 选择刚才填充好的椭圆, 利用 任意变形 工具 修改对象的中心到椭圆的下方, 如图 3.32 所示 6) 利用 Ctrl+T 键, 调出 变形面板, 设置旋转角度为 30 度, 如图 3.33 所示 图 3.32 修改对象的中心位置 图 3.33 设置旋转的角度 7) 多次单击右下方的 重置 按钮, 进行重置操作, 直至最终形成规则图案, 如 图 3.34 所示 图 3.31 填充设置好的颜色 科学出版社职教技术出版中心 在进行 重置 操作前, 一定要注意, 不要对原始的对象进行缩放操作, 否则, 重置将按照缩放的尺寸进行等比例重制, 导致最后形成的图案成递增或递减的效果

62 52 Flash 动画设计与实训 建议按照原始大小进行重置, 完成后整体进行缩放操作 8) 按下键盘上的 F6 键, 在图层上插入关键帧 利用 选择 工具选择其中一个椭圆, 并删除, 如图 3.35 所示 图 3.34 利用 复制 后形成效果图 图 3.35 删除动画最后显示的一个图案 9) 重复以上步骤 8, 依次删除一个椭圆, 直到全部删除, 如图 3.36 图 3.37 所示 图 3.36 删除 2 个图案 图 3.37 只剩下最后一个图案 10) 将第 2 个关键帧开始的所有帧, 整体往后移动 4 帧的时间, 用来显示完整图案, 时间轴如图 3.38 所示 图 3.38 当前的时间轴设置 11) 单击菜单 控制 测试影片 (Ctrl+Enter), 测试影片, 然后根据动画效果保存文件 成功了吗? 这个操作是不是比上面两个例子操作复杂一些? 难度总是慢慢加大的, 游戏难度不也是这么设置的吗? 如果会做了, 那么思考一下下面的问题吧, 看你是不是真的会了 1) 用不规则的图案代替上面的规则图案, 效果会怎么样? 2) 如果希望出现 雷达扫描 一样的效果, 怎么实现?

63 项目三逐帧动画 53 任务五实例四 : 砖体字 知识一效果说明继续, 这个例子的难度将继续加大 这次, 我们要用长城的城砖, 逐渐垒起一个数字 0 或者字母 O 的图案, 而且是用新的技术和方法 你准备好了吗? 知识二设计思路 1) 利用 矩形 工具 颜料桶 工具 任意变形 工具, 共同绘制出砖头图案 2) 利用菜单 修改 排列 移到最底层 的功能, 形成立体数字的效果 知识三制作步骤 形 工具 操作步骤 1) 新建一个文件, 设置合适的背景色和场景的大小 2) 菜单 插入 新建元件, 制作一个 砖块 的图形元件 注意使用 任意变, 如图 3.39 图 3.40 所示 图 3.39 新建一个元件图 3.40 在元件中绘制一个 砖头 的图形 3) 返回场景,F11 打开图库, 从图库中将元件拖入场景的第一帧 然后利用 复制 粘贴 组合成一个 0 的图形, 如图 3.41 所示 图 3.41 排列成一个图案 科学出版社职教技术出版中心 为了突出立体效果, 部分砖块需要使用 修改 排列 移到 最底层 的功能

64 54 Flash 动画设计与实训 在这里, 我还要简单说一下 图库 的相关概念了 图库, 顾名思义, 就是存放 图 的 仓库 在 Flash 中, 图库, 就是用来存放 元件 的仓库 元件 的概念, 将在以后的章节详细介绍, 这里, 我们主要告诉大家图库的作用和使用方法 简单地说, 就是以 元件 的方式先制作一个原始的动画对象, 这个对象将自动存放在图库中 当需要使用的时候, 可以直接从图库中拖入到场景, 计算机自动产生一个该元件的对象实例, 而且, 这个对象实例可以自由添加, 需要多少就拖入多少 如果一定要分辨清楚, 还可以给每个对象实例添加名称 整个过程就如同父亲产生了很多多胞胎儿子一样, 虽然模样一样, 但名字是不同的 图库的好处是, 一旦你修改了图库中的元件对象的内容, 场景中所有的实例对象将自动更新, 不需要再为每个实例对象进行修改了 当然, 这个原理就是 面向对象 的设计原理, 到这里你明白了吗? 4) 在图层 1 的第 2 帧处, 按 F6 键, 插入关键帧, 然后删除某个部分的一个砖块, 如图 3.42 所示 5) 在图层 1 的第 3 帧处,F6, 插入关键帧, 删除连续的一个砖块, 如图 3.43 所示 图 3.42 删除一块砖 图 3.43 继续删除一块砖 6) 重复以上步骤多次, 直到最后只剩下一个砖块, 如图 3.44 所示 7) 选中该层的所有帧, 然后单击菜单 修改 时间轴 翻转帧, 如图 3.45 所示 8) 在该层末尾的适当位置, 按 F5 键, 插入普通帧, 让动画有个停留的时间 图 3.44 剩下最后一块砖 图 3.45 当前的时间轴设置 9) 测试动画, 然后保存文件 这个效果的动画制作成功了吗? 为了检查你是否掌握了本例子中提到的 图库 的 概念, 你思考一下以下几个问题吧 1) 如果对象不是 砖头, 换成 奶酪 奶瓶, 会有什么不同的效果?

65 项目三逐帧动画 55 2) 如果原始的对象 砖头 是动态的, 整个动画效果又会怎么样哪? 任务六实例五 : 倒计时扫描 知识一效果说明最后, 我们制作一个复杂的例子, 模仿雷达扫描的效果, 进行倒计时 知识二设计思路 1) 应用 遮罩效果, 实现雷达扫描的效果 2) 扫描的区域必须完全相同, 相互之间没有缝隙 知识三准备要求 1) 对 Flash 软件界面非常熟悉, 并且操作很熟练 2) 已经掌握了 遮罩效果 的动画原理 制作方法和技巧 3) 如果不具备以上条件, 请先参看后文的相关基本信息 知识四制作步骤 所示 所示 操作步骤 1) 新建一个文件, 设置合适的背景色和场景的大小 2) 在 图层 1 中绘制如图所示的图形, 注意与舞台中心重合 (Ctrl+K), 如图 3.46 图 3.46 同心圆绘制 科学出版社职教技术出版中心 图 3.47 复制对象, 并粘贴, 修改填充颜色 3) 增加一个 图层 2, 将 图层 1 的第 1 帧复制到该层的第 1 帧, 如图 3.47 所示 4) 增加一个 图层 3, 绘制一个三角形, 按 Ctrl+G 键组合成一个图形, 如图 3.48

66 56 Flash 动画设计与实训 图 3.48 绘制扫描形状图 3.49 中心位置调整 5) 利用 任意形变 工具将三角形的中心移动到与圆形重合, 如图 3.49 所示 6) 按 Ctrl+T 键, 旋转 30, 复制并应用, 直到形成一个圆, 如图 3.50 图 3.51 所示 7) 按下 F6 键, 然后删除一个三角形, 如图 3.52 所示 图 3.50 对象重制图 3.51 重制结果图 3.52 删除最后一个对象 8) 重复以上步骤, 直到只剩下一个三角形, 如图 3.53 所示 9) 选中该层的所有帧, 然后单击菜单 修改 时间轴 翻转帧 10) 在图层 2 图层 1 的相应最后位置, 插入普通帧 11) 选中 图层 3, 单击右键, 对 图层 2 形成遮罩 图 3.53 显示的第一个对象 图 3.54 时间轴设置 12) 单击菜单 插入 场景, 新增一个 场景 2, 然后把 场景 1 中的所有帧复制到 场景 2 中 13) 修改 场景 2 中的数字为 5 14) 单击菜单 插入 场景, 新增一个 场景 3, 然后把 场景 1 中的所有帧复制到 场景 3 中 15) 修改 场景 3 中的数字为 4

67 项目三逐帧动画 57 16) 重复以上操作, 直到修改 场景 6 中的数字为 1 17) 测试动画, 并保存文件 1) 其实, 这个动画效果其实是两个动画效果的组合 : 遮罩效果 动画和普通的 数字倒计时 动画 2) 只要你会做基本的动画效果, 然后加上不同的动画效果, 就能产生不同的整体效果 小 结 逐帧动画的制作原理和步骤, 其实就是传统卡通动画的制作原理和步骤, 主要侧重于每一个关键帧的内容设计 为了提高逐帧动画的流畅性, 增加动画对象的细腻感, 一般都要求逐帧动画的相邻关键帧之间差别较小, 只进行局部变化 逐帧动画, 最忌讳的就是关键帧之间跨度太大, 虽然节省了时间和精力, 但会严重影响动画的质量, 因此, 制作逐帧动画, 一定要投入较多的时间和精力, 进行细节上的考虑, 认真细心才能做出效果上佳的作品 一 填空题 习 1.Flash 动画大体分为两种主要形式, 动画和 动画, 其中, 模拟手写过程的写字效果动画属于 动画, 探照灯效果的动画属于 动画 2. 调整动画对象出现的先后, 是通过调整 实现的 ; 调整对象的前 后关系是通过调整 实现的 3. 插入一个关键帧的快捷键是, 将一个对象转换成元件的快捷键 是, 打开图库的快捷键是, 排列对齐的快捷键 是 二 上机操作题 1. 根据自己的喜好与想象力, 制作一个猪八戒逐渐显示的动画 2. 根据自己的能力, 设计一个火箭倒计时并发射的效果动画 题 科学出版社职教技术出版中心