《网页设计与制作教程》-第十六章讲稿

第十六章Flash基本工具的使用Flash主要使用矢量图来设计动画。Flash提供了大量的矢量图绘制工具，通过Flash基本绘图工具的学习，学会绘制一些简单的矢量图。16.1Flash绘图工具的使用Flash绘制图形过程中，同一图层内的对象会产生相互的影响。当同一图层内的对象有重叠时，新绘制的对象的内容将取代原来的对象的内容。基于这种原理，可以制作出“镂空”效果，如图16-1所示。图16-1同图层内容的影响16.1Flash绘图工具的使用按住shift键将文字全部选中后移开，正方形变成镂空效果，露出背景色，因为文本“FLASH”已经取代了正方形的相应部分。

16.1.1线条工具Flash线条工具可以绘制各种直线，绘制直线时按住shift键，可以绘制水平和垂直的直线，或者45度倾角的斜线。

16.1.1线条工具线条工具的使用

Flash绘图工具栏里选择“线条”工具按钮，鼠标光标移动到工作区后将变成“十”字形图标，说明此时已经激活了工具，可以使用它绘制各种直线，根据设计需要可以配合shift键绘制特殊的直线线条工具的属性设置

在绘制直线前需要对直线的属性进行设置，可以设置的直线属性包括直线的颜色、粗细和类型等。直线的颜色可以通过下面两种途径来进行设置：

16.1.1线条工具通过绘图工具栏中的“笔触”颜色调整

点击“笔触”颜色中的矩形，会弹出一个调色板，如图16-2所示。调色板的下方是一些预先设置好的“过渡色”，可以在调色板中选取某种颜色作为所绘线条的颜色。还可以通过单击右上角的，打开“颜色”对话框，如图16-3所示，可以在“颜色”对话框中选取所需颜色。

图16-2调色板图16-3颜色面板16.1.1线条工具通过属性面板中的“笔触”颜色调整

点击“笔触”颜色中的矩形，会弹出调色板，在调色板中选择颜色。属性面板可以对直线的粗细和类型进行设置，属性面板如图16-4所示：

图16-4线条工具属性面板16.1.1线条工具属性面板上的“笔触高度”文本框主要用于设置绘制线条的宽度，可以直接在文本框中输入高度值（范围是0.1～200），也可以通过右侧的滑杆来调节（范围是0.25～200），其中Flash中的线条宽度是以px（像素）为单位的。16.1.1线条工具属性面板上的“笔触样式”下拉列表用来选择绘制线条的样式，Flash8已经预置了一些常用的线条类型，例如：极细线、实线、虚线、点状线等。

如图16-5所示：

图16-5笔触样式对话框16.1.2椭圆工具Flash绘图工具栏的“椭圆”工具主要用于绘制椭圆和圆。“椭圆”工具绘制的图形主要由轮廓线（边框线或边界线）和内部填充色组成。16.1.2椭圆工具使用“椭圆”工具可以在椭圆中设置填充色，而“线条”工具、“铅笔”工具则不能。“椭圆”工具不仅可以对轮廓线的颜色、线宽、和线型进行设置，还可以对填充色进行设置。16.1.2椭圆工具椭圆工具的属性设置

Flash绘图工具栏中点击“椭圆”工具按钮，鼠标移动到工作区后变成“十”字形图标，说明“椭圆”工具已被激活。然后根据设计需求修改“椭圆”工具的属性。如图16-6所示。

图16-6椭圆工具属性面板16.1.3矩形工具和多角星形工具Flash绘图工具栏中点击“矩形”工具或“多角星形”工具，可以在舞台上绘制“矩形”或“多边形”图形。它们与“椭圆”工具类似，可以对“轮廓线”颜色和填充色进行设置。16.1.3矩形工具和多角星形工具矩形工具的属性设置

Flash绘图工具栏中点击“矩形”工具按钮，然后将鼠标移到工作区，图标变形“十”字，表明“矩形”工具已被激活。如图16-7所示。

