
第2章 绘制图形
Flash具有强大的矢量图形绘制功能,所以掌握绘图工具的使用对于制作好Flash作品、增强作品的表现能力是至关重要的。本章旨在通过几个案例介绍工具面板的操作方法,以及如何使用工具来绘制所需要的图形。工具面板中的工具主要可以分为基本绘图工具、选取工具、色彩工具、文本工具和编辑修改工具等几组。
2.1 项目1 制作卡通场景“爱”
本项目是使用基本绘图工具、选取工具、色彩工具、文本工具和编辑修改工具以及导入外部位图图像等制作的一个以“爱”为主题的卡通场景,如图2.1所示。本项目分解为以下7个任务来完成。

图2.1 项目1“爱”效果图
2.1.1 任务1 使用基本绘图工具绘制卡通图形“角色1”
2.1.1.1任务说明
基本绘图工具包括矩形工具、椭圆工具、多角星形工具、线条工具、铅笔工具、刷子工具和钢笔工具等。本任务主要应用这些基本绘图工具制作一个卡通图形“角色1”,如图2.2所示。

图2.2“角色1”卡通图形
2.1.1.2任务步骤
1.打开Flash CS5应用程序,新建一个Flash文档。选择菜单项“文件”→“保存”,将该文件命名为“项目1_爱.fla”。
2.打开该文档的“属性”面板,单击其中的“编辑”按钮,打开“文档属性”对话框并设置相关参数;标尺单位为“像素”;文档尺寸为“400像素×300像素”;背景颜色为“白色(#FFFFFF)”;帧频为“12”,如图2.3所示。
3.双击“时间轴”面板中的“图层1”,重命名为“角色1”。
4.单击选择“工具”面板中的“矩形工具”。在“属性”面板中设置矩形的边框颜色和填充色等参数,如图2.4所示。单击 后的色块
,在弹出的调色板中选择颜色,将笔触颜色设置为“黑色(#000000)”;单击
后的色块,在弹出的调色板中将填充颜色设置为“白色(#FFFFFF)”;单击“样式”下拉菜单,选择笔触样式为“实线”;拖动“笔触”滑块,或者在其后的文本框中输入“1”,设置笔触粗细为1。

图2.3 “文档设置”对话框

图2.4 “矩形工具”的“属性”面板窗口
5.将鼠标移到舞台中,按住左键拖动,绘制一个黑色边框白色填充色的矩形,如图2.5所示。
6.选择“工具”面板中的“线条工具”,在其“属性”面板中,设置笔触颜色为“黑色(#000000)”,笔触样式为“实线”,笔触高度为“1”,在前面绘制的矩形上方和左侧绘制线条,组成一个立方体,如图2.6所示。

图2.5 绘制的矩形

图2.6 绘制成一个立方体
7.选择“铅笔工具”,在“属性”面板中设定笔触高度为“1”,笔触样式为“实线”,笔触颜色为“黑色(#000000)”。在“工具”面板下方的铅笔模式中选择“平滑”,如图2.7所示。在立方体的左侧面和正面的上方绘制两条曲线,如图2.8所示。

图2.7 设置为“平滑”

图2.8 用“铅笔工具”添上曲线
8.选择“刷子工具”,单击“工具”面板下方“颜色”选区中的“填充颜色”,在调色板中选择“黑色(#000000)”。单击“工具”面板下方“选项”选区中的“刷子大小”,选择合适的大小,移动鼠标到所绘制的立方体上,在立方体的正面绘制两条短曲线,用做“角色1”的眉毛,如图2.9所示。
9.选择“铅笔工具”,在“属性”面板中设定笔触高度为“4”,笔触样式为“实线”,颜色为“黑色(#000000)”,绘制两条线,用做“角色1”的眼睛,如图2.10所示。

图2.9 用“刷子工具”绘制眉毛

图2.10 用“铅笔工具”绘制眼睛
10.选择“椭圆工具”,在“属性”面板中设置笔触颜色为“取消”,即取消边框;设置填充颜色为“红色(#FF0000)”。将鼠标移到舞台,在立方体的正面绘制一个椭圆,用做“角色1”的嘴,如图2.11所示。
11.选择“铅笔工具”,在“属性”面板中设定笔触高度为“5”,笔触样式为“点刻线”,笔触颜色为“黑色(#000000)”,在“脸部”的两边各绘制几次。这样图形“角色1”即绘制完毕,如图2.12所示。

图2.11 用“椭圆工具”绘制嘴

图2.12 用“铅笔工具”绘制后的效果
12.单击“时间轴”面板下方的新建图层按钮,新建一个图层,并且将该图层命名为“星”。选择“星”图层的第1帧。
13.单击“矩形工具”右下角的黑色按钮,将其切换为“多角星形工具”,单击选择该工具。
14.单击其“属性”面板中“笔触颜色”按钮,选择“取消”,即取消边框。单击其中的“填充颜色”,设置颜色为“浅蓝色(#0066FF)”。
15.单击其中“工具设置”的“选项”按钮,在打开的对话框中设定相应的参数,其具体参数如图2.13所示。
16.将鼠标移到舞台中,拖动鼠标绘制几颗大小不同的星星,如图2.14所示。

图2.13 星形的参数

图2.14 绘制几颗星
17.选择“钢笔工具”,在舞台中绘制一个月亮。先单击“钢笔工具”,在其“属性”面板中设定笔触颜色为“黄颜色(#FFCC00)”,笔触样式为“实线”,高度为“1”。
18.将鼠标移到舞台中单击,确定曲线的起始点,然后在单击第二点时按住鼠标左键拖曳,此时第一、二点间出现曲线,而且在第二点的位置上出现一个切线手柄。注意:不要松开鼠标,伸缩切线手柄的长度或者移动切线手柄的位置,可以调节曲线的高度和倾斜度,如图2.15所示。
19.依此方法,继续画点,如图2.16所示。
20.最后当终点和起始点重合且鼠标箭头的右下角出现一个小圆圈时单击,即可结束钢笔工具的绘制,如图2.17所示。结束钢笔工具绘制,可以按ESC键或者在按住Ctrl键的同时单击鼠标左键工作区的其他位置。

图2.15 绘制两点后的效果

图2.16 绘制多点后的效果

图2.17 绘制结束后的效果
21.本任务制作完毕,其效果如图2.18所示。保存文档,测试影片。

图2.18“任务1”完成的效果
2.1.1.3技术支持
1.椭圆工具
如果按住Shift键的同时绘制椭圆,可以绘制一个正圆。按住Alt键的同时绘制椭圆,可以从中心开始绘制一个椭圆。
在绘制椭圆时,设置颜色选区中的笔触颜色或填充色,可以绘制既有边框轮廓又有填充的椭圆、或者绘制只有边框轮廓而无填充的椭圆、或者绘制只有填充而无边框轮廓的三种形式的椭圆,如图2.19所示。

图2.19 三种形式的椭圆
在绘制椭圆时,要注意是否选择了“工具”面板中“选项”选区中的“对象绘制”功能。该功能对所绘制的形状是有影响的,如下例:
(1)选择“椭圆工具”,注意此时不选择“工具”面板中“选项”选区中的“对象绘制”。
(2)在舞台中绘制两个不同颜色的椭圆,如图2.20所示。
(3)选取其中的一个椭圆移动,另一个绘制的椭圆被截取了相交的部分,如图2.21所示。

图2.20 不同颜色的两个椭圆相交

图2.21 左边的椭圆被截取了相交部分
(4)在舞台中使用椭圆工具重新绘制两个相同颜色的椭圆,如图2.22所示。
(5)发现两个椭圆合成为一个图形,如图2.23所示。
(6)选择“椭圆工具”,注意此时单击选择“工具”面板中“选项”选区中的“对象绘制”。
(7)在舞台中重新绘制两个任意颜色的椭圆,如图2.24 所示。但是发现此时它们即使位置重叠也不相互影响,将它们移开后其仍然是两个独立而完整的椭圆。

图2.22 相同颜色的两个椭圆相交

图2.23 合成一个图形

图2.24 两个独立的椭圆
2.矩形工具
(1)如果按住Shift键的同时绘制矩形,可以绘制一个正方形。
(2)利用“矩形工具”可以绘制圆角矩形。选择了矩形工具后,展开“工具”面板下方的“矩形选项”栏,如图2.25 所示,在其中可以设置矩形边角半径参数,绘制一个圆角矩形,如图2.26所示是一个边角半径值为“20”的圆角矩形。
单击其中的“链接”按钮,可以分别独立设置矩形的四个边角半径,如图2.27 所示就是设置了不同的边角半径参数的效果。

图2.25 “矩形选项”对话框

图2.26 圆角矩形

图2.27 设置不同边角半径效果的矩形
在选择了矩形工具并用鼠标拖出一个圆角矩形后,不松开鼠标,再按住键盘上的向上、向下方向键,还可以可视化地调整矩形的边角半径。
(3)单击“矩形工具”右下角的黑色三角形按钮,切换为“多角星形工具”后,再单击“属性”面板上的“工具设置”栏将其展开,单击其中的“选项”按钮,打开“工具设置”对话框,在其中的“样式”下拉菜单中,可选择“多边形”或“星形”,如图2.28所示。
设置“边数”的值,可以设置多边形或者星形的顶点数,该值介于3~32之间。设置“星形顶点大小”值,可以设置星形顶点的锐化程度,该值介于0~1之间。数值越小,锐化越深,即顶点越尖。
例:绘制一个螺帽,操作步骤如下。
① 新建一个Flash文档。
② 选择“多角星形工具”,在其“属性”面板中设置笔触颜色为“黑色(#000000)”,填充颜色为“灰色(#CCCCCC)”。
③ 单击展开“工具设置”栏,单击“选项”按钮,打开“工具设置”对话框,在“样式”下拉菜单中选择“多边形”,设置边数为“6”,星形顶点大小为“0.5”,如图2.29所示。
④ 用鼠标在舞台中拖动,即可绘制一个六边形,如图2.30所示。

图2.28 “工具设置”对话框

图2.29 “多角形工具”选项参数设置

图2.30 绘制出的六边形
⑤ 单击“椭圆工具”,设置笔触颜色为“无”,填充色为“浅灰色(#CCCCCC)”。在六边形的中间绘制一个椭圆形状,如图2.31所示。
⑥ 使用“选择工具”,按住Shift键的同时单击选择六边形的前面三条边线,再按住Ctrl键向下拖动复制。调整复制后的线条位置,如图2.32所示。
⑦ 使用“线条工具”,绘制如图2.33所示的几条直线。简单的螺帽即绘制完毕。

图2.31 在六边形中间绘制椭圆
3.线条工具

图2.32 复制三条边线

图2.33 添加几条直线
(1)如果按住Shift键的同时绘制直线,可以绘制一条倾角为45°角的整数倍的线条。
(2)当绘制两条直线相接时,可以单击该“属性”面板中的“接合”按钮,如图2.34所示。在弹出的下拉菜单中设置不同的接合样式,图2.35、图2.36和图2.37就是这三种接合方式的效果图。

图2.34“接合”下拉菜单

图2.35 尖角样式

图2.36 圆角样式
4.铅笔工具
使用“铅笔工具”绘图和真正使用铅笔绘图相似。按住Shift键的同时可以绘制直线。它有三种选项模式:伸直、平滑和墨水,如图2.38所示。

图2.37 斜角样式

图2.38“铅笔工具”的三种模式
5.刷子工具
在使用“刷子工具”时,其“属性”面板中只有“填充颜色”可以设置。在绘图时,除了“刷子大小”可以设置外,还可以对“刷子模式”和“刷子形状”等进行设置。
(1)单击“刷子模式”按钮,打开“刷子模式”下拉菜单,如图2.39所示。刷子模式有下面5种模式。
① 标准绘画:直接涂抹线条或者填充。
② 颜料填充:只涂抹填充区域或者空白区域,边线不受影响。
③ 后面绘画:只涂抹空白区域,填充区域和边线不受影响。
④ 颜料选择:只涂抹被“选择工具”或者“套索工具”
选取的区域。
⑤ 内部绘画:只涂抹开始使用刷子工具时所在的填充区域或者空白区域,边线不受影响。
(2)单击“刷子大小”按钮,打开“刷子大小”下拉菜单,可以选择刷子大小,如图2.40所示。

图2.39“刷子模式”下拉菜单

图2.40“刷子大小”下拉菜单
(3)如果选择了“刷子工具”,再单击“锁定填充”按钮,则在使用渐变色或者位图填充时,这一填充会扩展到整个舞台中。
6.钢笔工具
“钢笔工具”一般用于绘制一些精确的线条。使用“钢笔工具”,在舞台上单击,各个单击的点就会依次连接,形成一条折线,如图2.41所示。但是如果选择“钢笔工具”后,在单击各个点后按住鼠标左键不放,那么各个点依次相连时,便形成一条曲线,如图2.42所示。

图2.41“钢笔工具”画出的折线

图2.42“钢笔工具”画出的曲线
使用“钢笔工具”中的“添加锚点工具”,鼠标移到曲线上,当鼠标下方出现一个“+”符号时单击鼠标,可以在曲线上添加一个锚点。选择“删除锚点工具”,在曲线上的锚点处,鼠标下方出现一个“-”符号时单击鼠标,就可以将该锚点删除。
要调整使用钢笔工具绘制的曲线时,通常要使用“工具”面板上的“部分选取工具”进行调整,相关内容留待后面介绍“部分选取工具”时再介绍。
2.1.2 任务2 使用选择工具绘制“角色2”
2.1.2.1任务说明
选取工具包括选择工具、部分选取工具和套索工具。本任务主要是应用这些选取工具在完成任务1的基础上再绘制一个女性化的卡通图形“角色2”,如图2.43所示。
2.1.2.2操作步骤
1.打开Flash CS5应用程序,打开任务1中制作完成的文档“项目1_爱.fla”。在任务1的操作基础上,再单击“时间轴”面板下方的新建图层按钮,新建一个图层,并将该图层重命名为“角色2”。
2.选择“角色2”图层的第1帧。单击选择“工具”面板中的“矩形工具”。在“属性”面板中设置矩形的边框颜色和填充色等参数,如图2.44所示。单击 后的
色块,在弹出的调色板中选择颜色,将笔触颜色设置为“黑色(#000000)”;单击
后的色块
,在弹出的调色板中将填充颜色设置为“白色(#FFFFFF)”;单击“样式”下拉菜单,选择笔触样式为“实线”;拖动“笔触”滑块,或者在其后的文本框中输入“1”,设置笔触粗细为1。

图2.43“角色2”的效果

图2.44 设置“属性”面板的参数
3.将鼠标移到舞台中,按住左键拖动,绘制一个黑色边框、白色填充色的矩形,如图2.45所示。
4.选择“工具”面板中的“线条工具”,在其“属性”面板中,设置笔触颜色为“黑色(#000000)”,笔触样式为“实线”,笔触高度为“1”,在前面绘制的矩形上方和右侧绘制线条,组成一个立方体,如图2.46所示。
5.再使用“线条工具”,保持前面的属性设置,在立方体的正面再绘制三条直线,效果如图2.47所示。

图2.45 绘制的矩形

图2.46 绘制成一个立方体

图2.47 绘制出三条直线
6.选择“工具”面板中的“铅笔工具”,在其“属性”面板中,设置笔触颜色为“黑色(#000000)”,笔触样式为“实线”,笔触高度为“4”,如图2.48 所示;在立方体的正面小矩形中,绘制两个直线用做“眉毛”,如图2.49所示。

图2.48 设置笔触参数

图2.49 绘制“眉毛”
7.继续使用“铅笔工具”,在其“属性”面板中,设置笔触颜色为“红色(#FF0000)”,其他参数不变。绘制一条曲线用做“嘴”,如图2.50所示。
8.使用“刷子工具”,在其“属性”面板中,设置笔触颜色为无,填充颜色为“粉色(#FF99CC)”,设置合适的“刷子大小”,如图2.51 所示;绘制两个“腮红”,如图2.52所示。

图2.50 绘制“嘴”

图2.51 选择“刷子大小”

图2.52 绘制“腮红”
9.选择“选择工具”,单击选择角色2脸部最下方中间的线段,略向上移动,其效果如图2.53所示。
10.选择“选择工具”,指向刚刚略移动到上方的中间线段,当鼠标指针变为箭头右下方出现一个弧线时,按住鼠标左键不放并拖曳,将边线调整成弧线,其效果如图2.54所示。
11.重复步骤10,将图中的直线都调整为曲线,其效果如图2.55所示。
12.该任务即制作完成,使用“选择工具”分别单击各个图层的第1帧,可以分别选定“角色1”、“角色2”和“星”三个对象,分别调整它们的位置,其总体效果如图2.56所示。
13.该任务制作完成,保存文档,测试影片。

图2.53 向上移动中间线段

图2.54 调整中间线段为曲线

图2.55 调整其他直线为曲线

图2.56 完成任务2“角色2”绘制后的效果
2.1.2.3技术支持
1.选择工具
使用“选择工具”单击一个对象时,可以选中单击的部分。如绘制一个既有边框又有填充色的椭圆,使用“选择工具”单击边框,此时边框被选中,而填充不被选中,如图2.57中左边的部分。若单击填充,则填充被选中,边框不被选中,如图2.57中的中间部分。
按住Shift键不放,连续单击对象的多个不同部分,可以选择这些部分。如果按住Shift键不放,连续在边框和填充上单击,则此时边框和填充都被选中,如图2.57中的右边部分。
使用“选择工具”后,按住鼠标左键不放并拖曳,拖出一个矩形框,则该矩形框所框选的部分即被选中,如图2.58所示。

图2.57 选择的不同对象

图2.58 框选中的部分被选中
可以使用“选择工具”进行变形操作。
(1)选择“矩形工具”在舞台中绘制一个只有填充而没有边框的矩形,如图2.59所示。
(2)选择“选择工具”,鼠标指针指向矩形上方的右顶点,当指针右下方出现“L”形状时,按住左键不放并拖曳,使右边的顶点和左边的顶点重合,将图形调整成为一个三角形。
(3)为了便于顶点重合,可以选择菜单项“视图”→“贴紧”→“贴紧对象”,将其勾选。顶点重合的效果如图2.60所示。
(4)选择“选择工具”,鼠标指针指向三角形的边线,指针右下方出现弧线形状时,按住左键不放并拖曳,将其调整成圆弧形,如图2.61所示。

图2.59 无边框的矩形

图2.60 顶点重合成三角形

图2.61 边线调整成圆弧形
2.部分选取工具
使用“部分选取工具”在边框轮廓线上单击时,可以显示轮廓线上的锚点。按住锚点进行拖动,可以调整控制点的位置;或者按住控制柄进行拖动,可以改变切线的方向,从而改变曲线的曲度。移动锚点还可以按键盘上的四个方向键来调整。
3.套索工具
“套索工具”也可以用来部分或全部选取对象。选取该工具,将鼠标移到舞台中,可以像“铅笔工具”一样自由地绘制线条。当绘制线条的起点和终点重合时,生成的闭合区域就是选取的对象。
(1)使用“矩形工具”在舞台中绘制一个填充色任意的图形。
(2)选择“套索工具”在矩形图形中绘制一个区域,如图2.62所示。
(3)该区域就是选取的对象,可以对其进行操作,如移动等,如图2.63所示。

图2.62 用“套索工具”选取任一区域

图2.63 对选区进行移动操作
在“套索工具”的“选项”选区中还可选择“魔术棒”和“多边形模式”两种模式,如图2.64所示。用“多边形”模式选取时,就是绘制出一个直多边形的选区,如图2.65所示。
单击选择“选项”中的“魔术棒”工具,它只能用于选择被分离为以像素为单位的位图,而且它一般用来选择对象上颜色相近的区域,通常在选择这个区域时,结合“魔术棒设置工具”进行选择,单击“魔术棒设置” 工具
,打开“魔术棒设置”对话框进行参数设置,如图2.66所示。在该对话框中的“阈值”参数中可以输入0~200之间数值,该数值越小,表示可以选择的颜色越相近。“平滑”用来定义所选区域的边缘的平滑度。最后单击“确定”按钮。在对“魔术棒设置工具”的参数进行设置后,就可以使用“魔术棒工具”进行区域的单击选择了。

图2.64 “套索工具”的选项

图2.65 直多边形的选区

图2.66“魔术棒设置”对话框
2.1.3 任务3 为“角色1”和“角色2”图形填充色彩
2.1.3.1任务说明
色彩工具包括颜料桶工具、墨水瓶工具、滴管工具和填充变形工具。应用这些工具,可以制作出非常美妙的图形效果和神奇的动画效果。本任务主要是应用色彩工具对任务1完成的“角色1”、“角色2”和“月亮”以及背景等填充色彩,以增强图形的效果。本任务最后的效果如图2.67所示。

图2.67“角色1”色彩填充后的效果图
2.1.3.2操作步骤
1.打开Flash CS5应用程序,打开任务2中制作完成的文档“项目1_爱.fla”,如图2.68所示。

图2.68“项目1_爱.fIa”文件
2.在任务2操作基础上,进行色彩设置。首先设置“角色1”头发的颜色。单击“工具”面板中的“颜料桶”工具,然后单击“属性”面板中的“填充颜色”按钮
,在打开的调色板面板中选择黑色(#000000),如图2.69所示。
3.移动鼠标到舞台中,其指针呈一个颜料桶形状。移动鼠标指针到图形立方体的上面、左侧面和前面部分单击,将这些部分填充为黑色。注意:此时若发现颜色填充不了,可以单击“选项”选区中的“空隙大小”按钮,在弹出的下拉菜单中选择一个合适的空隙模式,以保证能够填充得上颜色,如图2.70所示。

图2.69 调色板

图2.70“空隙大小”菜单
4.填充颜色后的效果如图2.71所示。
5.设置“角色2”的颜色。选择“颜料桶”工具,单击“属性”面板中的“填充颜色”按钮,在打开的调色板面板中选择深黄色(#FFCC00)。将鼠标移到“角色2”头发区域单击,如图2.72所示。

图2.71 填充“角色1”头发的颜色

图2.72 填充“角色2”头发的颜色
6.下面设计背景色。原先的背景为白色,若从文档背景色来修改,都只能使用一种单纯的颜色用做背景,这样未免单调,下面设计用一种渐变色来用做图形的背景。
7.单击图层面板下方的“新建图层”按钮,新添加一个图层。鼠标双击新图层的名称,将其重命名为“背景”,如图2.73所示。

图2.73 新建图层命名为“背景”
8.选择图层“背景”,选择“矩形工具”,在“属性”面板中设置笔触颜色为“取消”,填充颜色为黑白线性渐变。
9.选择菜单项“窗口”→“颜色”,打开“颜色”面板。在其中的“渐变定义栏”中设置左边颜色块为“灰色(#CCCCCC)”,右边的颜色块设置为“海蓝色(#000066)”,如图2.74所示。
10.然后将鼠标移到舞台,绘制一个大矩形,如图2.75所示。

图2.74 混色器的参数

图2.75 绘制渐变色的矩形
11.使用“选择工具”选择该矩形,打开“属性”面板,设置其大小和位置,具体参数如图2.76所示。

图2.76 设置位置和大小
12.默认的渐变是从左到右渐变。如果要修改渐变的角度,此时可以单击“工具”面板中的“填充变形工具”。
13.移动鼠标指针到矩形填充区域单击,矩形的周边出现了控制点,如图2.77所示。
14.鼠标指针指向图2.77 中间的圆圈,出现带箭头的“十”字形时,按住鼠标拖动,可以移动整个填充色。鼠标指针指向图中上方带箭头的圆圈时,可以旋转填充的角度。鼠标指针指向图中间的带箭头的小方块时,可以左右伸缩,调整渐变的过渡。
15.按上述操作将水平方向的线性渐变调整为垂直方向,其效果如图2.78所示。

图2.77“填充变形工具”控制点

图2.78 调整后的渐变效果图
16.单击选中图层“背景”,按住鼠标左键不放并拖曳图层,使“背景”图层位于所有图层的下方,如图2.79所示。
17.下面填充“月亮”的色彩。单击选择“工具”面板中的“颜料桶工具”,设置填充颜色为“浅黄色(#FFCC666)”。
18.用鼠标在月亮图案的内部填充上单击,将其填充为“浅黄色(#FFCC66)”。
19.选择“工具”面板中的“墨水瓶工具”,再单击“属性”面板中的“笔触颜色”,设置为“浅黄色(#FFCC66)”。
20.移动鼠标到月亮图案的轮廓线部分单击,将边框也设置为“浅黄色(#FFCC66)”。
21.将月亮图案的轮廓线全选中。

图2.79 图层和设置了背景后的效果图
22.选择菜单项“修改”→“形状”→“将线条转换为填充”。
23.选择菜单项“修改”→“形状”→“柔化填充边缘”,弹出“柔化填充边缘”对话框,在其中设置相应的参数,如图2.80所示。
24.设置后的月亮图案的效果如图2.81所示。
25.该任务制作完成,保存文档,测试影片。

图2.80“柔化填充边缘”对话框的有关参数

图2.81 柔化填充边缘后的月亮图案
2.1.3.3技术支持
1.颜料桶工具
“颜料桶工具”可以给对象填充颜色。在填充颜色时,可以设置颜色为纯颜色或者渐变色。“颜料桶工具”在填充时,应注意“选项”选区的“空隙大小”和“锁定填充”。如果发现用“颜料桶工具”无法填充上颜色,首先要看看有没有选择“锁定填充”功能,一旦选取该工具,就无法填充颜色了。另外还要检查“空隙大小”的模式是否合适,有时区域看似封闭,其实还有空隙,此时应该放大视图来检查区域是否封闭,然后再选择合适的模式进行填充。
2.墨水瓶工具
“墨水瓶工具”可以给对象添加轮廓线,或者改变轮廓线的颜色、笔触高度和笔触样式等属性。如下例:
(1)选择“椭圆工具”,先设置其无轮廓线但有填充,且在“填充色”调色板中选择一个径向渐变的模式,然后绘制一个红色的小球,如图2.82所示。
(2)选择“墨水瓶工具”,打开该工具的“属性”面板,在其中设置笔触样式为“虚线”,笔触高度为“5”,笔触颜色为“白色(#FFFFFF)”,此时效果如图2.83所示。

图2.82 无轮廓线的小球

图2.83 添加轮廓后的小球
3.颜色面板
当对图形颜色进行一些特殊的处理时,常常要用到“颜色”面板。选择菜单项“窗口”→“颜色”,可以打开或关闭“颜色”面板,如图2.84所示。“颜色”面板上有“颜色”和“样本”两个选项卡。“颜色”选项卡中有以下参数:
(1)“笔触颜色”按钮,用于设置线条颜色。
(2)单击“类型”右边的按钮,可以设置填充类型,如图2.85所示。有“无”、“纯色”、“线性渐变”、“径向渐变”和“位图填充”5种类型。

图2.84“颜色”面板

图2.85“填充类型”下拉菜单
① 无:不设置颜色。
② 纯色:设置一个单色。
③ 线性渐变:产生从起始点到终点沿直线逐渐变化的渐变。
④ 径向渐变:产生一个从中心焦点出发沿环形轨道混合的渐变。
⑤ 位图填充:将位图作为填充内容。
(3)“渐变定义栏和颜色指针”。在“颜色”面板上的“渐变定义栏和颜色指针”区域(如图2.86 所示)单击颜色指针,颜色指针上的三角形呈黑色,表明该颜色指针被选中,面板上出现与它对应的颜色和透明度的数值
,可以在其输入框中设置相应的参数。双击渐变定义栏中的颜色指针(即颜色选择器),弹出“颜色拾色器”,如图2.87所示;可以在颜色选择器中拾取新的颜色,就可以改变该颜色指针的颜色。如果需要添加颜色指针,则在渐变定义栏需要添加颜色的地方左键单击,就添加一个颜色指针了,最多可以有15个颜色指针。如果需要改变颜色指针的位置,只要将该颜色指针沿着渐变定义栏拖动即可;如果要删除某个颜色指针,只要直接将其向下拖离渐变定义栏即可。

图2.86 渐变定义栏和颜色指针

图2.87 颜色拾色器
(4)径向渐变的设置与线性渐变的不同在于,它是从中间向四周辐射的,如图2.88所示,就是利用混色器设置了放射状渐变的色块,然后绘制的图案。

图2.88 “混色器”面板设置渐变色及绘制的图形
(5)位图填充模式就是将一幅位图作为填充的图案来填充一个区域。如下例:
① 新建一个Flash文档。
② 选择菜单项“文件”→“导入”→“导入到库”,将准备好的位图导入到库中。
③ 打开“颜色”面板,在“类型”下拉菜单中选择“位图填充”,然后在列出的位图预览中选择要填充的图像,如图2.89所示。
④ 再用“矩形工具”在舞台上绘制一个矩形。
⑤ 该矩形就使用所选择的图像作为图案进行填充了,如图2.90所示。

图2.89 选择用“位图”填充

图2.90 绘制出的矩形效果图
4.滴管工具
“滴管工具”可以拾取笔触或填充的颜色。例如,绘制一个笔触高度为“20”,边框颜色为“绿色(#00FF00)”,填充色为“红色(#F34E25)”的矩形。然后在“工具”面板中选择“滴管工具”,将鼠标指针指向矩形的边框单击,则“工具”面板的“颜色”选区中的“笔触颜色”就变成了“绿色(#00FF00)”;如果选取该工具在舞台中矩形的填充色上单击,则“工具”面板的“颜色”选区中的“填充色”就变成了“红色(#F34E25)”。
5.填充变形工具
“渐变变形工具”与渐变色类型有关系。如果在“颜色”类型中选择“线性渐变”,然后用矩形工具在舞台中绘制一个矩形,接着选择“工具”面板中的“渐变变形工具”,再单击舞台的填充区域,发现填充区域边缘出现控制点,如图2.91所示。这些控制点的使用在前面任务3使用“色彩工具”制作渐变背景中已做过解释。
但如果在“颜色”面板的类型中选择“径向渐变”,然后同样在舞台中绘制一个矩形,接着选择“工具”面板中的“渐变变形工具”,单击舞台中矩形填充区域,发现填充区域边缘也同样出现控制点,只不过控制点和上面的略有不同,如图2.92所示。同样可以通过调节这些控制点,得到丰富多样的渐变效果。如图2.93所示的立体按钮,就是使用径向渐变类型和“渐变变形工具”结合设置制作而成的。
另外,在后面的动画制作中,将渐变填充色和渐变变形工具结合起来灵活使用,可以制作出更加神奇美妙的作品。

图2.91 线性渐变的“填充变形工具”的控制点

图2.92 放射状渐变的“填充变形工具”的控制点

图2.93 立体按钮
2.1.4 任务4 使用编辑修改工具制作图形“小花”
2.1.4.1任务说明
编辑修改工具包括任意变形工具、橡皮擦工具。应用这些编辑修改工具,可以对对象进行缩放、旋转和倾斜等操作,特别是和后面的动画操作相结合,可以制作出很多丰富且精彩的作品。本任务是在完成任务3的基础上使用该类编辑修改工具制作“小花”图案,其效果如图2.94所示。

图2.94 任务4的效果
2.1.4.2任务步骤
1.打开Flash CS5应用程序,打开任务3中制作完成的文档“项目1_爱.fla”。
2.在“角色2”图层之上新建一个图层“小花”。
3.选择“线条工具”,在“属性”面板中将笔触高度设为“1”,笔触样式设为“实线”,笔触颜色设为“黑色(#000000)”,在“小花”图层中绘制一条直线。
4.选择“选择工具”,指向直线图形,当鼠标变成下方带一弧线的箭头时拖动,可将直线调整成弧形,如图2.95所示。
5.选中该弧线,按住Ctrl键拖动鼠标复制一条新弧线。
6.选择菜单项“视图”→“贴紧”,在其下拉菜单中勾选菜单项“贴紧对齐”和“贴紧至对象”,如图2.96所示。

图2.95 将直线调整成弧线

图2.96 选择贴紧
7.选中复制后的弧线,选择菜单项“修改”→“变形”→“水平翻转”,并调整其位置,使两条弧线对接,如图2.97所示。
8.选择“线条工具”,在图中的两条曲线下方绘制一条直线,将该曲线闭合,形成一个花瓣图案,如图2.98所示。

图2.97 两条弧线对接后的曲线

图2.98 将弧线闭合
9.选择“工具”面板中的“颜料桶工具”,打开“颜色”面板,将填充样式设为“线性渐变”,在渐变条上设置左边第一个色块为“白色(#FFFFFF)”,设置右边的色块为“绿色(#368D3F)”,如图2.99所示。
10.将鼠标移到花瓣图形区域中单击,为其填充上线性渐变色,再选择“工具”面板中的“渐变变形工具”,调整控制点对填充的颜色进行适当调整,其效果如图2.100所示。

图2.99“颜色”面板中设定颜色参数

图2.100 用“渐变变形工具”调整后的效果图
11.选择“选择工具”,将花瓣图案全部选中,单击“工具”面板中的“任意变形工具”,该图案周围出现控制点,如图2.101所示。
12.将鼠标移到上方中间的控点纵向压缩花瓣图案,再将轴心(即中间的圆圈)拖到花瓣的下方控点处,如图2.102所示。

图2.101“任意变形工具”的控制点

图2.102 将中间的轴心点拖动到正下方控点处
13.选择菜单项“编辑”→“复制”,再选择菜单项“编辑”→“粘贴到当前位置”,此时已复制了一个花瓣图案,但两个图案在原处重叠。
14.将鼠标移到右上方的控点处,顺时针旋转其中一个花瓣图案,再将其调整成比较细长的效果,如图2.103所示。
15.模仿步骤11~步骤14,再复制两个花瓣图案,经旋转、缩放后组成花朵图案,其效果如图2.104所示。

图2.103 旋转、缩放复制后的花瓣

图2.104 花朵图案
16.选择“铅笔工具”,设定笔触高度为“1”,笔触线形为“实线”,笔触颜色为“黑色(#000000)”,在花朵图形下方绘制曲线,用做树干,如图2.105所示。
17.选择“颜料桶工具”,打开“颜色”面板,设置为“线性渐变”,并在“渐变定义栏”上设置左边的色块为“棕色(#2C1807)”,如图2.106所示;设置右边的为“黄色(#E99A27)”,如图2.107所示。

图2.105 添加树干

图2.106 设置线性渐变左边的色块颜色
18.设置完后,在树干区域单击,为其填充色彩。
19.如果对填充颜色的效果不满意,还可以选择“填充变形工具”对填充的渐变色进行适当调整,一朵小花就制作完成了,如图2.108所示。

图2.107 设置线性渐变右边的色块颜色

图2.108“小花”图形的最后效果图
20.全选中制作好的小花图案,按住Ctrl键拖动鼠标复制一个,选择菜单项“修改”→“变形”→“水平翻转”,再用“任意变形工具”将翻转后的小花图案缩小,并调整至适当位置,如图2.109所示。
21.该任务制作完成,保存文档,测试影片。

图2.109“小花”图形的最后效果图
2.1.4.3技术支持
1.任意变形工具
(1)使用“任意变形工具” 可以对所选中的对象进行变形。当用该工具单击对象时,对象的周围会出现8个黑色控制点的变形框,可以按住变形框上的控制点进行拖动来调整对象的形状,如图2.110所示。
(2)通过“任意变形工具”可以对对象进行移动、旋转、倾斜、缩放、扭曲和封套操作。
① 旋转与倾斜:选择“工具”面板的“选项”区域中的“旋转与倾斜”按钮,将鼠标指针放在4个顶点的控制点上,使指针变为旋转符号时,拖曳对象,就可以旋转对象了,如图2.111所示。注意:旋转是围绕对象的中心点旋转的,中心点位置不同,旋转的效果则不同。将鼠标指针放在控制点上,指针变为倾斜符号时,左右拖曳对象,就可以倾斜调整对象了,如图2.112所示。

图2.110 用“任意变形工具”单击图形

图2.111 旋转对象

图2.112 倾斜调整对象
② 缩放:选择“选项”区域中的“缩放”按钮,将鼠标指针放在控制点上,指针变为缩放符号时,拖曳对象,就可以缩放对象了,如图2.113所示。注意:如果按Alt键缩放对象,则以中心点为中心,对称缩放对象。
③ 扭曲:选择“选项”区域中的“扭曲”按钮,将鼠标指针放在控制点上,指针变为扭曲符号时,拖曳对象,就可以扭曲对象了,如图2.114所示。
④ 封套:选择“选项”区域中的“封套”按钮,则对象上出现控制点和切线手柄,其中控制点呈方形,切线手柄呈圆点。拖曳控制点和切线手柄,可以自由地扭曲变形对象,如图2.115所示。完成对象变形操作之后,在对象之外的舞台区域单击,即可取消封套。

图2.113 缩放对象

图2.114 扭曲对象

图2.115 利用封套变形对象
上述使用“任意变形工具”对对象的几种变形操作,还可以通过选择菜单项“修改”→“变形”,在其下拉菜单中选择相应菜单项完成变形操作。
(3)使用“任意变形工具”的扭曲和封套进行变形操作时,这两个功能只能用于形状对象,而对元件、文本、位图和渐变均无效。
2.橡皮擦工具
(1)“橡皮擦工具”可以用来擦除能够被擦除的笔触或者填充。选择该工具后,在其“选项”中还有三个相关的选项:橡皮擦模式、橡皮擦形状和水龙头,如图2.116所示。“橡皮擦模式”是用来指定“橡皮擦工具”的擦除模式的,它有下面5种模式。

图2.116“橡皮擦工具”选项
① 标准擦除:任意擦除笔触和填充区域的内容。
② 擦除填色:只擦除填充区域,不影响笔触。
③ 擦除线条:只擦除笔触,不影响填充。
④ 擦除所选填充:只擦除被选取了的填充,不影响笔触及未被选取的填充部分。
⑤ 内部擦除:从填充区域内部开始擦除填充,如果试图从填充区域外部开始拖动橡皮擦擦除,则不会擦除任何内容。即该模式不影响笔触。
(2)“橡皮擦工具”的“水龙头”选项,是用来快速擦除所选笔触或者填充的。选择“水龙头”,单击所要擦除的笔触或者填充即可完成擦除操作。另外,如果双击“橡皮擦工具”,就可以快速擦除舞台上所有的对象。
2.1.5 任务5 使用文本工具制作特殊效果主题文字“情人”
2.1.5.1任务说明
文本工具是用来在Flash中输入文字的工具,它包括三种类型:静态文本、动态文本和输入文本。其中动态文本是指动态更新的文本,是相对于静态文本而言的;输入文本是指允许用户在文本框中输入的文本,它们通常都要配合ActionScript制作设计,相关内容留待后面介绍。本任务是在完成任务4 的基础上利用静态文本添加特殊效果的文本,其效果如图2.117所示。

图2.117“情人”文字特效
2.1.5.2任务步骤
1.打开Flash CS5应用程序,打开任务4中制作完成的文档“项目1_爱.fla”。
2.在图层“小花”的上面新建一个图层,命名为“文字”。
3.选择“文字”图层,选择“工具”面板中的“文本工具”,在“属性”面板中设置文本类型为“静态文本”,字体为“华文新魏”,字号大小为“50”,文字颜色为“橙色(#FF6600)”,如图2.118所示。

图2.118 文本“属性”参数设置
4.在舞台中输入“情人”两个字,接着连续执行两次菜单项“修改”→“分离”,或者连续两次按Ctrl+B组合键,使其呈网点状,即成为可编辑的图形状态,如图2.119所示。
5.选择“工具”面板中的“墨水瓶”工具,设定笔触颜色为“白色(#FFFFFF)”,笔触样式为“实线”,笔触高度为“2”,然后逐个在文字轮廓部位单击,给文字加上白色边框。
6.用“橡皮擦工具”擦去“情”字左边的点,如图2.120所示。
7.使用“工具”面板中的“选择工具”,将鼠标放到“人”字的撇笔画,当出现弧线形状时,向左下方拖动撇笔画,将其拉长,如图2.121所示。

图2.119 将文字彻底分离

图2.120 擦去“情”字左边的点

图2.121 调整笔画
8.选择“文字”图层,使用“线条工具”,在舞台中绘制一条竖线。
9.使用“部分选取工具”,单击曲线端点,端点上会出现调节手柄,上下左右移动手柄,将直线调整为曲线,如图2.122所示。
10.选中该曲线,选择“编辑”→“复制”菜单项,再选择“编辑”→“粘贴”菜单项,复制生成一条新曲线。
11.选择复制得到的曲线,选择“修改”→“变形”→“水平翻转”菜单项,如图2.123所示。
12.将这两条曲线拖放连接好,成为一个心形,如图2.124所示。

图2.122 将直线调整成曲线

图2.123 复制后的效果

图2.124 制作好的效果
13.选择“工具”面板中的“颜料桶工具”,再打开“颜色”面板,将填充样式设为径向渐变。在“渐变定义栏”中将左边第一个色块设置为“黄色(#F2CB2F)”,如图2.125所示;中间单击增加一个色块,将该色块设置为“红色(#F34E25)”,如图2.126所示;最右边的色块设置“橘黄色(#FFF8F7)”,同时设置该色块的Alpha值设为“0%”,如图2.127所示。
14.移动鼠标到心形区域单击,填充放射状的色彩。

图2.125 左边色块参数

图2.126 中间色块参数
15.单击“工具”面板中的“填充变形工具”,将填充的线性渐变颜色调整合适。
16.选中“心”形的边框线,然后将所有的边框线删除,如图2.128所示。
17.选择“选择工具”,全选“心”图形,将其移到“情”的左边,用做被删除的“点”笔画。
18.如果大小不合适,再使用“任意变形工具”,对其缩放、旋转直到调整到满意的效果,如图2.129所示。
19.该任务制作完成,保存文档,测试影片。

图2.127 右边色块参数

图2.128 删除后的效果图

图2.129 制作好的文字图层中的文字
2.1.5.3技术支持
1.使用“文本工具” 可以输入和设置文本的格式,而且利用前面介绍的编辑修改和色彩工具等可以制作出很精彩的文字效果。在“属性”面板的文本类型中有“静态文本”、“动态文本”和“输入文本”三种类型,如图2.130所示。其中“静态文本”是系统默认的,可以自由地输入单行或多行文本;“动态文本”是动态更新的文本,当改变为该文本类型后,“属性”面板的“变量”就激活了;“输入文本”是用来提供用户输入文本的,其属性面板的参数与动态文本的属性参数基本一样。这两种类型的文本制作都需要配合ActionScript,后面将介绍两种文本类型的制作方法。

图2.130 文本的三种类型
2.在静态文本的“属性”面板中,可以对文字的大小、颜色和字体等属性进行调整,在其中还可以单击“切换上标” 和“切换下标”
按钮,进行上标和下标文字的制作,如图2.131所示。
3.在“改变文本方向”列表中,可以将文本设置为“水平”、“垂直”和“垂直,从左向右”三种方式,图2.132就是选择“垂直”输入的文本。
4.消除文本锯齿。单击“消除锯齿”列表,在其中选择消除锯齿选项,如图2.133所示。

图2.131 上、下标文字

图2.132“垂直”文本

图2.133 选择消除锯齿选项
(1)使用设备字体:指定SWF文件使用本地计算机上安装的字体来显示。如果播放内容的计算机上没有该字体,则无法正常显示文本。所以,如果选择这个选项,在文本制作时应只选择通常都安装的字体系列。该选项对SWF文件的大小影响很小。
(2)位图文本(未消除锯齿):如果选择该选项,则会关闭消除锯齿功能,不对文本进行平滑处理。当位图大小与导出大小相同时,文本比较清晰,但对位图文本缩放后,文本显示效果比较差。该选项会增加SWF文件的大小。
(3)动画消除锯齿:可以选择该选项来创建比较平滑的动画,但是由于Flash会忽略对齐方式和字距微调信息,所以该选项不适合所有的文本。选择该选项时,如果字体太小则会不清晰,所以要选择10点以上大小的字体。但此项会使SWF文件较大。
(4)可读性消除锯齿:选择该选项可创建高清晰的字体,改进较小字体的可读性,但不适用于动画文本。此选项会使SWF文件较大。
(5)自定义消除锯齿:可以自定义字体属性,但此项会使SWF文件较大。选择该选项会弹出“自定义消除锯齿”对话框,如图2.134所示,在该对话框中可以设置“粗细”和“清晰度”参数。

图2.134“自定义消除锯齿”对话框
5.一次输入的文本内容是组合的。如果要设计出更特殊一点的文字效果,就不仅仅是简单地设置颜色和大小,而应先将它转换为图形对象,再对它设计各种特效。将文字转换为图形的操作就是选择菜单项“修改”→“分离”或者按Ctrl+B组合键。不过要注意:如果一次输入的文字只有一个,则只需选择一次菜单项“修改”→“分离”或者按一次Ctrl+B组合键即可;如果一次输入的文字有两个或两个以上,则就要两次选择菜单项“修改”→“分离”或者是按两次Ctrl+B组合键,才能将其分离。
文字转换为图形对象之后,就具有了图形的性质,即有轮廓和填充。可以对它们分开进行处理,如可以制作成空心字,如图2.135所示;可以制作成彩虹字,如图2.136所示;还可以制作成荧光字,如图2.137所示。

图2.135 空心字

图2.136 彩虹字

图2.137 荧光字
2.1.6 任务6 使用导入位图“制作相框”
2.1.6.1任务说明
对象的编辑操作除了前面介绍的选取、移动、复制、删除、变形外,还包括对齐、打散和组合。本任务主要针对导入外部图片的操作和导入后的编辑操作进行介绍。本任务是在任务5完成的基础上,编辑导入的位图图片制作成一个相框,其效果如图2.138所示。

图2.138 任务6效果
2.1.6.2任务步骤
1.打开Flash CS5应用程序,打开任务5中制作完成的文档“项目1_爱.fla”。
2.在“文字”图层的上方新建一个图层,命名为“相框”。
3.选择菜单项“文件”→“导入”→“导入到库”,在打开的“导入”对话框中,找到要导入的位图图像所存放的文件夹“chap2\素材文件”,选择其中“相框.jpg”图片文件,再单击“打开”按钮,将其导入到库中。
4.选择“相框”图层。选择菜单项“窗口”→“库”,打开“库”面板,在中间列表名称中选择已导入的“相框.jpg”项,再从“库”上方的预览窗中将其拖放入舞台中。
5.选择“选择工具”选择舞台中的该图片,打开其“属性”面板,设置其中位置和大小,如图2.139所示。
6.选中舞台中的图片,按一次Ctrl+B组合键将其分离。
7.选择工具面板中的“套索工具”,单击“选项”选区的“魔术棒设置”按钮
,如图2.140所示。在弹出的对话框中设置相应的参数,然后单击“确定”按钮,如图2.141所示,再选择“选项”中的“魔术棒”工具。

图2.139 设置位置和大小

图2.140“套索工具”的选项

图2.141“魔术棒设置”对话框的参数
8.将鼠标指针移到被分离后相框图片中间的白色区域单击,此时利用颜色域值将该区域选中。
9.按键盘上的Delete键,将选中的区域删除。此时在删除的区域中就露出下方图层的图形内容了,其效果如图2.142所示。
10.该任务制作完成,保存文档,测试影片。

图2.142 删除相框中间白色区域后的效果
2.1.6.3技术支持
1.对象的排列和对齐
通常在操作时,需要对对象按某种规则进行排列,这时就要用到“对齐”操作了。即选择菜单项“修改”→“对齐”,在其下拉菜单中进行选择操作。也可以选择菜单项“窗口”→“对齐”,打开“对齐”面板,从中选择进行操作,如图2.143所示。该面板分为上、下两个部分,上方是对齐按钮,下方只有一个“与舞台对齐”按钮,如果按下该按钮,在进行对齐操作时,舞台会被当做一个对齐对象进行操作。

图2.143“对齐”面板
具体操作如下例:
(1)选择“椭圆工具”,且选择“选项”中的“对象绘制”,在舞台绘制一个只有轮廓线而无填充色的圆圈,如图2.144所示。
(2)复制该圆圈若干个,并使它们交叉,如图2.145所示。

图2.144 用“对象绘制”绘制的圆圈

图2.145 复制若干个圆圈后的效果图
(3)用“选择工具”框选住所有的圆圈。
(4)打开“对齐”面板,单击“对齐”面板的“间隔”中的“垂直平均分布”,再单击该面板中的“垂直中齐”按钮
,调整结果如图2.146所示。
(5)单击其中的“水平居中分布”按钮,其结果如图2.147所示。

图2.146 垂直平均分布和垂直中齐

图2.147 水平居中分布
2.导入外部图片
Flash中一般常用导入到舞台和导入到库两种方法导入外部图片。可以选择菜单项“文件”→“导入”,然后再选择其中的方法之一进行操作。
如果选择“导入到舞台”导入外部图片,打开“库”面板,就会发现导入的图片出现在舞台中的同时,也被导入到库中了。第二次再使用这个图片,就可以直接从库中调用,而不用再次从外部导入,如图2.148所示。
如果选择“导入到库”方法导入外部图片,则图片只出现在库中,而不会直接出现在舞台中,若要使用该图片,就需要在“库”面板中将该图片拖放入场景,如图2.149所示。

图2.148 将图片“导入到舞台”

图2.149 将图片“导入到库”
如果一次要导入多个外部图片,可以在“导入”对话框中选择导入文件时,在按住Shift键的同时单击文件名,最后单击“打开”按钮,就可以一次导入多个图片了,如图2.150所示。

图2.150 选择多个文件一次性导入
3.用导入的位图填充
(1)选择菜单项“文件”→“导入”→“导入到库”,导入一个位图。
(2)打开“混色器”面板,将类型设置为“位图”,将鼠标指针移到该面板下方的列表中选择一个导入的位图。
(3)使用“矩形工具”,在舞台中绘制一个矩形。发现平铺填充时图案和原文件大小一致,如图2.151所示。
(4)如果改变操作顺序,就发现情况会有所不同。
(5)重复步骤(1)。
(6)使用“矩形工具”绘制一个任意填充色的矩形。
(7)使用“颜料桶工具”,再打开“混色器”面板,将类型设置为“位图”,并在下方的列表中选择同样的位图。
(8)将鼠标移到矩形的填充区域中单击,发现此时的位图填充是很小的图案平铺填充,如图2.152所示。
(9)此时可以使用“填充变形工具”进行缩放、旋转或倾斜等调整,如图2.153所示。

图2.151 图案和原

图2.152 小图案平铺填充

图2.153 使用“填充变形工具”
4.分离后图形的编辑
导入的位图图形分离后,可以进行编辑,可以用选区工具(套索工具和滴管工具)选取图片部分,相关内容在前面的任务中已经详细介绍过。
5.对象的组合和合并
“组合”是将多个对象合成为一个对象来处理,即将多个对象打包在一起,其操作是先选中要组合的多个对象,再选择菜单项“修改”→“组合”来完成。如果要取消组合,则选择菜单项“修改”→“取消组合”来完成,取消组合后,还可以得到原先的对象。
“合并”操作可以通过选择菜单项“修改”→“合并”来完成。它和组合是有区别的,它们的不同就在于“合并”多个对象时,是对多个对象进行逻辑运算,生成新的对象。
2.1.7 任务7 使用Deco工具“装饰画面”
2.1.7.1任务说明
Deco工具是Flash CS4中新增的一个亮点,其在Flash CS5中得到了进一步完善。使用Deco工具可以快速完成大量相同元素的绘制,也可以应用它制作出很多复杂的动画效果。将其与图形元件和影片剪辑元件配合,可以制作出效果更加丰富的动画效果。本任务是在任务6完成的基础之上使用Deco工具进一步装饰画面,其完成后效果如图2.154所示。

图2.154 任务7效果
2.1.7.2任务步骤
1.打开Flash CS5应用程序,打开任务6中制作完成的文档“项目1_爱.fla”。
2.在图层“文字”之上新建一个图层,并命名为“花”。
3.单击选择工具面板的Deco工具。
4.在Deco工具的“属性”面板“绘制效果”下拉列表中选择“花刷子”,在“高级选项”的下拉列表中选择“玫瑰”选项,并设置其相应的参数;花色为“玫瑰色(#CC0066)”,花大小为“102%”,树叶颜色为“绿色(#339919)”,树叶大小为“50%”,果实颜色为“粉红色(#FF337F)”。具体如图2.155所示。
5.将鼠标移到舞台中,选择“花”图层,绘制一朵装饰花,调整其位置位于“角色2”的头部附近,其效果如图2.156所示。

图2.155 设置“花刷子”参数

图2.156 绘制玫瑰花
6.继续选择Deco工具,在“绘制效果”列表中选择“树刷子”,在其“高级选项”中选择“卷藤”,并设置其相应参数:树比例“100%”,分支颜色和树叶颜色均为“深绿色(#006600)”,花和果实颜色为“橙色(#FF9900)”,如图2.157所示。

图2.157 设置“树刷子”参数
7.将鼠标移到舞台中,选择“花”图层,在底部的花盆处绘制两条卷藤装饰图案,其效果如图2.158所示。
8.该任务制作完成,保存文档,测试影片。
9.至此该项目全部制作完成。

图2.158 绘制卷藤
2.1.7.3技术支持
Deco工具是在Flash CS4版本中首次出现的,在Flash CS5中得到了大大增强,其中增加了很多绘图工具,它是使用算术计算(称为过程绘图)来绘制图形效果的,其中有的类型要求应用库中创建的影片剪辑或图形元件。Deco工具具有丰富的Flash的绘图表现能力,它使得绘制丰富背景变得方便而快捷。它提供了13 种绘制效果,包括藤蔓式填充、网格填充、对称刷子、3D刷子、建筑物刷子、装饰性刷子、火焰动画、火焰刷子、花刷子、闪电刷子、粒子系统、烟动画和树刷子。
1.藤蔓式填充
利用藤蔓式填充效果,可以用藤蔓式图案填充舞台、元件或封闭区域。通过从库中选择元件,可以替换叶子和花朵的插图。生成的图案将包含在影片剪辑中,而影片剪辑本身包含组成图案的元件。该类型的“属性”面板如图2.159所示。

图2.159 “藤蔓式填充”属性面板
2.网格填充
网格填充可以复制基本图形元素,并有序地排列到整个舞台上,产生类似壁纸的效果。
3.对称刷子
使用对称刷子效果可以围绕中心点对称排列元件。在舞台上绘制元件时,将显示手柄,使用手柄增加元件数、添加对称内容或者修改效果来控制对称效果。使用对称刷子效果可以创建圆形用户界面元素(如模拟钟面或刻度盘仪表)和旋涡图案。
4.3D刷子
通过3D刷子效果,可以在舞台上对某个元件的多个实例涂色,使其具有3D透视效果。
5.建筑物刷子
使用建筑物刷子效果,可以在舞台上绘制建筑物。建筑物的外观取决于为建筑物属性选择的值。
6.装饰性刷子
通过应用装饰性刷子效果,可以绘制装饰线,例如点线、波浪线及其他线条。
7.火焰动画
火焰动画效果可以创建程序化的逐帧火焰动画。
8.火焰刷子
借助火焰刷子效果,可以在时间轴的当前帧中的舞台上绘制火焰。
9.花刷子
借助花刷子效果,可以在时间轴的当前帧中绘制程式化的花。
10.闪电刷子
通过闪电效果,可以创建闪电效果,而且还可以创建具有动画效果的闪电。
11.粒子系统
使用粒子系统效果,可以创建火、烟、水、气泡及其他效果的粒子动画。
12.烟动画
使用烟动画效果可以创建程序化的逐帧烟动画。
13.树刷子
通过树刷子效果,可以快速创建树状插图。
2.2 项目2 操作进阶——制作卡通场景“想飞翔的青蛙”
2.2.1 操作说明
本项目是综合使用各种基本绘图工具、色彩工具和编辑工具等制作完成的,其最后效果如图2.160所示。

图2.160“项目2_想飞的青蛙”效果图
2.2.2 操作步骤
1.新建一个Flash文档,尺寸为“550px×400px”,背景颜色为“灰色(#CCCCCC)”。
2.选择图层1,将其重命名为“背景”。
3.选择“背景”图层,选择菜单项“文件”→“导入”→“导入到舞台”,在文件夹“chap2\素材文件”中选择图片文件“背景.jpg”,将其导入到舞台中。
4.选中舞台中的该图片,打开“属性”面板,设置其位置和大小:“550px×400px”,X、Y参数值均为“0”。这样就使该图片刚好平铺舞台区域,用做背景。
5.在“背景”图层的上方新建一个图层,命名为“镜框”。
6.选择“镜框”图层的第1帧,使用“工具”面板中的“矩形工具”,在舞台的上方边界线处绘制一个笔触颜色为“取消”、填充颜色为线性渐变的矩形。设置渐变颜色分别为“浅棕色(#E9BC9E)”和“深棕色(#552F09)”,绘制后的矩形如图2.161所示。

图2.161 在舞台背景边界处绘制的矩形
7.下面要将矩形调整成镜框的立体效果,使用“工具”面板中的“渐变变形工具”,单击矩形填充色,之后出现线性填充色的调整锚点,如图2.162所示。

图2.162 矩形填充色上出现线性填充色调整锚点
8.先用鼠标在“旋转”锚点上沿逆时针方向拖曳90°,再用鼠标在“宽度”锚点上向下拖曳,使填充色集中变小,从而设置出立体效果,如图2.163所示。

图2.163 使用“填充变形工具”设置出的立体边框效果图
9.选中矩形边框,复制一个,将新复制的矩形边框移动到舞台背景的下方边界处,它们用做镜框的上、下两个边框,如图2.164所示。

图2.164 新复制一个矩形边框
10.选择“镜框”图层,使用“矩形工具”,在舞台的左边界处再绘制一个有轮廓线、填充与上方矩形填充相同的矩形,且该矩形的高度与舞台的高度相同,宽度与上方矩形的高度相同,如图2.165所示。

图2.165 在场景的左边绘制一个矩形
11.使用“线条工具”在左边矩形块的右上角和右下角各画一条直线,如图2.166所示。

图2.166 在左边的矩形上画两条直线
12.按住Shift键选中其中的两个小三角形,再选中所有轮廓线,按Delete键将其删除,如图2.167所示。
13.将修改后的左边的矩形向右移动,如图2.168所示。

图2.167 删除两个小三角形和所有轮廓线

图2.168 将左边修改后的矩形向右移
14.选中左边的矩形,复制一个;选中复制后的图形,选择菜单项“修改”→“变形”→“水平翻转”,且将其移动到舞台的边界处,如图2.169所示。

图2.169 复制且水平翻转形成的右边框
15.根据光线照射的特点,将左边框的填充色使用“填充变形工具”旋转180°,如图2.170所示。

图2.170 将左边框的填充色旋转180°后的效果图
16.在“镜框”图层的上方新建一个图层,命名为“青蛙”,在该图层中使用“椭圆工具”绘制一个轮廓线为“黑细线”、填充色为放射状渐变的椭圆,用做青蛙的身子,渐变色为中间“绿色(#00FF00)”,外围“灰色(#7B7B7B)”,如图2.171所示。
17.使用“椭圆工具”,绘制一个轮廓线为黑细线、填充色为“白色(#FFFFFF)”的小椭圆,再使用“刷子工具”,在该小椭圆的中间绘制一个点,用做青蛙的眼睛,且将该形状复制一个,用做另一个眼睛,如图2.172所示。
18.使用“椭圆工具”,绘制两个轮廓线为黑细线、填充色为“绿色(#00FF00)”的小椭圆,使用“任意变形工具”分别将这两个椭圆旋转,用做青蛙的两条后大腿,再使用“椭圆工具”,设置不变,用类似的方法在两条后大腿下方绘制两条小腿,如图2.173所示。

图2.171 椭圆

图2.172 添上眼睛

图2.173 青蛙的两条后腿
19.选中青蛙身子图形,移动到两条腿上,如图2.174所示。
20.使用“椭圆工具”再绘制一个轮廓线为黑细线、填充色为“绿色(#00FF00)”的椭圆,使用“任意变形工具”分别将其旋转一定角度,再使用“选择工具”将其调整成不很规则的椭圆形状,用做青蛙的前腿,如图2.175所示。
21.使用“椭圆工具”在前腿图形的右边绘制几个小椭圆,小椭圆的笔触颜色为黑色,填充色为“绿色(#00FF00)”,用做脚趾,如图2.176所示。

图2.174 青蛙的身子移到后腿上

图2.175 青蛙的前腿

图2.176 前腿上绘制脚趾
22.选中绘制后的前腿,复制一个,将复制后的图形水平翻转,即绘制了青蛙的两条前腿;然后再将图2.174所示的青蛙图形移到前腿上,其效果如图2.177所示。
23.使用“刷子工具”,将填充色设置为“军绿色(#669900)”,在青蛙图形上绘制花纹,如图2.178所示。

图2.177 绘制前腿后的青蛙图形

图2.178 绘制花纹
24.在青蛙图层的上方再添加一个图层,命名为“文字”。在该图层中使用“文本工具”输入“想飞的青蛙”字样。
25.打开文字的“属性”面板,设置文字的字体为“行楷”,字号为“36”。
26.选中文字,按一次Ctrl+B组合键,将文字分离。
27.依次分别选中各个文字,将它们设置为不同的颜色。
28.至此本项目全部制作完毕。保存文档,命名为“项目2_想飞的青蛙.fla”,测试影片。
习题
1.填空题
(1)“颜色”面板用于选择和设置__________和__________,执行__________命令或者按__________功能键,可以打开该面板。
(2)填充样式分为__________、__________、__________、__________和__________5种模式。
(3)选择__________工具,可以移动图形的中心控制点。
(4)__________工具用于提取线条或者填充的属性,并将提取到的属性应用于其他的图形。
(5)如果要将颜色设置为完全透明,需要在“颜色”面板中改变Alpha选项值为__________。
(6)“多角星形”工具分为__________和__________两种。
(7)选择了“矩形工具”后,单击“工具”面板下方“选项”选区中的“边角半径设置”按钮可以绘制__________。
(8)“铅笔工具”有三种选项模式__________、__________和__________。
(9)当使用“颜料桶”工具填充形状颜色时,如果发现颜色填充不了,可以选择“选项”选区中的__________按钮。
(10)使用__________面板可以对齐、匹配大小或者分布舞台上元素之间的相对位置以及相对于舞台的位置。
2.选择题
(1)在Flash中,使用“钢笔”工具创建路径时,关于调整曲线和直线的说法错误的是__________。
A.当用户使用“部分选择”工具单击路径时,定位点即可显示
B.使用“部分选择”工具调整线段可能会增加路径的定位点
C.在调整曲线路径时,要调整定位点两边的形状,可拖动定位点或拖动正切调整柄
D.拖动定位点或拖动正切调整柄,只能调整一边的形状
(2)下面关于导入的位图说法错误的是__________。
A.可以直接对导入的位图进行编辑
B.需要分离才能对导入的位图进行编辑
C.导入位图的分离可以按Ctrl+B组合键
D.导入位图分离之后可以使用套索工具选取其中的部分图案
(3)选择“修改”→“形状”→“柔化填充边缘”菜单项,__________按照指定的像素值以模糊的形式扩展或者缩进形状。
A.可以
B.不可以
(4)__________工具可以设置或者改变形状图形和图形对象的轮廓线。
A.颜料桶
B.墨水瓶
(5)如果要将两个以上的文字分离,则需要按__________次的“分离”菜单项或者Ctrl+B组合键。
A.一次
B.两次
C.有多少个字就按几次
D.0
3.思考题
(1)比较“颜料桶”工具和“墨水瓶”工具的区别和相同点。
(2)总结“选择工具”和“部分选取工具”在使用上的区别。
实训二Flash绘制图形——基本图形绘制
一、实训目的
掌握绘图工具的使用,绘制简单的图形。
二、操作内容
1.使用椭圆工具、线条工具和选择工具绘制高尔夫球,如图2.179所示。

图2.179 高尔夫球
(1)使用“椭圆工具”绘制一个圆。
(2)使用“线条工具”在圆上绘制两条虚线。
(3)使用“选择工具”将直线调整成弧形。
(4)使用“颜料桶工具”,将填充色设置为放射状,将圆形填充成球。
2.绘制一个冒汽的茶杯,如图2.180所示。

图2.180 冒汽的茶杯
(1)使用“钢笔工具”绘制茶杯形状。
(2)使用“颜料桶工具”和“颜色”面板填充杯子为线性渐变,并使用“填充变形工具”调整渐变色。
(3)使用“铅笔工具”绘制“点状线”线型的曲线用做冒出的汽。
3.使用椭圆工具、文字工具制作台球,如图2.181所示。

图2.181 台球
(1)使用“椭圆工具”绘制一个圆。使用“颜料桶工具”,将填充色设置为放射状,将圆形填充成球。
(2)使用“椭圆工具”在圆上再绘制一个椭圆,也将该椭圆填充成放射状。
(3)在小椭圆上使用“文字工具”输入文字。
实训三Flash文字效果的设置
一、实训目的
掌握文字工具的使用,制作几种特殊效果的文字。
二、操作内容
1.使用文字工具和墨水瓶工具制作空心效果文字,如图2.182所示。

图2.182 空心字
(1)使用“文字工具”输入“空心字”字样的文字。
(2)按两次Ctrl+B组合键,将文字分离。
(3)使用“墨水瓶工具”,设置笔触大小和不同的笔触颜色,在文字轮廓线上单击。
(4)使用“选择工具”选取文字的填充,按Delete键将其删除。
2.使用文字工具和颜色桶工具,通过将边框转换为填充且柔化填充边缘等操作制作彩虹效果文字,如图2.183所示。

图2.183 彩虹字
(1)使用“文字工具”输入“彩虹字”字样的文字。
(2)将文字分离为图形。
(3)使用“墨水瓶工具”,设置笔触大小为“4”,笔触颜色为“白色(#FFFFFF)”,在文字轮廓线上单击。
(4)使用“颜色桶工具”,设置填充色为渐变色,在文字填充区域中单击。
(5)选定文字的轮廓线,将其转换为填充,再设置“柔化填充边缘”效果。
3.应用文字工具、颜料桶工具和填充变形工具制作立体文字,如图2.184所示。
(1)使用“文字工具”,输入文字。
(2)将文字分离为图形。

图2.184 立体文字
(3)使用“墨水瓶工具”在文字轮廓线上单击,给文字加上轮廓线。
(4)选中文字的内部填充色,将其删除。
(5)按Shift键单击,全选中文字的轮廓线。
(6)按Ctrl键拖动复制一份。
(7)要制作出立体效果,使用“选择工具”选中要删除的线,按Delete键将其删除,再使用“线条工具”添上合适的直线,构成立体文字的外围轮廓线。
(8)使用“颜料桶工具”并设置填充色为线性,在文字上单击填充色彩,通过色彩制作出立体的效果。
(9)全选中轮廓线,将其删除。
实训四 色彩填充、调整操作和简单卡通图形制作
一、实训目的
掌握图形色彩的填充与变形操作,灵活综合应用“工具”面板中的工具绘制复杂的图形。
二、操作内容
1.应用椭圆工具和色彩的填充及填充变形工具制作纽扣,如图2.185所示。

图2.185 纽扣
(1)使用“椭圆工具”绘制一个圆形。
(2)使用“颜色桶工具”,将填充色设置为线性进行填充。
(3)复制同心圆,将复制的圆形使用“任意变形工具”将其缩小,且使用“填充变形工具”将填充色调整180°。
(4)重复步骤(3)三次,每次都将新复制的同心圆缩小,且使用“填充变形工具”将填充色调整180°。
(5)使用“椭圆工具”绘制白色无轮廓线的小圆形,且将该小圆形复制三个,用做纽扣的四个小洞眼。
2.使用“绘图工具”,设计创作一个Logo标志,也可以自选主题设计,如图2.186所示。

图2.186 Logo标志
3.自行选择一幅卡通图形,进行模仿制作。