
第2章 使用绘图工具



Flash拥有强大的绘图功能,Flash 8升级到Flash CS3以后,对绘图功能做了很大的改动,可以创建和修改图形,绘制自由形状、规则的线条或路径,并且可以填充对象,还可以对导入的位图进行处理,从而使Flash具备了其他专业平面软件的绘图功能,可以使用户轻松绘制出精美的图形效果。
学习目的:
* 掌握矢量图和位图的基本知识
* 掌握基本绘图工具的使用方法
* 掌握任意变形工具的使用方法
* 掌握钢笔工具和部分选取工具的使用方法
* 掌握填充工具的使用方法
* 掌握橡皮擦工具的使用方法
* 掌握套索工具的使用方法
2.1 矢量图和位图
Flash CS3可以识别多种矢量图形和位图图像的文件格式,并对导入的位图图像进行各种处理。
通常来说,矢量图文件的容量比位图文件小,而且放大、缩小、旋转矢量图时,分辨率不会改变,图形不会出现锯齿边。如果将位图图像进行放大或缩小处理,原有的分辨率将会发生变化,图像会出现锯齿边。
2.1.1 矢量图
矢量图是使用一组线段、造型来描述一幅图像,并用数字和数学公式计算出图像的角度、位置、大小和形状等信息,并加以记录。矢量图适用于描述色彩简单和比较精细的图形,如图2-1所示。

图2-1 矢量图
2.1.2 位图
在Flash中,位图图像被划分成许多栅格,栅格的每一点就是图像的像素,栅格划分得越密,图像的显示质量就越好。位图比较适合表现自然真实、色彩丰富的图像,如图2-2所示。

图2-2 位图图像
2.2 基本绘图工具的使用
Flash CS3的工具箱主要由3部分组成:“工具”、“查看”和“颜色”,如图2-3所示。
在默认状态下,工具箱位于操作界面的左侧,工具箱中放置了各种工具,主要用于图形和文字处理。利用这些工具可以绘图、选取、移动、修改、编辑文字、喷涂,还可以改变工作区的查看方式。

图2-3 Flash CS3工具箱
2.2.1 使用线条工具
使用“工具箱”中的“线条工具”可以绘制直线。单击“工具箱”中的“线条工具”按钮
,在场景中拖动鼠标,此时随鼠标的移动就会绘制一条直线,释放鼠标即可完成直线的绘制,绘制后的直线的“笔触颜色”和“笔触高度”是系统的默认值。
在“属性”面板中会出现相应的属性设置选项,如图2-4所示。

图2-4 选择直线样式
1.设置直线样式
单击“工具箱”中的“线条工具”按钮,在“线条工具”的“属性”面板中单击“笔触样式”下拉列表框,可以选择需要的直线样式,如图2-4所示。还可以单击右侧的“自定义”按钮,打开“笔触样式”对话框进行笔触设置,选中“4倍缩放”复选框,将以4倍大小显示自定义的样式;在“粗细”下拉列表框中可以设置自定义样式的宽度;选中“锐化转角”复选框可以锐化转角。如图2-5所示。

图2-5 设置直线参数
单击“类型”右侧的下三角按钮,在弹出的下拉列表中会显示几种不同的类型,如“实线”、“点状线”、“锯齿状”等。该类型的设置参数如图2-5所示。
2.设置直线宽度
在Flash中的默认情况下,“笔触高度”为1像素,在场景中绘制出来的直线就是1像素的直线。如果要修改直线的宽度,先选择在场景中绘制的直线,可以通过“属性”面板上的“笔触高度”选项来进行设置。单击“笔触高度”右侧的下三角按钮,会弹出一个滑杆,拖动滑杆的滑块时,在文本框内会相应地显示当前滑块位置的数值,如图2-6所示。

图2-6 设置直线宽度
设置线条的“笔触高度”不同,线条的样式也就不同,场景中的线条效果如图2-7所示。

图2-7 线条效果
3.设置直线颜色
在Flash中,有以下两种设置直线颜色的方法。
第一种是单击“工具箱”中的“笔触颜色”按钮,在“颜色”面板中选择颜色,该颜色的值就会显示在该面板左上方的预览窗口中,如图2-8所示。在选择的颜色上面单击鼠标左键,就可以将该颜色设置为线条的颜色,在场景中绘制线条,线条最后效果如图2-9所示。

图2-8 设置线条颜色

图2-9 场景中线条的效果
第二种是先选择在场景中绘制的直线,利用“属性”面板来设置直线的颜色。单击“工具箱”中的“线条工具”按钮,这时就会在“属性”面板中出现关于线条“属性”设置的选项,单击“属性”面板上的“笔触颜色”按钮
,打开“颜色”面板,如图2-10 所示。在“颜色”面板上选择一种颜色,在场景中绘制线条。

图2-10 “属性”设置选项
4.设置直线的笔触样式
在Flash中有多种“笔触”样式进行选择,可以直接在“属性”面板上设置“笔触样式”,共有极细、实线、虚线、点状线、锯齿线、点描、斑马线这6种样式,如图2-11所示。也可以单击“笔触样式”选项后面的“自定义”按钮,这时会弹出“笔触样式”对话框,可以设置“笔触”的类型及其他参数,如图2-12所示。

图2-11 设置“笔触样式”

图2-12 “笔触样式”对话框
在选择实线样式时,没有相关的参数设置,如图2-13所示。

图2-13 选择“实线”选项
在选择虚线样式时,可以在“笔触样式”对话框中对“虚线”的参数进行设置,如图2-14所示。

图2-14 设置“虚线”参数
在选择“点状线”类型时,可以设置“点状线”的点距,如图2-15所示。

图2-15 设置“点状线”参数
在选择“锯齿状”类型时,可以设置“锯齿状”的“图案”、“波高”及“波长”,如图2-16所示。

