实训flash绘制图形.doc

第 2 章 使用 Flash 绘制图形 教学提示： 本章主要介绍使用 Flash 工具箱中的工具绘制图形的方法和 技巧。 教学重点与难点： 使用 Flash 工具箱中的各种工具绘制逼真的图形，设置工具 箱中各种工具的属性，制作特殊效果的漂亮文字。 Flash CS3 平面动画制作案例教程与实训 2.1 Flash 图形绘制概述 2.1.1 图形绘制概述 组成 Flash 动画的基本元素是图形和文字，制作一个高品质的动画离不开创作者高超 的绘图能力和审美水平。Flash 提供了强大的绘图功能，可以使创作者轻松地绘制出所需要 的任何图形。 2.1.2 绘图工具介绍 Flash 提供的主要绘图工具分为以下 4 大类。 1. 基本绘图工具 Flash 提供的基本绘图工具可分为两组：几何形状绘制工具(线条工具、椭圆工 具、矩形工具和多角星形工具)和徒手绘制工具(铅笔工具、钢笔工具、 刷子工具、橡皮擦工具)。基本绘图工具可以直观地根据名称知道其作用。但是， 这些工具有很多选项和设置，实际使用起来要复杂一些。本章将会通过 7 个案例由浅入深 地逐步介绍这些工具的使用。 2. 选择工具 Flash 提供的选择工具包括部分选取工具、套索工具和选择工具。利用这 些工具，可以在 Flash 的绘图空间选择元素，捕捉和调整形状或者线条的局部形状。 3. 修改图形工具 Flash 提供的修改图形工具也可分为两组：填充工具(滴管工具、颜料桶工具、 墨水瓶工具、颜色面板)和变形工具(渐变变形工具和任意变形工具等)。 前者用于给图形填充颜色，后者用于更改线条和填充效果，如扭曲、拉伸、旋转和移动图 形等。 4. 文本工具 Flash 还专门提供了文本工具用于在图形中输入和编辑文字，并可随时随处在动画 中按用户的需要显示精美的文字，达到图文并茂的效果。 2.1.3 绘图常用的操作技巧 本章除了主要介绍绘图工具的使用外，还将介绍在绘图中常用的一些操作技巧。 (1) 如何选择、移动和复制对象。 (2) 如何进入对象内部进行操作。 (3) 如何排列图形。 (4) 如何进行图形的组合和打散。 18 第 2 章 使用 Flash 绘制图形 (5) 如何导入位图。 (6) 如何将位图转换为矢量图形。 (7) 如何建立和使用图形元件和影片剪辑元件。 (8) 如何建立新图层和使用图层的技巧。 (9) 如何将线条转换为填充。 (10) 如何扩展填充、柔化填充边缘和翻转图形等。 2.1.4 本章案例简介 本章将通过 7 个案例，来讲解 Flash 提供的各种绘图工具，以及用于对图形进行修改 的一些辅助菜单。树叶案例主要讲解的是各种线条绘制工具的使用技巧；雪房子 案例主要讲解的是各种形状绘制工具的使用技巧；易拉罐案例主要讲解的是颜色填充 工具的使用技巧；小青蛙案例主要讲解的是对舞台上对象的一些编辑和修改技巧；春 天来了案例主要讲解的是元件的使用方法、任意变形工具的使用，以及图形的平滑、伸 直和优化等技巧；Happy Time 特效文字案例主要讲解的是位图的导入、转换、选择区 域等操作，以及文本编辑的技巧； 动态山水画案例是一个综合案例，除了用到上面讲 过的一些工具来绘制图形，还补充了设计面板及一些图形编辑菜单的使用技巧。 2.2 树叶案例 实例说明 本节为树叶案例，本案例使用钢笔工具、线条工具、铅笔工具制作， 效果如图 2.1 所示。 图 2.1 树叶最终效果图 教学重点与难点 钢笔工具、线条工具、铅笔工具的使用，以及这 3 类工具的属性面 板的设置。 19 Flash CS3 平面动画制作案例教程与实训 2.2.1 操作步骤 1设置文档属性 (1) 先启动 Adobe Flash CS3，然后单击 按钮，或者双击时间轴窗口下方 面板的 中的 中的按 钮 ，打开文档属性对话框，修改其中的参数，如图 2.2 所示。 图 2.2 文档属性对话框 (2) 单击文件保存菜单项，将新文档保存，命名为树叶。 2设置工具属性 单击工具箱中的钢笔工具按钮 ，然后修改工具箱中笔触颜色 色(#009800)，填充颜色 为深绿 为浅绿色(#00CC00)，为了便于填充颜色，还要取 消选中对象绘制按钮 ；并把属性面板 笔工具的笔触粗细修改为2。 中钢 提示： 为对象绘制按钮，默认情况下这个按钮是被单击选中状态。单击选中对象绘 制按钮 后，绘制出的图形是一个整体对象，方便用户对图形进行选择、移动和变 形等操作，但在此种状态下，用户不能为使用线条工具绘制的封闭区域填充颜色。 3绘制一片树叶 在舞台的合适位置单击鼠标创建第1个锚点，在第一个锚点的正下方单击并向右水平拖 动创建第2个锚点，画出一条曲线，如图2.3所示，然后在第1个锚点上单击，封闭图形，如 图2.4所示，单击颜料桶工具按钮 ，填充封闭区域，如图2.5所示。单击线条工具 按钮 ，并单击紧贴至对象按钮 ，在树叶的上部和底部之间绘制一条直线作为树叶 的主叶脉，如图2.6所示。单击选择工具按钮 ，将鼠标指针放在直线上，当光标变成 状时，按住鼠标左键并微微拖动，使直线变成曲线，如图2.7所示；然后单击线条工具 20 第 2 章 使用 Flash 绘制图形 按钮 ，设置笔触粗细为1，绘制出叶片的全部叶纹，如图2.8所示。 图 2.3 绘制曲线 图 2.4 绘制封闭图形 图 2.5 填充图形 图 2.6 绘制直线 图 2.7 调整直线 图 2.8 绘制叶纹 提示： 为紧贴至对象按钮，默认情况下这个按钮处于单击选中状态。单击选中紧 贴至对象按钮 后，绘制的图形会自动贴紧原有图形并对齐。 4绘制整枝树叶 单击选择工具按钮 ，拉一个矩形框，选中整个叶片。按住 Ctrl 键，拖动叶片。 每次拖动可复制出一片树叶，共复制 6 片。单击任意变形工具按钮 ，选中其中的一 片树叶，效果如图 2.9 所示，调整 6 片树叶的大小及位置，如图 2.10 所示；单击线条工 具按钮 ，设置笔触粗细为1.5，笔触颜色为棕色(#663300)，绘制每片 树叶的叶柄。单击铅笔工具按钮 ，选择平滑绘图模式 ，修改笔触粗细为 3，绘制树叶的枝，最终效果如图 2.11 所示。最后单击文件保存菜单项，保 存文档。 图 2.9 调整图形大小和位置 图 2.10 调整大小与位置后效果 图 2.11 绘制叶柄 21 Flash CS3 平面动画制作案例教程与实训 2.2.2 技术实训 1. 钢笔工具的使用 钢笔工具 可以通过绘制精确的路径来定义直线和平滑的曲线，这些路径定义了 直线或曲线的可调节线段。使用钢笔工具绘制直线和曲线时要创建锚点，锚点决定了 线的长度和方向，可以通过调节锚点来修改和编辑直线和曲线。 1) 绘制直线 简单地移动鼠标并连续单击就可以用钢笔工具画出一系列直线段，如绘制一个三 角形的过程如图 2.12 所示。只要在单击选中钢笔工具按钮 后，单击鼠标左键就可以 绘制出一个个锚点，当光标变成 形状时单击，就可以形成封闭图形。结束线条的绘制， 可单击工具箱中除钢笔工具按钮 之外的任何其他工具按钮，线条的真正颜色和样式 就会显示出来。 图 2.12 绘制三角形的过程 另外，可以通过属性面板如图 2.13 所示，设置钢笔工具的属性，然后绘制所 需的直线或者曲线；也可以绘制后，选中线条，修改其属性。 图 2.13 钢笔工具的属性面板 2) 绘制曲线 单击和拖动可以画出曲线，拖动的长度和方向决定了曲线的形状和宽度。使用钢笔 工具 绘制曲线有着明显的优势。在本案例的图2.3中，当绘制第2个锚点的时候，单击 鼠标左键并拖动，就出现了一个调节杆，继续按住鼠标左键可以向任意方向拖动调节杆， 直到得到满意的曲线为止。 3) 钢笔工具的下拉菜单 当用鼠标单击钢笔工具按钮 的小箭头时，将会打开一个下拉菜单，如图2.14所 示，分别为增加锚点工具、删除锚点工具和转换锚点工具。当单击选中增 加锚点工具按钮 后，将光标移动到没有锚点的位置时，单击可增加锚点。当单击选中 删除锚点工具按钮 后，将光标移动到锚点处，单击可删除锚点。当单击选中转换 锚点工具按钮 后，单击并拖动锚点，可改变曲率。 22 第 2 章 使用 Flash 绘制图形 图 2.14 钢笔工具的下拉菜单 提示：在使用钢笔工具 绘制图形的过程中，光标也会出现3种不同的样式， 表示单 击可以创建一个锚点； 表示单击该锚点并拖动可以绘制出一条直线； 表示单击 锚点可以形成一个封闭的图形。 2. 线条工具的使用 线条工具 擅长的是绘制直线，可以通过属性面板来设置线条的颜色、粗细 和样式等，使用方法同钢笔工具 的属性面板。 提示：在使用线条工具 绘制直线时，按住Shift键可以绘制水平、竖直方向上的直线， 也可以绘制出倾斜45的直线。 3.铅笔工具的使用 铅笔工具 使用起来就像一支铅笔，可以绘制出任意形状的线条和图形。铅笔 工具有 3 种绘图模式：直线化、平滑和墨水绘图模式，如图 2.15 所示。直 线化绘图模式适合绘制规则的线条，并且绘制的线条会分段转换成直线、圆、椭圆、矩形 等规则线条中最接近的一种线条。平滑绘图模式会自动将绘制的曲线转换为平滑的曲线， 而墨水绘图模式绘制出的线条接近徒手画的线条。 另外，铅笔工具的属性面板和钢笔工具、线条工具的非常相似，使 用方法也相同。只是当选择平滑绘图模式时，多了一个 大，绘制出的线条越平滑。 选项，其中的数值越 图 2.15 铅笔工具的不同绘图模式 提示：在使用铅笔工具的过程中按住Shift键，则线的延伸方向将被限制在水平、竖直 方向上。 23 Flash CS3 平面动画制作案例教程与实训 2.3 雪房子案例 实例说明 本节为雪房子案例，本案例使用矩形工具、椭圆工具、多角星形工具、 刷子工具、橡皮擦工具等制作，效果如图 2.16 所示。 图 2.16 雪房子最终效果图 教学重点与难点 矩形工具、椭圆工具、多角星形工具、刷子工具、橡皮擦工具 的使用，5 类工具的属性面板的设置。 2.3.1 操作步骤 1设置文档属性 (1) 启动 Adobe Flash CS3 后，新建一个文档，设置文档大小为 400300 像素，背景 颜色为白色。双击手形工具按钮 自动调整大小。 (2) 单击文件保存菜单项，将新文档保存，命名为雪房子。 2绘制房子 (1) 单击矩形工具按钮 ，设置工具箱中笔触颜色 为黑色，填充 色 为无。取消选中对象绘制按钮 ，设置好后绘制两个矩形。单击选择工具 按钮 ，当鼠标变成 形状时，调整上面矩形左右两个顶点的位置，如图 2.17 所示。 图 2.17 雪房子轮廓的绘制过程 24 第 2 章 使用 Flash 绘制图形 (2) 单击多角星形工具按钮 ，单击属性面板中的选项按钮 ，打 开工具设置对话框，设置如图 2.18 所示。绘制三角形的屋檐，如图 2.19 所示。然后单 击线条工具按钮 ，绘制一些线条，绘制的时候可以借助紧贴至对象按钮 ，效 果如图 2.20 所示。 图 2.18 工具设置对话框 图 2.19 绘制三角形的屋檐 图 2.20 绘制线条 (3) 单击选择工具按钮 ，选择屋檐下多余的线条进行删除，单击椭圆工具 按钮 ，绘制一个椭圆，然后单击矩形工具按钮 ，绘制一个和椭圆相交的矩形，如 图 2.21 所示。使用选择工具 单击椭圆的下部，按 Delete 键删除，最后单击线条工 具按钮 ，在窗户上绘制几条窗格。画好窗户后，单击选择工具按钮 ，选中窗户， 当光标变成 形状时，按住 Ctrl 键移动可复制窗户，门的绘制方法相同，效果如图 2.21 所 示。单击矩形工具按钮 和线条工具按钮 绘制烟囱、台阶和屋顶的瓦片，并删 除多余的线条，效果如图 2.22 所示。 图 2.21 绘制门窗 3给房子填充颜色 图 2.22 绘制烟囱、台阶和瓦片 (1) 单击选择工具按钮 ，选中门窗的轮廓线，然后从属性面板中将笔触 粗细修改为3，线条颜色为咖啡色(#FF6600)。从工具箱中设置填充颜色 25 Flash CS3 平面动画制作案例教程与实训 为灰色(#CCCCCC)，单击颜料桶工具按钮 来填充屋顶、门两侧和台阶两侧以及 台阶的最上面一阶。使用同样的方法填充墙和烟囱檐的颜色为#FF9999，门的颜色为 #663300，墙围和烟囱的颜色为红色，台阶的第二阶及屋檐的阴影的颜色为#999999， 第三阶颜色为#666666，如图 2.23 所示。 (2) 单击刷子工具按钮 ，将填充颜色修改为白色，在选项区将刷子 选中为标准绘画模式 ，形状选中为圆形按钮 ，刷子大小为从上到下第三个按 钮 ，在房顶上用刷子刷几下，就可以形成白雪覆盖屋顶的效果，如图 2.24 所示。此步骤 通过单击橡皮擦工具按钮 在标准擦除模式下，大小为最小 ，在屋顶上擦几下 也可以实现相同的效果。 (3) 按 CtrlS 组合键保存文件。 图 2.23 房子上色后效果 图 2.24 雪房子最终效果 提示：使用刷子工具 和橡皮擦工具 实现雪房子的效果虽然相同，但是使用刷子 工具形成的雪是白色的填充颜色，而用橡皮擦工具形成雪的效果，是擦除掉 了屋顶原来的颜色形成的。如果把背景色改为其他颜色，就会透出背景的颜色了。 2.3.2 技术实训 1.矩形工具的使用 矩形工具 可以绘制矩形、正方形和圆角矩形。单击矩形工具按钮 后，在 舞台上单击并拖动，就可以绘制出一个矩形，按住 Shift 键拖动，就可以绘制出一个正方形。 如果要绘制有圆角的矩形，可以在单击矩形工具按钮 后，修改属性面板中的圆 角的大小，数值越大，边角的半径越大。4 个圆角的大小在默认情况下是相同的，也可以 单独设置为 4 个圆角不同的矩形。矩形工具的属性面板如图 2.25 所示。 图 2.25 矩形工具的属性面板 26 第 2 章 使用 Flash 绘制图形 默认情况下，矩形工具 绘制出的图形是由轮廓线和填充色组成的，单击矩形 工具按钮 绘制图形后，可以通过属性面板修改图形轮廓的粗细、颜色和填充色。 在单击对象绘制按钮 的情况下绘制的矩形，使用选择工具 选中后，就可以在 属性面板中修改轮廓属性和填充颜色了；如果是在没有单击对象绘制按钮 的情 况下绘制的矩形，则需要分别使用选择工具 选中后，通过属性面板来修改轮廓 和填充颜色。 另外，在矩形工具 的下拉菜单中有一个基本矩形工具 ，它的属性面 板和矩形工具的基本相同，所不同的是单击基本矩形工具按钮 绘制出的矩形， 可以使用选择工具 选中，直接来调整它的圆角大小，也可以直接在属性面板中 修改或设置其属性。 提示：单击属性面板中的 按钮，然后在颜色样本中单击 按钮，可以绘制出一个 无边框的矩形；也可以单击属性面板中的 钮，绘制出一个无填充色的矩形。 2. 椭圆工具的使用 按钮，再在颜色样本中单击 按 椭圆工具 可以绘制椭圆和正圆。单击椭圆工具按钮 后，在舞台上单击并 拖动，就可以绘制出一个椭圆，按住 Shift 键拖动，就可以绘制出一个正圆。椭圆工具 的属性面板与矩形工具的用法相同。 另外，在 Flash 中还有一个基本椭圆工具 ，它的属性面板和椭圆工具的 基本相同，所不同的是使用基本椭圆工具 除了可以绘制椭圆之外，还可以绘制扇形、 空心椭圆或者空心扇形。它的属性面板如图 2.26 所示。如果选中闭合路径复选框，在 绘制扇形时，就不会有填充色。 提示：使用基本椭圆工具 绘制扇形时，需要输入起始角度，其范围为0360，沿顺 时针方向旋转。 图 2.26 基本椭圆工具的属性面板 3.多角星形工具的使用 多角星形工具 可以绘制多边形和星形，如图 2.27 所示是多角星形工具的属 性面板。单击 按钮，打开工具设置对话框，如图 2.28 与图 2.29 所示，可以 进一步设置绘制的多边形或者星形的具体属性。在绘制星形的时候，星形顶点的值越大， 绘制出的星形顶角越大，反之越小。 27 Flash CS3 平面动画制作案例教程与实训 图 2.27 多角星形工具的属性面板 图 2.28 绘制多边形 图 2.29 绘制星形 提示：灵活使用矩形工具 、椭圆工具 和多角星形工具 ，可以绘制出各 种各样的图形效果。 4刷子工具的使用 刷子工具 可以绘制任意形状、大小和颜色的填充区域。 在单击刷子工具按钮 后，可在其属性面板上修改图形的平滑度，平滑度值 越大，绘制出的图形越光滑；在刷子工具的属性面板中还可以修改其颜色(需要注 意的是用刷子工具绘制的图形是没有轮廓线的填充区域)，如图 2.30 所示。 图 2.30 刷子工具的属性面板 在选项区中可以修改刷子的大小和形状，如图 2.31 所示。单击选项区的 按 钮，将会看到刷子工具的 5 种绘画模式，功能如图 2.32 所示，效果如图 2.33 所示。 图 2.31 刷子的大小和形状 28 第 2 章 使用 Flash 绘制图形 图 2.32 刷子工具的 5 种绘画模式 (a) 标准绘画 (b) 颜料填充 (c) 后面绘画 (d) 颜料选择 (e) 内部绘画 图 2.33 刷子工具5 种绘画模式下的绘图效果 5.橡皮擦工具的使用 橡皮擦工具 用于擦除不需要的部分，通过设置，可以决定是擦除矢量图形的线 条还是填充，或者两部分都擦除。 在橡皮擦工具 的选项区，可以设置形状和大小，如图2.34所示。另外，橡皮 擦工具 像刷子工具一样有5种擦除模式，功能如图2.35所示，效果如图2.36所示。 图 2.34 橡皮擦的形状和大小 29 Flash CS3 平面动画制作案例教程与实训 图 2.35 橡皮擦工具的 5 种擦除模式 (a) 标准擦除 (b)擦除填色 (c) 擦除线条 (d) 擦除所选填充 (e) 内部擦除 图 2.36 橡皮擦工具5 种擦除模式下的擦除效果 提示：单击橡皮擦工具按钮 后，单击选项区的水龙头按钮 ，可以擦除不 需要的填充或边线内容，如图2.37所示。另外，双击橡皮擦工具按钮 ，可以 一次擦除舞台中的所有对象。 图 2.37 单击擦除不需要的填充 30 第 2 章 使用 Flash 绘制图形 2.4 易拉罐案例 实例说明 本节为易拉罐案例，本案例使用颜料桶工具、渐变变形工具、墨水瓶 工具制作，效果如图 2.38 所示。 图 2.38 易拉罐最终效果图 教学重点与难点 颜料桶工具、渐变变形工具、墨水瓶工具与颜色面板的使用，以及 这 3 类工具的属性面板及选项区的设置。 2.4.1 操作步骤 1设置文档属性 启动 Adobe Flash CS3 后，新建一个文档，命名为易拉罐。 2绘制易拉罐轮廓线条 先设置工具箱中笔触颜色 为黑色，填充颜色 为无，然后使用前 面学过的矩形工具 、椭圆工具 和线条工具 来绘制如图 2.39 所示的易拉 罐外观轮廓图。在绘制过程中要借助选择工具 来调整线条的形状。 图 2.39 易拉罐外观轮廓图 31 Flash CS3 平面动画制作案例教程与实训 提示：使用选择工具 可以方便地调整图形的外观轮廓，如将直线变成曲线、改变曲 线的弯曲程度和拉长线条等。当需要调整线条形状时，单击选择工具按钮 ， 把光标移动到轮廓线上，当光标为 形状时，说明该点为拐点，单击并拖动鼠标可 以改变拐点的位置；当光标为 形状时，单击并拖动鼠标可以调整图形的曲线形状， 或者把直线变成曲线；在 状态下，按住Ctrl键单击并拖动鼠标可以增加一个拐点； 对于不封闭的线条，单击并拖动拐点可拉长线条。 3给易拉罐填充颜色 (1) 打开颜色面板，单击颜色填充按钮 线性选项，如图 2.40 所示。 ，在类型下拉列表框中选择 图 2.40 设置易拉罐填充颜色 (2) 在色标所在的颜色条的中部单击增加一个新色标，单击左边的色标， 设置其颜色为淡蓝色(#9FF0F9)，使用同样的方法，使中间的色标颜色为亮白色 (#F0EFFE)，右边的色标颜色为淡蓝色(#9FF0F9)，如图2.41所示。选择颜料桶工 具 单击易拉罐罐体的中央部位，为其填充上设置好的填充色，效果如图2.42所示。 图 2.41 设置线性填充的渐变色 图 2.42 易拉罐体线性填充效果 (3) 重新设置颜色面板中的线性渐变，如图2.43所示，单击颜料桶工具按钮 ， 32 第 2 章 使用 Flash 绘制图形 填充易拉罐底部和上部的颜色，如图2.44所示。 图 2.43 重新设置线性填充的渐变色 图 2.44 易拉罐体上下部填充效果 (4) 使用同样的方法，为易拉罐的顶部进行放射状填充，对上下两个环形区域及拉环 进行线性填充。顶部拉环下方和瓶口区为纯色填充，颜色为#D5D5D5。如图 2.45 所示 为顶部的放射状填充设置，如图 2.46 所示为两个环形区域的线性填充设置，如图 2.47 所示 为填充后的易拉罐效果。 图 2.45 放射状填充设置 图 2.46 线性填充设置 图 2.47 易拉罐填充效果 (5) 单击选择工具按钮 ，选中易拉罐的侧面填充区，然后单击工具箱中的 渐变变形工具按钮 ，将会出现如图 2.48 左图所示的调节杆。把光标放在调节杆的右 上方，当光标变成 形状时，单击并拖动，使之成为如图 2.48 右图所示的效果。 图 2.48 修改易拉罐填充效果 33 Flash CS3 平面动画制作案例教程与实训 (6) 单击选择工具按钮 ，选中易拉罐的外观轮廓线并删除，单击墨水瓶工具 按钮 ，修改墨水瓶工具的属性面板中的笔触颜色按钮 然后单击拉环部分的线条，最后的效果如图 2.49 所示。 为#999999， 图2.49 易拉罐最后的填充效果 (7) 单击工具箱中的文本工具按钮 ，在其属性面板中设置字体为Arial， 大小为25，颜色为某种绿色(#00FF99)，如图 2.50 所示。用鼠标拉一个矩形框，写上Coca Cola。单击任意变形工具按钮 ，将文字倾斜一定的角度，然后单击选择工具 按钮 ，选中文字，移动到罐体上，最后效果如图 2.51 所示，最后保存文件。 图2.50 设置文本工具的属性 图 2.51 易拉罐的最后效果 34 第 2 章 使用 Flash 绘制图形 2.4.2 技术实训 1.颜料桶工具的使用 在使用各种线条绘制工具和几何图形绘制工具绘制物体的外观轮廓线之后，一般使用 颜料桶工具 来填充颜色。颜料桶工具可以进行纯色填充、渐变色填充和位图填 充。这里主要介绍前两种填充，位图填充在第 4 章中再讲。 (1) 纯色填充。如果要对某个区域进行纯色填充，可以首先单击颜料桶工具按钮 ， 然后单击工具箱中的填充颜色按钮或者颜料桶工具属性面板中的 按钮， 选择某种已存在于样本中的纯色进行填充(样本面板如图 2.52 所示)。或者从颜 色样本面板中选择所需的颜色(颜色样本面板如图 2.53 所示)。或者通过颜色面 板来设置填充的纯色(颜色面板如图 2.54 所示)。使用颜色面板来设置填充的纯色 时，又有 3 种方法：通过输入 RGB 值及透明度来选择具体颜色；通过输入十六进制数来选 择颜色；先选择色块，再选择明暗度来设置颜色。 图 2.52 样本面板 图 2.53 颜色样本面板 图 2.54 颜色面板 35 Flash CS3 平面动画制作案例教程与实训 在单击颜料桶工具按钮 后，选项区会出现两个按钮， 和 ，单击第一个 按钮会产生一个下拉列表框，功能如图 2.55 所示。 在填充渐变色和位图时使用。 图 2.55颜料桶工具的 4 种填充模式 (2) 渐变色填充。渐变色填充又可分为线性填充和放射状填充两种，在易拉罐的案 例中已多次使用过，渐变色填充和纯色填充的使用方法基本相同，这里不再详细说明。 提示：在填充渐变色或者位图时，单击锁定填充按钮 ，则渐变色或位图将会以舞台的 大小为基准来进行填充，否则将以填充区的大小为基准进行填充，通常情况下不单击 选中该按钮。 2.渐变变形工具的使用 渐变变形工具 用来调整渐变色填充和位图填充的效果，如渐变色的范围、方向 和角度等。例如在易拉罐案例中就使用该工具来调整填充效果，改变易拉罐的反光角 度。下面还以易拉罐为例来说明如何使用该工具。单击渐变变形工具按钮 后， 用鼠标单击线性渐变区域，易拉罐的侧面将会出现如图 2.56 所示的渐变中心点、渐变方向 控制柄和渐变范围控制柄。如图 2.57 所示为单击放射状渐变区域产生的渐变中心点和一些 控制柄。如图 2.58 所示为中心点、渐变方向控制柄和渐变范围控制柄的不同效果图。 图 2.56 线性填充的控制柄和渐变中心点 图 2.57 放射状填充的控制柄和渐变中心点 图 2.58 修改线性填充渐变中心点和控制柄的不同效果图 36 第 2 章 使用 Flash 绘制图形 3. 墨水瓶工具的使用 墨水瓶工具 主要用来修改矢量图形的线条，如改变线条的粗细和颜色，也可以 为没有轮廓线的填充区添加边线。另外，墨水瓶工具除了可以使用纯色填充线条外，还可 以使用渐变色或者位图来填充线条。在易拉罐案例中，使用墨水瓶工具修改了拉 环的颜色，当然也可以修改粗细，只要在墨水瓶工具的属性面板中设置笔触粗 细就可以修改了。如果想给易拉罐画上渐变的外观轮廓线，只要单击墨水瓶工具按 钮 ，然后单击颜色面板中的笔触颜色按钮 ，设置类型为线性，设置线 性颜色，如图 2.59 所示，然后再逐个单击易拉罐的轮廓线就可产生如图 2.60 所示的效果。 图 2.59 墨水瓶工具线性填充的设置 图 2.60 为易拉罐添加渐变线条 2.5 小青蛙案例 实例说明 本节为小青蛙案例。Flash 具有强大的绘图功能，在制作动画的过程中往往要绘制 卡通形象，本案例通过一只小青蛙的绘制来了解动画制作中卡通形象的绘制技巧，小青 蛙的效果如图 2.61 所示。 图 2.61 小青蛙效果图 37 Flash CS3 平面动画制作案例教程与实训 教学重点与难点 选择工具的使用技巧、图形的排列操作和图形的组合与打散。 2.5.1 操作步骤 1新建文档并命名 (1) 启动 Adobe Flash CS3 后，新建一个文档，设置舞台大小为 720576 像素。背景 颜色设为白色。 (2) 单击文件保存菜单项，将新文档保存，命名为小青蛙。 2绘制小青蛙 (1) 单击工具箱中的线条工具按钮 。然后修改工具箱中笔触颜色 为黑色(#000000)，并把属性面板上的笔触样式改为极细。 (2) 双击图层 1按钮，重命名为卡通人物；在舞台中选择合适的位置，单击鼠 标左键向下拖动，拉一根黑色的线，如图 2.62 所示。按同样的方法画出闭合的多边形，如 图 2.63 所示。将光标移到线上，光标下方会出现一段弧线 ，用来调节线条的弯曲度(调整 弯曲度时如果发现线条的拐点不够，可按住 Alt 键再将鼠标光标移到线条上轻轻一拖就会 出现新的拐点)。将线条调整为如图 2.64 所示。修改工具箱中的笔触颜色 为 红色(#FF0000)，画出青蛙头上、下的分界线，如图 2.65 所示(红线与黑线一定要闭合 否则颜色不能填充)。将填充颜色 设为#70D00F，然后单击工具箱中的颜 料桶工具按钮 ，在舞台上单击上半部分就将上半部分填充好颜色了；将下半部分颜色 设为 #DFFE8B，填充下半部分颜色，效果如图 2.66 所示。 图 2.62 绘制一根线条 图 2.63 绘制多边形 图 2.64 调整线条的弯曲度 (3) 单击选择工具按钮，拖出一个矩形框，选中所绘图形，单击修改组合 菜单项，按组合键 Ctrl+G，把图形转换为群组，成功后会出现蓝色的边框，如图 2.67 所示。 图2.65 绘制分界线 图2.66 填充效果 图2.67 组合对象 38 第 2 章 使用 Flash 绘制图形 (4) 单击时间轴下方的插入图层按钮 ，重命名为绘图，单击工具箱 中的椭圆工具按钮 ，在绘图图层画出眼框和眼珠，并分别填充白色和黑色，按 组合键Ctrl+G群组对象，然后按组合键Ctrl+X剪切组合后的眼睛，按Ctrl+Shift+V组合键粘 贴到卡通人物图层的当前位置，如图2.68所示。 (5) 在绘图图层上单击线条工具按钮 ，绘制嘴巴，修改工具箱中笔 触颜色为橄榄绿(#475838)，在舞台上画出嘴巴的形状，按组合键Ctrl+G群组，然后 剪切、粘贴到卡通人物图层，如图2.69所示。按组合键Ctrl+G，组合头、眼睛和嘴巴。 图 2.68 眼睛效果图 图 2.69 嘴巴效果图 (6) 在绘图图层上单击线条工具按钮 ，绘制身体，修改工具箱中笔触 颜色为黑色(#475838)，参照步骤(2)中头部的绘制方法，绘制小青蛙的身体，如图 2.70 图 2.72 所示。按组合键 Ctrl+G 群组，然后剪切、粘贴到卡通人物图层，调整身体的位 置，如图 2.73 所示。右击身体，从弹出的快捷菜单中单击排列下移一层菜 单项，最后效果如图 2.74 所示。 图 2.70 身体的多边形图 图 2.71 调整线条的弯曲度 图 2.72 最后效果图 图 2.73 剪切、粘贴后的效果 图 2.74 下移一层后的效果 39 Flash CS3 平面动画制作案例教程与实训 (7) 在绘图图层绘制左手，手的活动关节最为灵活，绘制起来有一定的难度， 这是一只侧面的青蛙，所以左手是手背对着我们的。参照步骤(2)中头部的绘制方法，绘制 小青蛙的左手，如图 2.75图 2.77 所示。绘制完成后按组合键 Ctrl+G 组合图形，然后参照 上一步的方法剪切、粘贴和调整左手所在的图层和位置。 图 2.75 左手的多边形 图 2.76 调整左手线条的弯曲度 图 2.77 左手最后效果图 (8) 在绘图图层绘制右手，右手是手心对着我们。参照步骤(2)中头部的绘制 方法，绘制小青蛙的右手，按组合键 Ctrl+G 群组，并调整右手所在的图层和位置。绘制过 程如图 2.78图 2.80 所示。 图 2.78 右手的多边形 图 2.79 调整右手线条的弯曲度 图 2.80 右手最后效果图 (9) 在绘图图层绘制左脚，参照步骤(2)中头部的绘制方法，绘制小青蛙的左 脚，按组合键 Ctrl+G 群组，并调整右手所在的图层和位置，绘制过程如图 2.81图 2.83 所示。 图 2.81 左脚的多边形 图 2.82 调整左脚线条的弯曲度 图 2.83 左脚最后效果图 (10) 单击卡通人物图层的左脚群组，使用组合键 Ctrl+C、Ctrl+Shift+V 复制 到绘图图层，由于前后位置和近大远小的关系，所以要对右脚的位置和大小进行调节。 单击变形工具按钮 ，向内进行缩放，或者单击修改变形修改和旋转 菜单项，组合键为 Ctrl+Alt+S，在打开的缩放和旋转对话框中将缩放的值改为 80%， 如图 2.84 所示。调整左右脚位置，然后剪切、粘贴到卡通人物图层，并调整其位置， 效果如图 2.85 所示。 40 第 2 章 使用 Flash 绘制图形 图 2.84 缩放和旋转对话框 图 2.85 左右脚位置 提示：缩放和旋转对话框的范围是递增或者递减的一个过程，在使用中应注意这一点。 3调整对象 (1) 选中卡通人物图层中的各个对象，按照人物的结构调整其效果，如图 2.86 所示。 (2) 按照常理，左手和左脚上半部分的线是多余的，因为它们是跟身体融合在一起的， 不需要线来体现层次感。这时会发现选不中这些线，那是因为刚才群组对象的缘故， 可以通过在舞台中双击这两个对象，进入群组对象内部，删除多余的线条，最后效果如 图 2.87 所示。在绘图图层上单击右键，在弹出的快捷菜单中单击删除图层菜单项， 删除该图层，最后保存文档。 图 2.86 调整后的效果 图 2.87 删除多余的线 2.5.2 技术实训 1. 选择工具的用法 在Flash中，选择工具 是最常用的工具。使用该工具可以选择、移动舞台上的对 象，还可以调整图形的形状、进入或退出整体对象内部进行操作。 (1) 选择舞台上的对象。对舞台上的对象进行移动、复制、对齐、属性设置等操作时， 都要先选中对象。使用选择工具可以方便地选择舞台上的对象作为整体的对象，如绘 制对象、群组、文本和元件实例等，也可以选择分散的矢量图形，如线条、填充、部分图 形或整个图形。单击工具箱中的选择工具按钮 ，再单击对象即可选中该对象， 具体操作方法如下。 选取线条。单击矢量图形的线条，可以选取某一线段，如图2.88左图所示；双击线 条，可以选择连接着的所有线条，如图2.88右图所示。 41 Flash CS3 平面动画制作案例教程与实训 图 2.88 选取线条 选取填充。在矢量图形填充区域中单击可选中某个填充，如图 2.89 左图所示；如 果图形是一个有边线的填充图形，要同时选中填充区和边线，则在填充区的任何位置双击 即可，如图 2.89 右图所示。 图 2.89 选取填充 拖动选取。在需要选择的对象上拖出一个区域，则被该区域覆盖的所有对象(矢量 图形的一部分)都被选中，如图 2.90 所示。 图 2.90 拖动选取 选取整体对象。要选取群组、文本和元件实例等整体对象，只需在对象上单击，被 选对象的周围会出现一个蓝色的方框，如图 2.91 所示。 图 2.91 选取整体对象 42 第 2 章 使用 Flash 绘制图形 选取多个对象。按住 Shift 键依次单击对象，可以选中多个对象，或者采用拖动选 取的方式。按组合键 CtrlA 可以选中舞台上的所有对象。 (2) 移动和复制对象。制作动画时需要经常移动和复制舞台上的对象。移动对象时可 先单击选择工具按钮 单击并拖动即可，如果同时按住 Shift 键，则可以沿水平、垂直 或者 45方向有规则地移动。选中舞台上的对象后按 Alt 键拖动对象，可以复制对象，多 次拖动可以多次复制。 提示：按组合键CtrlC可以快速复制对象；CtrlX可以剪切对象；CtrlV可以粘贴对象 到舞台中心；CtrlShiftV可以粘贴到当前位置。 (3) 进入对象内部进行操作。元件实例、群组、绘制对象和文本都是一个整体，如果 要修改其中的部分图形，则要进入其内部。通常是使用选择工具双击这些对象，要想 退出，则双击对象以外的区域即可。 2. 排列图形 在同一图层上，Flash 会根据对象绘制的先后顺序层叠放置。先绘制的放置在最下面， 最后绘制的放置在最上面。对于群组、绘制对象、元件实例和文本，可以改变它们在舞台上的 叠放次序。选中对象后单击修改排列菜单项中的适当选项或用鼠标右击对象，从弹 出的快捷菜单中单击排列菜单项中适当的选项。排列菜单项中各选项的作用如下。 (1) 移至顶层。将选中的对象放置在所有对象的最上面。 (2) 上移一层。将选中的对象在层叠顺序中上移一层。 (3) 下移一层。将选中的对象在层叠顺序中下移一层。 (4) 移至底层。将选中的对象放置在所有对象的最下面。 提示：这里的操作只适用于同一图层上的对象。 3. 图形的组合与打散 在同一图层中，当当前绘制的线条穿过其他线条或图形的时候，会把其他线条分割成 不同的各个部分；同时线条本身也会被其他线条和图形分成若干部分。为了不破坏画面， 需要将图形化零为整，即群组对象，使用组合键Ctrl+G，被群组的部分用蓝色外框标示， 如图2.92所示。当需要对对象进行编辑时，可使用在舞台上双击编辑对象的方法，进入对 象内部进行编辑；也可以单击修改分离菜单项，组合键为Ctrl+B，或者单击修 改取消组合菜单项，将对象打散后编辑，如图2.93所示。 提示：图