矢量图形实用.pptx

2.1与图形图像相关的几个基本概念与图形图像相关的几个基本概念2.2“铅笔铅笔”工具与工具与“线条线条”工具工具2.3“椭圆椭圆”工具与工具与“矩形矩形”工具工具2.4认识认识FlashFlash的的“绘制模式绘制模式”2.5贴紧至对象贴紧至对象2.6“刷子刷子”工具工具2.7导导 入入 插插 图图小小 结结第1页/共119页 在FlashFlash动画的制作过程中，会大量用到矢量图形，而FlashFlash自身的矢量绘图功能很强大，可以方便、快捷地绘制出各种各样的图形。第2页/共119页2.12.1与图形图像相关的几个基本概念与图形图像相关的几个基本概念 （位图）图像(Image):(Image):是由扫描仪、摄像机等输入设备捕捉实际的画面产生的数字图像，是由排列成网格的点组成，每个点称为一个“像素”。当每个点都足够小的时候，宏观看起来，一幅图像就非常清晰。比如：照片 （矢量）图形 (Graphics):(Graphics):是指由外部轮廓线条构成的矢量图。即由计算机绘制的直线、圆、矩形、曲线、图表等。第3页/共119页一、存储方式的区别：图形存储的是画图的函数；图像存储的则是像素的位置信息和颜色信息以及灰度信息。二、缩放的区别：图形在进行缩放时不会失真，可以适应不同的分辨率；图像放大时会失真，可以看到整个图像是由很多像素组合而成的。第4页/共119页图图2.1 2.1 位图图像放大后变模糊位图图像放大后变模糊第5页/共119页图图2.2 2.2 矢量图形放大后仍保持清晰矢量图形放大后仍保持清晰第6页/共119页2.1.5路径、笔触与填充路径、笔触与填充一个矢量图形有3 3个要素：路径、笔触和填充。图图2.3 2.3 矢量图形的构成要素矢量图形的构成要素第7页/共119页2.22.2“铅笔铅笔”工具与工具与“线条线条”工具工具 有了上面这些基础，就可以正式开始学习在FlashFlash中绘制图形了。首先介绍两种简单工具的使用，它们分别是“铅笔”工具和“线条”工具。第12页/共119页2.2.1用用“铅笔铅笔”工具绘图工具绘图图图2.6 2.6 选择选择“铅笔铅笔”工具工具第13页/共119页1“铅笔铅笔”工具的使用和工具的使用和“笔触颜色笔触颜色”的的设置设置图图2.7 2.7 设置笔触颜色设置笔触颜色第14页/共119页图图2.8 2.8 选择绘图模式选择绘图模式 第15页/共119页图图2.9 2.9 绘制曲线绘制曲线第16页/共119页2自定义笔触颜色自定义笔触颜色图图2.10 2.10 自定义颜色按钮自定义颜色按钮第17页/共119页 图图2.11 2.11 设置自定义颜色设置自定义颜色 第18页/共119页图图2.12 “2.12 “笔触颜色笔触颜色”面板的功能面板的功能 第19页/共119页3“铅笔铅笔”工具的绘图模式工具的绘图模式图图2.13 2.13 以以“伸直伸直”、“平滑平滑”和和“墨水墨水”模式绘制线条模式绘制线条第20页/共119页4设置笔触样式设置笔触样式图图2.14 2.14 笔触样式列表笔触样式列表第21页/共119页图图2.15 2.15 不同笔触样式绘制的曲线不同笔触样式绘制的曲线第22页/共119页图图2.16 2.16 自定义样式自定义样式5“铅笔铅笔”工具的其他属性工具的其他属性第23页/共119页2.2.2“线条线条”工具工具 “线条”工具与“铅笔”工具相同的一点是，它们都是笔触工具：不同之处在于“线条”工具用来绘制直线。“线条”工具在工具栏中的位置如图2.172.17所示。第24页/共119页图图2.17 2.17 选中选中“线条线条”工具工具 第25页/共119页图图2.18 2.18 绘制线段绘制线段第26页/共119页 线条”工具与“铅笔”工具的属性基本相同，只是“线条”工具不存在“绘图模式”选项，因为“线条”工具绘制出来的都是直线，也就不存在平滑的问题。第27页/共119页2.2.3实践与练习：绘制包装盒（实践与练习：绘制包装盒（1）图图2.19 2.19 包装盒包装盒第28页/共119页 图图2.20 2.20 选择选择“线条线条”工具工具 第29页/共119页图图2.21 2.21 设置笔触颜色设置笔触颜色 第30页/共119页 图图2.22 2.22 绘制直线绘制直线 第31页/共119页 图图2.23 2.23 选择选择“选择选择”工具工具第32页/共119页 图图2.24 2.24 复制直线复制直线 第33页/共119页 图图2.25 2.25 两条直线的摆放位置两条直线的摆放位置 第34页/共119页图图2.26 2.26 启用启用“贴紧至对象贴紧至对象”功能功能 第35页/共119页 图图2.27 2.27 绘制连接线绘制连接线 第36页/共119页图图2.28 2.28 直线组成的四边形直线组成的四边形 第37页/共119页 图图2.29 2.29 复制直线复制直线 第38页/共119页 图图2.30 2.30 完成垂直直线的复制完成垂直直线的复制 第39页/共119页图图2.31 2.31 连接直线与四边形连接直线与四边形第40页/共119页图图2.32 2.32 复制斜线复制斜线 第41页/共119页 图图2.33 2.33 对齐直线对齐直线第42页/共119页图图2.34 2.34 包装盒外轮廓包装盒外轮廓 第43页/共119页图图2.35 2.35 顶部和侧面的轮廓顶部和侧面的轮廓第44页/共119页 图图2.36 2.36 绘制翻盖部分绘制翻盖部分 第45页/共119页 图图2.37 2.37 最终效果最终效果第46页/共119页2.32.3“椭圆椭圆”工具与工具与“矩形矩形”工具工具 前面介绍的两种工具有一个共性，就是绘制出来的都是笔触，而没有填充。本节介绍的“椭圆”工具与“矩形”工具可以绘制椭圆和矩形等形状，而且绘制出来的图形既有笔触，又有填充。第47页/共119页2.3.1“椭圆椭圆”工具工具 顾名思义，“椭圆”工具是绘制椭圆的工具。它与“线条”和“铅笔”工具一样，都是绘制基本图形的工具，其操作方法也基本类似。不同的是，绘制椭圆时需要设置它的填充颜色。第48页/共119页 要绘制椭圆，应先在工具栏中选中“椭圆”工具，如图2.382.38所示。然后将鼠标指针移动到舞台中，按下鼠标并进行拖动，即可绘制出椭圆形状，如图2.392.39所示。第49页/共119页 图图2.38 “2.38 “椭圆椭圆”工具工具 第50页/共119页图图2.39 2.39 绘制完成后的椭圆绘制完成后的椭圆第51页/共119页图图2.40 2.40 打开打开“填充色填充色”面板面板 第52页/共119页图图2.41 2.41 选择填充色选择填充色第53页/共119页 在“填充色”面板的顶部有4 4个功能选项，从左往右依次是：显示当前所选颜色的参数值、设置填充颜色的不透明度、将填充颜色设置为无、自定义填充颜色。它们与“笔触颜色”的功能是完全一致的，这里就不再细述了。第54页/共119页1设置渐变颜色设置渐变颜色 现在就来重点讲解填充色面板最下面的一排渐变颜色，通过这些预置的渐变颜色，可以使绘制出来的椭圆呈线性渐变或者放射状渐变等效果。具体操作如下。第55页/共119页 图图2.42 2.42 选择渐变颜色选择渐变颜色 第56页/共119页图图2.43 2.43 绘制渐变椭圆绘制渐变椭圆 第57页/共119页图图2.44 2.44 放射状渐变放射状渐变 第58页/共119页图图2.45 2.45 彩色线性渐变彩色线性渐变 第59页/共119页 渐变色在实际设计工作中是非常重要的，通过渐变颜色可以绘制出很多非常精致的效果。在绘制椭圆时，可以分别设置椭圆的笔触颜色和填充颜色，也可以根据绘制图形时的具体要求，单独将笔触或者填充色设置为无。如果希望绘制没有填充颜色或者笔触颜色的椭圆，只需单击颜色选择面板中右上角的 按钮就可以了。第60页/共119页图图2.46 2.46 移动填充移动填充第61页/共119页2设置椭圆的属性设置椭圆的属性 在工具栏中选中“椭圆”工具，然后在“属性”面板中观察“椭圆”工具的属性选项，除增加“填充色”选项外，其他选项与“线条”工具的属性一致，功能和用法都是相同的。第62页/共119页2.3.2“矩形矩形”工具工具 用“矩形”工具绘制图形的方法与“椭圆”工具类似，具体操作如下。要绘制矩形，首先要在工具栏中选择“矩形”工具，如图2.472.47所示，然后在“颜色”区域中设置矩形的笔触颜色和填充颜色，完成后即可在舞台中绘制矩形。如果同时按住键盘上的“ShiftShift”键，就能绘制出正方形，如图2.482.48所示。第63页/共119页 图图2.47 2.47 选择选择“矩形矩形”工具工具 第64页/共119页图图2.48 2.48 绘制正方形绘制正方形第65页/共119页1绘制圆角矩形绘制圆角矩形 边角半径”的大小决定了所要绘制圆角矩形的圆角的弯曲度，数值越大，圆角越大，数值越小，圆角越小。第66页/共119页图图2.49 “2.49 “矩形设置矩形设置”对话框对话框 第67页/共119页图图2.50 2.50 绘制圆角矩形绘制圆角矩形 第68页/共119页 图图2.51 “2.51 “边角半径设置边角半径设置”按钮按钮第69页/共119页2笔触提示笔触提示 “笔触提示”可在全像素下调整直线，防止出现模糊的垂直或水平线。第70页/共119页图图2.52 2.52 笔触提示笔触提示第71页/共119页 图图2.53 2.53 未使用未使用“笔触提示笔触提示”前前 第72页/共119页图图2.54 2.54 使用使用“笔触提示笔触提示”后后 第73页/共119页2.3.3多边形和星形的绘制多边形和星形的绘制 要绘制多边形，首先要选择“多角星形”工具，该工具与“矩形”工具同在一个工具组中。将鼠标指针移动至“矩形”工具上，然后单击该工具并持续两秒钟，会弹出一个工具组，如图2.552.55所示，在“矩形”工具下方就是“多角星形”工具。第74页/共119页 默认情况下，选择了“多角星形”工具后直接在舞台中绘制出来的多边形为正五边形，如图2.562.56所示。该五边形的笔触颜色和填充颜色可以在绘制前进行设置，也可以绘制完成后在“多角星形”工具的“属性”面板中进行修改，它的属性项中除了“选项”功能外，其他属性项的功能与“矩形”工具的属性项功能相同。第75页/共119页 图图2.55 2.55 选择选择“多角星形多角星形”工具工具 第76页/共119页图图2.56 2.56 正五边形正五边形第77页/共119页图图2.57 “2.57 “多角星形多角星形”工具的工具的“选项选项”属性属性第78页/共119页图图2.58 “2.58 “工具设置工具设置”对话框对话框 第79页/共119页 图图2.59 2.59 多边形和星形的效果多边形和星形的效果 第80页/共119页2.42.4认识认识FlashFlash的的“绘制模式绘制模式”在进行深入讲解之前，先来做一个试验。这样有时会给设计带来不便，因此Flash 8Flash 8中提供了一个叫做“绘制模式”的选项，用来解决这个问题。第81页/共119页图图2.60 2.60 绘制矩形绘制矩形 第82页/共119页图图2.61 2.61 移动椭圆移动椭圆 第83页/共119页 这样有时会给设计带来不便，因此Flash Flash 8 8中提供了一个叫做“绘制模式”的选项，用来解决这个问题。在工具栏中，选中“铅笔”、“线条”、“椭圆”和“矩形”工具以后，在“选项”区域都会出现“绘制模式”图标，如图2.622.62所示。第84页/共119页图图2.62 2.62 选择选择“对象绘制对象绘制”模式模式 第85页/共119页 在默认状态下，这个选项处于抬起状态，这时绘制的各个图形对象会互相影响，自动合并，因此这种模式称为“合并模式”；如果选中这个选项，就会进入“对象模式”，这时每次使用这些绘图工具绘制的图形都会成为一个独立的对象，这样对象之间就不会互相影响了。各个对象即使相互重叠，也不会“吃掉”其他对象，如图2.632.63所示。第86页/共119页图图2.63 2.63 对象不会互相影响对象不会互相影响第87页/共119页 如图2.622.62所示，被圆圈标注的6 6个工具都具有“绘制模式”选项，除了上述4 4种介绍过的工具之外，还有“刷子”工具和“钢笔”工具，会在后面讲解。当用“对象绘制”模式创建的图形被选中时，图形会出现一个蓝色矩形边框，而不是像在合并模式中那样，在被选中的对象上覆盖白色网点。第88页/共119页 绘制的图形，无论处于哪种绘制模式，只要被选中以后，都可以在“属性”面板中修改它的笔触和填充颜色等属性。从FlashFlash最早的版本到Flash MX 2004Flash MX 2004版，都只有“合并模式”。“对象绘制”模式是从Flash 8Flash 8才加入的新功能。第89页/共119页2.52.5贴紧至对象贴紧至对象 前面已经介绍了4 4种绘图工具，但是还会遇到一个问题，即如何使绘制的图形更精确。在画布上有一个如图2.642.64左图所示的矩形，要添加一条直线，使它的两端正好在矩形的左右两条边上，如图2.642.64右图所示。这时就可以使用FlashFlash的“贴紧至对象”功能了。它的作用是使正在绘制的图形自动吸附到离它最近图像边缘。通过它可以对图像做很好的闭合处理，保证闭合区域内颜色的正常填充。第90页/共119页 图图2.64 2.64 加入一条直线加入一条直线 第91页/共119页图图2.65 2.65 打开打开“贴紧至对象贴紧至对象”功能功能 第92页/共119页图图2.66 2.66 使用使用“贴紧至对象贴紧至对象”功能功能 第93页/共119页图图2.67 2.67 应用应用“贴紧至对象贴紧至对象”功能绘制的图形功能绘制的图形 第94页/共119页2.62.6“刷子刷子”工具工具 刷子是绘图工具之一，它的绘制方式与“铅笔”工具相似，也是在拖动鼠标时，沿鼠标指针经过的路径产生形状，而它与“铅笔”工具不同的是，“刷子”工具产生的是填充，而不是笔触，如图2.682.68所示。第95页/共119页 使用“刷子”工具绘制形状的操作方法是，首先在工具栏中选择“刷子”工具，如图2.692.69所示，然后在“属性”面板中选择填充颜色，接着像使用“铅笔”工具那样在舞台上拖动鼠标，就会产生图形了。第96页/共119页图图2.68 “2.68 “刷子刷子”工具的工作效果工具的工作效果 第97页/共119页 图图2.69 2.69 选择选择“刷子刷子”工具工具第98页/共119页2.6.1涂色模式涂色模式 涂色模式”的作用是确定使用“刷子”工具绘制的图形与原有图形的关系。因此，它只有在“合并模式”下才能产生作用，也就是说，如果以“对象模式”绘制，这个选项就没有作用。第99页/共119页 “标准绘画”“颜料填充”“后面绘画”“颜料选择”“内部绘画”第100页/共119页图图2.73 2.73 后面绘画后面绘画 第101页/共119页图图2.74 2.74 颜料选择颜料选择 第102页/共119页 图图2.75 2.75 内部绘画内部绘画 第103页/共119页2.6.2锁定填充锁定填充 图图2.76 2.76 锁定填充锁定填充 第104页/共119页 图图2.77 2.77 相互独立的颜色相互独立的颜色第105页/共119页图图2.78 2.78 锁定填充的效果锁定填充的效果第106页/共119页2.6.3其他选项其他选项图图2.79 2.79 选择刷子大小选择刷子大小 第107页/共119页图图2.80 2.80 选择刷子形状选择刷子形状第108页/共119页2.72.7导导 入入 插插 图图 如果在FlashFlash中，所有的图形都需要亲自绘制，那么制作效率和效果必定会受到很大的影响。因此，FlashFlash提供了导入插图的功能，也就是可以把各种格式的文件作为素材，导入到文档中，这样就可以直接利用这些素材了。第109页/共119页 这里说的插图包含3 3种类型：矢量图、位图和位图序列。矢量图：在专门的矢量图绘制工具软件（如FreehandFreehand、IllustratorIllustrator）中绘制的矢量图形，导入到FlashFlash中时，仍然可以保留矢量特性。第110页/共119页 位图：这里说的位图就是常见的JPGJPG、BMPBMP等格式的文件。位图序列：如果是文件名以数字结尾的一系列文件，可以自动导入到FlashFlash中，并自动产生动画效果。第111页/共119页2.7.1把文件导入到把文件导入到Flash中中 要将文件导入到FlashFlash中，首先选择菜单栏中的“文件导入导入到舞台”命令，然后在“导入”对话框中，从“文件类型”下拉列表框中选择一种文件格式，找到所需的文件，选择它，并单击“打开”按钮，这时该文件就出现在舞台上了。第112页/共119页 如果要导入的文件名称以数字结尾，并且在同一文件夹中还有其他按顺序编号的文件，会打开对话框，询问选择是否导入文件序列。这时单击“是”按钮将导入所有的连续文件，单击“否”按钮则只导入指定的文件。第113页/共119页图图2.81 2.81 导入的对象导入的对象 第114页/共119页图图2.82 2.82 在库中查看在库中查看第115页/共119页2.7.2设置导入的位图的属性设置导入的位图的属性 对导入的位图可以应用消除锯齿功能，平滑图像的边缘，也可以选择压缩选项以减小位图文件的大小。这里介绍一些设置位图属性的方法及其作用。第116页/共119页图图2.83 “2.83 “位图属性位图属性”对话框对话框第117页/共119页小小 结结 本章介绍了在FlashFlash中创建矢量形状的方法，要掌握的重点内容是图形和图像的相关概念。除此之外，还要掌握基本作图工具的使用，包括“铅笔”工具、“线条”工具、“椭圆”工具等，以及它们相关的属性设置。需要注意的是，FlashFlash的“绘制模式”选项按钮的作用，这是在Flash 8Flash 8中新增加的一项功能。第118页/共119页感谢您的观看！第119页/共119页