图16-7矩形工具属性面板16.1.3矩形工具和多角星形工具Flash中“矩形”工具默认条件下，绘制的是直角矩形，但也可以绘制圆角矩形。如果需要绘制圆角矩形，双击绘图工具栏中的“矩形”工具图标，弹出“矩形边角半径”设置对话框，设置“边角半径”为所需值，如图16-8所示。图16-8矩形边角半径对话框16.1.3矩形工具和多角星形工具“边角半径”文本框中输入矩形圆角的半径，范围为0～999，以“磅”为单位。数值越小，绘制的圆角矩形的圆角弧度就越小，默认值为0，表示4个角为直角。数值越大，绘制的圆角矩形的圆角弧度就越大。

图16-8矩形边角半径对话框16.1.4铅笔工具Flash绘图工具栏中的“铅笔”工具主要是用来绘制线条和形状。“铅笔”工具绘制的是矢量线条，它既可以绘制直线又可以绘制平滑的或尖锐的曲线。它使用起来比“线条”工具更加灵活。但是，“铅笔”工具只能绘制图形的轮廓线，没有填充色，这是与“刷子”工具的主要区别。

16.1.4铅笔工具Flash绘图工具栏中选中“铅笔”工具按钮，然后点击“选项”面板中的“铅笔模式”按钮，将弹出“铅笔模式”设置列表，其中包括“伸直”、“平滑”和“墨水”3个选项。

“伸直”模式：“铅笔”工具中功能最强的一种模式，具有很强的线条形状识别能力，可以对绘制线条进行自动校正，可以对线条进行平滑处理，可以自动识别直线、椭圆、矩形和半圆、三角形，将绘制的图形自动转换为这些常见的几何形状。

16.1.4铅笔工具“平滑”模式：此模式可以自动平滑曲线，消除绘制过程中的“抖动”和“锯齿”，达到一种平滑的线条效果。

“墨水”模式：此模式绘制的线条是绘制过程中鼠标所经过的实际轨迹，最大限度上保留了实际线条的形状，仅做轻微的平滑处理。

16.1.4铅笔工具铅笔工具的属性设置

Flash绘图工具栏中点击“铅笔”工具按钮，然后将鼠标移到工作区，图标变为铅笔，表明“铅笔”工具已被激活。然后根据设计需要在属性面板中对“铅笔”工具的相关属性进行设置，如图16-9所示。

图16-9铅笔工具属性面板16.1.4铅笔工具“铅笔”工具的属性面板可以对“笔触”的颜色、高度和样式进行设置。

“笔触高度”文本框用于设置所绘制线条的宽度，可以在文本框中输入笔触的高度值，范围是0.1～200，也可以通过右侧的滑杆来调节。

“笔触样式”下拉列表用于选择所绘制的线条样式，Flash8已经预置了一些常用的线条类型，例如：实线、虚线、点状线、锯齿状线、点描线和阴影线等。

16.1.5刷子工具Flash“刷子”工具主要用于绘制各种形状的线条，绘制的线条效果更自然。“刷子”工具绘制的线条只包括线条的填充色，而不包括线条的轮廓线，这是“刷子”工具与“铅笔”工具的最大区别。

16.1.5刷子工具各选项功能如下：

标准绘画模式：表示画刷的标准功能，可以在舞台上绘制各种图形，图形与鼠标实际轨迹相同。

颜料填充模式：表示画刷绘制的区域里除了轮廓线之外都变为画刷的效果，就是画刷经历的路径中只改变填充色，不会改变轮廓线。

后面绘画模式：表示画刷只对空白区域有作用，即已经绘制图形对象的区域不会保留画刷的线条。

颜料选择模式：表示画刷只对填充色被选中的区域起作用，使用此模式绘画时，首先选中要修改的填充色，然后用画刷在上面修改，选中区域被修改，其它位置和轮廓线保持不变。

内部绘画模式:表示画刷只能对与绘制起点同处一个区域的填充色进行修改，而轮廓线的以外的区域保持不变。

16.1.5刷子工具Flash绘图工具栏中选中“刷子”工具，然后将鼠标移动到工作区，鼠标图标变为实心圆点时表名画刷已被激活。如图16-10所示。图16-10刷子工具属性面板16.1.6钢笔工具Flash绘图工具栏中的“钢笔”工具主要用于绘制精确的路径，如直线或平滑的曲线。“钢笔”工具又叫“贝塞尔曲线”工具，广泛应用于各种专业绘图软件。