图2-16 设置“锯齿状”参数
在选择“点描”类型时,可以设置“点大小”、“点变化”、“密度”,如图2-17所示。

图2-17 设置“点描”参数
在选择“斑马线”类型时,可以设置“粗细”、“间隔”、“微动”、“旋转”、“曲线”、“长度”,如图2-18所示。

图2-18 设置“斑马线”参数
Tips
按住【Shift】键的同时使用“线条工具”,可以在场景中绘制水平、垂直和45°角的直线。
5.设置直线的端点
在“属性”面板上可以设置直线两个端点的样式,共有“无”、“圆角”、“方型”3种样式,如图2-19所示,分别运用这3种样式绘制直线,最后效果如图2-20所示。

图2-19 设置直线端点的样式

图2-20 直线效果
6.设置直线的接合
在“属性”面板上还可以设置两条直线的接合方式,共有“尖角”、“圆角”、“斜角”3种接合方式,如图2-21 所示,分别运用这3种接合方式绘制直线,最后效果如图2-22 所示。

图2-21 设置两条直线的接合样式

图2-22 接合效果
2.2.2 使用铅笔工具
在Flash CS3中,“铅笔工具”用于随意性的创作,可以随意地画出各种线条和形状。单击“工具箱”中的“铅笔工具”按钮,在“属性”面板上可以设置“笔触”的“笔触颜色”、“笔触高度”和“笔触样式”等,如图2-23所示。

图2-23 设置“铅笔工具”属性
Flash默认的笔触样式为“实线”,也可以选择其他的笔触样式,这些笔触样式包括极细、虚线、点状线、锯齿线、点描和斑马线,如图2-24所示。
Tips
在“笔触样式”对话框中“粗细”用于指定“笔触”的粗细。如果希望绘制的线条在拐角处进行锐化(使角变得更尖),可以选中“锐化转角”复选框。在“类型”下拉列表框中显示的就是此刻选择的笔触风格,其下的各选项是该笔触风格的一些相关参数。例如,对于“锯齿状”风格来说,它有“图案”、“波高”、“波长”3个参数。通过对这些参数进行设置,可以产生不同效果。位于对话框左上方的窗口中显示的是当前“笔触”设置的预览效果,最后单击【确定】按钮,如图2-25所示。

图2-24 设置“笔触”样式

图2-25 “笔触样式”对话框
单击“工具箱”中的“铅笔工具”按钮,在场景中拖动鼠标即可完成线条的绘制。单击“工具箱”中的“铅笔工具”后,在“工具箱”的底部就会出现铅笔的设置选项,这是“铅笔工具”所独有的。单击“铅笔模式”按钮
,在按钮的下方会弹出3 个选项:“直线化”、“平滑”和“墨水”,如图2-26所示,在各种状态下所绘制的图形效果如图2-27所示。

图2-26 弹出“铅笔选项”
Tips
直线化:这是Flash的默认模式,当在这种模式下绘图时,Flash会把绘制的线条变得更直一些,一些本来是曲线的线条可能会变成直线。
平滑:当在这种模式下绘图时,线条会变得更加柔和。
墨水:当在这种模式下绘图时,绘制后没有变化。

图2-27 绘制的图形效果
Tips
要绘制笔直的横线和竖线,按住【Shift】键拖动鼠标即可。
2.2.3 使用钢笔工具
“钢笔工具”用于手绘路径,可以创建直线或曲线段,然后调整直线的角度、长度及曲线的斜率,是比较灵活的形状渐变创建工具。
使用“钢笔工具”绘制直线段,应该先创建“锚点”,也就是线条上每条线段长度的点。
具体步骤如下:
01 单击“工具箱”中的“钢笔工具”按钮,在场景中的任意一个位置单击鼠标左键。单击鼠标左键后会在场景中出现一个“锚点”,此时,钢笔尖变成一个箭头状。如图2-28所示。在场景中另选一点单击鼠标左键并拖动鼠标,此时将会出现曲线的切线手柄,场景效果如图2-29所示。

图2-28 箭头状鼠标

图2-29 场景效果
02 释放鼠标,曲线段的形状决定于切线手柄的长度。按住【Alt】键,当鼠标变成形状时,即可移动切线手柄来调整曲线,场景效果如图2-30 所示。在场景中再选一点,单击鼠标左键,向相反的方向拖动鼠标来完成曲线段的绘制,场景效果如图2-31所示。

图2-30 场景效果

图2-31 场景效果
使用“钢笔工具”绘制曲线,可以创建很多曲线点,这就是Flash中的“锚点”。在绘制直线段或连接到曲线段时,会创建转角点,即在直线路径上或直线和曲线路径接合处的“锚点”。在一般情况下,被选定的曲线点会显示为空心圆圈,被选定的转角点会显示为空心正方形。
要将线条中的线段由直线段转换为曲线段,可以选择“部分选取工具”选择该点,同时按住【Alt】键拖动该点来调整切线手柄,将转角点转换为曲线点,转换过程如图2-32所示。

图2-32 将转角点转换为曲线点过程
单击“工具箱”中的“部分选取工具”移动路径上的“锚点”,可以调整曲线段的长度或角度,如图2-33 所示。还可以使用“部分选取工具”选择“锚点”,并用键盘上的方向键对“锚点”进行调整。

图2-33 调整过程
使用“钢笔工具”在线段上的任意一点单击鼠标左键可以添加“锚点”,如图2-34所示。

图2-34 添加“锚点”
删除“锚点”有很多方法,如单击“工具箱”中的“删除锚点工具”按钮,在将要删除的“锚点”上单击鼠标左键就可删除此“锚点”,如图2-35所示。或者单击“工具箱”中的“部分选取工具”按钮
选择将要删除的“锚点”,并按【Delete】键,将该“锚点”删除。

