flash绘制矢量图形分析

Flash CS3 Flash绘制图形技巧在Flash中，使用绘图工具绘制的图形为矢量图形，它们主要由填充颜色的色块和有多个点构成的图形轮廓或曲线两部分组成。

矢量图形具有独立地分辨率，即使加倍地放大图形也不会降低图形的质量。

如图2-3所示。

轮廓线填充色块图2-3 创建的矢量图形在Flash中绘制图形，主要有两种方式：合并绘制图形和对象绘制图形。

通过这两种方式的绘图，为用户绘图图形提供了极大地灵活性。

下面我们就来介绍一下这两种绘图方式的区别。

合并绘制图形默认情况下，在Flash的同一图层上，重叠进行绘图、填充颜色，所绘图的图形对象会自动合并，以及对图形进行编辑，会影响到同一层的其他形状。

例如，绘图一个圆形，并在其上叠加一个较小的圆形，然后选择第二个圆形并进行移动，则会删除第一个圆形中与第二个圆形重叠的部分。

如图2-4所示。

图2-4 移动圆形后删除对象的效果使用该方式绘图图形时，可以将多个图形绘制成独立地对象，这些对象在叠加时不会自动合并，这样在分离或重新排列图形外观时，可以使图形重叠但不改变其外观；而且，Flash 可以对每个图形对象分别进行处理。

要使用这种绘图方式，需要在启用绘图工具之后，在工具箱的选项区中单击【对象绘制】按钮，同时，对于绘制的图形来讲，Flash 会在该图形周围添加矩形边框，如图2-5所示。

部分，那么重叠部分将具有后绘制图形的颜色，并且不再属于之前绘制图形对象。

绘图圆形移动圆形绘制对象移动对象图2-5 使用对象绘制方式创建的图形用户可以将“合并绘制”方式绘制的图形转化为“对象绘制”方式下的图形对象，即选择“合并绘制”方式创建的图形对象，然后执行【修改】|【合并对象】|【联合】命令，所选图形即可被转化。

转换后的形状，被视为基于矢量的绘制对象，与其他对象叠加时不会改变外观，如图2-6所示。

图2-6 转换图形对象后的效果在合并绘制图形方式下，当使用铅笔、钢笔、线条、椭圆、矩形或刷子工具，绘制一条与另一条直线或已涂色形状交叉的直线时，重叠直线会在交叉点处分成线段，此时可以使用选择工具分别选择、移动每条线段，并可以改变其形状，如图2-7所示。

Flash CS3的基本功能Flash之所以能占据网络多媒体的重要位置，最重要的一点，是因为它采用了矢量技术。

所以在Flash中既可以创建静态矢量文件，也可以创建动态矢量文件，并且还可以导入位图文件，对其进行编辑。

1．绘制矢量图形在Flash中创建的图形均为矢量图形，基于矢量的绘图同分辨率无关，这意味着它们可以按最高分辨率显示与输出，如图1-1所示。

图1-1 矢量图形放大效果如果在Flash中导入位图文件，那么既可以位图形式在Flash中使用，也可以将其转换为矢量图形使用，如图1-2所示。

图1-2 Flash 中的位图使用2．元件功能之所以说Flash 文件小，除了是基于矢量，还因为在Flash 中可以重复使用元件的关系。

将图像转换为元件后，在【库】面板中只有一个元件，但是可以重复拖入场景中使用，并且还可以进行任意缩放，如图1-3所示。

图1-3 元件的使用3．滤镜功能从Flash8开始添加了滤镜功能，该功能可以制作出许多意想不到位图 位图转换为矢元件显示重复使用的效果。

比如发光效果，如图1-4所示。

需要注意的是滤镜只能应用于文本、影片剪辑和按钮。

图1-4 发光效果4．动画功能动画是Flash 最基本、也是最主要的功能，在Flash 中可以制作逐帧动画、形状动画与补间动画，如图1-5所示为补间动画效果。

在【滤镜】面板中除了发光效果外，还包括【投影】角】等效果。

发光效果图1-5 动画效果在动画中还有一个特殊的动画，就是按钮。

按钮动画中只有4帧，分别为【弹起】、【指针经过】、【按下】与【点击】，每一帧都有其自身的功能，如图1-6所示。

图1-6 按钮动画中的各帧状态在按钮动画中，虽然只有要创建【弹起】。

flash矢量图形绘制学习指导h Flash 矢量图形绘制Flash 所绘制出来的是矢量图形，矢量图形是用线来勾勒形状，用色块来填充颜色。

这是和位图是有本质的区别的。

