第2章 绘图工具.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,Flash,第,2,章 绘图工具,高等教育出版社 高等教育电子音像出版社,第,2,章 绘图工具,认识绘图工具,1,绘制月亮,2,绘制花朵,3,复杂形态的绘制,4,2.1,认识绘图工具,认识工具面板中的基本绘图工具,2.1,认识绘图工具,认识工具面板中的基本绘图工具,“,选择工具,”,：用于选取操作对象。,“,部分选取工具,”,：用于显示绘制对象的路径或路径的锚点，并可对锚点进行选择、删除、移动和调节曲线弯曲率等操作。,“,任意变形工具,”,：转动和缩放对象。,“,套索工具,”,：利用“套索”可以在工作区选定一个不规则的区域。,2.1,认识绘图工具,认识工具面板中的基本绘图工具,“,钢笔工具,”,：绘制直线或平滑流畅的曲线（贝赛尔曲线）。,“,线条工具,”,：可以画出各种各样的线条。,“,铅笔工具,”,：可以画出线条、曲线及图形。,“,文本工具,”,：可以在工作区中输入文字。,2.1,认识绘图工具,认识工具面板中的基本绘图工具,“,椭圆工具,”,：可以画出椭圆或圆。,“,刷子工具,”,：和“铅笔工具”一样，不过笔触较大,。,“,Deco,工具,”,：是,Flash CS4,新增加的功能，主要包括,“,蔓藤式填充,”,、,“,网格填充,”,和,“,对称刷子,”,3,种绘制效果。,2.1,认识绘图工具,认识工具面板中的基本绘图工具,“,骨骼工具,”,：是,Flash CS4,新增加的功能，用于制作类似于图形链的刚性动画效果。,“,颜料桶工具,”,：修改各种填充色。,“,滴管工具,”,：修改颜料桶的填充色。,“,橡皮擦工具,”,：清除在工作区中画出的图形。,2.1,认识绘图工具,认识工具面板中的基本绘图工具,“,手形工具,”,：把工作区整体在屏幕上移动。,“,缩放工具,”,：把动画放大或缩小。,“,对象绘制工具,”,：用于选择绘制图形还是绘制对象。,“,贴紧至对象工具,”,：用于完成,“,吸附,”,功能。,2.2,绘制月亮,2.2.1,相关知识点,椭圆工具,基本椭圆工具,多角星形工具,笔触工具,颜料桶工具,对象绘制工具,2.2.2,案例解释,案例解析,要绘制弯弯的月亮，没有现成的绘图工具可以实现，但是在合并绘图模式下，当形状重叠时会自动进行合并和擦除，利用这个技巧，可以绘制出各种不同的形状。,2.2.2,案例解释,步骤：,(1),运行,Flash CS4,，选择,“,文件,”,|,“,新建,”,命令，在,“,新建文件,”,对话框的,“,常规,”,选项卡中选择,“,Flash,文档,(ActionScript3.0),”,选项，再单击,“,确定,”,按钮即可打开新文件。,(2),在属性面板中，单击,“,编辑,”,按钮，将舞台大小设置为,550,400,像素，通过,“,舞台,”,选项可以将舞台的颜色设置为蓝色（,#000099,）,。,2.2.2,案例解释,步骤：,(3),系统默认的绘图模式为合并绘图模式。选择,“,椭圆工具,”,，设置笔触颜色为空，填充颜色为白色。按住,Shift,键，在舞台上绘制出一个圆。,2.2.2,案例解释,步骤：,(4),单击,“,选择工具,”,，按下,Alt,键，拖动舞台上的圆，复制一个圆形。,(5),单击,Delete,键，删除后面的圆，月亮的矢量图绘制完毕。,2.2.3,技术点睛,1.,选择对象,在工具箱上单击,“,选择工具,”,按钮，在对象的外框上单击，即可选择对象的外边框；在对象的内部单击，即可选择内部形状；在对象上双击，即可选择整个对象；在对象外的空白舞台上单击，即可取消选择。,在工具箱上单击,“,选择工具,”,按钮，在对象外按住鼠标左键，由上至下拉出一矩形区域框住要选择的对象，即可选中该对象。,2.2.3,技术点睛,1.,选择对象,注意,：,如果要连续选择不同位置的曲线，只要按住,Shift,键不放，在要选择的曲线上单击鼠标左键即可。如果使用,“,选择工具,”,拖曳对象时，同时按下,Ctrl,或,Alt,键可以复制对象。,“,选择工具,”,还具有改变对象形状的功能。用箭头指向对象边框或对象角点时，鼠标箭头下面多了一个弧形，按住鼠标左键即可改变对象外形。,2.2.3,技术点睛,2.,绘制的模式：合并绘制和对象绘制,合并绘制：是,Flash,默认的绘制模式。在此模式下，绘图工具绘制出来的图形都是分离形状，这些形状重叠时会自动进行合并和擦除，如上述月亮的绘制。,对象绘制：在对象绘制模式下，用绘图工具绘制出来的图形是独立的对象，这些对象在叠加时不会相互影响。,2.2.3,技术点睛,3,.,“,基本椭圆工具,”,和,“,椭圆工具,”,用于绘制椭圆或圆形图案。,在,“,椭圆选项,”,中，设置开始角度、结束角度、内径等属性，可以得到如图所示的效果：,2.2.3,功能讲解,3.,“,基本椭圆工具,”,和,“,椭圆工具,”,“,基本椭圆工具,”,和,“,椭圆工具,”,的区别在于：,如果选择,“,基本椭圆工具,”,，绘制椭圆形状后，还可以修改相关属性。,如果选择,“,椭圆工具,”,，绘制椭圆形状前就必须设置相关属性。,2.3,绘制花朵,2.3.1,相关知识点,“,颜料桶工具,”,的使用,“,任意变形工具,”,的使用,“,渐变变形工具,”,的使用,“,线条工具,”,的使用,“,铅笔工具,”,的使用,2.3.2案例解析,步骤：,(1),运行,Flash CS4,，新建一个像素为,550,400,、背景为白色的舞台。,(2),绘制花瓣,选择,“,椭圆工具,”,，设置笔触颜色为空，填充颜色任意。按住鼠标不放，在舞台上绘制一个椭圆。,花朵通常包含了花瓣、花竿、叶子等部分，下面分步骤完成各部分的绘制。,2.3.2案例解析,步骤2),绘制花瓣,单击,“,选择工具,”,按钮，选择该椭圆，通过,“,窗口,”“,颜色,”,命令，打开颜色面板，设置类型为,“,线性,”,，选择左色标为橙色（,#ff3300,），右色标为黄色,(#ffff66),，得到线性渐变的填充效果。,选择,“,渐变变形工具,”,按钮，通过旋转填充将图形填充调整为如图所示的形状。,2.3.2案例解析,步骤：,(2),绘制花瓣,选择,“,任意变形工具,”,按钮，将线性渐变的中心点调整到花瓣的下端位置。,2.3.2案例解析,步骤：,(2),绘制花瓣,单击,“,窗口,”,|,“,变形,”,选项，调出变形面板，设置旋转角度为,30,度，再单击,“,重置选区和变形,”,按钮多次，得出如图所示的花瓣。,2.3.2案例解析,步骤：,(2),绘制花瓣,单击,“,选择工具,”,按钮，将所有花瓣全部选中，再选择,“,任意变形工具,”,按钮，将其进行缩放，这样一个花瓣就画好了。,(3),绘制花竿,单击,“,铅笔工具,”,按钮，在选项卡中选择,“,平滑,”,选项，设置笔触颜色为绿色，笔触大小为,2,，画一条线段，作为花竿。,用,“,选择工具,”,指向线段，当指针下方出现弧形时，可拖曳出弧线。,2.3.2案例解析,步骤：,(4)绘制绿叶,单击,“,椭圆工具,”,按钮，设置笔触颜色为绿色，填充颜色为绿色。按住鼠标不放，在舞台上绘制出一个椭圆。,单击,“,选择工具,”按钮，将鼠标移动到椭圆的右顶端，当鼠标后面跟了一个弧形时，将鼠标往外拉，拉的过程中同时按下,Ctrl,键，拉出来的角度比较尖锐。,再单击,“,选择工具,”,按钮调整叶子的两侧。,2.3.2案例解析,步骤：,(4)绘制绿叶,单击,“,直线工具,”,按钮，选择一种较为浅一点的绿色，绘制叶子的脉络，通过单击,“,选择工具,”,按钮调整脉络的弧度，这样一片叶子就绘制好了。,按住,Alt,键，拖动绿色，复制绿叶，然后单击,“,任意变形工具,”,按钮调整叶子的大小，最后将花朵与绿叶合成。,2.3.3,技术点睛,1.,颜料桶工具,“,颜料桶工具,”,可以为封闭区间填充颜色。,不封闭空隙：只有填充区域完全封闭时才能填充。,封闭小空隙：当填充区域存在小缺口时可以填充。,封闭中等空隙：当填充区域存在中等缺口时可以填充。,封闭大空隙：当填充区域存在大缺口时可以填充。,2.3.3,技术点睛,2.,渐变变形工具,“,渐变变形工具,”,是用来调整渐变颜色的渐变方向、对应色的填充位置和缩放渐变色色阶区域的长度的。渐变色的过渡方式有两种：线性和放射性。,使用,“,渐变变形工具,”,时，。单击需要调整的填充区域，可以看到调整外框有一个圆形手柄和一个方形手柄、渐变色中间也有一个小圆形手柄。调整外框的圆形手柄用来调整渐变方向，方形手柄用来调整渐变量。用鼠标拖曳位于渐变色中间的小圆形手柄，可以移动渐变中心位置。,2.33,技术点睛,3.,任意变形工具,“,任意变形工具,”,主要用于对图形进行缩放、旋转、倾斜、翻转和封套等操作，其对象既可以是矢量图，也可以是位图、文字等。,2.3.3,技术点睛,4.,变形面板,使用变形面板可以精确地对对象进行等比例缩放、旋转，还可以精确地控制对象倾斜度。功能同,“,任意变形工具,”,。除此之外，单击,“,变形,”,面板右下角的,“,重置选区和变形,”,按钮 可以起到复制矢量图的作用。,2.3.3,技术点睛,5.,铅笔工具,利用,Flash CS4,提供的,“,铅笔工具,”,，可以绘制出随意、变化灵活的线条或曲线。另外用户还可以对矢量线的宽度、线性、颜色进行调整。,2.3.3技术点睛,6.,线条工具,“,线条工具,”,是用来绘制直线的。选择,“,线条工具,”,，通过简单地拖曳鼠标即可沿鼠标拖动方向绘制直线。若按住,Shift,键并拖动鼠标，则可画出特殊角度的直线。在属性面板中可以设置直线的笔触颜色、笔触样式等属性。,2.3.4,举一反三,绘制树木,2.4,复杂形态的绘制,通过前面的案例已经介绍了图形创建工具的使用方法，利用,“,任意变形工具,”,可以把规则图形调整为自由形态。使用钢笔工具可以独立绘制精确的矢量线段和矢量图形，也可以编辑修改已创建的矢量对象。用钢笔工具非常适合绘制比较随意的图形。本案例通过汽车绘制，学习钢笔工具的使用方法。,2.4.1,要点导读,相关知识点,钢笔工具,认识锚点,增加和减少锚点,转换锚点工具,2.4.2,绘制汽车案例解释,步骤详解,：,(1),运行,Flash CS4,，新建像素为,550400,、颜色为白色的舞台。,(2),单击“椭圆工具”按钮，笔触颜色为黑色，填充颜色为灰色（,#949494,），画出车的轮子。,2.4.2,绘制汽车案例解释,步骤详解,：,(3),在时间轴面板上，单击,“,新建图层,”,按钮，新建图层,2,，绘制汽车外形。,(4),单击,“,钢笔工具,”,按钮，绘制三角图形，留意,3,个角上的锚点。,2.4.2,绘制汽车案例解释,步骤详解,：,(5),单击“钢笔工具”按键右下角的黑色小三角按钮，在弹出的选项菜单中选择“转换锚点工具”，拖动上方的锚点，绘制出图示的曲线效果。,(6),调节右侧的调节柄，进一步美化汽车的外形。,2.4.2,绘制汽车案例解释,步骤详解,：,(7),单击“钢笔工具”按钮，在路径上单击，增加一个新的锚点，单击“转换锚点工具”按钮，通过调节柄继续调整汽车外形，如图所示。,2.4.2,绘制汽车案例解释,步骤详解,：,(8),单击,“,油漆桶工具,”,按钮，选择填充颜色（,#EE1B41,）为汽车填充颜色。,(9),分别单击,“,椭圆工具,”,按钮、,“,直线工具,”,按钮以及,“,选择工具,”,按钮为汽车添加其他形状和线段，调整外形，并填入如图所示的颜色，完成小车的绘制。,2.4.3,绘制蝴蝶案例解析,步骤详解,：,单击“椭圆工具”按钮绘制椭圆。,单击“选择工具”按钮变换椭圆。,2.4.3,绘制蝴蝶案例解析,步骤详解,：,单击,“,直线工具,”按钮,绘制多条直线，通过单击,“,选择工具,”按钮,将直线变为曲线。,单击“颜料桶工具”,按钮,为蝴蝶填充喜欢的颜色。,2.4.3,绘制蝴蝶案例解析,步骤详解,：,单击“椭圆工具”按钮绘制椭圆，完成蝴蝶左上翅膀的绘制,新建图层，用同样的方法绘制蝴蝶左下翅膀，注意为了便于在后续课程中制作飞舞的蝴蝶，建议用不同的图层放置蝴蝶的不同部分。,2.4.3,绘制蝴蝶案例解析,步骤详解,：,新建图层，单击“椭圆工具”按钮绘制椭圆，单击“选择工具”按钮改变椭圆的形状，通过直线工具绘制身体横线，并通过单击“选择工具”按钮将直线变为弧线，在不同区域填充喜欢的颜色，完成蝴蝶身体的绘制。,2.4.3,绘制蝴蝶案例解析,步骤详解,：,新建图层，利用“椭圆工具”、“直线工具”、“指针工具”绘制蝴蝶的眼睛。,2.4.3,绘制蝴蝶案例解析,步骤详解,：,复制左侧蝴蝶翅膀，选择“修改”,|,“变形”,|,“水平翻转”命令，把右翅膀移动到合适的位置，完成蝴蝶的绘制。,2.4.4,绘制人物案例解析,步骤详解,：,选择“椭圆工具”绘制椭圆，填充脸部颜色（,#ff1ebd,）,利用“选择工具”变形椭圆为脸部形状。,新建图层，利用“直线工具”绘制直线，然后利用“指针工具”将直线变形为曲线，以绘制头发轮廓。,2.4.4,绘制人物案例解析,步骤详解,：,利用“颜料桶工具”，为头发填充颜色，填入不同的颜色增加层次感。,新建图层，分别单击“直线工具”、“椭圆工具”、“选择工具”按钮完成眉毛和眼睛的绘制。,2.4.4,绘制人物案例解析,步骤详解,：,新建图层，用“直线工具”、“椭圆工具”、“指针工具”完成鼻子和嘴巴的绘制。,新建图层，用“直线工具”、“指针工具”、“颜料桶工具”完成身体部分的绘制。,2.4.4,绘制人物案例解析,步骤详解,：,新建图层，用“直线工具”、“指针工具”完成手臂的绘制。,新建图层，用“直线工具”、“椭圆工具”完成脚的绘制。,24.5,技术点睛,1.,用,“,钢笔工具,”,绘制直线,使用,“,钢笔工具,”,可以绘制的最简单路径是直线，方法是通过单击钢笔工具创建两个锚点。继续单击可创建由转角点连接的直线段组成的路径。,2.4.5,技术点睛,2.,用,“,钢笔工具,”,绘制曲线,若要创建曲线，请在曲线改变方向的位置处添加锚点，并拖动构成曲线的方向线。方向线的长度和斜率决定了曲线的形状。,2.4.5,技术点睛,用,“,钢笔工具,”,绘制曲线步骤如下。,(1),单击,“,钢笔工具,”,按钮。,(2),将,“,钢笔工具,”,定位在曲线的起始点,A,，并按住鼠标左键。此时会出现第一个锚点，同时,“,钢笔工具,”,指针变为箭头。3),单击,B,点，拖动并设置要创建曲线段的斜率，然后松开鼠标左键。一般而言，将方向线向计划绘制的下一个锚点延长约,1/3,距离。然后可以调整方向线的一端或两端。,(4),单击,C,点，拖动并设置要创建曲线段的斜率，然后松开鼠标左键。,2.4.5,技术点睛,3.添加或删除锚点,添加锚点可更好地控制路径，也可以扩展开放路径。但是，最好不要添加不必要的点。点越少，路径越容易编辑、显示和打印。若要降低路径的复杂性，请删除不必要的点。,2.4.5,技术点睛,默认情况下，当将钢笔工具定位在选定路径上时，它会变为添加锚点工具，或者当将,“,钢笔工具,”,定位在锚点上时，它会变为删除锚点的工具。,若要添加锚点，可将指针定位到路径段上，然后单击。若要删除锚点，可将指针定位到锚点上，然后单击。,提示：不要使用,Delete,、,Backspac,”,，或者,“,编辑,”,|,“,剪切,”,或,“,编辑,”,|,“,清除,”,命令来删除锚点，这些键和命令会删除点以及与之相连的线段。,2.4.5,技术点睛,4.,调整路径上的锚点,在使用,“,钢笔工具,”,绘制曲线时，将创建平滑点（即连续的弯曲路径上的锚点）。在绘制直线段或连接到曲线段的直线时，将创建转角点（即在直线路径上或直线和曲线路径接合处的锚点）。,默认情况下，选定的平滑点显示为空心圆圈，选定的转角点显示为空心正方形。,若要将线条上的线段从直线段转换为曲线段，可将转角点转换为平滑点，也可以反过来操作。,2.4.5,技术点睛,动手做一做,2.4.5,技术点睛,5.,调整线段,若要更改线段的角度或长度，或者调整曲线段以更改曲线的斜率或方向，可调整直线段。,移动平滑点上的切线手柄时，可以调整该点两边的曲线。移动转角点上的切线手柄时，只能调整该点的切线手柄所在那一边的曲线。,2.4.5,技术点睛,5.,调整线段,若要调整直线段，可单击,“,部分选取工具,”,按钮，然后选择直线段。使用部分选取工具可以将线段上的锚点拖动到新位置。,若要调整曲线段，可单击,“,部分选取工具,”,按钮，然后拖动该线段。,注：单击路径时，,Flash,将显示锚点。使用部分选取工具调整线段会给路径添加一些点。,2.4.5,技术点睛,5.,调整线段,若要调整曲线上的点或切线手柄，可单击,“,部分选取工具,”,按钮，然后选择曲线段上的锚点。,若要调整锚点两边的曲线形状，请拖动该锚点，或者拖动切线手柄。若要将曲线限制为,45,0,的倍数，可按住,Shift,键并拖动。若要单独拖动每个切线手柄，可按住,Alt,键。,2.4.6,举一反三,绘制白云（详细步骤参看教材）,动手实做：绘制如图所示的白云。最终效果见资源光盘的,“,本书范例,第,2,章,完成文件,白云,.fla,”,文件。,