动画制作大学教程Flash第2章Flash中绘制矢量图形.ppt

为什么有时候可以混用这两个词呢？因为 图形存在于逻辑中，最终要能够被人眼看到， 它必须存在于某种显示媒体上，比如通过计算 机显示器显示，或者印刷在纸上，而一旦图形 被“显示”在显示器上，它就成为图像了。
因此，读者只要知道二者是不同的就可以 了。
2.1.2 分辨率
这里说的分辨率是指一个图像在水平和竖 直方向分别包含的像素数。例如在购买数码相 机的时候，会关注一款相机的分辨率是300万 像素还是500万像素，300万像素指的是它拍摄 出来的照片包含300万个点，这里的300万是个 近似的数值，精确来说是水平方向有2 048个 像素，竖直方向有1 536个像素，二者构成的 矩形区域包含2 048×1 536 = 3 145 728个 像素，近似以后就是300万像素了。
图2.56 正五边形
图2.57 “多角星形”工具的“选项”属性
图2.58 “工具设置”对话框
图2.59 多边形和星形的效果
2.4 认识Flash的“绘制模式”
在进行深入讲解之前，先来做一个试验。 这样有时会给设计带来不便，因此Flash 8中 提供了一个叫做“绘制模式”的选项，用来解 决这个问题。
2.1.1 图形与图像
图像对应于英文中的“Image”，它类似 于照片，它由许许多多排成行和列的点组成， 当每个点都足够小的时候，宏观看起来，一幅 图像就非常清晰了。
而图形对应于英文中的“Graphics”，它 更类似于逻辑概念，比如一个三角形、一个圆 形或者一条曲线，它们都被称为“图形”，而 不是图像。
图2.63 对象不会互相影响
如图2.62所示，被圆圈标注的6个工具 都具有“绘制模式”选项，除了上述4种介绍 过的工具之外，还有“刷子”工具和“钢笔” 工具，会在后面讲解。
当用“对象绘制”模式创建的图形被 选中时，图形会出现一个蓝色矩形边框，而不 是像在合并模式中那样，在被选中的对象上覆 盖白色网点。
图2.51 “边角半径设置”按钮
2．笔触提示
“笔触提示”可在全像素下调整直线，防 止出现模糊的垂直或水平线。
图2.52 笔触提示
图2.53 未使用“笔触提示”前
图2.54 使用“笔触提示”后
2.3.3 多边形和星形的绘制
要绘制多边形，首先要选择“多角星形” 工具，该工具与“矩形”工具同在一个工具组 中。将鼠标指针移动至“矩形”工具上，然后 单击该工具并持续两秒钟，会弹出一个工具组， 如图2.55所示，在“矩形”工具下方就是“多 角星形”工具。
2．设置椭圆的属性
在工具栏中选中“椭圆”工具，然后在 “属性”面板中观察“椭圆”工具的属性选项， 除增加“填充色”选项外，其他选项与“线条” 工具的属性一致，功能和用法都是相同的。
2.3.2 “矩形”工具
用“矩形”工具绘制图形的方法与“椭圆” 工具类似，具体操作如下。
要绘制矩形，首先要在工具栏中选择“矩 形”工具，如图2.47所示，然后在“颜色”区 域中设置矩形的笔触颜色和填充颜色，完成后 即可在舞台中绘制矩形。
2.2.ຫໍສະໝຸດ Baidu “线条”工具
“线条”工具与“铅笔”工具相同的一点 是，它们都是笔触工具：不同之处在于“线条” 工具用来绘制直线。
“线条”工具在工具栏中的位置如图2.17 所示。
图2.17 选中“线条”工具
图2.18 绘制线段
线条”工具与“铅笔”工具的属性基本相 同，只是“线条”工具不存在“绘图模式”选 项，因为“线条”工具绘制出来的都是直线， 也就不存在平滑的问题。
此外，在一个分辨率比图像自身分辨率低 的输出设备上显示位图图像也会降低图像的品 质。
图2.1 位图图像放大后变模糊
2.1.4 矢量图形
矢量图形是使用称为“矢量”的线条和曲 线（包含颜色和位置信息）显示图形。
例如图2.2中显示了一个矢量图形，它使 用一系列曲线描述圆形轮廓，以及汉字的笔画 轮廓。
图形的颜色由它的轮廓颜色和该轮廓所包 围的区域颜色决定。
矢量图形与位图图像在实际应用中都是不 可缺少的，所以在这里使用“将”和“帅”来 比喻，表示它们并没有优劣之分。
2.1.5 路径、笔触与填充
一个矢量图形有3个要素：路径、笔触和填充。
图2.3 矢量图形的构成要素
2.1.6 “绘图”与“上色”
在中文里常说到一个动词，叫“绘画”， 而在英文中，单词“Draw”称为“绘图”，单 词“Paint”称为“上色”，它们正好对应于 “笔触”和“填充”这两个概念。也就是说， “笔触”是用某种绘图工具“绘制”出来的封 闭或者不封闭的“线条”，而“填充”是在某 个由“笔触”包围的区域中，进行“上色”操 作的结果。
有了上面这些基础，就可以正式开始学习 在Flash中绘制图形了。
首先介绍两种简单工具的使用，它们分别 是“铅笔”工具和“线条”工具。
2.2.1 用“铅笔”工具绘图
图2.6 选择“铅笔”工具
1．“铅笔”工具的使用和“笔触颜色”的 设置
图2.7 设置笔触颜色
图2.8 选择绘图模式
图2.9 绘制曲线
然后将鼠标指针移动到舞台中，按下鼠标 并进行拖动，即可绘制出椭圆形状，如图2.39 所示。
图2.38 “椭圆”工具
图2.39 绘制完成后的椭圆
图2.40 打开“填充色”面板
图2.41 选择填充色
在“填充色”面板的顶部有4个功能选项， 从左往右依次是：显示当前所选颜色的参数值、 设置填充颜色的不透明度、将填充颜色设置为 无、自定义填充颜色。
绘制的图形，无论处于哪种绘制模式， 只要被选中以后，都可以在“属性”面板中修
改它的笔触和填充颜色等属性。
从Flash最早的版本到Flash MX 2004 版，都只有“合并模式”。“对象绘制”模式
是从Flash 8才加入的新功能。
2.5 贴紧至对象
前面已经介绍了4种绘图工具，但是还会 遇到一个问题，即如何使绘制的图形更精确。
默认情况下，选择了“多角星形”工具后 直接在舞台中绘制出来的多边形为正五边形， 如图2.56所示。
该五边形的笔触颜色和填充颜色可以在绘 制前进行设置，也可以绘制完成后在“多角星 形”工具的“属性”面板中进行修改，它的属 性项中除了“选项”功能外，其他属性项的功 能与“矩形”工具的属性项功能相同。
图2.55 选择“多角星形”工具
第2章 Flash中绘制矢量图形
2.1 与图形图像相关的几个基本概念
2.2 “铅笔”工具与“线条”工具
2.3 “椭圆”工具与“矩形”工具
2.4
认识Flash的“绘制模式”
2.5
贴紧至对象
2.6
“刷子”工具
2.7
导入插图
小结
本章重点介绍在Flash中的绘制矢量图形 的方法。
在Flash动画的制作过程中，会大量用到 矢量图形，而Flash自身的矢量绘图功能很强 大，故可以方便、快捷地绘制出各种各样的图 形。
本节介绍的“椭圆”工具与“矩形”工具 可以绘制椭圆和矩形等形状，而且绘制出来的 图形既有笔触，又有填充。
2.3.1 “椭圆”工具
顾名思义，“椭圆”工具是绘制椭圆的工 具。
它与“线条”和“铅笔”工具一样，都是 绘制基本图形的工具，其操作方法也基本类似。
不同的是，绘制椭圆时需要设置它的填充 颜色。
要绘制椭圆，应先在工具栏中选中“椭圆” 工具，如图2.38所示。
2．自定义笔触颜色
图2.10 自定义颜色按钮
图2.11 设置自定义颜色
图2.12 “笔触颜色”面板的功能
3．“铅笔”工具的绘图模式
图2.13 以“伸直”、“平滑”和“墨水”模式绘制线条
4．设置笔触样式
图2.14 笔触样式列表
图2.15 不同笔触样式绘制的曲线
图2.16 自定义样式
5．“铅笔”工具的其他属性
2.2.3 实践与练习：绘制包装盒（1）
图2.19 包装盒
图2.20 选择“线条”工具
图2.21 设置笔触颜色
图2.22 绘制直线
图2.23 选择“选择”工具
图2.24 复制直线
图2.25 两条直线的摆放位置
图2.26 启用“贴紧至对象”功能
图2.27 绘制连接线
图2.28 直线组成的四边形
渐变色在实际设计工作中是非常重要的， 通过渐变颜色可以绘制出很多非常精致的效果。
在绘制椭圆时，可以分别设置椭圆的笔触 颜色和填充颜色，也可以根据绘制图形时的具 体要求，单独将笔触或者填充色设置为无。
如果希望绘制没有填充颜色或者笔触颜色 的椭圆，只需单击颜色选择面板中右上角的 按钮就可以了。
图2.46 移动填充
2.1.3 位图图像
位图图像由排列成网格的点组成，每个点 称为一个“像素”。
计算机的屏幕就是一个大的像素网格。 在一幅位图中，图像是由网格中每个像素 的位置和颜色值决定的。 每个点被指定一种颜色，这些点像马赛克 中的贴砖那样拼合在一起形成图像。
位图图像的优点是可以保证图像的细节， 因此照片都是典型的位图图像。
它们与“笔触颜色”的功能是完全一致的， 这里就不再细述了。
1．设置渐变颜色
现在就来重点讲解填充色面板最下面的一 排渐变颜色，通过这些预置的渐变颜色，可以 使绘制出来的椭圆呈线性渐变或者放射状渐变 等效果。具体操作如下。
图2.42 选择渐变颜色
图2.43 绘制渐变椭圆
图2.44 放射状渐变
图2.45 彩色线性渐变
位图的一个特征是当它被放大以后，就会 变模糊，如图2.1所示，图中左下角的图像是 原始的图像，放大以后就变得非常模糊。
编辑位图图像时，修改的是像素，而不是 线条和曲线。
位图图像与分辨率有关，这意味着描述图 像的数据被固定到一个特定大小的网格中。
正如前面说到的，放大位图图像将使这些 像素在网格中重新进行分布，这通常会使图像 的边缘呈锯齿状。
如果同时按住键盘上的“Shift”键，就能 绘制出正方形，如图2.48所示。
图2.47 选择“矩形”工具
图2.48 绘制正方形
1．绘制圆角矩形
边角半径”的大小决定了所要绘制圆角矩 形的圆角的弯曲度，数值越大，圆角越大，数 值越小，圆角越小。
图2.49 “矩形设置”对话框
图2.50 绘制圆角矩形
图2.4 绘制轮廓
图2.5 填充颜色
通常把绘图操作完成后的结果称为“笔 触”，包括直线和曲线；把完成填充后的结果 称为“填充区域”或“形”，即一个区域。
而线和形统称为“图形”。 在动手绘图之前，还必须了解笔触和填充， 以及修改图形后对同一层中其他图形产生的影 响。
2.2 “铅笔”工具与“线条”工具
在默认状态下，这个选项处于抬起状态， 这时绘制的各个图形对象会互相影响，自动合 并，因此这种模式称为“合并模式”；如果选 中这个选项，就会进入“对象模式”，这时每 次使用这些绘图工具绘制的图形都会成为一个 独立的对象，这样对象之间就不会互相影响了。 各个对象即使相互重叠，也不会“吃掉”其他 对象，如图2.63所示。
图2.60 绘制矩形
图2.61 移动椭圆
这样有时会给设计带来不便，因此Flash 8中提供了一个叫做“绘制模式”的选项，用 来解决这个问题。
在工具栏中，选中“铅笔”、“线条”、 “椭圆”和“矩形”工具以后，在“选项”区 域都会出现“绘制模式”图标，如图2.62所示。
图2.62 选择“对象绘制”模式
本章先讲解与图形图像相关的几个基本概 念，然后重点学习Flash的绘图工具（如“椭 圆”工具、“矩形”工具等）的使用方法，以 及如何综合运用这些工具绘制生动有趣的图形。
2.1 与图形图像相关的几个基本概念
图形和图像是日常生活中经常说起的词汇， 但是要真正成为一名图形图像的设计师，还需 要更深入地理解和掌握相关的一些知识。
图2.2 矢量图形放大后仍保持清晰
编辑矢量图形时，修改的是描述其形状的 线条和曲线的属性。
矢量图形与分辨率无关，这意味着除了可 以在分辨率不同的输出设备上显示它以外，还 可以对其执行移动、调整大小、更改形状、更 改颜色等操作，而不会改变其外观品质。
矢量图形的缺点是它无法表达细节，例如 一幅照片上的各个点无法构成一个用数学方程 可以描述的曲线。
图2.29 复制直线
图2.30 完成垂直直线的复制
图2.31 连接直线与四边形
图2.32 复制斜线
图2.33 对齐直线
图2.34 包装盒外轮廓
图2.35 顶部和侧面的轮廓
图2.36 绘制翻盖部分
图2.37 最终效果
2.3 “椭圆”工具与“矩形”工具
前面介绍的两种工具有一个共性，就是绘 制出来的都是笔触，而没有填充。