图2-35 删除“锚点”
Tips
删除曲线路径上不必要的“锚点”,可以优化曲线并减小Flash文件的体积。
可以在“首选参数”对话框中设置“钢笔工具”的指针外观,在绘制线段的过程中能够进行预览,这样就可以绘制出不同形状的线段。选定线段和“锚点”是以出现这些线条和点的轮廓颜色来显示的,具体步骤如下:
单击“工具箱”中的“钢笔工具”按钮,执行【编辑】→【首选参数】菜单命令,在弹出的对话框中单击“绘画”选项卡,如图2-36所示。
在该选项卡上可以设置以下选项:
(1)显示钢笔预览:可以在绘制线段时直接预览线段。在单击已创建线段的终点之前,在场景中移动指针时,在Flash中就会显示出线段预览,效果预览如图2-37所示。

图2-36 “首选参数”对话框
Tips
如果未选择该选项,则在创建线段终点之前Flash CS3不会显示线段预览。

图2-37 效果预览
(2)显示实心点:选定用“钢笔工具”绘制的线段的锚点,被选定的锚点将显示为空心点,没有被选定的锚点将显示为实心点,效果预览如图2-38所示。

图2-38 效果预览
Tips
如果未选择此选项,则被选定的锚点为实心点,而没有被选定的“锚点”为空心点。
(3)显示精确光标:选择此项后指针将会以十字形的形式出现,如图2-39所示。而不是以默认的“钢笔工具”图标的形式出现,这样可以提高线条的定位精度,预览效果如图2-40所示。

图2-39 指定指针形状

图2-40 预览效果
2.2.4 使用刷子工具
使用“刷子工具”绘制出来的是填充区域,在默认状态下没有边框线,可以使用单色、渐变色进行填充,还可以将导入的位图图像填充颜色,“刷子工具”的具体操作方法如下:
单击“工具箱”中的“刷子工具”,在“属性”面板中设置填充颜色,在“工具箱”中的选项区域有5个选项设置,如图2-41所示。单击“刷子模式”按钮
,弹出下拉菜单,如图2-42所示。

图2-41 “刷子工具”的选项

图2-42 “刷子模式”菜单
在Flash CS3中共有5种不同的刷子模式,在场景中使用“刷子工具”的效果预览如图2-43所示。

图2-43 效果预览
● 标准绘画:可对同一层的线条和填充涂色。
● 颜料填充:对填充区域和空白区域涂色,不影响线条。
● 后面绘画:在舞台上同一层的空白区域涂色,不影响线条和填充。
● 颜料选择:当用户使用工具箱的填充选项或“属性”面板中的填充选项选择填充色时,“颜料选择”会将新的填充应用到区域中,类似于选择一个填充区域并应用新填充。
● 内部绘画:对开始时“刷子笔触”所在的填充区域进行涂色,但不对线条涂色,也不允许在线条外面涂色。如果在空白区域中开始涂色,该填充不会影响任何现有的填充区域。
在工具箱中的“选项”区域中单击“刷子大小”按钮,弹出下拉菜单,如图2-44 所示,在弹出的菜单中可以选择刷子的大小。
在工具箱中的“选项”区域中单击“刷子形状”按钮,弹出下拉菜单,如图2-45 所示,在弹出的菜单中可以选择刷子的形状。

图2-44 设置“刷子”的大小

图2-45 设置“刷子”的形状
2.2.5 实训:绘制雪人
实例目的
通过如图2-46 所示的效果图,了解“钢笔工具”在实例中的应用。
实例要点
■ 使用【导入】命令,导入外部素材
■ 使用“椭圆工具”绘制图形的主体

图2-46 效果图
■ 使用“钢笔工具”绘制不规则图形
操作步骤
执行【文件】→【新建】命令,新建一个Flash
01 文档,如图2-47所示。单击“属性”面板上的“文档属性”按钮,在弹出的“文档属性”对话框中设置“尺寸”为400 像素×400像素,其他设置为默认,如图2-48所示。

图2-47 新建Flash文档

图2-48 设置“文档属性”对话框
02 执行【文件】→【导入】→【导入到舞台】菜单命令,将图像“CD\源文件\第2章\素材\225.jpg”导入到场景中,如图2-49 所示。单击“时间轴”面板上的“插入图层”按钮,新建“图层2”。单击“工具箱”中的“椭圆工具”按钮
,设置“属性”面板上“笔触颜色”值为#0080C0,“笔触高度”值为4,“填充颜色”值为#FFFFFF,在场景中绘制一个椭圆,如图2-50所示。

图2-49 导入图像

图2-50 绘制椭圆
03 单击“工具箱”中的“选择工具”按钮,调整刚刚绘制的椭圆,完成的图形效果如图2-51 所示。单击“时间轴”面板上的“插入图层”按钮,新建“图层3”,根据前面的方法,绘制该图层的图形,如图2-52所示。

图2-51 图形效果

图2-52 图形效果
04 单击“时间轴”面板上的“插入图层”按钮,新建“图层4”,单击“工具箱”中的“椭圆工具”按钮
,设置“属性”面板上“填充颜色”值为#0080C0,在场景中绘制两个椭圆,如图2-53 所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层5”,单击“工具箱”中的“椭圆工具”按钮
,设置“属性”面板上“笔触颜色”值为#BA0040,“笔触高度”值为2,“填充颜色”值为#FF3F38,在场景中绘制椭圆,如图2-54所示。

图2-53 绘制椭圆