因此，当我们要进行绘图的时候，要从绘制线条入手，然后再进行色块的填充„„ 一、工具箱的使用工具作用及用法箭头工具用以选取舞台中的对象，当移近颜色块或线条时，可以拖曳鼠标使其变形。

部分选取使用该工具选取对象时，周围会出现调节点，移动这些调节点会使对象的部分变形。

套索工具该工具可以使用户方便的从导入到舞台上的某一图像中选取自己需要的部分内容，当然前提是必须把图像分解（可以使用“修改|分离”命令）线条工具选用“线条工具”按钮时，可以在舞台上通过拖曳鼠标画出直线条，当然也可以在选用该工具后，先在颜色下的笔触颜色中设置线条颜色后再绘制。

当按住 Shift 键后再拖曳鼠标可以画出辐射角为 45 度的直线。

铅笔工具铅笔工具能够让用户在舞台上画出自己想要的线条形状，在单击了该工具按钮后会在“选项”区域中出现一个“铅笔模式”按钮，单击该按钮后，可以选择 3 种不同的铅笔模式——“伸直”、“平滑”、“墨水” 钢笔工具使用该工具，能够方便的在舞台上通过各个点之间的直线连接绘制出任意的多边形。

椭圆工具用户可以使用该工具在舞台上绘制出 1 个椭圆形图形，当然可以在绘制图形前，现在颜色区域中选用笔触颜色和填充色设置椭圆形的边框颜色和内部填充颜色。

如果想要绘制出 1 个正圆，则可以按住 Shift 键再拖曳鼠标矩形工具用户可以使用该工具在舞台上绘制出 1 个矩形图形，当然可以在绘制图形前，现在颜色区域中选用笔触颜色和填充色设置椭圆形的边框颜色和内部填充颜色。

如果想要绘制出 1 个正方形，则可以按住 Shift 键再拖曳鼠标。

文本工具选中该工具后，可以在舞台上拖曳出 1 个文本区域，然后在该区域内输入文字符号。

笔刷工具笔刷工具的作用与铅笔工具类似任意变形在选中舞台上的对象后，使用该工具可以通过鼠标拖曳控制点来改变对象的大小形状填充变形可以使图形中的填充色部分变形。

课程名称：Flash软件应用授课章节：第三章Flash动画图形的设计授课课时：8课时授课内容：Flash中各种绘图工具的特点和应用授课内容：（一）绘制1. 关于绘制Adobe® Flash® CS4 Professional 中的绘画工具使您可以创建和修改文档中插图的形状。

在用Flash 进行绘画和涂色之前，很有必要先了解Flash 如何创建插图，以及绘画、涂色和修改形状操作如何能够影响同一图层上的其他形状。

（1）矢量图形和位图图形计算机以矢量或位图格式显示图形。

了解这两种格式的差别有助于您更有效地工作。

使用Flash 可以创建压缩矢量图形并将它们制作为动画。

Flash 还可以导入和处理在其它应用程序中创建的矢量图形和位图图形。

矢量图形矢量图形使用直线和曲线（称为矢量）描述图像，这些矢量还包括颜色和位置属性。

例如，树叶图像可以由创建树叶轮廓的线条所经过的点来描述。

树叶的颜色由轮廓的颜色和轮廓所包围区域的颜色决定。

矢量图形中的线条.在编辑矢量图形时，您可以修改描述图形形状的线条和曲线的属性。

可以对矢量图形进行移动、调整大小、改变形状以及更改颜色的操作而不更改其外观品质。

矢量图形与分辨率无关。

也就是，它们可以显示在各种分辨率的输出设备上，而丝毫不影响品质。

位图图形位图图形使用在网格内排列的称作像素的彩色点来描述图像。

例如，树叶的图像由网格中每个像素的特定位置和颜色值来描述，这是用非常类似于镶嵌的方式来创建图像。

位图图形中的像素.在编辑位图图形时，您修改的是像素，而不是直线和曲线。

位图图形跟分辨率有关，因为描述图像的数据是固定到特定尺寸的网格上的。

编辑位图图形可以更改它的外观品质。

特别是调整位图图形的大小会使图像的边缘出现锯齿，因为网格内的像素重新进行了分布。

在比图像本身的分辨率低的输出设备上显示位图图形时也会降低它的品质。

（2）路径在Flash 中绘制线条或形状时，将创建一个名为路径的线条。

第一章绘制矢量图形✧本章导读矢量图表是Flash动画中不可缺少的组成部分，在Flash动画中应用到的矢量图形一般通过两种方式获得，一种是通过导入已有的素材，另一种是利用Flash自带的绘图工具绘制所需的矢量图形。

