第一节FLASH简介.doc

7 2 认识 FLASH Flash 是美国的 MACROMEDIA 公司于 1999 年 6 月推出的优秀网页动画设计软件 它是一种交互式动 画设计工具 用它可以将音乐 声效 动画以及富有新意的界面融合在一起 以制作出高品质的网页动态 效果 FLASH 的特点 1 使用矢量图形和流式播放技术 与位图图形不同的是 矢量图形可以任意缩放尺寸而不影响图形 的质量 流式播放技术使得动画可以边播放边下载 从而缓解了网页浏览者焦急等待的情绪 2 通过使用关键帧和图符使得所生成的动画 swf 文件非常小 几 K 字节的动画文件已经可以实现许 多令人心动的动画效果 用在网页设计上不仅可以使网页更加生动 而且小巧玲珑下载迅速 使 得动画可以在打开网页很短的时间里就得以播放 3 把音乐 动画 声效 交互方式融合在一起 越来越多的人已经把 Flash 作为网页动画设计的首选 工具 并且创作出了许多令人叹为观止的动画 电影 效果 而且在 Flash4 0 的版本中已经可以支持 MP3 的音乐格式 这使得加入音乐的动画文件也能保持小巧的 身材 4 强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画 通过 ACTION 和 FS COMM AND 可以实现交互性 使 Flash 具有更大的设计自由度 另外 它与当今最流行的网页设计工具 Drea mweaver 配合默契 可以直接嵌入网页的任一位置 非常方便 7 2 1 Flash 的工作环境 1 flash 的工作界面 Flash 的工作界面由几个主要部分组成 最上方的是 主菜单栏 执行 窗 口 工具栏 主工具栏 命令 可在 主菜单栏 下方打开 主工具栏 主工具栏 的下方是 文档选项卡 用于切换打开的当前文档 时 间轴 和 舞台 位于工作界面的中心位置 左边是功能强大的 工具箱 用于创建和修改矢量图形内容 多个 面板 围绕在 舞台 的下面和右面 包括常用的 属性 和 帮助 面板 还有 设计面板 和 开发面板 如 图 1 2 1 所示 2 文档选项卡文档选项卡 新建或打开一个文档时 在 时间轴 的上方会显示出 文档选项卡 如果打开或创建多个文档 文档名称 将按文档创建的先后顺序显示在 文 档选项卡 中 单击文件名称 可以在多个文档之间进行快速切换 用鼠标右键单击 文档选项卡 在弹出的菜单中可以快速实现 新建 打开 保存 等功能 如图所示 3 时间轴时间轴 时间轴 用于组织和控制文档内容在一定时间内播放的图层数和帧数 图层 就像堆叠在一起的多张幻灯胶片一样 每个层中都排放着自己的对象 提到动画 第一个会联想到的是小时候最喜欢看的卡通影片 这些卡通影 片 都是事先绘制好一帧一帧的连续动作的图片 然后让它们连续播放 利用 人的 视觉暂留 特性 在大脑中便形成了动画效果 Flash 动画的制作原理也一样 它是把绘制出来的对象放到一格格的帧中 然后再来播放 时间轴的一些功能介绍如图所示 4 工具箱工具箱 位于工作界面左边长条形状就是工具箱 工具箱是 Flash 最常用到的一个 面板 用鼠标单击的方式能选中其中的各种工具 如图所示 我们可以自定义工具箱中的工具编排 执行 编辑 自定义工具面板 命令 打开 自定义工具栏 对话框 可以根据需要和个人喜好重新安排和组 合工具的位置 如图 1 2 7 所示 在 可用工具 选项列表框中选择工具 单 击 增加 按钮就可以将你选择的工具添加到 当前选择 中 单击 恢复默 认值 按钮就可以恢复系统默认的工具设置 5 5 舞台舞台 舞台 位于工作界面的正中间部位 是放置动画内容的区域 这些内容 包括矢量插图 文本框 按钮 导入的位图图形或视频剪辑等 可以在 属性 面板中设置和改变 舞台 的大小 默认状态下 舞台 的宽为 550 像素 高为 400 像素 如图 1 2 8 所示 工作时根据需要可以改变 舞台 显示的比例大小 可以在 时间轴 右 上角的 显示比例 中设置显示比例 最小比例为 8 最大比例为 2000 在 下拉菜单中有三个选项 符合窗口大小 选项用来自动调节到最合适的舞台 比例大小 显示帧 选项可以显示当前帧的内容 全部显示 选项能显示 整个工作区中包括在 舞台 之外的元素 如图所示 选择工具箱中的 手形工具 在舞台上拖动鼠标可平移舞台 选择 缩放工具 在舞台上单击可放大或缩放舞台的显示 选择 缩放工具 后 在工具箱的 选项 下会显示出两个按钮 分别为 放大 和 缩小 分别单击它们可在 放大视图工具 与 缩小视图工具 之间切换 如图 1 2 10 所示 选择选择 缩放工具 后 按住键盘上的 Alt 键 单击舞台 可快 捷缩小视图 6 6 常用面板常用面板 Flash MX 2004 有很多面板 默认状态下 在 舞台 的正下方有三个比较 常用的浮动面板 分别是 帮助 面板 动作 面板和 属性 面板 单击 面板的 标题栏 可以依次展开它们 如下图所示 再次单击标题栏 可最 小化面板 展开面板后 单击面板右上角的按钮 在弹出的面板选项菜单中选择 关闭面板 命令 可将面板关闭 想再次打开面板时 可执行 窗口 菜单中 的相关命令即可 如果想回到默认时的面板布局状态 可执行 窗口 面板设置 默 认布局 命令 7 2 27 2 2 绘图基础绘图基础 1 基本绘图工具 在计算机绘图领域中 根据成图原理和绘制方法的不同 图像分为矢量图和位图两种 类型 矢量图形是由一个个单独的点构成的 每一个点都有其各自的属性 如位置 颜色 等 矢量图的清晰度与分辨率的大小无关 对矢量图进行缩放时 图形对象仍保持原有的 清晰度和光滑度 不会发生任何偏差 如图一所示是放大了 4 倍的矢量图效果 图一 矢量图放大到 4 倍时依然清晰 位图图像是由像素构成的 像素的多少将决定位图图像的显示质量和文件大小 位图 图像的分辨率越高 其显示越清晰 文件所占的空间也就越大 因此 位图图像的清晰度 与分辨率有关 对位图图像进行放大时 放大的只是像素点 位图图像的四周会出现锯齿 状 如图二所示是放大了 4 倍的位图效果 图二 位图放大 4 倍时模糊不清 在 Flash 动画制作过程中 会大量地运用到矢量图形 虽然有一些功能强大的矢量图 绘制软件 如 Corel 公司的 CorelDraw 软件 Macromedia 公司的 Freehand 软件和 Adobe 公司的 Illustrator 软件等 而运用 Flash 自身的矢量绘图功能将会更方便 更快捷 在这一 章里 我们将通过 Flash 基本绘图工具的学习 绘制出一些简单的矢量图 另外 Flash 也 具备一定的位图处理能力 虽然比不上专业的位图处理软件 但是对于制作动画过程中需 要对位图的一些简单处理 它还是能够胜任的 Flash 提供了各种工具 用来绘制自由形状或准确的线条 形状和路径 并可用来对 对象进行上色 下图所示是 Flash 的工具箱 绘图工具箱 下面我们分别来学习部分重要工具的使用方法 1 1 线条的绘制与处理 线条的绘制与处理 线条工具 是 Flash 中最简单的工具 现在我们就来画一条直线 用鼠标单击 线 条工具 移动鼠标到舞台上 按住鼠标并拖动 松开鼠标 一条直线就画好了 用 线条工具 能画出许多风格各异的线条来 打开 属性 面板 在其中 我们可 以定义直线的颜色 粗细和样式 如图 2 1 2 所示 图 2 1 2 直线 属性 面板 在如图 2 1 2 所示的 属性 面板中 单击其中的 笔触颜色 按钮 会弹出一个 调色板 此时鼠标变成滴管状 用滴管直接拾取颜色或者在文本框里直接输入颜色的 16 进 制数值 16 进制数值以 开头 如 99FF33 如图 2 1 3 所示 图 2 1 3 笔触调色板 现在来画出各种不同的直线 单击 属性 面板中的 自定义 按钮 会弹出一个 笔触样式 对话框 如图 2 1 4 所示 图 2 1 4 笔触样式 对话框 为了方便观察 我们把 粗细 设置为 3pts 在 类型 中选择不同的线型和颜色 设置完后单击 确定 来看看设置不同笔触样式后画出的线条 如图 2 1 5 所示 图 2 1 5 不同类型的线条 多试试改变线条的各项参数 会对绘图能力的提高有很大帮助 滴管工具 和 墨水瓶工具 可以很快地将一条直线的颜色样式套用到别的 线条上 用 滴管工具 单击上面的直线 看看 属性 面板 它显示的就是该直线 的属性 此时 所选工具自动变成了 墨水瓶工具 如图 2 1 6 所示 图 2 1 6 使用 滴管工具 获取线条属性 使用 墨水瓶工具 单击其它样式的线条 可以看到 所单击线条的属性都变成 了当前在 属性 面板中所设置的属性了 如果你需要更改线条的方向和长短 可以用 选择工具 来实现 选择工具 的作用是选择对象 移动对象 改变线条或对象轮廓的形状 在工具箱 中选择 选择工具 然后移动鼠标指针到直线的端点处 指针右下角变成直角状 这时拖动鼠标可以改变线条的方向和长短 如图 2 1 7 所示 图 2 1 7 改变线条方向和长短的鼠标形状 将鼠标指针移动到线条上 指针右下角会变成弧线状 拖动鼠标 可以将直线变成曲 线 这是一个很有用处的功能 它可以帮助我们画出所需要的各种曲线形状 如图 2 1 8 所示 图 2 1 8 改变线条为弧线状的鼠标形状 2 实例演练 实例演练 绘制一片树叶绘制一片树叶 现在我们来实践一下 练习画一片树叶 执行 文件 新建 命令 弹出 新建文档 对话框 在 类型 中选 择 Flash 文档 单击 确定 建立一个新的 Flash 文档 在这里我们不 改变文档的属性 直接使用其默认值 1 新建图形元件 执行 插入 新建元件 命令 或者按快捷键 Ctrl F8 弹出 创建新 元件 对话框 在 名称 中输入元件名称为 树叶 如图 2 1 9 所示 选 择 行为 为 图形 单击 确定 按钮 图 2 1 9 创建图形元件 这时工作区变为 树叶 元件的编辑状态 如图 2 1 10 所示 图 2 1 10 树叶 图形元件编辑场景 说明 图形元件是 Flash 的基本元素 有关它的详细内容请参阅第四章的有关 内容 2 绘制树叶图形 在 树叶 图形元件编辑场景中 首先用 线条工具 画一条直线 设置 笔触颜色 为深绿色 如图 2 1 11 所示 图 2 1 11 画一条深绿色直线 用 选择工具 将它拉成曲线 如图 2 1 12 所示 图 2 1 12 拉成曲线 再用 线条工具 绘制一个直线 用这条直线连接曲线的两端点 如图 2 1 13 所示 图 2 1 13 连接两端 用 选择工具 将这条直线也拉成曲线 如图 2 1 14 所示 图 2 1 14 拉成曲线 一片树叶的基本形状已经绘制出来了 现在我们来绘制叶脉 先在两端点 间绘制直线 然后拉成曲线 如图 2 1 15 和图 2 1 16 所示 图 2 1 15 画叶脉线 图 2 1 16 直线变曲 再画旁边的细小叶脉 可以用直线 也可以将直线略弯曲 这样 一片简 单的树叶就画好了 如图 2 1 17 所示 图 2 1 17 简单的树叶效果 3 编辑和修改树叶 如果在画树叶的时候出现错误 比如说 画出的叶脉不是你所希望的样 子 你可以执行 编辑 撤销 命令 快捷键为 Ctrl Z 撤销前面一步 的操作 也可以选择下面更简单的方法 用 箭头工具 单击想要删除的直线 被单击后的直线呈现网点状 说明它已经处于被选择状态 此时 你将可以 对它进行各种修改了 如图 2 1 18 所示 图 2 1 18 被选中的线条 要移动选中的线条 就用鼠标拖动它 要删除它 就直接按键盘上的 Delet e 键 按住 Shift 键的同时连续单击线条 可以同时选取多个对象 也可以用 选择工具 框选对象 被框选起来的对象将都被选中 如果要选取全部的线 条 按键盘上的快捷键 Ctrl A 就可以将其全部选中了 如图 2 1 19 所示 图 2 1 19 框选对象 说明 在一条直线上双击 也可以将和这条直线相连并且颜色 粗细 样式相 同的整个线条范围全部选取 4 给树叶上色 接下来我们要给这片树叶填上颜色 在工具箱中看到这个 颜色 选项了 吗 如图 2 1 20 所示 图 2 1 20 颜色 选项 单击 填充色 按钮 弹出一个调色板 同时光标变成吸管状 如 图 2 1 21 所示 图 2 1 21 调色板 说明 除了可以选择调色板中的颜色外 还可以点选屏幕上任何地方 吸取你 所需要的颜色 如果你觉得调色板的颜色太少不够选 那么单击调色板右上角的 颜色选 择器 按钮 此时会弹出一个 颜色 对话框 其中有更多的颜色选项 在 这里 你能把选择的颜色添加到自定义颜色中 如图 2 1 22 所示 图 2 1 22 颜色 对话框 在 自定义颜色 选项下单击一个自定义色块 该色块会被虚线包围 在 颜色 对话框右边选择你喜欢的颜色 上下拖动右边颜色条上的箭头 拖动 鼠标到你需要的颜色上 单击 添加到自定义颜色 按钮 这种颜色就被你收 藏起来了 下一次要使用时 打开 颜色 对话框 在 自定义颜色 中可以 方便的选取你中意的颜色 好了 现在我们在调色板上选取绿色 单击工具箱中的 颜料桶工具 在画好的叶子上单击一下 效果如图 2 1 23 所示 图 2 1 23 填充颜色 颜料桶工具 能在一个封闭的区域中填色 按快捷键 Ctrl Z 取消 刚填充的颜色 现在我们用 橡皮擦工具 将线条擦出一个缺口 再填充右下 角的区域 效果如图 2 1 24 所示 图 2 1 24 擦出缺口后的填充效果 你看 残缺线条的两边都填上了颜色 现在 我们一块一块的填上颜色吧 但是在填充颜色前 你一定要将树叶 图形恢复到使用 橡皮擦工具 进行擦除操作前的状态 可以按两次 Ctrl Z 键 来实现 这时 你可能会想 如果我们刚才先填充颜色再画叶脉就省事多了 确实 是这样 随着不断地操作 绘图经验将越来越丰富 填充完的效果如图 2 1 25 所示 图 2 1 25 填充颜色后的效果 至此 树叶图形就绘制好了 执行 窗口 库 命令 打开 库 面板 你将发现 库 面板中出现一个名称为 树叶 的图形元件 如图 2 1 26 所 示 图 2 1 26 库 面板中的 树叶 图形元件 说明 库 面板是存储 Flash 元件的场所 我们所创建的元件对象以及从外 部导入的图像 声音等对象都保存在这里 这里的元件可以拖放到场景中重复 使用 有关 库 面板的详细内容请你参阅第四章的相关内容 5 颜料桶工具 选项 选择 颜料桶工具 后 在工具箱中 单击 选项 下的封闭小空隙按 钮 弹出一个菜单 其中有四个选项 可以根据自己的需要来确定 你可以自 己试一下 如图 2 1 27 所示 图 2 1 27 颜料桶工具选项 说明 颜料桶工具 是对某一区域进行单色 渐变色或位图填充的工具 它 不能作用于线条 选择 颜料桶工具 后 在工具箱下边的 选项 中单击 按钮 会弹出四个选项 如图 2 1 27 所示 其中 不封闭空隙 表示要填充 的区域必须在完全封闭的状态下才能进行填充 封闭小空隙 表示要填充的 区域在小缺口的状态下可以进行填充 封闭中等空隙 表示要填充的区域在 中等大小缺口状态下进行填充 封闭大空隙 表示要填充的区域在较大缺口 状态下也能填充 但在 Flash 中 即使中大缺口 值也是很小的 所在要对大 的不封闭区域填充颜色 一般用笔刷 3 刷子工具刷子工具 的用法的用法 使用 刷子工具 可以随意地画出各种色块 当单击工具箱中的 刷子 工具 后 工具箱下边就会显示出它的 选项 我们先看看它的 选项 如图 2 1 28 所示 图 2 1 28 刷子工具选项 在这里 我们可以选定画笔的大小和样式以及它的填色模式 你可以自己 选取不同的大小和样式练习练习 先找一找感觉 下面我们利用刚刚画成的树叶来详细讲解它的填色模式 在图 2 1 28 所示 的 选项 下单击按钮 则弹出填充模式下拉列表 如图 2 1 29 所示 图 2 1 29 刷子的填色模式 1 标准绘画 选择 刷子工具 并将 填充色 设置为黄色 当然也可以设置为其它 色 选择刷子的填色模式为 标准绘画 模式 移动笔刷到舞台的树叶图形上 在叶子上拖动鼠标 观察一下效果 如图 2 1 30 所示 图 2 1 30 标准绘画模式 你将发现 不管是线条还是填色范围 只要是画笔经过的地方 都变成了 画笔的颜色 2 颜料填充 选择 颜料填充 模式 它只影响了填色的内容 不会遮盖住线条 效果 如图 2 1 31 所示 图 2 1 31 颜料填充模式 3 后面绘画 选择 后面绘画 模式 无论你怎么画 它都在图像的后方 不会影响前 景图像 如图 2 1 32 所示 图 2 1 32 后面绘画模式 4 颜料选择 选择 颜料选择 模式 先用画笔抹几下 丝毫不起作用 这是因为我们 没有选择范围 用 选择工具 选中叶片的一块 再选择 刷子工具 进行绘 制 此时可看到选择区域被涂上所选的颜色 如图 2 1 33 所示 图 2 1 33 颜料选择模式 5 内部绘画 选择 内部绘画 模式 在绘画时 画笔的起点必须是在轮廓线以内 而 且画笔的范围也只作用在轮廓线以内 如图 2 1 34 所示 图 2 1 34 内部绘画模式 4 绘制树枝 绘制树枝 现在我们要把这孤零零的一片树叶组合成树枝 想一想 如果用多片这样一模一样的树叶组成树枝 是不是很难看呢 Fla sh 为我们提供了一个很好的工具 任意变形工具 利用 任意变形工 具 可以将前面绘制的树叶改变成需要的形状 任意变形工具 可以旋转缩放元件 也可以对图形对象进行扭曲 封套 变形 选中树叶 在工具箱中选择 任意变形工具 工具箱的下边会出现相 应的 选项 如图 2 1 35 所示 图 2 1 35 任意变形工具选项 说明 任意变形工具 的 选项 中共包括 5 个按钮 从上向下依次是 对齐对象 旋转与倾斜 缩放 扭曲 和 封套 当你选择了 任意变形工具 后 选项 中的按钮并不是马上都被激活 除了 对齐对象 按钮 其他按钮都是灰色显示 只有你在场景中选择了具 体的对象以后 其他 4 个按钮才变成可用状态 1 旋转树叶 选择 任意变形工具 后 单击舞台上的树叶 这时树叶被一个方框包围 着 中间有一个小圆圈 这是变形点 当我们进行缩放旋转时 以它为中心 如图 2 1 36 所示 图 2 1 36 变形点 变形点是可以移动的 将鼠标移近它 鼠标右下角会出现一个圆圈 按住 鼠标拖动 将它拖到叶柄处 便于树叶绕叶柄进行旋转 如图 2 1 37 和图 2 1 38 所示 图 2 1 37 选取变形点 图 2 1 38 拖动变形点到叶柄处 再将鼠标移动到方框的右上角 鼠标变成旋转圆弧状 表示这时就可以 进行旋转了 向下拖动鼠标 叶子绕变形点旋转 到合适位置时松开鼠标 效 果如图 2 1 39 所示 图 2 1 39 旋转后的树叶 2 复制树叶 用 选择工具 选中树叶图形 执行 编辑 复制 命令 再执行 编 辑 粘贴到中心位置 命令 这样就复制出了树叶图片 如图 2 1 40 所示 图 2 1 40 复制出的树叶图片 3 变形树叶 将粘贴好的树叶拖到旁边 再用 任意变形工具 进行旋转 使用 任意 变形工具 时 也可以像使用 选择工具 一样移动树叶的位置 拖动任一角上的缩放手柄 可以将对象放大或缩小 拖动中间的手柄 可 以在垂直和水平方向上放大缩小 甚至翻转对象 将树叶适当变形 如图 2 1 41 所示 图 2 1 41 缩放对象 说明 任意变形工具 的各项功能也可以执行 修改 变形 菜单中的命 令来实现 如图 2 1 42 所示 图 2 1 42 变形命令 4 创建 三片树叶 图形元件 再复制一片树叶 用 任意变形工具 将三片树叶调整成如图 2 1 43 所示 的形状和位置 在调整过程中 当调整效果不满意时 也许树叶已经不再处于被选中状态 有时要重新选取整片树叶很困难 我们可以多使用撤销命令 以恢复选取状 态 当然也可以先新建图层 然后把每片树叶存放到相应的图层中 这样能大 大方便树叶的选取 图层的知识我们将在后面介绍 图 2 1 43 树叶组合 如图 2 1 42 所示的三片树叶图形创建好以后 将它们全部选中 然后执行 修改 转换为元件 命令 快捷键为 F8 将它们转换为名字为 三片 树叶 的图形元件 把 树叶 元件场景中新增的两片树页删除 5 绘制树枝 以上的绘图操作都是在 树叶 编辑场景中完成的 现在返回到主场景 场景 1 在时间轴的右上角有一个 场景 1 按钮 如图 2 1 44 所示 单击它 这样就切换到了场景 1 图 2 1 44 切换到 场景 1 单击 刷子工具 选择一种填充色 在工具箱下边的 选项 中 选 择 刷子形状 为圆形 刷子大小 自定 单击按钮 选择 后面绘画 模式 移动鼠标到场景中 画出树枝形状 如图 2 1 45 所示 图 2 1 45 画出树枝 6 组合树叶和树枝 执行 窗口 库 命令 快捷键为 Ctrl L 打开 库 面板 你可以 看到 库 面板中有两个刚制作完图形元件 分别为 树叶 和 三片树叶 如图 2 1 46 所示 图 2 1 46 元件库 单击 树叶 图形元件 将其拖放到场景的树枝图形上 用 任意变形工 具 进行调整 元件 库 中的元件可以重复使用 只要改变它的大小和方向 就能制作出纷繁复杂的效果来 如图 2 1 47 所示 图 2 1 47 完成后的树枝效果 3 铅笔工具铅笔工具 的用法的用法 铅笔工具 的颜色 粗细 样式定义和 线条工具 一样 在它的附属选项里有三 种模式 如图 2 2 13 所示 图 2 2 13 铅笔工具选项 伸直模式 在伸直模式下画的线条 它把线条转成接近形状的直线 平滑模式 把线条转换成接近形状的平滑曲线 墨水模式 不加修饰 完全保持鼠标轨迹的形状 下面是三种模式所画的线条 如图 2 2 14 图 2 2 14 三种模式画的线条 铅笔工具 的使用很简单 大家自己随意练习 铅笔工具 虽有这三 种模式 但是要用它直接绘画 需要看你对鼠标的驯服度了 要是你的鼠标不 太听话 最好还是多使用 线条工具 和 钢笔工具 5 填充变形工具填充变形工具 的用法的用法 回头看看我们画的小房子 美中不足的是颜色比较呆板 在 Flash 中有没 有办法让色彩过渡柔和平滑呢 我们将通过另一个实例来学习 Flash 中调整色 彩变化的工具 填充变形工具 我们的实例是制作一个网页上经常可以 看到的按钮图形 晶莹剔透 先看看效果 如图 2 2 19 所示 图 2 2 19 按钮效果 跟着教材一步一步进行操作 你将很快能做出这个按钮来 选择 椭圆工具 设置 填充色 为无 按住 Shift 键 在舞台上绘制 出一个空心的正圆 执行 窗口 混色器 命令 打开 混色器 面板 在其中选择填充类 型为 放射状 在颜色条下 单击左端的色标 设置为浅紫色 D9C8FD 单击右端的色标 设置为深紫色 5407E4 如图 2 2 20 所示 图 2 2 20 填充色设置 选择 颜料桶工具 单击圆的中心略偏下的地方 将刚设置的渐变色 填充到圆中 成为按钮下方的高光色 在工具箱中选择 选择工具 单击圆的外边框 将其选中 按键盘上的 D elete 键 将它删除 现在的高光色太圆太大 我们使用 填充变形工具 对其进行调整 选择 填充变形工具 单击图形 会出现一个带有三个手柄的环形边框 圆环中心的小圆圈表示填充色的中心 拖动此中心点 可以改变渐变色的位 置 拖动方形的手柄可以改变填充渐变色的宽度 更改环形渐变的半径 拖动 下边的圆形手柄 可以旋转填充色的方向 如图 2 2 21 所示 图 2 2 21 填充变形手柄 我们这里先向圆心处拖拉中间的手柄 使中间高光色缩小一些 如图 2 2 2 2 所示 图 2 2 22 收缩填充色 再按住方形手柄向外拉 使高光色变得扁一点 如图 2 2 23 所示 图 2 2 23 拉长填充色 现在一个基本形状创建好了 注意以上操作都是在默认的 图层 1 上完成 的 下面我们要在一个新图层上创建另外的形状 说明 在绘制复杂图形时 往往需要使用多个图层 分别在独立的图层上创建 图形 然后再将它们叠放在一起 这样的好处是 图形互相各不影响 容易编 辑和调整 有关图层的详细内容请参阅第 3 章的有关内容 在 图层 1 下面单击 插入图层 按钮 如图 2 2 24 所示 这样就可以 插入一个新图层了 图 2 2 24 插入图层 为了使在新图层中的操作不影响下一图层 可将 图层 1 锁定 单击 图 层 1 中与上面锁状按钮所对应的小黑点 可以将本图层锁定 如图 2 2 25 所示 图 2 2 25 锁定图层 选择 图层 2 使用 椭圆工具 绘制出一个椭圆 并移动到如图 2 2 2 6 所示的位置 图 2 2 26 绘制出一个椭园 在 混色器 面板中选择 线性 渐变 设置左边色标为白色 右边色块 为深蓝色 为了更好地和第一层的颜色相融合 我们把右边色标的 Alpha 值 设为 0 如图 2 2 27 所示 图 2 2 27 填充色设置 为椭圆填充渐变色 删除椭圆的轮廓线 选择 填充变形工具 单击图形 拖动小圆圈 顺时针旋转手柄 90 度 可见在线性渐变上显示的与径向渐变圆环外框不同 线性渐变为两条平行 的直线 其中一条上有方形和圆形的手柄 方形手柄缩放渐变色 圆形手柄改 变渐变色方向 和径向渐变一样拖动中心点调节渐变色的中心位置 如图 2 2 28 所示 图 2 2 28 调节线性渐变色 用鼠标拖动中心点 向上略提一点 按住方形手柄向圆心处拖拉 使渐变 色缩小一些 我们的按钮就做好了 如图 2 2 29 所示 图 2 2 29 完成后的按钮 6 套索工具套索工具 套索工具 是一种选取工具 使用的时候不是很多 主要用在处理位图 时 选择 套索工具 后 会在 选项 中出现 魔术棒 魔术棒属性 和 多边形模式 如图 2 2 30 所示 图 2 2 30 套索工具选项 在场景中随意绘制一个图形 选择 套索工具 在 选项 里单击 多 边形模式 根据需要单击鼠标 当得到你需要的选择区域时 双击鼠标自 动封闭所选区域 如图 2 2 31 所示 图 2 2 31 多边形模式 魔术棒 用于对位图的处理 如果我们要选取位图中同一色彩 可以 先设置魔术棒属性 单击 魔术棒属性 按钮 弹出 魔术棒设置 对话 框 对于 阈值 输入一个介于 1 到 200 之间的值 用于定义所选区域内 相邻像素达到的颜色接近程度 数值越高 包含的颜色范围越广 如果输入 0 则只选择与所单击像素的颜色完全相同的像素 在 平滑 菜单中有四个选 项 用于定义所选区域边缘的平滑程度 如图 2 2 32 所示 图 2 2 32 魔术棒设置对话框 执行 文件 导入 导入到舞台 命令 在 Flash 中导入一幅位图 图像 保证图像处于选中状态 执行 修改 分离 命令 快捷键 Ctrl B 将位图分离 选择 魔术棒 单击需要选择的部分 如图 2 2 34 所示 图 2 2 34 选择图像背景 说明 利用上面叙述的方法可以将位图图像的背景去掉 具体方法是 将位图 图像打散 选择 魔术棒 设置魔术棒属性 选取位图背景 然后按下 Dele te 键将所选背景删除 7 7 橡皮擦工具橡皮擦工具 顾名思义 橡皮擦工具 就和橡皮一样 可以擦去你不需要的地方 双 击 橡皮擦工具 可以删除舞台上的所有内容 选择 橡皮擦工具 单击 按钮 在弹出的菜单中有几个选项 如图 2 2 35 所示 图 2 2 35 橡皮擦工具选项 标准擦除 擦除同一层上的笔触和填充 擦除填色 只擦除填充 不影响笔触 擦除线条 只擦除笔触 不影响填充 擦除所选填充 只擦除当前选定的填充 并不影响笔触 不管笔触是 否被选中 以这种模式使用 橡皮擦工具 之前 请选择要擦除的填 充 内部擦除 只擦除橡皮擦笔触开始处的填充 如果从空白点开始擦除 则不会擦除任何内容 以这种模式使用橡皮擦并不影响笔触 在 选项 下选择 水龙头 单击需要擦除的填充区域或笔触段 可 以快速将其擦除 如果你只擦除一部分笔触或填充区域 就需要通过拖动进行 擦除 7 37 3 动画基础动画基础 动画是一种动态生成一系列相关画面的处理方法 利用人眼视觉上的 残留 特性 依一定的速率播放静止的图形或图片就会产生运动的视觉效果 实验证明 如果动画或电 影的画面刷新率为每秒 24 帧左右 也即每秒放映 24 幅画面 则人眼看到的是连续的画面 效果 计算机动画原理与传统动画基本相同 只是在传统动画的基础上把计算机技术用于动 画的处理和应用 并可以达到传统动画所达不到的效果 由于采用数字处理方式 动画的 运动效果 画面色调 纹理 光影效果等可以不断改变 输出方式也多种多样 计算机动画的应用小到多媒体软件中某个组件 物体或字幕的运动 大到一段动画演 示 光盘出版物片头片尾的设计制作 甚至到电视片的片头片尾 电视广告 乃至计算机 动画片如 狮子王 等 在众多的动画软件中 Flash MX 2004 是基于矢量的具有交互性的图形编辑和二维动 画制作软件 它具有强大的动画制作功能和卓越的视听表现力 著名的微软 MSN 新闻站 就采用了大量的 Flash 动画 Flash 动画有如下明显的优势 基于矢量的图形系统 占用的存储空间只是位图的几千分之一 非常适合在网络上使用 可以无级放大 无论用户的浏览器使用多大的窗口 图像始终可以完全显示 并且不会 降低画面质量 有很多增强功能 比如 支持位图 支持声音 支持渐变色 Alpha 透明等 有了这些 功能 你就可以用它来建成一个生动活泼漂亮的 Flash 站点或产品广告宣传 提供 准 流 Stream 的形式 在观看一个大动画的时候 可以边下载边观看 哪怕 后面的内容还没有完全下载到硬盘 我们也可以开始欣赏动画 强大的交互性 可以通过编程来实现人机互动 界面明快简洁 容易上手 常见的 Flash 动画有以下几种用途 网站应用 在做网站首页时要求视觉效果强烈 具有震撼力 一般时间较短 几十秒左右 画面 变化迅速 声效多而短促 常配有企业的名称 标志 产品等图片或文字 用它做出来的 网页的导航条 漂亮多变 个性鲜明 也可以用来做成 gif 动画 用做网页的 Logo 或 Bann er 利用其良好的交互性 还可以做留言板 论坛 商务购物系统等等 广告制作 具有制作周期短 成本低 适用媒体广泛的特点 目前主要是在网络和电视上播放 随着能播放 Flash 手机的问世 Flash 在广告界中的应用将更加广泛 MV 动画 歌曲 动作 文字三者巧妙的配合到一起 就会演绎出一段动人心弦的故事 或调侃 出一段令人捧腹的小品 如雪村的 东北人都是活雷锋 多媒体课件 活泼有趣的情节 色彩丰富的画面 再加上声情并茂的讲解 能极大地引发孩子们的 学习兴趣 通过演示 一些很难搞懂的原理 实验变的形象 易于理解 此外还有游戏 贺卡 短片等多种用途 下面我们就来学习 Flash 动画是如何制作出来的 通过本章的学习 你将认识时间轴 面板 了解补间动画 形状动画 遮罩动画等的特点 通过我们在每节中提供的精彩实例 学会做一些简单的动画效果 将学过的知识融会贯通 进一步加深你的理解和记忆 1 1 动画的舞台结构及道具组合动画的舞台结构及道具组合 1 时间轴时间轴 一部 Flash 动画就像一部小电影 时间轴就是用来组织和控制影片内容在一定时间内 如何播放的地方 我们先来认识时间轴面板 如图 3 1 1 所示 图 3 1 1 时间轴面板 时间轴面板分成四个部分 顶区 图层区 时间帧区 状态区 下面分别叙述各区的 功能 1 顶区 由二行组成 如图 3 1 2 所示 图 3 1 2 时间轴顶区 第一行是切换行 只要单击相应的文件名就可以在几个 fla 或 swf 文件之间进行切换 第二行从左向右是当前场景的名称 编辑场景和编辑元件间的切换 场景显示比例 2 图层区 每个图层都包含一些舞台中的动画元素 包括声音或 action 指令语句 上面图层中的 元素遮盖下面图层中的元素 图层区的最上面有三个图标 用来控制图层中的元件是否可视 像一把小锁 单击后该图层被锁定 图层的所有的元件不能被编辑 是轮廓线 单击后图层中的元件 只显示轮廓线 填充将被隐藏 这样能方便编辑图层中的元件 图层有以下几种 层文件夹 图标是 组织动画序列的组件和分离动画对象 有二种状态 是打开时的状态 是关闭时的状态 引导层 图标是 使 被引导层 中的元件沿引导线运动 该层下的图层为 被 引导层 遮罩层 图标是 使被遮罩层中的动画元素只能透过遮罩层被看到 该层下的 图层就是 被遮罩层 层图标是 普通层 图标是 放置各种动画元素 3 时间帧区 Flash 影片将播放时间分解为帧 用来设置动画运动的方式 播放的顺序及时间等 默 认时是每秒播放 12 帧 如图 3 1 3 所示 图 3 1 3 时间轴图层区和时间帧区 在时间帧面板上 每 5 帧有个 帧序号 标识 常见 帧符号 意义如下 关键帧 关键帧定义了动画的变化环节 逐帧动画的每一帧都是关键帧 而补间动画 在动画的重要点上创建关键帧 再由 Flash 自己创建关键帧之间的内容 实心圆点 是 有内容的关键帧 即实关键帧 而无内容的关键帧 即空白关键帧 则用空心圆 表示 普通帧 普通帧显示为一个个的单元格 无内容的帧是空白的单元格 有内容的帧显 示出一定的颜色 不同的颜色代表不同类型的动画 如动作补间动画的帧显示为浅蓝 色 形状补间动画的帧显示为浅绿色 而静止关键帧后的帧显示为灰色 关键帧后面 的普通帧将继承该关键帧的内容 帧标签 帧标签用于标识时间轴中的关键帧 用红色小旗加标签名表示 如 帧注释 用于为你自己或处理同一文件的其他人员提供提示 用绿色的双斜线加注释 文字表示 如 播放头 指示当前显示在舞台中的帧 将播放头沿着时间轴移动 可以轻易地定位当 前帧 用红色矩形表示 红色矩形下面的红色细线所经过的帧表示该帧目前正处于 播放帧 4 状态栏 状态栏 位于时间轴的最下方 指示所选的帧编号 当前帧频以及到当前帧为止的运行时间 如图 3 1 4 所示 最左边的是一组 帧显示模式 按钮 也就是所谓的 描图纸 或者 洋葱皮 功能 它能某个动画过程以一定透明度完整显示出来 而且还可以进行 多帧编辑 图 3 1 4 时间轴状态栏 2 场景 场景 1 打开场景面板 时间轴面板下面 占据界面最大的区域就是 场景 如图 3 1 5 所示 时间轴面板好比是个 导演工作台 那么 场景就是受 工作台 控制 的 舞台 了 随着 工作台 上的变化 舞台 上的内容也将同步变化 你可以在 舞台 中编辑当前 关键帧 中的内容 包括设置对象的大小 透明度 变形的方式和方向等等 在图 3 1 6 场景中表示的是几种常见的动画元素 图 3 1 6 常见的几种动画元素 根据需要 你可以增 删 场景 多场景 动画适合较复杂的作品或 者舞台上的动画元素差别较明显的情况 Flash 将按照它们的先后顺序播放 此外 你还可以利用指令交互地实现不同场景间的跳转 增 删 场景 以及为 场景 命名是在 场景 面板中进行的 下面 介绍一下 场景 面板的功能和使用方法 执行 窗口 设计面板 场景 命令 打开场景面板 如图 3 1 7 所示 图 3 1 7 打开场景面板 打开后的 场景 面板如图 3 1 8 所示 场景 1 下的 3 个场景都是新增 的几个场景 图 3 1 8 场景 面板 2 操作场景面板 在场景面板中可以进行下列操作 复制场景 先选中要复制的场景 再单击 按钮 就可以复制出一个和 原场景一模一样的场景 复制出的场景还可以进行再复制 如图 3 1 8 中的 场景 1 复制 复制 所示 增加场景 单击 增加场景按钮 可以添加一个新的场景 如图 3 1 8 中的 场景 2 删除场景 选中要删除的场景 单击 就可以删除该场景 更改场景名称 在 场景 面板中双击场景名称 然后输入新名称 按回 车键确认 更改场景顺序 在 场景 面板中按住场景名称并拖动到不同的位置 松 开鼠标即可 转换场景 可在 视图 转到 菜单中选择场景名称 可以选择相应的 场景 也可以在时间轴面板上单击场景切换按钮 打开场景切换菜单 选择相应的场景 如图 3 1 9 所示 图 3 1 9 场景切换菜单 3 帧内容 帧内容 有了 导演工作台 和 舞台 还要有演员才能演出一幕有声有色 舞 台剧 在场景中的动画元素就是演员 一般常用的有以下几种 1 矢量图形 在场景中用鼠标或压感笔画出的图形 由一个个单独的 节点 构成一个 矢量路径 每一个 矢量路径 都有其各自的属性 如位置 颜色 透明度 形状等 对矢量图进行缩放时 图形对象仍保持 原有的清晰度和光滑度 不会发生任何偏差 是 Flash 中最基本的动画元素 2 位图图像 在 Flash 中导入的 gif jpg png 等格式的图片 图片由像素构成 像素点的多少将决定位 图图像的显示质量和文件大小 位图图像的分辨率越高 其显示越清晰 文件所占的空间也就越大 对位 图图像进行缩放时 图像质量出现明显变化 如常见的 锯齿状 等 位图在 Flash 中多用做背景 3 文字对象 单击工具箱中的 文本工具 在 属性 面板上选好要输入的文本类型 字体大小 颜色 排版方式等 就可以在场景中输入文字了 Flash 的文本对象有三种类型 静态文本字段 显示不会动态更改字符的文本 动态文本字段 显示动态更新的文本 如体育得分 天气报告 输入文本字段 使用户可以将文本输入到表单或调查表中 4 声音对象 在动画中添加声音 可以使你的作品更有吸引力 Flash 支持的声音文件有 WAV 仅限 Windows AIFF 仅限 Macintosh MP3 Windows 或 Macintosh 如果你的机器上装有 QuickTime 4 或更高 的版本 还可以支持更多的格式 5 按钮对象 按钮在实现 Flash 交互性方面有非常重要的作用 通过按钮 你可以实现场景之间的跳转 指定实 例的动作 定义与各种按钮状态关联的图形等等 按钮要实现交互性功能 必须在创建好的按钮实例上添加动作脚本语句 6 影片剪辑 影片剪辑是 Flash 中的小型影片 它有自己的时间轴和属性 可以用动作脚本控制播放 跳转等等 它可以包含交互式控件 声音甚至其它影片剪辑实例 也可以将影片剪辑实例放在按钮元件的时间轴上 以创建动画按钮 7 动作脚本语句 动作脚本是 Flash 的脚本撰写语言 通过它你就可以随心所欲地创建影片 实现场景之间的跳转 指 定和定义实例的各种动作等 动作脚本语句可以添加在时间帧 实例 按钮上 如果添加在时间帧上 在时间帧面板的相应帧上 会出现一个 a 字 如图 3 1 10 所示 图 3 1 10 添加动作脚本语句后时间帧上的标记 在影片剪辑 按钮上添加动作脚本语句的方法要先选择要添加的对象 然后在 动作 面板中进行 定义 以上只是对帧内容的简单介绍 更详细的讲解和应用请你参阅本书的其他相关章节 2 逐帧动画 从现在起 我们将逐渐给大家介绍 Flash MX 2004 中的五种常见的动画形式 逐帧动 画 形状补间动画 动作补间动画 遮罩动画 引导线动画 1 逐帧动画的概念和在时间帧上的表现形式 逐帧动画的概念和在时间帧上的表现形式 在时间帧上逐帧绘制帧内容称为逐帧动画 由于是一帧一帧地画 所以逐帧动画具有 非常大的灵活性 几乎可以表现任何想表现的内容 逐帧动画在时间帧上表现为连续出现的关键帧 如图 3 2 1 所示 图 3 2 1 逐帧动画 2 创建逐帧动画的几种方法 创建逐帧动画的几种方法 1 用导入的静态图片建立逐帧动画 用 jpg png 等格式的静态图片连续导入到 Flash 中 就会建立一段逐帧动画 参考实 例 奔跑的豹子 2 绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧帧的画出帧内容 参考实例 旋转的立方体 3 文字逐帧动画 用文字作帧中的元件 实现文字跳跃 旋转等特效 4 指令逐帧动画 在时间帧面板上 逐帧写入动作脚本语句来完成元件的变化 5 导入序列图像 可以导入 gif 序列图像 swf 动画文件或者利用第 3 方软件 如 swish swift 3D 等 产生的动画序列 3 3 实例 实例 1 1 奔跑的豹子奔跑的豹子 实例简介 茫茫雪原上 有一只矫健的豹子在奔跑跳跃 这是一个利用导入连续位图而创建的逐 帧动画 如图 3 2 3 所示 图 3 2 3 奔跑的豹子 步骤步骤 1 1 创建影片文档创建影片文档 执行 文件 新建 命令 在弹出的对话框中选择 常规 Flash 文档 选项 后 点击 确定 按钮 新建一个影片文档 在 属性 面板上设置文件大小为 400 260 像素 背景色 为白色 如图 3 2 4 所示 图 3 2 4 创建新文档 步骤步骤 2 2 创建背景图层创建背景图层 选择第一帧 执行 文件 导入 导入到舞台 命令 将配套光盘中的名为 雪景 bmp 图片导入到场景中 雪景 图片位置 光盘 example part3 图片 雪 景 bmp 选择第 8 帧 按 F5 键 增加过渡帧 使帧内容延续到第 8 帧 步骤步骤 3 3 导入导入 gifgif 动画动画 新建一个图层 选择第一帧 执行 文件 导入 导入到舞台 命令 将配套 光盘中的 奔跑的豹子 系列图片导入 奔跑的豹子 系列图片位置 光盘 example part3 图片 奔跑的豹子 1 png 此时 会弹出一个对话框 如图 3 2 5 所示 图 3 2 5 系列图片导入 选择 是 按钮 Flash 会自动把 gif 中的图片序列按序以逐帧形式导入场景的左上 角 如图 3 2 6 所示 图 3 2 6 导入的 gif 动画在场景的上方形成帧帧动画 如图 3 2 7 所示是导入后的动画序列 它们被 Flash 自动分配在 8 个关键帧中 图 3 2 7 导入的 8 张图片 步骤步骤 4 4 调整对象位置调整对象位置 此时 时间帧区出现连续的关键帧 从左向右拉动播放头 就会看到一头 勇猛的豹子在向前奔跑 但是 被导入的动画序列位置尚未处于我们需要的地 方 缺省状况下 导入的对象被放在场景坐标 0 0 处 我们必须移动它们 你当然可以一帧帧调整位置 完成一幅图片后记下其坐标值 再把其它图 片设置成相同坐标值 如果你有足够耐性和时间 也无妨 那么 我们何不试 试 多帧编辑 功能呢 先把 雪景 图层加锁 然后按下时间轴面板下方的 编辑多个帧 按钮 再单击 修改绘图纸标记 按钮 在弹出的菜单中选择 显示全部 选 项 如图 3 2 8 所示 图 3 2 8 选择显示全部选项 最后执行 编辑 全选 命令 此时时间轴和场景效果如图 3 2 9 所示 图 3 2 9 选取多帧编辑 用鼠标左键按住场景左上方的豹子拖动 就可以把 8 帧中的图片一次全移 动到场景中央了 步骤 5 设置标题文字 在场景中新建一个图层 单击工具箱中的 文字工具 设置 属性 面板上的文本参数如下 文本类型为 静态文本 字体为 隶书 字体大 小为 35 颜色为深蓝色 如图 3 2 10 所示 图 3 2 10 字体 属性 面板参数设置 在文本框中输入 奔跑的豹子 五个字 居中放置 步骤步骤 6 6 测试存盘测试存盘 执行 控制 测试影片 命令 快捷键 Ctrl Enter 观察动画效果 如果满意 执行 文件 保存 命令 将文件保存成 奔跑的豹子 fla 文件 如果要