16.1.6钢笔工具“钢笔”工具既可以绘制直线又可以绘制曲线，并且可以对绘制好的直线或曲线进行精确的调整。16.1.6钢笔工具钢笔工具的使用

Flash绘图工具栏里选择“钢笔”工具按钮，然后将鼠标移到工作区，图标变成钢笔，表明“钢笔”工具已被激活，可以用来绘制线条。将鼠标指向到曲线起点并单击，然后将鼠标移动到曲线终点，按住鼠标不放，绘制的曲线出现，通过拖曳鼠标得到需要的曲线，然后才释放鼠标，一段曲线绘制完成，点击下一点继续绘制。16.1.6钢笔工具钢笔工具的属性设置

Flash绘图工具栏中选择“钢笔”工具时，“钢笔”工具被激活，在属性面板里显示“钢笔”工具的相关属性。可以在属性面板对“钢笔”工具的“笔触”颜色、“笔触”样式和“笔触”高度进行定义。如图16-11所示。

图16-11钢笔工具属性面板16.2Flash颜色工具的使用Flash颜色工具主要包括“颜料桶”工具和“墨水瓶”工具，“颜料桶”工具主要用来设置图形填充色的颜色，可以对已绘制图形、封闭区域或半封闭区域内的填充色进行修改或设置。“墨水瓶”工具主要用于设置图形的轮廓线的颜色，或者为图形添加轮廓线（描边）。可以对所有图形的轮廓线的颜色进行设置。

16.2.1颜料桶工具“颜料桶”工具主要有三种填充模式：单色填充、渐变填充和位图填充。使用“颜料桶”工具可以向封闭区域或半封闭区域填充颜色。16.2.1颜料桶工具颜料桶工具的属性设置

Flash绘图工具栏里选中“颜料桶”工具按钮，将鼠标移动到工作区内，鼠标图标变为时，表示“颜料桶”工具已被激活。如图16-12所示。

图16-12颜料桶工具属性面板16.2.1颜料桶工具除属性面板可以定义颜料桶的填充属性之外，绘图工具栏中的“选项”面板还可以对颜料桶的填充选项进行设置，主要填充选项有空隙大小和锁定填充，空隙大小主要是根据空隙大小来判断是否填充。16.2.1颜料桶工具空隙大小选项的主要功能如下：

不封闭空隙：表示填充区域如果是非封闭区域，则不对其进行填充。

封闭小空隙：表示如果填充区域不是封闭区域，只允许轮廓间隙很小时，才将区域作为封闭区域填充。

封闭中等空隙：表示如果填充区域不是封闭区域，只允许轮廓间隙是中等以下间隙时，才将区域作为封闭区域填充。

封闭大空隙：表示如果填充区域不是封闭区域，允许轮廓间隙是较大时，将区域作为封闭区域填充。

16.2.2墨水瓶工具Flash绘图工具栏中的“墨水瓶”工具的主要功能是描边，就是设置图形轮廓的颜色或给图形添加轮廓。在绘图工具栏中点击“墨水瓶”工具按钮，将鼠标移动到工作区，鼠标图标变成时，表明“墨水瓶”工具已被激活。16.2.2墨水瓶工具根据设计的需要可以对“墨水瓶”工具的相关属性进行修改，通过“墨水瓶”工具的属性面板可以对墨水瓶工具的笔触颜色、笔触样式和笔触高度进行修改。“墨水瓶”工具的属性面板如图16-13所示。

图16-13墨水瓶工具属性面板16.3Flash变形工具的使用Flash主要变形工具包括“任意变形”工具和“填充变形”工具。“任意变形”工具主要用于对图形的各种变形操作，可以调整图形的大小，对图形进行旋转，对图形进行扭曲。16.3.1任意变形工具Flash绘图工具栏里点击“任意变形”工具按钮，将鼠标移动到工作区，鼠标图标变为，表明“任意变形”工具已被激活。在工作区中选中要变形的图形，图形周围会显示变形框，调整变形框上面的“控制节点”就可以对图形进行大小、现状、翻转、扭曲等调整。如图16-14所示。

