第3章Flash CS3动画基础

第3章FlashCS3动画基础 Flash作为二维电脑动画制作软件 具有初学者易于掌握 而且制作动画成本较低的特点 目前Flash动画在诸多领域得到了广泛应用 不仅可以制作Flash站点 Flash广告 手机Flash Flash游戏 而且可以制作Flash动画片 本章将具体讲解FlashCS3软件的基本使用方法 应掌握以下内容 本章重点 FlashCS3的界面构成利用Flash绘制图形元件的创建与编辑时间轴 帧和图层的应用图像 视频 声音的应用创建动画的方法文本的应用Flash动画发布方法 3 1FlashCS3的界面构成 启动FlashCS3 首先显示出图3 1所示的启动界面 图3 1FlashCS3启动界面 启动界面中部的主体部分列出了一些常用的任务 其中左边栏是打开最近用过的项目 中间栏是创建各种类型的新项目 右边栏是从模板创建各种动画文件 下面单击左边栏下方的按钮 打开一个已有文件 即可进入该文件的工作界面 如图3 2所示 图3 2FlashCS3工作界面 动画文件选项卡 菜单栏 主工具栏 时间轴 工具箱 舞台 面板组 1 动画文件选项卡 在这里显示了当前打开的文件名称 如果此时打开了多个文件 可以通过单击相应的文件名称 来实现文件之间的切换 2 菜单栏 菜单栏位于标题栏的下方 它包括 文件 编辑 视图 插入 修改 文本 命令 控制 调试 窗口 和 帮助 11个菜单 单击每个菜单会弹出相应的子菜单 3 主工具栏 新建 用于创建一个新的Flash文件 打开 打开一个已经存在的Flash文件 转到Bridge 单击该按钮将跳转到Bridge 保存 保存当前编辑的Flash文件 打印 将当前编辑的Flash文件输出到打印设备进行打印 剪切 剪切当前选定的对象到剪贴板中 复制 复制选定的对象到剪贴板中 原对象保持不变 粘贴 将剪贴板中的对象粘贴到工作区 撤销 撤消以前对象的操作 重做 重复最近一次撤消操作 贴紧至对象 可以在拖放操作时进行辅助精确定位 平滑 对选定的对象进行平滑处理 图3 3为平滑处理前后的效果对比 主工具栏默认位于菜单栏下方 它包括16个常用按钮 这些按钮与文件 编辑 修改等菜单的命令逐一对应 利用他们可以快速完成相关操作 这些按钮的具体作用如下 伸直 对选定的对象进行平滑处理 图3 4为伸直处理前后的效果对比 图3 3平滑处理前后的效果对比 平滑前 平滑后 旋转与倾斜 调节选定对象的角度 缩放 调节选定对象的尺寸 对齐 调节选定的对象间的布局 图3 4伸直处理前后的效果对比 4 时间轴 时间轴用于组织和控制影片内容在一定时间内播放的层数和帧数 如图3 5所示 具体请参见 3 4时间轴 帧和图层的应用 图3 5时间轴 图层 帧 5 工具箱 工具箱中包含了多种常用的绘制图形工具和辅助工具 它们的具体使用方法请参见 3 2利用Flash绘制图形 这里需要说明的是单击工具箱最顶端的小图标 可将工具箱变成长单条和短双条结构 此时小图标会变为形状 如图3 6所示 图3 6工具箱 6 舞台 舞台又叫工作区域 是Flash工作界面上最广阔的区域 在这里可以摆放一些图片 文字 按钮 动画等 7 面板组 面板组位于工作界面右侧 利用它们 可以为动画添加非常丰富的特殊效果 FlashCS3中的面板现在以方便的 自动调节的停靠方式进行排列 点击顶端的小图标 可以将面板缩小为图标 如图3 7所示 在这种情况下 单击相应的图标 会显示出相关的面板 如图3 8所示 这样可以使软件界面极大简化 同时保持必备工具可以访问 图3 7面板图标图3 8显示相关面板 工具箱和各种面板位置调整到位之后 可以把这个调整后的工作区布局进行保存 方法 执行菜单中的 窗口 工作区 保存当前 命令 在弹出的图3 9所示的对话框中输入名称 单击 确定 按钮 即可将现在的工作界面保存起来 图3 9 保存工作区布局 对话框 3 2利用Flash绘制图形 Flash之所以能够大放异彩 很大程度是因为使用其制作出来的文件非常小 适于在受到带宽限制的互联网中播放 而Flash制作出的文件之所以能够比其他多媒体软件制作出来的文件小很多 是因为Flash中绘制的图形是以矢量图的形式出现 3 2 1位图和矢量图 矢量图和位图是计算机中最重要的两种图像格式 简单来讲 两者的区别在于矢量图可以被无限放大 而不会出现模糊和锯齿的现象 如图3 10所示 而位图在被放大后 则会出现模糊和锯齿 如果再进一步放大 则会显示出一个个的小方块 这些小方块即是组成位图图像的像素 如图3 11所示 矢量图中的信息是由数字函数来记录 而位图图像则是由像素点组合 在Flash绘制的图形为矢量图 这种图像除去文件体积上的优势外 还有一个优点就是易于修改 图3 10位图放大前后比较 图3 11矢量图放大前后比较 3 2 2Flash图形的绘制 Flash中的图形的绘制大致可以分为两类 一类是绘制图形的工具 如线条工具 铅笔工具 钢笔工具 矩形工具和椭圆工具等 一类是对图形进行修改设置的工具 如用来更改图形形状的任意变形工具 选择工具 用来更改图形颜色的颜料桶工具 填充变形工具等 下面就来讲解一下这些工具的使用方法和技巧 为以后制作形形色色的动画打下基础 1 绘制图形的工具 线条是最简单的几何图形之一 利用Flash工具箱中的 线条工具 可以轻易绘制出直线 1 线条工具 2 铅笔工具 利用 铅笔工具 可以绘制出线条和几何图形的轮廓 就像用真的铅笔绘制图形一样 运用自如 铅笔 的颜色 粗细 样式定义和 线条工具 一样 这里不再具体讲解 利用 铅笔工具 绘制出的线条平滑程度取决于所选择的绘图模式 选择工具箱中的 铅笔工具 然后在工具箱下方单击 选项 栏中的按钮 在弹出菜单中有 直线化 平滑 和 墨水 3种模式可供选择 如图3 16所示 图3 16铅笔工具的模式 3 刷子工具 利用 刷子工具 可以随意的画出刷子般的笔触 各种色块 就好像在涂色一样 利用它可以模拟出书法效果 选择工具箱中的 刷子工具 工具箱下方会显示出它的 选项 栏 如图3 17所示 然后单击 选项 栏中的按钮 在弹出菜单中有 标准绘画 颜料填充 后面绘画 颜料选择 和 内部绘画 5种模式可供选择 如图3 18所示 图3 17刷子工具选项栏 图3 18刷子工具的模式 4 钢笔工具 利用 钢笔工具 可以绘制出直线和平滑流畅的曲线 5 矩形工具 选择工具箱中的 矩形工具 然后将鼠标拖动到场景中 拖动鼠标即可绘制出一个矩形 如果在拖动鼠标的同时按下键盘上的 Shift 键可绘制正方形 如果在拖动鼠标的同时按下键盘上的 Shift Alt 键可绘制以点击点为中心的正方形 如图3 25所示 图3 25绘制正方形 6 椭圆工具 按住工具箱中的 矩形工具 右下角有一个小三角不放 从弹出的下拉菜单中 椭圆工具 然后将鼠标拖动到场景中 拖动鼠标即可绘制出一个椭圆形 如果在拖动鼠标的同时按下键盘上的 Shift 键可绘制正圆形 如果在拖动鼠标的同时按下键盘上的 Shift Alt 键可绘制以点击点为中心的正圆形 如图3 26所示 图3 26绘制正圆形 7 多角星形工具 按住工具箱中的 矩形工具 右下角有一个小三角不放 从弹出的下拉菜单中 多角星形工具 如图3 27所示 然后选择 多角星形工具 单击 属性 面板中的 选项 按钮 如图3 28所示 接着在弹出的对话框中设置如图3 29所示 单击 确定 按钮后即可在舞台中绘制出五边形 如图3 30所示 如果要创建星形 可以单击 属性 面板中的 选项 按钮 在弹出的对话框中设置如图3 31所示 单击 确定 按钮后即可在舞台中绘制出五角星 如图3 32所示 图3 27选择 多角星形工具 图3 28单击 选项 按钮 图3 29选择 多边形 图3 30绘制多边形 图3 31选择 星形 图3 32绘制星形 8 基本矩形工具和基本椭圆工具 基本矩形工具 和 基本椭圆工具 是FlashCS3新增的两个工具 使用 基本椭圆工具 或 基本矩形工具 可以直接创建出矩形和椭圆图元 如图3 33所示 它不同于使用对象绘制模式创建的形状 前者在绘制完毕后 还随时可以在属性面板中对矩形的角半径以及椭圆的开始角度 结束角度和内径进行再次设置 如图3 34所示 而无需再次绘制 后者只是将形状绘制为独立的对象 绘制完毕后只能在属性面板中对填充 笔触高度 端点和接合参数进行调整 如图3 35所示 而不能对矩形的角半径以及椭圆的开始角度 结束角度和内径进行再次设置 图3 33创建基本矩形和基本椭圆图元 图3 34基本椭圆工具的属性面板 图3 35椭圆工具的属性面板 2 对图形进行修改设置的工具 利用 选择工具 可以选择对象 移动对象 改变线段或对象轮廓的形状 1 选择工具 2 部分选取工具 利用 部分选取工具 可以调整直线或曲线的长度和曲线的曲率 3 套索工具 使用 套索工具 可以创建不规则选区 通过激活或关闭 多边形模式 按钮 可以在不规则和直边选择模式之间切换 4 任意变形工具 利用 任意变形工具 可以旋转 缩放图形对象 也可以进行扭曲 封套变形 将图形改变成任意形状 利用 墨水瓶工具 可以设置线条的颜色 线型和宽度等属性 如果场景中已有线条和填充了色块的图形 那么选取 墨水瓶工具 然后在 属性 面板中修改参数后再单击已有的图形 可以改变线条和图形的属性 5 墨水瓶工具 6 滴管工具 利用 滴管工具 可以快速的将一条线条的样式套用到其他线条上 7 颜料桶工具 利用 颜料桶工具 可以给图形中的封闭区域填充颜色 也就是可以对某一区域进行单色 渐变色或位图填充 它的形状与 墨水瓶工具 非常相似 但 墨水瓶工具 是针对对线条上色 而 颜料桶工具 是针对对封闭区域填充 8 填充变形工具 利用 填充变形工具 可以调整填充的色彩变化 9 橡皮擦工具的使用 利用 橡皮擦工具 可以像橡皮一样擦除舞台上不需要的地方 3 3元件的创建与编辑 Flash除去图形的绘制外 还有一个非常重要的概念就是元件 绝大多数Flash就是通过对各种元件的操作 如元件位置的移动 旋转以及透明度变化等来实现动画效果的 此外通过反复使用元件还可大大减少文件大小 下面就来具体讲解元件的创建和编辑 3 3 1元件的类型 Flash中的元件可分为图形 按钮和影片剪辑元件3类 1 影片剪辑影片剪辑是一个独立的 万能演员 是一个自成一格的可以包含动画 互动控制 音效的一个小动画 利用它可以创造出各种动画效果 2 按钮按钮是好比是 特别演员 利用它可以对鼠标事件作出反应 从而控制影片 3 图形图形好比是 群众演员 利用它可以存放静态的图像 也可以用来创建动画 在动画中也可包含其他的元件 但不能添加交互控制和声音效果 3 3 2创建元件 创建元件的方法有两种 一是直接创建元件 二是将对象转换为元件 3 3 3编辑元件的不同界面 在Flash中 编辑元件有两种界面 一种是标准编辑界面 一种是主场景上的编辑界面 3 3 4利用库来管理元件 在制作动画的过程中 库 是使用次数最多的面板之一 Flash创建好的元件被存放在 库 面板中 默认情况下 库 面板位于舞台右侧 如图3 78所示 按键盘上的 Ctrl L 键 可以在 库 面板的 打开 和 关闭 状态中切换 图3 78 库 面板 3 4时间轴 帧和图层的使用 3 4 1 时间轴 面板 在Flash中时间轴位于舞台的正上方 如图3 82所示 它是进行Flash作品创作的核心部分 主要用于组织动画各帧中的内容 并可以控制动画在某一段时间内显示的内容 时间轴从形式上看分为两部分 左侧的图层控制区和右侧的帧控制区 图层控制区播放头帧控制区时间标尺帧视图按钮 3 4 2使用图层 时间轴中的 图层控制区 是对图层进行各种操作的区域 在该区域中可以创建和编辑各种类型的图层 3 4 3使用帧 帧是形成动画最基本的时间单位 不同的帧对应着不同的时刻 在逐帧动画中 需要在每一个帧上创建一个画面 画面随着时间的推移而连续出现 形成动画 补间动画只需确定动画起点帧和终点帧的画面 而中间部分的画面由Flash根据两帧的内容自动生成 3 5场景的使用 在制作比较复杂的动画时 可以将动画分为若干个场景 然后再进行组合 Flash会根据场景的先后顺序进行播放 此外 我们还可以利用动作脚本实现不同场景间的跳转 执行菜单中的 窗口 其它面板 场景 命令 可以调出 场景 面板 如图3 96所示 图3 96 场景 面板 3 6图像 视频和声音的使用 本节将具体讲解在Flash中导入图像 视频和声音的方法 3 6 1导入图像 在FlashCS3中可以很方便的导入其它程序制作的位图图像和矢量图形文件 1 导入位图图像 在Flash中导入位图图像会增加Flash文件的大小 但在图像属性对话框中可以对图像进行压缩处理 2 导入矢量图形 FlashCS3还可导入其它软件中创建的矢量图形 并可对其进行编辑使之成为生成动画的元素 3 6 2导入视频 在Flash中可以导入QuickTime或Windows播放器支持的媒体文件 同时FlashCS3中加入的SorensonSpark解码器还可以直接支持视频文件的播放 另外在Flash中还可以对导入的对象进行缩放 旋转 扭曲等处理 也可以通过编写脚本来创建视频对象的动画 在FlashCS3中可以导入以下扩展名的视频格式 avi dv mpg mpeg mov wmv asf 3 6 4压缩声音 Flash动画在网络上流行的一个重要原因是因为它的文件相对比较小 这是只是因为Flash在输出时会对文件进行压缩 包括对文件中的声音压缩 3 7创建动画 在FlashCS3的动画分为逐帧动画 动作补间动画 形状补间动画 引导层动画 遮罩动画 时间轴特效动画6种类型 下面就来进行具体讲解 3 7 1创建逐帧动画 逐帧动画是指在时间轴中逐帧放置不同的内容 使其连续播放而形成的动画 这和早期的传统动画制作方法相同 这种动画的文件尺寸较大 但它具有非常大的灵活性 几乎可以表现任何想表现的内容 很适合于表演细腻的动画 本书 第7章 城市 夜晚 奇遇 动作动画完全解析 中就大量使用了逐帧动画的方式 在Flash中创建逐帧动画由两种方法 一是在Flash中逐帧制作内容 二是导入图片组来自动产生逐帧动画 3 7 2创建动作补间动画 动作补间动画是指先在起始帧定义元件的属性 如位置 大小 颜色 透明度 旋转等 然后在结束帧改变这些属性 接着通过Flash进行计算 补足这两帧之间的区间位置 这两帧就好比是传统动画中的原画 而中间画是通过程序自动生成的 这种动画文件尺寸与逐帧动画相比很小 3 7 3创建动作补间动画 形状补间动画是指两个关键帧之间制作出变形的效果 即让一种形状随时间变化成另一种形状 还可以对性状的位置 大小和颜色进行渐变 与动作补间动画一样 制作者只要定义起始和结束两个关键帧即可 中间画是通过程序自动生成的 这种动画文件尺寸与逐帧动画相比很小 在二维传统动画中 如果要让一个对象沿曲线运动 必须逐帧绘制来实现 而在Flash中 可以利用运动引导层轻松的制作出一个对象沿一条曲线进行运动变化的动画 从而大大提高工作效率 3 7 4创建引导层动画 遮罩动画时通过遮罩层来完成的 可以在遮罩层中创建一个任意形状的图形或文字 遮罩层下方的图像可以通过这个图形或文字显示出来 而图形或文字之外的图像将不会显示 3 7 5创建遮罩动画 FlashCS3时间轴特效将Flash动画中一些经常用到的效果制作成简单的命令 使人们只要选中动画的对象再执行相关命令即可 从而省去了大量重复 机械的操作 提高了动画开发的效率 使用Flash内建的时间轴特效 可以快速创建复杂的动画 时间轴特效可以应用于文本 图形 包括矢量图 组合对象和元件 位图 按钮元件 3 7 6创建时间轴特效动画 文本在Flash动画片中使用的频率很多 本节我们将具体讲解一下文本在Flash中的应用 3 8使用文本 在输入文本时 文本框有两种状态 无宽度限制和有宽度限制 创建这两种文本的具体操作步骤如下 1 创建无宽度限制的文本 方法 选择工具箱中的 文本工具 在舞台中单击鼠标 此时文本框的右上角有一个小圆圈 然后输入文本 这时文本框会随着文字的增加而加长 如图3 203所示 2 创建有宽度限制的文本 方法 选择工具箱中的 文本工具 在舞台中拖动鼠标 此时工作区会出现一个文本框 右上角有一个方形 在该文本框中输入的文字会根据文本框的宽度自动换行 如图3 204所示 使用鼠标拖动方形还可以调整文本框的宽度 3 8 1输入文本 图3 203创建无宽度限制的文本图3 204创建有宽度限制的文本 在输入文本之后 我们还可以在属性面板中对其进行编辑 文本的属性面板 如图3 205所示 3 8 2编辑文本 在FlashCS3中使用的字体可以分为嵌入字体和设备字体两种 3 8 3嵌入字体和设备字体 在Flash中如果使用的是系统已经安装的字体 Flash将在SWF文件中嵌入字体信息 从而保证动画播放时字体能够正常显示 但不是所有在Flash中显示的字体都可以被导入到SWF中 比如文字有锯齿 Flash就不能识别字体轮廓 从而无法正确导出文字 1 嵌入字体 利用Flash制作动画时 为了产生一些特殊文字效果经常会使用一些特殊字体 即设备字体 设备字体不会嵌入到字体SWF文件中 因此使用设备字体发布的影片会很小 但是由于设备字体没有嵌入到影片中 如果浏览者的系统上没有安装相应的字体 在浏览时观赏到的字体会与预期的效果有区别 Flash中包括3种设备字体 分别是 sans serif和typewriter 如果用户打开计算机中不存在相关字体的Flash文件时 Flash会打开一个警告框 单击 选择替换字体 按钮 在打开的对话框中会显示出本地计算机中不存在的字体 并允许为这些字体选择替换字体 2 设备字体 滤镜是可以应用到对象的特殊效果 在FlashCS3中对文字可以应用的滤镜有 投影 模糊 发光 斜角 渐变发光 渐变斜角 和 调整颜色 7种 下面就来具体讲解一下 3 8 4对文本使用滤镜 在Flash动画制作完成后 可以根据播放环境的需要将其输出为多种格式 比如可以输出为适合于网络播放的 swf和 html格式 也可以输出为非网络播放的 avi和 mov格式 还可以输出为 exe的windows放映格式 3 9Flash动画发布方法 Flash主要用于网络动画 因此默认发布为 swf和 html格式的动画文件 3 9 1发布为网络上播放的动画 由于全球的用户使用的网络传输速度不同 可能一些用户使用的是宽带 而一些用户却还在使用拨号上网 在这种情况下 如果制作的动画文件较大 常常会让那些网速不是很快的用户失去耐心 因此在不影响动画播放质量的前提下尽可能的优化动画文件是十分必要的 优化Flash动画文件可以分为在制作静态元素时进行优化 在制作动画时进行优化 在导入音乐时进行优化和在发布动画时进行优化4个方面 1 在制作静态元素时进行优化多使用元件 重复使用