本章就Flash中工具柆的常用绘图工具进行介绍，使读者掌握这些基本工具的使用方法，学会在Flash 中利用这些基本工具绘制所需的矢量图形。

✧本章要点1．【线条工具】的用法【线条工具】是Flash中最简单的工具。

现在我们就来画一条直线。

鼠标单击按钮，移动鼠标指针到舞台上，当鼠标变为“+”形状时，按住鼠标左键拖动，拖至适当的位置和长度后，释放鼠标，一条直线就画好了。

【线条工具】能画出许多风格各异的线条来。

打开【属性】面板，在其中，我们可以定义直线的颜色、粗细和样式，如图1-1-1所示。

图1-1-1 直线【属性】面板在图1-1-2所示的【属性】面板中，单击其中的按钮，会出现一个调色板对话框，同时光标变成滴管状。

用滴管直接拾取颜色或者在文本框里直接输入颜色的16进制数值。

颜色以#开头，如#99FF33，如图1-1-2所示。

图1-1-2 调色板现在来画出各种不同的直线。

单击【属性】面板中的【自定义】按钮，会弹出一个对话框，如图1-1-3所示。

图1-1-3 【笔触样式】对话框为了方便观察，我们把粗细定为3象素（pts），选择不同的线型和颜色，来看看我们画出的线条，如图1-1-4所示。

图1-1-4不同类型的线条试一试改变它的各项参数，会对你的绘图有很大帮助。

2．【铅笔工具】的用法【铅笔工具】的颜色、粗细、样式定义和【线条工具】一样，在它的附属选项里有三种模式，图1-1-5 铅笔工具选项1.伸直模式：在伸直模式下画的线条，它把线条转成接近形状的直线。

2.平滑模式：可以绘制平滑的曲线。

3.墨水模式：可以绘制任意而又不用修改的线条。

下面是三种模式所画的线条，如图1-1-6。

图1-1-6 三种模式画的线条【铅笔工具】的使用很简单，大家自己随意练习。

flash cs5 矢量图形结构
在使用Flash绘制矢量图形之前，首先应了解矢量图形的组成结构和绘制方法，让用户对Flash绘图具有初步的认识。

1．矢量笔触
在传统绘画领域，笔触是绘画运笔的痕迹，因此又被称作笔法。

笔触可表现绘画中角色、静物或场景的轮廓，并通过笔触线条的变化，反映绘画的风格与格调。

在计算机图形学领域，笔触是矢量图形结构的基础。

几乎所有的矢量图形都以矢量笔触作为图形内容与外部的分界线，可以展示各种线条，并以这些线条构成图像。

2．矢量填充
填充，是指在矢量笔触闭合的区域内填入的矢量色彩内容，也是构成矢量图形的重要组成部分。

为矢量笔触添加各种类型的填充之后，可构成各种精美的矢量图形。

例如，对之前展示的漫画人物进行填充，如下。

Flash绘精致矢量图——可爱的玉兔本教程中我们用Flash 8的绘图功能描绘一幅精致的矢量图像可爱的玉兔，步骤简单易操作，而且效果非常棒。

首先让我们先看一下制作完成之后的效果如图1所示：图1现在我们开始制作：第一步：创建虚拟灯光、绘制玉兔轮廓1）我们还是要通过虚拟灯光达到更加逼真的效果。

首先将Flash背景颜色设定为#FFFFFF，场景尺寸：300*300，然后建立一个图层，名为 light source ，在第5帧按F5创建关键帧，在绘图区的左上角用绘图工具绘制出一个虚拟的光源如图2所示：图22）在light source 下面建立一个图层，名称为 bunny ，然后用铅笔工具以及钢笔工具（线条颜色为#000000）画出玉兔的轮廓如图3所示：图3第二步：绘制玉兔的高光与阴影区根据灯光照射的角度，利用钢笔工具绘制出玉兔身上的高光区与阴影区。

在bunny层上的第2帧上按F6，用钢笔工具绘制，以鼻子，脖子，身体，耳朵为中心向边缘扩散绘制阴影区。

所图4所示：图4第三步：给玉兔上色根据玉兔身上的高光区与阴影区的分布，用填充工具上色。

在bunny层上的第3帧上按F6，用填充工具上色，所图5所示：图5色块颜色依次取值为：#F1E8E7、#EEE2DF、#DAC1BA、#C8A69B、#C8A69B、#C8A69B #8C5654；放射渐变1如图6所示：图6渐变中色块取值分别为：#DAC1BA #E6D7D0放射渐变2如图7所示：图7渐变中色块取值分别为：#8C5755 #CCA39D，在第4帧上按F6后，将此帧中所有的边框线删除。