图16-14任意变形工具示例16.3.2填充变形工具Flash中的“填充变形”工具只能用于添加“过渡填充色”的图形，主要是处理图形内过渡色的颜色、形状、范围。使用“填充变形”工具前，首先要为被编辑图形填充过渡色。选择“油漆桶”工具，然后选择绘图工具栏中的“填充”工具，并在填充调色板中选择下方的过渡填充色，如图16-15所示。图16-15选取过渡颜色16.3.2填充变形工具“油漆桶”工具的填充色设置为过渡色后，用油漆桶工具填充图形，图形填充色变为所选过渡色。【例16-1】制作一个过渡色填充的小球，如图16-16所示。

图16-16填充变形工具示例16.4Flash选择工具的使用Flash的选择工具主要包括“选择”工具和“部分选取”工具，它们的主要功能是选取舞台上的各种对象。16.4.1选择工具Flash中的选择工具主要用于选择对象和修改对象。在Flash绘图工具栏里选中“选择”工具，将鼠标移动到工作区，鼠标图标变成，表明“选择”工具处于激活状态。“选择”工具选取对象的方法有：点击鼠标，主要用于选中线条、图形填充、图形轮廓线、文本等图形对象；双击鼠标，主要用于选中多个相连的线段。16.4.1选择工具“选择”工具可以用来修改图形的形状，点击“选择”工具，然后将鼠标移动到图形的边界，当鼠标图标变为时，拖动鼠标调整图形的边界的形状。如图16-17所示。图16-17选择工具修改图形16.4.1选择工具选中“选择”工具时，绘图工具栏的“选项”面板会显示“选择”工具的相关工具，分别是紧贴至对象工具、平滑工具和伸直工具。

“紧贴至对象”工具，又称“吸附”工具。16.4.1选择工具“平滑”工具主要是对线条或图形轮廓线进行平滑处理，选中要平滑处理的线条，然后每点击一次平滑工具，线条就会平滑一些。

“拉直”工具主要用于拉直线条或轮廓线，选中要拉直处理的线条，然后每点击一次拉直工具，线条就会平直一些。

16.4.2部分选取工具Flash的“部分选择”工具主要用于选择和修改线条或图形的轮廓线。在绘图工具栏里选中“部分选择”工具，然后将鼠标移动到工作区，鼠标图标变为，表示“部分选择”工具被激活。“部分选择”工具选取对象的方法有：鼠标点击图形的轮廓线，图形的轮廓线被选中。

16.4.2部分选取工具用“部分选择”工具调整图形轮廓线时，首先将鼠标移动到图形边界，当鼠标图标变为时，点击轮廓线，显示轮廓线的所有节点，然后通过拖曳轮廓线节点来调整图形形状。如图16-18所示。图16-18部分选择工具修改图形16.4.3套索工具Flash“套索”工具是一种区域选择工具，凡是舞台上的对象被“套索”圈划的部分都将被选中，套索工具可以选择线条、图形、填充块等对象，并且只有被套索圈划区域的部分被选中。16.4.3套索工具Flash绘图工具栏里选择“套索”工具时，绘图工具栏下方的“选项”面板中会出现三个套索工具的选项，分别是“魔术棒”工具、“魔术棒”设置工具和“多边形模式”工具。16.4.3套索工具【例16-2】用魔术棒选择企鹅粉色的围巾区域，只有联通区域的“粉色”被选中。然后将选中区域的填充色修改为红色，如图16-19所示。

图16-19魔术棒工具选择区域16.5Flash文本工具的使用Flash中的“文本”工具主要用于添加文本和对文本进行编辑。在Flash绘图工具栏里选中“文本”工具按钮，将鼠标移动到工作区，鼠标图标变为时，表明文本工具被激活。如图16-20所示。

图16-20文本工具属性面板16.5Flash文本工具的使用属性面板中的“文本类型”下拉列表包含三种文本类型，分别是“静态”文本、“动态”文本和“输入”文本。当选择不同文本类型时，“文本”工具的属性面板内显示的内容也有区别。

16.5Flash文本工具的使用静态文本的特点