图2-54 绘制椭圆
05 单击“时间轴”面板上的“插入图层”按钮,新建“图层6”,单击“工具箱”中的“椭圆工具”按钮
,设置“属性”面板上“填充颜色”值为#FFFFFF,在场景中绘制椭圆,如图2-55 所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层7”,单击“工具箱”中的“钢笔工具”按钮
,在场景中绘制路径,选择刚刚绘制的路径,单击“工具箱”中的“颜料桶工具”按钮
,设置“属性”面板上“填充颜色”值为#BA0040,在路径中单击鼠标左键,填充颜色,并将该路径删除,如图2-56所示。

图2-55 绘制椭圆

图2-56 绘制路径
06 单击“时间轴”面板上的“插入图层”按钮,新建“图层8”,单击“工具箱”中的“铅笔工具”按钮
,设置“笔触颜色”值为#0080C0,“笔触高度”值为2,在场景中绘制图形,如图2-57 所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层9”,单击“工具箱”中的“钢笔工具”按钮
,设置“笔触颜色”值为#CA6518,“笔触高度”值为2,在场景中绘制路径,如图2-58所示。

图2-57 绘制图形

图2-58 绘制路径
07 单击“工具箱”中的“颜料桶工具”按钮,设置“属性”面板上“填充颜色”值为#FFC740,在路径中单击鼠标左键,填充颜色,如图2-59 所示。单击“时间轴”面板上的“插入图层”按钮
。新建“图层10”,单击“工具箱”中的“铅笔工具”按钮
,设置“笔触颜色”值为#CA6518,“笔触高度”值为2,在场景中绘制图形,如图2-60所示。

图2-59 填充颜色

图2-60 绘制图形
08 单击“时间轴”面板上的“插入图层”按钮,新建“图层11”,单击“工具箱”中的“钢笔工具”按钮
,设置“笔触颜色”值为#CA6518,“笔触高度”值为2,在场景中绘制路径,如图2-61所示。单击“工具箱”中的“颜料桶工具”按钮
,设置“属性”面板上“填充颜色”值为#FFC740,在路径中单击鼠标左键,填充颜色,如图2-62所示。

图2-61 绘制路径

图2-62 填充颜色
09 在“时间轴”面板上将“图层11”拖到“图层9”下面,如图2-63所示,图形效果如图2-64所示。

图2-63 “时间轴”面板

图2-64 图形效果
10 选择“图层10”,单击“时间轴”面板上的“插入图层”按钮,新建“图层12”,单击“工具箱”中的“钢笔工具”按钮
,设置“笔触颜色”值为#820000,“笔触高度”值为2,在场景中绘制路径,如图2-65 所示。单击“工具箱”中的“颜料桶工具”按钮
,设置“属性”面板上“填充颜色”值为#FF0000,在路径中单击鼠标左键,填充颜色,如图2-66所示。

图2-65 绘制路径

图2-66 填充颜色
11 单击“时间轴”面板上的“插入图层”按钮,新建“图层13”,单击“工具箱”中的“钢笔工具”按钮
,设置“笔触颜色”值为#820000,“笔触高度”值为2,在场景中绘制路径,如图2-67所示。单击“工具箱”中的“颜料桶工具”按钮
,设置“属性”面板上“填充颜色”值为#FFFFFF,在路径中单击鼠标左键,填充颜色,如图2-68所示。

图2-67 绘制路径

图2-68 填充颜色
12 单击“时间轴”面板上的“插入图层”按钮,新建“图层14”,单击“工具箱”中的“椭圆工具”按钮
,设置“属性”面板上“笔触颜色”值为#820000,“笔触高度”值为2,“填充颜色”值为#FFFFFF,在场景中绘制一个椭圆,如图2-69 所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层15”,单击“工具箱”中的“椭圆工具”按钮
,设置“属性”面板上“笔触颜色”为无,“填充颜色”值为#000000,Alpha值为20%,在场景中绘制一个椭圆,如图2-70所示。

图2-69 绘制路径

图2-70 填充颜色
13 在“时间轴”面板上将“图层15”拖到“图层2”下面,如图2-71所示,图形效果如图2-72所示。

图2-71 “时间轴”面板

图2-72 图形效果
14 执行【文件】→【保存】命令,将动画保存为“CD\源文件\第2 章\2-2-5.fla”,按【Ctrl+Enter】组合键测试影片,预览效果如图2-73所示。

图2-73 预览效果
2.3 改变线条和形状轮廓
使用“工具箱”中的“选择工具”、“钢笔工具”和“部分选取工具”都可以对线条进行变形操作,改变线条的形状。使用“工具箱”中的“橡皮擦工具”还可以对图形的填充和轮廓进行操作。使用“工具箱”中的“任意变形工具”还可以对图形进行变形操作。
2.3.1 使用“选择工具”改变形状
使用“选择工具”可以改变线条的形状,线条变形的具体操作方法如下:
01 单击“工具箱”中的“线条工具”按钮,在场景中绘制直线,如图2-74 所示。单击“工具箱”中的“选择工具”按钮
,将鼠标指针移动到线条的边缘,如图2-75 所示。按住鼠标左键进行拖动,即可改变直线的弧度,释放鼠标左键后,直线变成曲线,如图2-76所示。

图2-74 绘制直线

图2-75 移动鼠标指针到线条的边缘

图2-76 直线变成曲线
02 当“选择工具”被放置在曲线的末端或是一些棱角的地方时,箭头的下方会出现一个折角,如图2-77 所示,这时可以拖动这个点移动,如图2-78 所示。释放鼠标时,效果如图2-79所示。

图2-77 曲线出现折角

图2-78 移动曲线尾端点

图2-79 曲线完成效果
03 当“选择工具”被放置在直线的末端或是一些棱角的地方时,箭头的下方会出现一个折角,如图2-80所示,这时可以拖动这个点移动,如图2-81所示。释放鼠标时,效果如图2-82所示。

图2-80 直线出现折角

图2-81 移动直线尾端点