到这一步，玉兔就已经出世了，但是它离无敌还差一步。

目中无神可不行，注重细节才能出精品。

第四步：增加细节我们在兔子的眼睛、鼻子、耳朵处加一点细节部分，让玉兔更加真实。

在第5帧上按F6后，在此帧上用钢笔工具，圆工具分别在眼睛和鼻子、耳朵绘制出相应的图形，并填充上颜色，眼光是白色，其余两部分的颜色值为#8C5654；完成效果如图8所示：图8我们的无敌玉兔诞生了！学好版面设计的小窍门1、版面设计中要有理由对齐2、版面设计中要做些精致的小零件3、版面设计中的色块运用，往往选取图形中的颜色4、版面设计中的统一、均衡、韵律5、版面设计中的视觉导向、视觉中心根据版面中的图形确定6、版面设计中要有隐形矩形框、隐形对齐线条7、版面设计中敢于留白，整个版面中要通风，利于让人行走。

矢量图-图形的绘制实际上我们在使用lineTO和curveTo指令的时候是可以不断的绘制出线条，当线条封闭成为一个封闭的形状的时候，实际上就等于已经绘制出来了几何图形。

比如说这段代码。

首先生成一个画布，然后把画布添加到显示场景中。

然后用g对画布的Graphics类做引用。

用beginFill开始填充颜色，endFill结束填充。

最终绘制成一个矩形。

我们再来看一个用直线绘制圆形的例子。

为了让直线绘制圆形，我们通过帧，每帧更新一点图形，实际上我们绘制的圆形是由直线段构成的。

我们来看具体的代码。

首先设置帧速frameRate为60，就是每秒钟更新60个画面。

然后我定义了2个变量Max_Angle和Min_Angle，设置最大角度360，最小角度0。

然后r是半径，100。

theta是不断变化的角度值，最小角度值赋给它。

定义了一个点p，Point是为了便于计算引入的一个概念，也是AS3当中的一个类。

Canvas是画布，把它的坐标设在（200,200）上。

接着用c来引用canvas的graphics类的属性，同时把canvas添加到显示列表中。

接着用了Ponit的polar这个方式来计算了Flash 坐标系到迪卡尔坐标系之间的转换，因为我们描述一个圆形的时候用迪卡尔坐标是比较方便的，我们只要知道角度，知道半径就可以描述出来了。

然后把绘制的起点移动到对应半径和角度的点p坐标上，绘制的粗细是5个像素。

然后在舞台中侦听Event.ENTER_FRAME事件，如果每进入一帧的时候运行一下draw 这个侦听函数。

接下来是draw的具体设置，draw是每帧都有执行的，每帧都会通过坐标转换，来转换出一个新的点，然后每次都向这个新的点画一条直线，然后不断递增theta，也就是当前角度值，通过角度不断变化更新坐标点。

然后来看theta的逻辑判断。

如果theta大于等于最大的角度就移除事件侦听器，停止绘画，否则如果最大角度减去最小角度大于等于360度，否则小于的话，就先画到圆心，然后一直画到起点。

Flash CS3 认识矢量图形与位图图像
矢量图是一种由图形所需的坐标、形状、颜色等几何与非几何数据集合组成的图形。

它不用大量的单个像素点建立图像，而是用数学方程、数字形式对画面进行描述。

由于矢量图的这种特性，所以矢量图占用空间很小，而且进行编辑修改较为方便。

矢量图的显示与实际的分辨率无关。

如果把图形放大，不仅不会出现任何失真或产生锯齿现象，而且可能看起来更清晰。

以线条定位为主的图形绘制，所以矢量图多用于印刷业。

位图也可称为点阵图，是由许多像素点组成的，它的像素点排列形状为矩形，对于每一个像素，都有其特定的坐标和颜色值。

由于位图存储的是像素点信息，因此分辨率高或色彩富有的点阵图就需要更大的存储空间。

对于一个位图来说，其像素总数是一定的，放大位图就是将一个个像素点放大，从现象上看就是分辨率变小了，因此，画面就显得比较粗糙。

图4-36所示分别为矢量图与位图放大后的效果。

图4-36 对比效果
所包含的像素点就越多，图像就越清晰。

此外，由于每幅位图生成后其像素点的总数和每个像素的性质已经确定，因此对位图进行编辑、修改时相对要困难一些。

位图放大效果
矢量图放
大效果。