“静态”文本是指文本对象的内容一直保持不变，程序运行过程中不能被修改。“静态”文本属性面板如图16-21所示。“静态”文本主要具有水平排列和垂直排列切换功能，并且在垂直排列状态下具有旋转功能。图16-21静态文本属性面板16.5Flash文本工具的使用动态文本的特点

“动态”文本是指文本的内容可以改变，在程序设计过程中可以对“动态”文本的内容进行修改。“动态”文本可以用来输出动态文字信息。“动态”文本主要用于具有交互性的动画设计中。每个动态文本都有一个“实例名称”，Flash的动作脚本程序通过“实例名称”来调用“动态”文本。16.5Flash文本工具的使用“动态”文本也可以制作超级链接，在“URL链接”文本框中输入“”，测试影片会发现文字超级链接可以链接到搜狐首页。如图16-22所示。

图16-22动态文本属性面板16.5Flash文本工具的使用输入文本的特点

“输入”文本是指可以接收用户输入的文本，动画设计过程中需要用户输入数据，将输入数据的文本框定义为“输入”文本，就可以接收用户数据了。如图16-23所示。

图16-23输入文本的属性面板16.6Flash工具应用使用Flash绘图工具栏里提供的选择工具、绘图工具、文本工具和颜色工具，可以绘制出各种各样生动、形象的Flash动画和图形对象。【例16-3】使用Flash工具绘制一个辣椒。

16.6Flash工具应用新建Flash文档

打开Flash后点击菜单栏的【文件】→【新建】→【Flash文档】，创建一个新的Flash文档。16.6Flash工具应用绘制“辣椒”元件绘制辣椒的主要步骤如下：使用绘图工具栏中的“椭圆”工具，并设置笔触颜色和填充色均为绿色，绘制一个圆，如图16-24所示。

使用绘图工具栏中的“选择”工具，对椭圆形状进行编辑，如图16-25所示。

使用绘图工具栏中的“选择”工具，对图形的外观形状继续进行编辑，如图16-26所示。

使用绘图工具栏中的“选择”工具，对图形的外观形状进行编辑，一直编辑到形状满意为止，如图16-27所示。图16-24绘制椭圆图16-25编辑椭圆形状图16-26编辑外观形状图16-27最终辣椒形状16.6Flash工具应用选择Flash绘图工具栏中的“填充色”工具，选择填充色调色板中的过渡色。打开混色器，选择菜单栏的【窗口】→【混色器】，在Flash的功能面板组中显示混色器，对过渡颜色进行编辑，将黑色墨水瓶换成绿色墨水瓶，如图16-28所示。

图16-28混色器中调整过渡色16.6Flash工具应用选择Flash绘图工具栏中的“填充变形”工具，对辣椒的填充色进行变形处理，填充色效果如图16-29所示。将辣椒转换为元件，如图16-30所示。

图16-30辣椒元件16.6Flash工具应用绘制叶子元件

使用Flash绘图工具栏中的“椭圆”工具绘制一个椭圆，并将椭圆工具的笔触颜色和填充色设置为绿色。然后使用“选择”工具对图形形状进行修改，最终效果如图16-31所示。

图16-31叶子形状16.6Flash工具应用在叶子中绘制叶脉，选择Flash绘图工具栏中的“线条”工具绘制如图所示的直线，直线的笔触颜色设置为深绿色，如图16-32所示。

使用“选择”工具将直线拉弯，弧度不要过大，以形状自然为编辑标准，效果如图16-33所示。

图16-32绘制叶脉图16-33将叶脉线条拉弯16.6Flash工具应用使用Flash绘图工具栏的“线条”工具绘制所有叶脉线条，并调整它们的形状到满意为止。并使用绘图工具栏中的“墨水瓶”工具对叶子的外轮廓线的颜色进行编辑，“墨水瓶”工具笔触颜色选择与叶脉颜色相同，如图16-34所示。

图16-34绘制叶子所有叶脉16.6Flash工具应用将绘制的叶子转换为元件，使用Flash绘图工具栏中的“选择”工具选中叶子图形，然后点击菜单栏【修改】→【转换为元件】，将叶子转换为元件