图2-82 直线完成效果
2.3.2 优化曲线
优化曲线功能可以通过修改曲线和填充轮廓,减少曲线数量来平滑曲线。优化曲线会缩小文档和导出的Flash应用程序的大小,还可以对相同元素进行多次优化。
优化曲线操作步骤如下:
01 单击“工具箱”中的“铅笔工具”按钮,在场景中绘制一条曲线,如图2-83所示。选择刚刚绘制的曲线,执行【修改】→【形状】→【优化】菜单命令,弹出“最优化曲线”对话框,如图2-84所示。
02 拖动“最优化曲线”对话框中的“平滑”滑块,指定平滑程度,结果取决于所选曲线。优化可以减少曲线数量,但会与原始曲线略有不同。

图2-83 绘制曲线

图2-84 “最优化曲线”对话框
03 选中“使用多重过渡(较慢)”复选框,可以重复进行平滑处理直到不能进一步优化为止。选中“显示总计消息”复选框,可以在平滑操作完成时,指示优化程度。单击【确定】按钮,弹出“Adobe Flash CS3”提示对话框,如图2-85 所示,单击【确定】按钮。优化曲线后的效果如图2-86所示。

图2-85 “Adobe Flash CS3”提示对话框

图2-86 优化曲线后的效果
2.3.3 使用“橡皮擦工具”擦除
使用“橡皮擦工具”可以快速擦除舞台上的任何内容,如擦除个别笔触线段或填充区域,或者通过拖动鼠标进行擦除。选择“橡皮擦工具”后,将鼠标移动到场景中需要擦除的地方,单击并拖动鼠标,这样就可以擦除多余部分的内容。
1.使用“橡皮擦模式”
“橡皮擦工具”和“刷子工具”
类似,橡皮擦工具也有5种擦除模式,分别介绍如下:
● 标准擦除:擦除同一层上的笔触和填充。
● 擦除填色:只擦除填充,不影响笔触。
● 擦除线条:只擦除笔触,不影响填充。
● 擦除所选填充:只擦除当前选定的填充,不影响笔触(不论笔触是否被选中)。以这种模式使用“橡皮擦工具”前,必须先选择要擦除的填充。
● 内部擦除:只擦除橡皮擦笔触开始处的填充。如果从空白点开始擦除,则不会擦除任何内容。以这种模式使用橡皮擦并不影响笔触。
使用“橡皮擦工具”在场景中擦除对象的效果如图2-87所示。

图2-87擦除的对象效果
2.使用“水龙头”选项
单击“工具箱”中的“橡皮擦工具”按钮后,“水龙头”选项将会出现在“工具箱”中的“选项”区内。使用“水龙头”功能可以自动删除单击的填充或笔触。只需要选中“水龙头”选项,单击场景中的填充或笔触,填充或笔触就会消失。擦除填充和笔触的效果如图2-88所示。

图2-88 擦除填充和笔触的效果
3.选择橡皮擦形状
“橡皮擦工具”也可以指定其“大小”和“形状”。单击“工具箱”中的“橡皮擦工具”后,从工具箱的“选项”区域中可以选择“橡皮擦工具”的形状和大小。“橡皮擦工具”可以是圆形或方形,可以有多种尺寸,设置“橡皮擦形状”如图2-89所示。

图2-89 设置“橡皮擦形状”
Tips
如果要快速删除场景中的所有内容,可以双击“橡皮擦工具”。
2.3.4 修改形状
使用“工具箱”中的“任意变形工具”,可以实现缩放、扭曲、旋转倾斜和封套等各种形状的自由变形。
执行【修改】→【变形】菜单命令,可以对图像进行变形。
单击“工具箱”中的“任意变形工具”按钮,在“选项”区下方会出现“任意变形工具”的附属工具,如图2-90所示。

图2-90 任意变形工具
● “旋转与倾斜”:将对象进行旋转和倾斜,如图2-91所示。
● “缩放”:将对象放大或缩小,如图2-92所示。

图2-91 旋转与倾斜

图2-92 缩放
● “扭曲”:将对象扭曲,如图2-93所示。
● “封套”:对所选的对象进行修边处理,如图2-94所示。

图2-93 扭曲

图2-94 封套
Tips
在使用“旋转与倾斜”旋转对象时,按住【Shift】键进行拖动操作能够使转动的方向为45°的倍数。
2.3.5 实训:绘制可爱浣熊
实例目的
通过如图2-95 所示的效果图,了解“选择工具”在实例中的应用。

图2-95 效果图
实例要点
■ 使用“椭圆工具”绘制图形脸部的轮廓
■ 使用“选择工具”调整刚刚绘制的脸部轮廓
■ 使用“钢笔工具”绘制图形的耳朵和头发部分
■ 使用“椭圆工具”绘制图形的眼睛、鼻子和嘴
操作步骤
01 执行【文件】→【新建】命令,新建一个Flash文档,如图2-96所示。单击“属性”面板上的“文档属性”按钮,在弹出的“文档属性”对话框中设置“尺寸”为400像素×300像素,其他设置为默认,如图2-97所示。

图2-96 新建Flash文档

图2-97 设置“文档属性”对话框
02 单击“工具箱”中的“椭圆工具”按钮,执行【窗口】→【颜色】命令,打开“颜色”面板,设置“笔触颜色”值为#CC3300,选择“填充颜色”,设置“类型”为“放射状”,Alpha值为100%的#FFCC00 到Alpha值为100%的#FF9900 的渐变效果,“颜色”面板如图2-98 所示。并设置“属性”面板上“笔触高度”值为5像素,在场景中绘制一个椭圆,如图2-99所示。

图2-98 设置“颜色”面板

