1、 我 们 共 同 的 flash 课 件 家 园89第 三 章 图形、影片、按钮对象的编辑图形对象、影片剪辑对象、按钮对象也叫图形元件、影片剪辑元件、按钮元件，或者最简称呼为图形、影片、按钮，不管怎么称呼，它都指一样东西。图形元件、影片剪辑元件、按钮元件都有自己的时间轴，对它们的编辑，其实也是对它们的时间轴进行编辑。第一节 图形元件的编辑首先我们要了解两个概念：(1) 什么是主时间轴？(2) 什么是图形元件时间轴？主时间轴是新建 Flash 文档时所看到的时间轴，一个 Flash 文档只有一个主时间轴，它是唯一的，并且处于所有结构的最顶层。主时间轴有时也称为主场景，主场景也就是指主时间轴。主时
2、间轴的作用主要用于组织动画，即将各种元件、对象等组织在一起，形成一个完整影片。我们并不赞同直接在主时间轴上制作动画，而是将各种动画制作在各自的元件里，放置在主时间轴上后形成一个整体。图形元件时间轴是将某个对象转换为图形元件后，双击打开所显示的时间轴，每个图形元件都有自己的时间轴。3.1.1 三角板的绘制实例源文件：光 盘 : 实 例 与 视 频 第 三 章 第 一 节 三 角 板 .fla操作步骤：启 动 Flash CS3， 新 建 一 个 Flash ActionScript2.0 文 档 ， 将 文 档 的 背 景 颜 色 设 置 为“#99FF00”将 “图 层 1”更 名 为 “三
3、角 板 ”， 按 住 “Shift”键 不 放 ， 用 “线 条 工 具 ”在 此 图层 的 第 1 帧 绘 制 如 图 3.1.01 所 示 的 等 腰 直 角 三 角 形 。图 3.1.01第 三 章 图 形 、 影 片 、 按 钮 对 象 的 编 辑90用“选择工具”选定三角形，按快捷键“F8” ，将三角形转换为图形元件，设置如图3.1.02 所示。图 3.1.02鼠标指针移动到图形元件“45 度三角板”上，双击鼠标，打开图形元件( 在场景中打开某个元件时，鼠标指针一定要移动到这个元件上，且鼠标指针形状为“ ”时，双击才可以打开元件。) ，如图 3.1.03 所示。图 3.1.03双击图
4、形元件“45 度三角板”后，打开图形元件“45 度三角板”的时间轴，进入图形元件的编辑状态，如图 3.1.04 所示。图形元件有自己的时间轴和编辑区，操作上与前两章所讲内容一样。图 3.1.04 的处显示当前操作元件的路径，这对初学的人很重要，通过这所显示的内容能很清楚知道，你现在对哪个对象进行编辑。当前显示正在对主场景下的“45 度三角板”的这个图形元件进行编辑，即最后显示的那个名称就是正在编辑的对象，如图 3.1.04 的处所示。路径总是从主场景开始的，因为任何元件或对象都是放置在主时间轴上的，如图 3.1.04 的处所示。单击处，返回到主时间轴。单击处，返回到上一级对象，或者是在编辑区没
5、有对象的区域双击鼠标，也可以返回上一级对象。 我 们 共 同 的 flash 课 件 家 园91图 3.1.04将“图层 1”更名为“三角形” ，如图 3.1.05 的处所示。在编辑区中用“选择工具”选定三角形，按快捷键“Ctrl+D”重制一个等腰直角三角形，用“缩放”工具拉小，并移动到如图 3.1.05 的处。用“颜料桶工具”给三角形填上白色，如图 3.1.05 的处所示。锁定“三角形”图层，单击“插入图层”按钮，新建一图层，并更名为“刻度” 。在“刻度”图层的第 1 帧画上刻度，如图 3.1.06 的处所示。第 三 章 图 形 、 影 片 、 按 钮 对 象 的 编 辑92图 3.1.05
6、 图 3.1.06锁定“刻度”图层，单击“插入图层”按钮，新建一图层，并更名为“数字” 。在“数字”图层的第 1 帧写入数字，如图 3.1.07 的处所示。图 3.1.07按 快 捷 键 “Ctrl+S”， 将 文 档 保 存 到 “E:实 例 练 习 ”文 件 夹 中 ， 并 命 名 为 “45度 三 角 板 ”， 一 个 三 角 板 图 形 就 绘 制 完 成 。分析总结： 我 们 共 同 的 flash 课 件 家 园93通过本例，我们可以发现主时间轴与元件的时间轴是不同的，此例中主时间轴只有“三角板”这一个图层，而“45 度三角板”这个图形元件的时间轴上有三个图层，如图 3.1.07所
7、示。本例将三角板转换为图形元件后，它就有自己的时间轴。在自己的时间轴上，我们可以将相对独立的对象放置在不同的图层上。如本例中将三角形、刻度、数字，放置不同的图层，编辑操作上比较灵活，当编辑完成时，可以通过锁定图层的方式锁定编辑完成的对象。此例中，如果将这三个对象放在一个图层中编辑，操作上将会麻烦得多。实 例 练 习请 你 做 出 “光 盘 : 实 例 与 视 频 第 三 章 第 一 节 30 度 三 角 板 .swf”的 影 片 所 示 的 三角 板 。3.1.2 位图的裁剪选择“菜单导入导入到舞台”菜单项，导入的一幅图片，这图片在 Flash 中称为位图。很多时候，我们只需要图片其中的一部分
8、，这时我们应该怎么处理呢？实例源文件：光 盘 : 实 例 与 视 频 第 三 章 第 一 节 位 图 的 裁 剪 .fla操作步骤：启 动 Flash CS3， 新 建 一 个 Flash ActionScript2.0 文 档 。将 “图 层 1”更 名 为 “图 片 ”， 选 择 菜 单 “文 件 导 入 导 入 到 舞 台 ”菜 单 项 ，将 “光 盘 :实 例 与 视 频 第 三 章 第 一 节 素 材 之 Q 宠 .jpg”导 入 编 辑 区 中 。 用 “选择 工 具 ”选 定 图 片 ， 按 快 捷 键 “F8”， 将 其 转 换 为 图 形 元 件 设 置 如 图 3.1.08
9、 所 示 。图 3.1.08选定 “选择工具”后，双击编辑区中的图片，打开图形元件 “Q 宠”时间轴。将“图层1”更名为“图片” ，按快捷键“Ctrl+B”打散图片后，锁定该图层，如图 3.1.09 所示。第 三 章 图 形 、 影 片 、 按 钮 对 象 的 编 辑94图 3.1.09单击“插入图层”按钮，插入一新图层，并将图层更名为“轮廓” ，用“线条工具”工具拉出“QQ 宠物”的大致轮廓，绘制轮廓时可以放大编辑区。用 “选择工具”将线条拉成“QQ 宠物”的形状，如图 3.1.10 所示。图 3.1.10确认用线条描绘出的 QQ 宠物是一个封闭的区域后，选定线条轮廓，按快捷键“Ctrl+X
10、”，剪切线条轮廓。解锁“图片”图层，按快捷键“Ctrl+Shift+V” ，将线条轮廓粘贴到“图片”图层的第 1 帧的当前位置。用“选择工具”选定“QQ 宠物”之外的区域，按 Delete 键删除。选定线条轮廓，按Delete 删除，最后剩下“QQ 宠物”部分，删除“轮廓”图层，如图 3.1.12 所示。 我 们 共 同 的 flash 课 件 家 园95图 3.1.12按 快 捷 键 “Ctrl+S”， 将 文 档 保 存 到 “E:实 例 练 习 ”文 件 夹 中 ， 并 命 名 为 “位 图的 裁 剪 ”， 完 成 了 图 形 的 裁 剪 操 作 。总结分析：本例的思路是用线条描绘出欲保
11、留的位图部分的轮廓，然后将线条与打散后的位图放置于同一图层，用线条将保留部分和删除部分分隔出来。删除不要的部分，完成图形的裁剪。本例关键的两点：(1) 位图必须打散；(2) 所绘线条轮廓必须封闭。3.1.3 位图的临摹位图与矢量图的最大区别为：位图放大一定倍数后，图像就会失真，而矢量图无论放大多少倍，图像都不会失真。在实际创作过程中，为了达到更好效果，我们应该尽可能的将位图转换为矢量图。如何转换呢？我们可以通过临摹的方式实现。实例源文件：光 盘 : 实 例 与 视 频 第 三 章 第 一 节 位 图 的 临 摹 .fla操作步骤：启 动 Flash CS3， 新 建 一 个 Flash Act
12、ionScript2.0 文 档 。将 “图 层 1”更 名 为 “图 片 ”， 选 择 菜 单 “文 件 导 入 导 入 到 舞 台 ”菜 单 项 ，将 “光 盘 :实 例 与 视 频 第 三 章 第 一 节 素 材 之 鸭 子 .jpg”导 入 编 辑 区 中 。 用 “选择 工 具 ”选 定 图 片 ， 按 快 捷 键 “F8”， 将 其 转 换 为 图 形 元 件 设 置 如 图 3.1.13 所 示 。图 3.1.13选定 “选择工具”后，双击编辑区中的图片，打开图形元件 “鸭子”时间轴。将“图层第 三 章 图 形 、 影 片 、 按 钮 对 象 的 编 辑961”更名为“临摹位图”
13、 ，锁定该图层，如图 3.1.14 所示。图 3.1.14图 3.1.15单击 “插入图层”按钮，插入一新图层，并将图层更名为 “线条描绘” 。用“线条工具”工具拉出构成“鸭子”的所有线条。绘制时将编辑区放大到合适的大小，鸭子的线条轮廓是由一段段曲线构成，因此，我们可以绘制一条直线，用“选择工具”将这些直线拉成曲线。最终临摹出“鸭子”的形状，如图 3.1.15 所示。临摹出鸭子的线条轮廓后，就要给鸭子各个区域填充上相应的颜色。首先我们要选色，我们可以单击“填充颜色”工具，在弹出色板后，将鼠标指针移动到编辑区中你欲取色位置单击鼠标左键，选定某种颜色，如图 3.1.16 所示。颜色选择完后，用“颜
14、料桶工具”给各个区域填充颜色。如果是未封闭的区域，请先封闭该区域。 我 们 共 同 的 flash 课 件 家 园97图 3.1.16颜色填充完成后，选定“临摹位图”图层，单击“删除图层”按钮，删除“临摹位图”图层。单击“场景 1”按钮，退回主场景。图 3.1.17按 快 捷 键 “Ctrl+S”， 将 文 档 保 存 到 “E:实 例 练 习 ”文 件 夹 中 ， 并 命 名 为 “位 图的 临 摹 ”， 完 成 了 位 图 的 临 摹 操 作 。总结分析：用 Flash 绘制图画的能力不是所有人都有的，他必须要有很深厚的美术功底的，才能构思出心中的图画。但是临摹的能力是每个人都有的，只要花
15、一些时间，只是一些手工活而已。将位图临摹出来后，图画就变得十分清晰，这是处理图片的一种常用方式。注意：图形元件时间轴只能显示时间轴第 1 帧上的内容，它是静态的，不能用于制作动画。多数情况下用于处理图片，或者作为制作动画时的对象使用。第二节 影片剪辑元件的编辑3.2.1 心与星实例预览：光 盘 : 实 例 与 视 频 第 三 章 第 二 节 心 与 星 .swf操作步骤：启 动 Flash CS3， 新 建 一 个 Flash ActionScript2.0 文 档 。 将 文 档 的 背 景 颜 色 设 置 为“#000000”， 即 黑 色 。将 主 时 间 轴 的 “图 层 1”更 名
16、为 “影 片 ”， 将 “笔 触 颜 色 ”设 置 为 “#666666”第 三 章 图 形 、 影 片 、 按 钮 对 象 的 编 辑98即 灰 白 色 。 用 “钢 笔 工 具 ”在 “影 片 ”图 层 的 第 1 帧 的 编 辑 区 中 绘 制 一 颗 心 。用 “选 择 工 具 ”选 定 这 颗 心 ， 按 快 捷 键 “F8”， 将 心 转 换 为 影 片 剪 辑 元 件 ， 设 置如 图 3.2.01 所 示 。图 3.2.01选定“选择工具” ，在编辑区中双击心的线条，进入影片元件“心与星”的时间轴。将“图层 1”更名为“相爱的心” ，并锁定本图层，如图 3.2.02 所示。图
17、3.2.02单击“插入图层”按钮，插入一新图层，并更名为“闪烁的星” ，用“矩形工具”在“闪烁的星”图层的第 1 帧的编辑区中绘制一个矩形，将矩形设置为无线条、宽为100、高为 3、颜色填充类型为放射状，填充后矩形效果为中间黄色，两边黑色，如图3.2.03 所示。设置完成后按快捷键“Ctrl+G”将矩形组合。用“选择工具 ”选定矩形，按快捷键“Ctrl+D ”重制一个矩形，打开“属性”面板，将重制的矩形的宽设置为 70、高设置 2。分别重制大小两种矩形各一个，按快捷键“Ctrl+Alt+S”，将两个小的矩形分别旋转 45 度和-45 度，将一个大的矩形旋转 90 度。选定这四个矩形，打开“对齐”面板，设置为水平居中和垂直居中，最终如图 3.2.04 所示。按快捷键“F8” ，将其转换为影片剪辑元件，设置如图 3.2.05 所示。
