Flash02绘制矢量图形.ppt

第2章 矢量图形,本章主要内容,在Flash动画的制作过程中，会大量用到矢量图形，而Flash自身的矢量绘图功能很强大，故可以方便、快捷地绘制出各种各样的图形。,2.1 与图形图像相关的几个基本概念,图形和图像是日常生活中经常说起的词汇，但是要真正成为一名图形图像的设计师，还需要更深入地理解和掌握相关的一些知识。,2.1.1 图形与图像,图像对应于英文中的“Image”，它类似于照片，它由许许多多排成行和列的点组成，当每个点都足够小的时候，宏观看起来，一幅图像就非常清晰了。 而图形对应于英文中的“Graphics”，它更类似于逻辑概念，比如一个三角形、一个圆形或者一条曲线，它们都被称为“图形”，而不是图像。,为什么有时候可以混用这两个词呢？因为图形存在于逻辑中，最终要能够被人眼看到，它必须存在于某种显示媒体上，比如通过计算机显示器显示，或者印刷在纸上，而一旦图形被“显示”在显示器上，它就成为图像了。 因此，读者只要知道二者是不同的就可以了。,2.1.2 分辨率,这里说的分辨率是指一个图像在水平和竖直方向分别包含的像素数。例如在购买数码相机的时候，会关注一款相机的分辨率是300万像素还是500万像素，300万像素指的是它拍摄出来的照片包含300万个点，这里的300万是个近似的数值，精确来说是水平方向有2 048个像素，竖直方向有1 536个像素，二者构成的矩形区域包含2 0481 536 = 3 145 728个像素，近似以后就是300万像素了。,2.1.3 位图图像,位图图像由排列成网格的点组成，每个点称为一个“像素”。 计算机的屏幕就是一个大的像素网格。 在一幅位图中，图像是由网格中每个像素的位置和颜色值决定的。 每个点被指定一种颜色，这些点像马赛克中的贴砖那样拼合在一起形成图像。,位图图像的优点是可以保证图像的细节，因此照片都是典型的位图图像。 位图的一个特征是当它被放大以后，就会变模糊。,图2.1 位图图像放大后变模糊,编辑位图图像时，修改的是像素，而不是线条和曲线。 位图图像与分辨率有关，这意味着描述图像的数据被固定到一个特定大小的网格中。 正如前面说到的，放大位图图像将使这些像素在网格中重新进行分布，这通常会使图像的边缘呈锯齿状。 此外，在一个分辨率比图像自身分辨率低的输出设备上显示位图图像也会降低图像的品质。,2.1.4 矢量图形,矢量图形是使用称为“矢量”的线条和曲线（包含颜色和位置信息）显示图形。它使用一系列曲线描述圆形轮廓，以及汉字的笔画轮廓。图形的颜色由它的轮廓颜色和该轮廓所包围的区域颜色决定。,图2.2 矢量图形放大后仍保持清晰,编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。 矢量图形与分辨率无关，这意味着除了可以在分辨率不同的输出设备上显示它以外，还可以对其执行移动、调整大小、更改形状、更改颜色等操作，而不会改变其外观品质。,矢量图形的缺点是它无法表达细节，例如一幅照片上的各个点无法构成一个用数学方程可以描述的曲线。 矢量图形与位图图像在实际应用中都是不可缺少的，所以在这里使用“将”和“帅”来比喻，表示它们并没有优劣之分。,2.1.5 路径、笔触与填充,一个矢量图形有3个要素：路径、笔触和填充。,图2.3 矢量图形的构成要素,“路径”负责描述一个矢量图的形状和位置，而与颜色信息无关。可以通过修改一个矢量图的路径来调整它的形状和位置。 “笔触”有时候也称为“描边”，它负责确定矢量图的轮廓的颜色和样式。 “填充”负责确定矢量图形被路径包围着部分的颜色和样式。,“笔触”是用某种绘图工具“绘制”出来的封闭或者不封闭的“线条”，而“填充”是在某个由“笔触”包围的区域中，进行“上色”操作的结果。,通常把绘图操作完成后的结果称为“笔触”，包括直线和曲线；把完成填充后的结果称为“填充区域”或“形”，即一个区域。 而线和形统称为“图形”。,2.2 “铅笔”工具与“线条”工具,首先介绍两种简单工具的使用：“铅笔”工具和“线条”工具。,图2.6 选择“铅笔”工具,1“铅笔”工具的使用和“笔触颜色”的设置,图2.7 设置笔触颜色,2自定义笔触颜色,图2.10 自定义颜色按钮,图2.11 设置自定义颜色,图2.12 “笔触颜色”面板的功能,图2.8 选择绘图模式,伸直：对徒手绘制的曲线进行伸直处理，将接近三角形、椭圆、圆形、矩形和正方形形状的图形转换为这些规则的几何形状图形。 平滑：可以将手绘出的曲线修改得比较平滑。 墨水：保持手绘时的曲线状态，不做平滑处理。,图2.13 以“伸直”、“平滑”和“墨水”模式绘制线条,4设置笔触样式,图2.14 笔触样式列表,图2.15 不同笔触样式绘制的曲线,图2.16 自定义样式,2.2.2 “线条”工具,“线条”工具与“铅笔”工具相同的一点是，它们都是笔触工具：不同之处在于“线条”工具用来绘制直线。 “线条”工具在工具栏中的位置如图2.17所示。,图2.17 选中“线条”工具,2.2.3 实践与练习：绘制包装盒（1）,图2.19 包装盒,2.3 “椭圆”工具与“矩形”工具,前面介绍的两种工具有一个共性，就是绘制出来的都是笔触，而没有填充。 “椭圆”工具与“矩形”工具可以绘制椭圆和矩形等形状，而且绘制出来的图形既有笔触，又有填充。,要绘制椭圆，应先在工具栏中选中“椭圆”工具，如图2.38所示。 然后将鼠标指针移动到舞台中，按下鼠标并进行拖动，即可绘制出椭圆形状。,图2.38 “椭圆”工具,2.3.1 “椭圆”工具,图2.40 打开“填充色”面板,图2.41 选择填充色,在“填充色”面板的顶部有4个功能选项，从左往右依次是：显示当前所选颜色的参数值、设置填充颜色的不透明度、将填充颜色设置为无、自定义填充颜色。,图2.43 绘制渐变椭圆,图2.44 放射状渐变,图2.45 彩色线性渐变,图2.42 选择渐变颜色,1设置渐变颜色,填充色面板最下面的一排渐变颜色，通过这些预置的渐变颜色，可以使绘制出来的椭圆呈线性渐变或者放射状渐变等效果。,2设置椭圆的属性,在工具栏中选中“椭圆”工具，然后在“属性”面板中观察“椭圆”工具的属性选项，除增加“填充色”选项外，其他选项与“线条”工具的属性一致，功能和用法都是相同的。,2.3.2 “矩形”工具,用“矩形”工具绘制图形的方法与“椭圆”工具类似。要绘制矩形，首先要在工具栏中选择“矩形”工具，然后在“颜色”区域中设置矩形的笔触颜色和填充颜色，完成后即可在舞台中绘制矩形。如果同时按住键盘上的“Shift”键，就能绘制出正方形。,图2.47 选择“矩形”工具,图2.48 绘制正方形,1绘制圆角矩形,“边角半径”的大小决定了所要绘制圆角矩形的圆角的弯曲度，数值越大，圆角越大，数值越小，圆角越小。,图2.50 “矩形设置”对话框,图2.51 绘制圆角矩形,图2.49 “边角半径设置”按钮,图2.53 未使用“笔触提示”前,图2.54 使用“笔触提示”后,2笔触提示,“笔触提示”可在全像素下调整直线，防止出现模糊的垂直或水平线。,图2.52 笔触提示,2.3.3 多边形和星形的绘制,要绘制多边形，首先要选择“多角星形”工具，该工具与“矩形”工具同在一个工具组中。将鼠标指针移动至“矩形”工具上，然后单击该工具并持续两秒钟，会弹出一个工具组，在“矩形”工具下方就是“多角星形”工具。,图2.55 选择“多角星形”工具,图2.59 多边形和星形的效果,2.4 认识Flash的“绘制模式”,在进行深入讲解之前，先来做一个试验。,这样有时会给设计带来不便，因此Flash 8中提供了一个叫做“绘制模式”的选项，用来解决这个问题。,图2.60 绘制矩形,图2.61 移动椭圆,在工具栏中，选中“铅笔”、“线条”、“椭圆”和“矩形”工具以后，在“选项”区域都会出现“绘制模式”图标。,图2.62 选择“对象绘制”模式,在默认状态下，这个选项处于抬起状态，这时绘制的各个图形对象会互相影响，自动合并，因此这种模式称为“合并模式”；如果选中这个选项，就会进入“对象模式”，这时每次使用这些绘图工具绘制的图形都会成为一个独立的对象，这样对象之间就不会互相影响了。,图2.63 对象不会互相影响,2.5 贴紧至对象,如何使直线的两端正好在矩形的左右两条边上？可以使用Flash的“贴紧至对象”功能了。其作用是使正在绘制的图形自动吸附到离它最近图像边缘。通过它可以对图像做很好的闭合处理，保证闭合区域内颜色的正常填充。,如何使绘制的图形更精确？,图2.64 加入一条直线,图2.65 打开“贴紧至对象”功能,图2.66 使用“贴紧至对象”功能,图2.67 应用“贴紧至对象”功能绘制的图形,2.6 “刷子”工具,刷子是绘图工具之一，它的绘制方式与“铅笔”工具相似，也是在拖动鼠标时，沿鼠标指针经过的路径产生形状，而它与“铅笔”工具不同的是，“刷子”工具产生的是填充，而不是笔触。,使用“刷子”工具绘制形状的操作方法是，首先在工具栏中选择“刷子”工具，然后在“属性”面板中选择填充颜色，接着像使用“铅笔”工具那样在舞台上拖动鼠标，就会产生图形了。,图2.69 “刷子”工具的工作效果,图2.68选择“刷子”工具,2.6.1 涂色模式,“涂色模式”的作用是确定使用“刷子”工具绘制的图形与原有图形的关系。 因此，它只有在“合并模式”下才能产生作用，也就是说，如果以“对象模式”绘制，这个选项就没有作用。, “标准绘画”：可对同一层的线条和填充涂色 “颜料填充”：只对填充区域和空白区域涂色，笔触不受任何影响。 “后面绘画”：对同一层的空白区域涂色，绘制出来的图形始终位于已有图形的下方，不影响当前图形的线条和填充。,“颜料选择”：只对选中区域内的图形产生作用，不会影响选区之外的图形。 “内部绘画”：将绘制的区域限制在落笔时所在位置的填充区域中，但不对线条涂色。,2.6.2 锁定填充,图2.76 锁定填充,图2.77 相互独立的颜色,图2.78 锁定填充的效果,默认情况下，如果舞台上用”刷子“工具绘制两个使用渐变颜色的图形，那么二者的渐变颜色是相互独立的。按下”锁定填充“按钮，进入锁定填充模式，然后在此绘制两个图形，可以看到，渐变颜色好像扩展到整个舞台，也就是两个对象的渐变颜色是连续的。,2.6.3 其他选项,图2.79 选择刷子大小,图2.80 选择刷子形状,2.7 导 入 插 图,如果在Flash中，所有的图形都需要亲自绘制，那么制作效率和效果必定会受到很大的影响。 因此，Flash提供了导入插图的功能，也就是可以把各种格式的文件作为素材，导入到文档中，这样就可以直接利用这些素材了。,这里说的插图包含3种类型：矢量图、位图和位图序列。 矢量图：在专门的矢量图绘制工具软件（如Freehand、Illustrator）中绘制的矢量图形，导入到Flash中时，仍然可以保留矢量特性。 位图：这里说的位图就是常见的JPG、BMP等格式的文件。 位图序列：如果是文件名以数字结尾的一系列文件，可以自动导入到Flash中，并自动产生动画效果。,2.7.1 把文件导入到Flash中,要将文件导入到Flash中，首先选择菜单栏中的“文件导入导入到舞台”命令，然后在“导入”对话框中，从“文件类型”下拉列表框中选择一