图2-99 绘制椭圆
03 单击“工具箱”中的“选择工具”按钮,调整刚刚绘制的椭圆,完成的图形效果如图2-100所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层2”,单击“工具箱”中的“钢笔工具”按钮
,在场景中绘制路径,如图2-101所示。

图2-100 图形效果

图2-101 绘制路径
04 打开“颜色”面板,设置“填充颜色”的“类型”为“线性”,设置从Alpha值为90%的#FFFFFF到Alpha值为0%的#FFFFFF的渐变效果,单击“工具箱”中的“颜料桶工具”按钮,在路径中从上到下拖动进行填充,完成后的图形效果如图2-102所示。单击“工具箱”中的“选择工具”按钮
,双击路径,选择全部路径,按【Delete】键删除路径,效果如图2-103所示。

图2-102 填充渐变色

图2-103 删除路径
05 单击“时间轴”面板上的“插入图层”按钮,新建“图层3”,单击“工具箱”中的“钢笔工具”按钮
,打开“颜色”面板,设置“笔触颜色”值为#CC3300,选择“填充颜色”,设置“类型”为“放射状”,设置从Alpha值为100%的#FFCC00 到Alpha值为100%的#FF9900的渐变效果,“颜色”面板如图2-104所示。并设置“属性”面板上“笔触高度”值为5像素,在场景中绘制图形,如图2-105所示。

图2-104 设置“颜色”面板

图2-105 绘制图形
06 单击“时间轴”面板上的“插入图层”按钮,新建“图层4”,单击“工具箱”中的“钢笔工具”按钮
,在场景中绘制路径,选择刚刚绘制的路径,单击“工具箱”中的“颜料桶工具”按钮
,设置“属性”面板上“填充颜色”值为#401A00,在路径中单击填充颜色,并将该路径删除,如图2-106所示。按住【Shift】键分别在“图层4”和“图层3”上单击鼠标左键,将“图层3”和“图层4”全部选中,“时间轴”效果如图2-107所示。将“图层3”和“图层4”拖动到“图层1”下面,“时间轴”效果如图2-108所示。完成后的效果如图2-109所示。

图2-106 绘制图形

图2-107 “时间轴”效果

图2-108 “时间轴”效果

图2-109 图形效果
07 使用相同的方法,绘制其他图形,完成后的图形效果如图2-110所示,“时间轴”效果如图2-111所示。

图2-110 图形效果

图2-111 “时间轴”效果
08 选择“图层2”,单击“时间轴”面板上的“插入图层”按钮,新建“图层7”。单击“工具箱”中的“钢笔工具”按钮
,打开“颜色”面板,设置“笔触颜色”值为#CC3300,选择“填充颜色”,设置“类型”为“放射状”,Alpha值为100%的#FFCC00到Alpha值为100%的#FF9900的渐变效果,“颜色”面板如图2-112所示。并设置“属性”面板上“笔触高度”值为5像素,在场景中绘制图形,如图2-113所示。

图2-112 设置“颜色”面板

图2-113 绘制图形
09 单击“时间轴”面板上的“插入图层”按钮,新建“图层8”,根据前面的方法,绘制高光部分,效果如图2-114所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层9”,单击“工具箱”中的“铅笔工具”按钮
,设置“笔触颜色”值为#000000,在场景中绘制图形,如图2-115所示。

图2-114 图形效果

图2-115 绘制图形
10 单击“时间轴”面板上的“插入图层”按钮,新建“图层10”,单击“工具箱”中的“椭圆工具”按钮
,设置“笔触颜色”为无,“填充颜色”为#401A00,在场景中绘制一个椭圆,并单击“工具箱”中的“任意变形工具”按钮
,调整椭圆的角度,效果如图2-116所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层11”,单击“工具箱”中的“椭圆工具”按钮
,设置“笔触颜色”为无,“填充颜色”为#FFFFFF,按住【Shift】键在场景中绘制一个正圆,如图2-117所示。

图2-116 绘制椭圆

图2-117 绘制正圆
11 单击“时间轴”面板上的“插入图层”按钮,新建“图层12”,单击“工具箱”中的“钢笔工具”按钮
,在场景中绘制路径,选择刚刚绘制的路径,单击“工具箱”中的“颜料桶工具”按钮
,设置“属性”面板上“填充颜色”值为#000000,在路径中单击鼠标左键,填充颜色,并将该路径删除,如图2-118所示。使用相同的方法,绘制其他图形,完成后图形效果如图2-119所示。

图2-118 绘制路径

图2-119 绘制路径
12 使用相同的方法,绘制其他图形,完成后图形效果如图2-120所示。单击“时间轴”面板上的“插入图层”按钮,新建“图层13”,单击“工具箱”中的“椭圆工具”按钮
,打开“颜色”面板,设置“笔触颜色”值为#CC3300,“填充颜色”值为#FFFFFF,并设置“属性”面板上“笔触高度”值为4像素,在场景中绘制一个椭圆,如图2-121所示。

图2-120 图形效果

图2-121 绘制椭圆
13 单击“工具箱”中的“钢笔工具”按钮,设置“属性”面板上“笔触高度”值为3像素,在场景中绘制路径,如图2-122所示。单击“工具箱”中的“选择工具”按钮
,选择刚刚绘制的路径上面的图形,并将其删除,效果如图2-123所示。

图2-122 图形效果

图2-123 删除路径上面的图形
14 根据前面的方法,绘制其他图形,如图2-124所示。执行【文件】→【保存】命令,将动画保存为“CD\源文件\第2 章\2-3-5.fla”,按【Ctrl+Enter】组合键测试影片,预览效果如图2-125所示。

图2-124 图形效果

