《矢量图形》PPT课件.ppt

第2章 矢量图形,在Flash动画的制作过程中，会大量用到矢量图形，而Flash自身的矢量绘图功能很强大，可以方便、快捷地绘制出各种各样的图形。,2.1 与图形图像相关的几个基本概念,（位图）图像(Image):是由扫描仪、摄像机等输入设备捕捉实际的画面产生的数字图像，是由排列成网格的点组成，每个点称为一个“像素”。当每个点都足够小的时候，宏观看起来，一幅图像就非常清晰。比如：照片 （矢量）图形 (Graphics):是指由外部轮廓线条构成的矢量图。即由计算机绘制的直线、圆、矩形、曲线、图表等。,一、存储方式的区别： 图形存储的是画图的函数；图像存储的则是像素的位置信息和颜色信息以及灰度信息。 二、缩放的区别： 图形在进行缩放时不会失真，可以适应不同的分辨率；图像放大时会失真，可以看到整个图像是由很多像素组合而成的。,图2.1 位图图像放大后变模糊,图2.2 矢量图形放大后仍保持清晰,2.1.5 路径、笔触与填充,一个矢量图形有3个要素：路径、笔触和填充。,图2.3 矢量图形的构成要素,2.1.6 “绘图”与“上色”,在中文里常说到一个动词，叫“绘画”，而在英文中，单词“Draw”称为“绘图”，单词“Paint”称为“上色”，它们正好对应于“笔触”和“填充”这两个概念。也就是说，“笔触”是用某种绘图工具“绘制”出来的封闭或者不封闭的“线条”，而“填充”是在某个由“笔触”包围的区域中，进行“上色”操作的结果。,图2.4 绘制轮廓,图2.5 填充颜色,通常把绘图操作完成后的结果称为“笔触”，包括直线和曲线；把完成填充后的结果称为“填充区域”或“形”，即一个区域。 而线和形统称为“图形”。 在动手绘图之前，还必须了解笔触和填充，以及修改图形后对同一层中其他图形产生的影响。,2.2 “铅笔”工具与“线条”工具,有了上面这些基础，就可以正式开始学习在Flash中绘制图形了。 首先介绍两种简单工具的使用，它们分别是“铅笔”工具和“线条”工具。,2.2.1 用“铅笔”工具绘图,图2.6 选择“铅笔”工具,1“铅笔”工具的使用和“笔触颜色”的设置,图2.7 设置笔触颜色,图2.8 选择绘图模式,图2.9 绘制曲线,2自定义笔触颜色,图2.10 自定义颜色按钮,图2.11 设置自定义颜色,图2.12 “笔触颜色”面板的功能,3“铅笔”工具的绘图模式,图2.13 以“伸直”、“平滑”和“墨水”模式绘制线条,4设置笔触样式,图2.14 笔触样式列表,图2.15 不同笔触样式绘制的曲线,图2.16 自定义样式,5“铅笔”工具的其他属性,2.2.2 “线条”工具,“线条”工具与“铅笔”工具相同的一点是，它们都是笔触工具：不同之处在于“线条”工具用来绘制直线。 “线条”工具在工具栏中的位置如图2.17所示。,图2.17 选中“线条”工具,图2.18 绘制线段,线条”工具与“铅笔”工具的属性基本相同，只是“线条”工具不存在“绘图模式”选项，因为“线条”工具绘制出来的都是直线，也就不存在平滑的问题。,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.29 复制直线,图2.30 完成垂直直线的复制,图2.31 连接直线与四边形,图2.32 复制斜线,图2.33 对齐直线,图2.34 包装盒外轮廓,图2.35 顶部和侧面的轮廓,图2.36 绘制翻盖部分,图2.37 最终效果,2.3 “椭圆”工具与“矩形”工具,前面介绍的两种工具有一个共性，就是绘制出来的都是笔触，而没有填充。 本节介绍的“椭圆”工具与“矩形”工具可以绘制椭圆和矩形等形状，而且绘制出来的图形既有笔触，又有填充。,2.3.1 “椭圆”工具,顾名思义，“椭圆”工具是绘制椭圆的工具。 它与“线条”和“铅笔”工具一样，都是绘制基本图形的工具，其操作方法也基本类似。 不同的是，绘制椭圆时需要设置它的填充颜色。,要绘制椭圆，应先在工具栏中选中“椭圆”工具，如图2.38所示。 然后将鼠标指针移动到舞台中，按下鼠标并进行拖动，即可绘制出椭圆形状，如图2.39所示。,图2.38 “椭圆”工具,图2.39 绘制完成后的椭圆,图2.40 打开“填充色”面板,图2.41 选择填充色,在“填充色”面板的顶部有4个功能选项，从左往右依次是：显示当前所选颜色的参数值、设置填充颜色的不透明度、将填充颜色设置为无、自定义填充颜色。 它们与“笔触颜色”的功能是完全一致的，这里就不再细述了。,1设置渐变颜色,现在就来重点讲解填充色面板最下面的一排渐变颜色，通过这些预置的渐变颜色，可以使绘制出来的椭圆呈线性渐变或者放射状渐变等效果。具体操作如下。,图2.42 选择渐变颜色,图2.43 绘制渐变椭圆,图2.44 放射状渐变,图2.45 彩色线性渐变,渐变色在实际设计工作中是非常重要的，通过渐变颜色可以绘制出很多非常精致的效果。 在绘制椭圆时，可以分别设置椭圆的笔触颜色和填充颜色，也可以根据绘制图形时的具体要求，单独将笔触或者填充色设置为无。 如果希望绘制没有填充颜色或者笔触颜色的椭圆，只需单击颜色选择面板中右上角的 按钮就可以了。,图2.46 移动填充,2设置椭圆的属性,在工具栏中选中“椭圆”工具，然后在“属性”面板中观察“椭圆”工具的属性选项，除增加“填充色”选项外，其他选项与“线条”工具的属性一致，功能和用法都是相同的。,2.3.2 “矩形”工具,用“矩形”工具绘制图形的方法与“椭圆”工具类似，具体操作如下。 要绘制矩形，首先要在工具栏中选择“矩形”工具，如图2.47所示，然后在“颜色”区域中设置矩形的笔触颜色和填充颜色，完成后即可在舞台中绘制矩形。 如果同时按住键盘上的“Shift”键，就能绘制出正方形，如图2.48所示。,图2.47 选择“矩形”工具,图2.48 绘制正方形,1绘制圆角矩形,边角半径”的大小决定了所要绘制圆角矩形的圆角的弯曲度，数值越大，圆角越大，数值越小，圆角越小。,图2.49 “矩形设置”对话框,图2.50 绘制圆角矩形,图2.51 “边角半径设置”按钮,2笔触提示,“笔触提示”可在全像素下调整直线，防止出现模糊的垂直或水平线。,图2.52 笔触提示,图2.53 未使用“笔触提示”前,图2.54 使用“笔触提示”后,2.3.3 多边形和星形的绘制,要绘制多边形，首先要选择“多角星形”工具，该工具与“矩形”工具同在一个工具组中。将鼠标指针移动至“矩形”工具上，然后单击该工具并持续两秒钟，会弹出一个工具组，如图2.55所示，在“矩形”工具下方就是“多角星形”工具。,默认情况下，选择了“多角星形”工具后直接在舞台中绘制出来的多边形为正五边形，如图2.56所示。 该五边形的笔触颜色和填充颜色可以在绘制前进行设置，也可以绘制完成后在“多角星形”工具的“属性”面板中进行修改，它的属性项中除了“选项”功能外，其他属性项的功能与“矩形”工具的属性项功能相同。,图2.55 选择“多角星形”工具,图2.56 正五边形,图2.57 “多角星形”工具的“选项”属性,图2.58 “工具设置”对话框,图2.59 多边形和星形的效果,2.4 认识Flash的“绘制模式”,在进行深入讲解之前，先来做一个试验。 这样有时会给设计带来不便，因此Flash 8中提供了一个叫做“绘制模式”的选项，用来解决这个问题。,图2.60 绘制矩形,图2.61 移动椭圆,这样有时会给设计带来不便，因此Flash 8中提供了一个叫做“绘制模式”的选项，用来解决这个问题。 在工具栏中，选中“铅笔”、“线条”、“椭圆”和“矩形”工具以后，在“选项”区域都会出现“绘制模式”图标，如图2.62所示。,图2.62 选择“对象绘制”模式,在默认状态下，这个选项处于抬起状态，这时绘制的各个图形对象会互相影响，自动合并，因此这种模式称为“合并模式”；如果选中这个选项，就会进入“对象模式”，这时每次使用这些绘图工具绘制的图形都会成为一个独立的对象，这样对象之间就不会互相影响了。各个对象即使相互重叠，也不会“吃掉”其他对象，如图2.63所示。,图2.63 对象不会互相影响, 如图2.62所示，被圆圈标注的6个工具都具有“绘制模式”选项，除了上述4种介绍过的工具之外，还有“刷子”工具和“钢笔”工具，会在后面讲解。 当用“对象绘制”模式创建的图形被选中时，图形会出现一个蓝色矩形边框，而不是像在合并模式中那样，在被选中的对象上覆盖白色网点。, 绘制的图形，无论处于哪种绘制模式，只要被选中以后，都可以在“属性”面板中修改它的笔触和填充颜色等属性。 从Flash最早的版本到Flash MX 2004版，都只有“合并模式”。“对象绘制”模式是从Flash 8才加入的新功能。,2.5 贴紧至对象,前面已经介绍了4种绘图工具，但是还会遇到一个问题，即如何使绘制的图形更精确。 在画布上有一个如图2.64左图所示的矩形，要添加一条直线，使它的两端正好在矩形的左右两条边上，如图2.64右图所示。 这时就可以使用Flash的“贴紧至对象”功能了。 它的作用是使正在绘制的图形自动吸附到离它最近图像边缘。通过它可以对图像做很好的闭合处理，保证闭合区域内颜色的正常填充。,图2.64 加入一条直线,图2.65 打开“贴紧至对象”功能,图2.66 使用“贴紧至对象”功能,图2.67 应用“贴紧至对象”功能绘制的图形,2.6 “刷子”工具,刷子是绘图工具之一，它的绘制方式与“铅笔”工具相似，也是在拖动鼠标时，沿鼠标指针经过的路径产生形状，而它与“铅笔”工具不同的是，“刷子”工具产生的是填充，而不是笔触，如图2.68所示。,使用“刷子”工具绘制形状的操作方法是，首先在工具栏中选择“刷子”工具，如图2.69所示，然后在“属性”面板中选择填充颜色，接着像使用“铅笔”工具那样在舞台上拖动鼠标，就会产生图形了。,图2.68 “刷子”工具的工作效果,图2.69 选择“刷子”工具,2.6.1 涂色模式,涂色模式”的作用是确定使用“刷子”工具绘制的图形与原有图形的关系。 因此，它只有在“合并模式”下才能产生作用，也就是说，如果以“对象模式”绘制，这个选项就没有作用。, “标准绘画” “颜料填充” “后面绘画” “颜料选择” “内部绘画”,图2.73 后面绘画,图2.74 颜料选择,图2.75 内部绘画,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中，首先选择菜单栏中的“文件导入导入到舞台”命令，然后在“导入”对话框中，从“文件类型”下拉列表框中选择一种文件格式，找到所需的文件，选择它，并单击“打开”按钮，这时该文件就出现在舞台上了。,如果要导入的文件名称以数字结尾，并且在同一文件夹中还有其他按顺序编号的文件，会打开对话框，询问选择是否导入文件序列。 这时单击“是”按钮将导入所有的连续文件，单击“否”按钮则只导入指定的文件。,图2.81 导入的对象,图