图2-125 预览效果
2.4 综合实训:绘制卡通小猴
实例目的
通过如图2-126 所示的效果图,了解Flash中各种基本绘图工具在实例中的应用。
实例要点
■ 使用“椭圆工具”绘制猴子的脸、耳朵、身体部分轮廓
■ 使用“颜料桶工具”填充各部分图形的颜色
■ 使用“钢笔工具”绘制猴子的脸、尾巴、嘴等部分
操作步骤
01 执行【文件】→【新建】命令,新建一个Flash文档,如图2-127所示。执行【文件】→【导入】→【导入到舞台】菜单命令,将图像“CD\源文件\第2 章\素材\241.jpg”导入到场景中,如图2-128所示。

图2-126 效果图

图2-127 新建Flash文档

图2-128 导入图像
02 单击“时间轴”面板上的“插入图层”按钮,新建“图层2”,单击“工具箱”中的“椭圆工具”按钮
,打开“颜色”面板,设置“笔触颜色”值为#000000,选择“填充颜色”,设置“类型”为“放射状”,设置从Alpha值为100%的#F4AD77 到Alpha值为100%的#BB2A0A,到Alpha值为100%的#EFE7F2的渐变效果,“颜色”面板如图2-129所示。设置“属性”面板上“笔触高度”值为2像素,在场景中绘制一个椭圆,如图2-130所示。

图2-129 设置“颜色”面板

图2-130 绘制椭圆
03 单击“工具箱”中的“颜料桶工具”按钮,在刚刚绘制的椭圆上单击鼠标左键,调整渐变的中心点,如图2-131所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层3”,单击“工具箱”中的“钢笔工具”按钮
,设置“属性”面板上“笔触颜色”值为#000000,“笔触高度”值为3像素,在场景中绘制路径,如图2-132所示。
04 单击“时间轴”面板上的“插入图层”按钮,新建“图层4”,根据前面的方法,设置“颜色”面板,单击“工具箱”中的“椭圆工具”按钮
,按住【Shift】键在场景中绘制正圆,如图2-133所示。单击“工具箱”中的“线条工具”按钮
,在场景中绘制直线,如图2-134所示。

图2-131 调整渐变中心点

图2-132 绘制路径

图2-133 绘制正圆

图2-134 绘制线条
05 单击“工具箱”中的“选择工具”按钮,选择线条下的图形,并将其删除,效果如图2-135所示。单击“工具箱”中的“颜料桶工具”按钮
,在刚刚绘制的椭圆上单击鼠标左键,调整渐变的中心点,如图2-136所示。

图2-135 删除图形

图2-136 调整渐变中心点
06 单击“时间轴”面板上的“插入图层”按钮,新建“图层5”,单击“工具箱”中的“椭圆工具”按钮
,打开“颜色”面板,设置“笔触颜色”值为#000000,选择“填充颜色”,设置“类型”为“放射状”,设置从Alpha值为100%的#E8D4D3 到Alpha值为100%的#E8B97F,到Alpha值为100%的#FDEBF4的渐变效果,“颜色”面板如图2-137 所示。设置“属性”面板上“笔触高度”值为1 像素,按住【Shift】键在场景中绘制一个正圆,如图2-138所示。

图2-137 设置“颜色”面板

图2-138 绘制正圆
07 根据前面的方法,绘制图形,完成后的图形效果如图2-139所示。单击“时间轴”面板上的“插入图层”按钮,新建“图层6”,单击“工具箱”中的“矩形工具”按钮
,设置“属性”面板上“笔触颜色”为无,“填充颜色”值为#000000,在场景中绘制矩形,如图2-140所示。

图2-139 图形效果

图2-140 绘制矩形
08 单击“时间轴”面板上的“插入图层”按钮,新建“图层7”,单击“工具箱”中的“椭圆工具”按钮
,打开“颜色”面板,设置“笔触颜色”值为#000000,选择“填充颜色”,设置“类型”为“放射状”,设置从Alpha值为100%的#F4AD77 到Alpha值为100%的#BB2A0A,到Alpha值为100%的#EFE7F2的渐变效果,“颜色”面板如图2-141所示。设置“属性”面板上“笔触高度”值为1像素,按住【Shift】键在场景中绘制一个正圆,并使用“颜料桶工具”调整渐变的中心点,如图2-142所示。

图2-141 设置“颜色”面板

图2-142 调整渐变中心点
09 单击“时间轴”面板上的“插入图层”按钮,新建“图层8”,单击“工具箱”中的“钢笔工具”按钮
,设置“属性”面板上“笔触颜色”值为#000000,“笔触高度”值为1,在场景中绘制路径,如图2-143所示。打开“颜色”面板,设置“填充颜色”的“类型”为“放射状”,设置从Alpha值为100%的#E8D4D3 到Alpha值为100%的#E8B97F,到Alpha值为100%的#FDEBF4的渐变效果,“颜色”面板如图2-144所示。

图2-143 绘制路径

图2-144 设置“颜色”面板
10 单击“工具箱”中的“颜料桶工具”按钮,填充刚刚绘制的路径,如图2-145所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层9”,单击“工具箱”中的“椭圆工具”按钮
,打开“颜色”面板,设置“笔触颜色”值为#000000,选择“填充颜色”,设置“类型”为“放射状”,设置从Alpha值为100%的#F4AD77 到Alpha值为100%的#BB2A0A,到Alpha值为100%的#EFE7F2的渐变效果,“颜色”面板如图2-146所示。

图2-145 填充渐变色

图2-146 设置“颜色”面板
11 设置“属性”面板上“笔触高度”值为2像素,按住【Shift】键在场景中绘制一个正圆,并使用“颜料桶工具”调整渐变的中心点,如图2-147所示。单击“时间轴”面板上的“插入图层”按钮,新建“图层10”,使用相同的方法,选择“椭圆工具”,打开“颜色”面板,设置“笔触颜色”值为#000000,选择“填充颜色”,设置“类型”为“放射状”,设置从Alpha值为100%的#E8D4D3 到Alpha值为100%的#E8B97F,到Alpha值为100%的#FDEBF4的渐变效果,“颜色”面板如图2-148所示。

图2-147 填充渐变色

图2-148 设置“颜色”面板
12 设置“属性”面板上“笔触高度”值为1像素,按住【Shift】键在场景中绘制一个正圆,并使用“颜料桶工具”调整渐变的中心点,如图2-149所示。使用相同的方法绘制其他图形,完成后的图形效果如图2-150所示。

图2-149 填充渐变色

图2-150 绘制其他图形
13 按住【Shift】键分别在“图层9”和“图层10”上单击鼠标左键,将“图层9”和“图层10”全部选中,将“图层9”和“图层10”拖动到“图层7”下面,“时间轴”效果如图2-151所示。完成后的效果如图2-152所示。

图2-151 调整图层顺序

图2-152 图形效果
14 选择“图层8”,单击“时间轴”面板上的“插入图层”按钮,新建“图层11”,单击“工具箱”中的“椭圆工具”按钮
,设置“属性”面板上“笔触颜色”为无,“填充颜色”值为#000000,按住【Shift】键在场景中绘制两个正圆,如图2-153所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层12”,使用相同的方法,选择“椭圆工具”,设置“属性”面板上“填充颜色”值为#FFFFFF,在场景中绘制两个正圆,如图2-154所示。

图2-153 绘制椭圆

图2-154 绘制椭圆
15 单击“时间轴”面板上的“插入图层”按钮,新建“图层13”,单击“工具箱”中的“椭圆工具”按钮
,设置“属性”面板上“笔触颜色”值为#000000,“笔触高度”值为1,在场景中绘制椭圆,如图2-155所示。单击“工具箱”中的“线条工具”按钮
,在场景中绘制直线,如图2-156所示。

图2-155 绘制椭圆

图2-156 绘制线条
16 单击“工具箱”中的“选择工具”按钮,选择线条右侧的图形,调整图形位置,并将前面绘制的线条删除,如图2-157所示。单击“时间轴”面板上的“插入图层”按钮
,新建“图层14”,单击“工具箱”中的“椭圆工具”按钮
,设置“属性”面板上“笔触颜色”为无,“填充颜色”值为#000000,在场景中绘制正圆,如图2-158所示。

图2-157 图形效果

图2-158 绘制正圆
17 单击“工具箱”中的“选择工具”按钮,调整刚刚绘制的正圆形状,图形效果如图2-159 所示。使用相同的方法,绘制其他图形,完成后的图形效果如图2-160所示。

图2-159 图形效果

图2-160 图形效果
18 单击“时间轴”面板上的“插入图层”按钮,新建“图层15”,单击“工具箱”中的“钢笔工具”按钮
,设置“属性”面板上“笔触颜色”值为#000000,“笔触高度”值为2,在场景中绘制路径,如图2-161 所示。根据前面的方法,绘制“图层16”和“图层17”上的图形,完成后图形效果如图2-162所示。

图2-161 绘制路径

图2-162 图形效果
19 单击“时间轴”面板上的“插入图层”按钮,新建“图层18”,单击“工具箱”中的“钢笔工具”按钮
,设置“属性”面板上“填充颜色”值为#000000,在场景中绘制路径,如图2-163所示。在“颜色”面板上设置该图形的Alpha值为30%,如图2-164所示。
20 在“时间轴”面板上将“图层18”拖到“图层2”下面,如图2-165所示,图形效果如图2-166所示。

图2-163 绘制图形

图2-164 图形效果

图2-165 “时间轴”面板

图2-166 图形效果
21 执行【文件】→【保存】命令,将动画保存为“CD\源文件\第2 章\2-4.fla”。按【Ctrl+Enter】组合键测试影片,预览效果如图2-167所示。

图2-167 预览效果
2.5 本章小结
本章主要讲解了Flash中各种绘图工具的使用方法和技巧,并且对每一种绘图工具的相关属性的设置及作用都进行了详细的介绍,使读者能够更好地掌握各种绘图工具的使用方法。
通过对本章的学习,读者需要能够熟练掌握各种工具的使用方法,为在Flash中能够绘制出复杂的图形和场景打好坚实的基础,能够使用最简单的工具绘制出漂亮的图形。读者应根据所要绘制的图形,灵活地选用绘图工具,从而简化制作过程。
2.6 习题
一、选择题
1.在Flash中,使用“钢笔工具”创建路径时,关于调整曲线和直线的说法错误的是()。
(A)当用户使用“部分选取工具”单击路径时,定位点即可显示
(B)使用“部分选取工具”调整线段可能会增加路径的定位点
(C)在调整曲线路径时,要调整定位点两边的形状,可拖动定位点或拖动正切调整柄
(D)拖动定位点或拖动正切调整柄,只能调整一边的形状
2.在Flash中,要绘制精确的直线或曲线路径,可以使用()。
(A)铅笔工具
(B)钢笔工具
(C)刷子工具
(D)A和B都正确
3.在Flash中绘图时,可按住()键切换到“抓手工具”。
(A)【Ctrl】
(B)【Alt】
(C)【Shift】
(D)空格
二、判断题
1.用钢笔工具绘制出的路径是不能被更改的。()
2.使用“选择工具”可在“工具箱”中直接单击,也可以按【Q】键。()
3.在使用“矩形工具”或“椭圆工具”时,若按住【Shift】键,可绘制出正方形或正圆形。()
三、填空题
1.选择“铅笔工具”后,在“直线化”模式下可以绘制直线,并将接近于三角形、椭圆、圆形、矩形和正方形的形状转换为________。
2.要改变线条或轮廓的形状,可以使用_______拖动线条上的任意点。
3.线条的端点可分为_____ ______和_____3种类型。