Flash电子教案绘制和导入动画元素第02章.ppt

第二章 绘制和导入动画元素 关于位图和矢量图 绘制动画元素 导入动画元素 应用举例绘制狮子 本章小结 习题二 第2章 绘制和导入动画元素 在计算机中，图形的显示方式主要有位图和矢量图两种 ，像Flash，Freehand，CorelDRAW，Illustrator和AutoCAD等 软件，主要采用的是矢量图方式；像Photoshop，Studio和 3DS MAX等软件，主要采用的是位图格式。目前，越来越多 的应用软件既能处理位图，又能处理矢量图，并把它们加以 集成。下面分别对这两种图形格式进行简单的介绍。 第一节 关于位图和矢量图 第2章 绘制和导入动画元素 一、位图 在位图中，一幅图像被划分为许多栅格，栅格中的每 一点代表图像的像素，其值代表像素的亮度和色彩值，因 此位图又称做点阵图。 位图图像比较细腻，色彩的变化比较丰富，当把位图 放大到一定程度时，会出现失真现象，即马赛克现象，如 图2.1.1所示。 第2章 绘制和导入动画元素 图2.1.1 位图放大效果 在保存位图时，需要记录每一个像素的位置和色彩 数据，显然，栅格的排列越紧密，对应的图像分辨率就 越高，图像的质量也就越好，当然所生成的文件也就越 大，处理速度也就越慢。 第2章 绘制和导入动画元素 二、矢量图 矢量图由一系列的点、线、面组成，当对它放大时，不 会出现失真现象，如图2.1.2所示。 用矢量图绘制出的图形不是很逼真，无法像位图一样精 确地描写自然界的景象，因此，不宜制作色调丰富或色彩变 化太多的图像。 图2.1.2 矢量图放大效果 第2章 绘制和导入动画元素 三、将位图转换为矢量图 在Flash中，可以将没有被分离的位图转换为矢量图， 操作步骤如下： （1）选中要转换为矢量图的位图。 （2）选择“修改”“位图”“转换位图为矢量图”命令 ，弹出“转换位图为矢量图”对话框（见图2.1.3），下面对其 中各转换参数进行介绍。 第2章 绘制和导入动画元素 图2.1.3 “转换位图为矢量图”对话框 第2章 绘制和导入动画元素 1）颜色阀值：设置区分颜色的阈值，其范围为1500 之间的整数。如果两个像素的RGB颜色值之间的差值小于阈 值，这两个像素将被转换为同一种颜色。因此，阈值越小， 颜色转换越多，与源图像的差别也就越小。 2）最小区域：设置转换时最小区域的像素数，其范围 为11 000之间的整数，其值越小，转换后的图像越精确， 与源图像的差别也就越小。 3）曲线拟合：设置曲线的平滑程度。 4）角阀值：设置转换时如何处理对比强烈的边界，是 进行平滑处理还是保留拐点。 第2章 绘制和导入动画元素 （3）设置完毕后，单击“确定”按钮，弹出“正在转换位图 为矢量图”对话框（见图2.1.4），表示位图正在转换中，需 要用户等待一段时间。稍等片刻，完成位图的转换，如图 2.1.5所示。 图2.1.4 “正在转换位图为矢量图”对话框 第2章 绘制和导入动画元素 注意：等待时间由图形文件的复杂程度所决定，文件越 复杂，需要的时间越长。 第2章 绘制和导入动画元素 Flash 8具有强大的绘图功能，使用工具箱中的绘图工具 可以绘制Flash作品中的插图，从而使动画更加丰富多彩，下 面介绍直线、选区、路径、椭圆、矩形、多角星形、任意线 条和矢量色块的绘制方法。 第二节 绘制动画元素 第2章 绘制和导入动画元素 一、绘制直线 使用直线工具可以绘制各种不同方向的直线。选择直线 工具后，在工具箱的选项区中不会出现任何选项，但用户可 以通过直线所对应的属性面板对其笔触颜色、笔触高度、笔 触样式等属性进行设置。绘制直线的操作步骤如下： （1）选择工具箱中的直线工具 。 （2）在属性面板中设置其笔触颜色、笔触高度和笔触样 式等属性，如图2.2.1所示。 第2章 绘制和导入动画元素 图2.2.1 “直线工具”属性面板 第2章 绘制和导入动画元素 （3）在工作区的某一点处按下鼠标左键作为直线的起点 ，然后拖动鼠标到另一点释放鼠标，即可在两点之间绘制直 线，如图2.2.2所示为使用直线工具所绘制出的不同直线。 图2.2.2 使用直线工具绘制直线 第2章 绘制和导入动画元素 二、绘制选区 使用套索工具可以绘制不规则的选区。选择套索工具后 ，在工具箱的选项区中会出现套索工具的附加选项，包括魔 术棒、魔术棒设置和多边形模式（见图2.2.3），用户可根据 需要进行选择和设置。绘制选区的操作步骤如下： 第2章 绘制和导入动画元素 （1）选择工具箱中的套索工具 。 （2）在工具箱的选项栏中设置套索工具的附加选项，然 后进行选区的绘制。魔术棒设置魔术棒多边形模式 1）魔术棒：用于快速选择颜色相近的区域，选择魔术棒 之后，将鼠标指针移动到某种颜色上，当其变为 形状时 单击鼠标左键可以选取与该颜色相近的区域，效果如图2.2.4 所示。 第2章 绘制和导入动画元素 第2章 绘制和导入动画元素 注意：魔术棒只对处于分离状态的位图起作用。 2）魔术棒设置：用于设置魔术棒在选择时，对颜色差 异的敏感度和边界的形状。 3）多边形模式：用于绘制多边形选区，绘制完成后， 双击鼠标结束选取操作，如图2.2.5所示。 第2章 绘制和导入动画元素 第2章 绘制和导入动画元素 三、绘制路径 路径是由一系列节点连接起来的线段或曲线，使用钢笔 工具可以绘制路径。绘制路径的操作步骤如下： （1）选择工具箱中的钢笔工具 。 （2）在属性面板中设置其笔触颜色、笔触高度和笔触样 式等属性，如图2.2.6所示。 第2章 绘制和导入动画元素 图2.2.6 “钢笔工具”属性面板 （3）在工作区的某一点处单击鼠标定义路径的起点，然 后拖动鼠标到另一点处，如果直接单击鼠标左键将绘制直线 路径；如果按下鼠标左键并拖动将绘制曲线路径，如图2.2.7 所示。 第2章 绘制和导入动画元素 第2章 绘制和导入动画元素 提示：连续多次操作可以绘制相对复杂的路径，如图 2.2.8所示。 第2章 绘制和导入动画元素 四、绘制椭圆形和圆形 使用椭圆工具可以绘制椭圆形和圆形，操作步骤如下： （1）选择工具箱中的椭圆工具 。 （2）在属性面板中设置其笔触颜色、笔触高度、笔触样 式和填充颜色等属性，如图2.2.9所示。 （3）在工作区中按住鼠标左键不放并拖动绘制椭圆。若 在绘制的同时按住Shift键并拖动鼠标可绘制圆形，如图2.2.10 所示。 第2章 绘制和导入动画元素 图2.2.9 “椭圆工具”属性面板 图2.2.10 绘制椭圆形和圆形 绘制椭圆形 绘制圆形 第2章 绘制和导入动画元素 五、绘制长方形、正方形和圆角矩形 使用矩形工具可以绘制长方形、正方形和圆角矩形，操 作步骤如下： （1）选择工具箱中的矩形工具 。 （2）在属性面板中设置其笔触颜色、笔触高度、笔触样 式和填充颜色等属性，如图2.2.11所示。 图2.2.11 “矩形工具”属性面板 第2章 绘制和导入动画元素 （3）在工作区中按住鼠标左键不放并拖动绘制长方形。 若在绘制的同时按住Shift键并拖动鼠标可绘制正方形；若在 绘制前单击选项栏中的“边角半径设置”按钮，在弹出的“矩形 设置”对话框中设置矩形的边角半径，然后在工作区中按住 鼠标左键不放并拖动可绘制圆角矩形，如图2.2.12所示。 图2.2.12 绘制长方形、正方形和圆角矩形 第2章 绘制和导入动画元素 六、绘制多角星形 使用多角星形工具可以绘制多角星形，操作步骤如下： （1）在工具箱中单击“矩形工具”按钮右下方的小三角，会 弹出一个下拉菜单，从中选择选项，即可选择多角星形工具。 （2）在属性面板中设置其笔触颜色、笔触高度、笔触样式 和填充颜色等属性，如图2.2.13所示。 图2.2.13 “多角星形工具”属性面板 第2章 绘制和导入动画元素 （3）在工作区中按住鼠标左键不放并拖动绘制多角星形 ，如图2.2.14所示。 图2.2.14 绘制多角星形 第2章 绘制和导入动画元素 七、绘制任意线条 使用铅笔工具可以绘制任意线条。选择铅笔工具后，在 工具箱的选项区中会出现一个“铅笔模式”按钮，单击其右下 方的小三角，会弹出一个下拉菜单，包括伸直、平滑和墨水 3个选项，用户可以根据需要进行选择，然后进行线条的绘 制。绘制任意线条的操作步骤如下： 第2章 绘制和导入动画元素 （1）选择工具箱中的铅笔工具 。 （2）在属性面板中设置其笔触颜色、笔触高度和笔触样 式等属性，如图2.2.15所示。 图2.2.15 “铅笔工具”属性面板 第2章 绘制和导入动画元素 （3）单击工具箱选项区中的“铅笔模式”按钮，在弹出的 下拉菜单中选择一种绘画模式。 1）伸直模式：适用于绘制规则线条，并可将近似于椭圆 、三角形、正方形和矩形的图形转换为标准的几何图形。 2）平滑模式：适用于绘制平滑曲线。 3）墨水模式：适用于绘制接近手工绘制的线条。 （4）在工作区中按住鼠标左键不放并拖动绘制任意线条 ，如图2.2.16所示。 第2章 绘制和导入动画元素 第2章 绘制和导入动画元素 八、绘制矢量色块 使用刷子工具可以绘制矢量色块。选择刷子工具后，在 工具箱的选项区中会出现刷子工具的附加选项，包括刷子模 式、刷子大小和刷子形状（见图2.2.17），用户可根据需要 进行选择和设置。绘制矢量色块的操作步骤如下：刷子模式 刷子大小刷子形状 第2章 绘制和导入动画元素 第2章 绘制和导入动画元素 （1）选择工具箱中的刷子工具 。 （2）在属性面板中设置其填充颜色和笔触平滑度，如 图2.2.18所示。 图2.2.18 “刷子工具”属性面板 第2章 绘制和导入动画元素 （3）在选项区中设置刷子模式、刷子大小和刷子形 状，然后进行矢量色块的绘制。其中，刷子模式用于更 改刷子对工作区中动画元素的影响方式，包括标准绘画 、颜料填充、后面绘画、颜料选择和内部绘画5种模式， 它们的功能如下： 1）标准绘画：在该种模式下，新绘制的图形会覆盖 同一层中原有的图形，但是不会影响文本对象和导入的 对象，如图2.2.19所示。 第2章 绘制和导入动画元素 第2章 绘制和导入动画元素 2）颜料填充：在该种模式下，只能在空白区域和已有 矢量色块的填充区域内绘图，不会影响矢量线的颜色，如图 2.2.20所示。 第2章 绘制和导入动画元素 3）后面绘画：在该种模式下，只能在空白区域内绘图 ，并且不会影响原有的图形，只是从原有图形的背后穿过， 如图2.2.21所示。 第2章 绘制和导入动画元素 4）颜料选择：在该种模式下，必须先选择一个区域， 然后在被选区域内绘图，不会影响原有的矢量线和填充区域 ，如图2.2.22所示。 第2章 绘制和导入动画元素 5）内部绘画：在该种模式下，可以分为两种情况，一 种情况为刷子起点位于图形之外的空白区域，当刷子经过图 形进行绘画时，从其背后穿过；另一种情况为刷子的起点位 于图形的内部，当刷子经过图形进行绘画时，只能影响该图 形的内部，如图2.2.23所示。 第2章 绘制和导入动画元素 第2章 绘制和导入动画元素 在Flash 8中，除了可以利用工具箱中的工具绘制动画元素 外，还可以导入各种现有的动画元素，包括位图、矢量图、图 像序列、声音和视频等，下面分别进行介绍。 第三节 导入动画元素 第2章 绘制和导入动画元素 一、导入位图和矢量图 Flash支持多种位图和矢量图的导入，在导入之后，Flash 自动将它们添加到库面板中，以供其他场景或实例使用。 1导入位图 在Flash中，所导入的位图将成为当前图层的单个对象， 并且保留其透明度等属性。导入位图的操作步骤如下： （1）选择“文件”“导入”“导入到舞台”命令，弹出“导 入”对话框。 第2章 绘制和导入动画元素 （2）选中需要导入的位图，例如“FL027.JPG”，如图 2.3.1所示。 （3）单击“打开”按钮，将位图导入到工作区中，如图 2.3.2所示。 图2.3.1 选中位图 图2.3.2 导入的位图 第2章 绘制和导入动画元素 2导入矢量图 在Flash中，还可以导入由FreeHand或Illustrator等软件制 作的矢量图，它们将成为当前图层中的组合体。导入矢量图 的操作步骤如下： （1）选择“文件”“导入”“导入到舞台”命令，弹出“导 入”对话框。 （2）选中需要导入的矢量图，例如“BIRD027.WMF”， 如图2.3.3所示。 （3）单击“打开”按钮，将矢量图导入到工作区中，如图 2.3.4所示。 第2章 绘制和导入动画元素 图2.3.3 选中矢量图 图2.3.4 导入的矢量图 第2章 绘制和导入动画元素 二、导入图像序列 Flash默认与Pic1.jpg，Pic2.jpg，Pic3.jpg或Pic001.jpg， Pic002.jpg，Pic003.jpg以及Pic_001.jpg，Pic_002.jpg， Pic_003. jpg格式相似的文件为图像序列。在Flash中，可以将 图像序列导入到当前图层的连续帧中。导入图像序列的操作 步骤如下： （1）选择“文件”“导入”“导入到舞台”命令，弹出“导 入”对话框。 （2）选中需要导入图像序列中的一个图像，例如 “h1.jpg”，如图2.3.5所示。 第2章 绘制和导入动画元素 图2.3.5 选中图像序列中的一个图像 第2章 绘制和导入动画元素 注意：该序列中的其他图像必须位于同一个文件夹中。 （3）单击“打开”按钮，弹出如图2.3.6所示的提示框。若 单击“是”按钮，则导入图像序列中的所有图像；若单击“否” 按钮，则只导入选中的图像；若单击“取消”按钮，则取消导 入操作。 图2.3.6 提示框 第2章 绘制和导入动画元素 （4）单击“是”按钮，导入图像序列中的所有图像，如图 2.3.7所示。 注意：在导入之后，图像序列中的所有图像被自动添加 在库面板中，如图2.3.8所示。 第2章 绘制和导入动画元素 图2.3.7 导入的图像序列 图2.3.8 库面板 第2章 绘制和导入动画元素 三、导入声音 用户可以把声音当做一个元件（类似于图形、影片剪辑 或按钮元件），将它们任意添加到动画中，从而增加动画的 表现力。导入声音的操作步骤如下： （1）选择“文件”“导入”“导入到舞台”命令，弹出“导 入”对话框，如图2.3.9所示。 （2）在该对话框中选择需要的声音文件。 第2章 绘制和导入动画元素 图2.3.9 “导入”对话框 第2章 绘制和导入动画元素 （3）单击“打开”按钮，声音文件将以元件的形式显 示在库面板中，如图2.3.10所示。 图2.3.10 库面板中的声音文件 第2章 绘制和导入动画元素 四、导入视频 Flash 8的视频功能得到了很大的改进，它不仅支持更 多的视频格式，而且对导入视频的编辑功能也更加强大。 导入视频的操作步骤如下： （1）选择“文件”“导入视频”命令，弹出“导入视频”对 话框（一），如图2.3.11所示。 （2）单击“浏览”按钮，弹出“打开”对话框，选中要导入 的视频文件（见图2.3.12），单击“打开”按钮，返回到“导入 视频”对话框（一）。 第2章 绘制和导入动画元素 图2.3.11 “导入视频”对话框（一） 图2.3.12 选中视频文件 第2章 绘制和导入动画元素 （3）单击“下一个”按钮，在弹出的“导入视频”对话 框（二）中设置视频文件的部署方法，如图2.3.13所示。 （4）单击“下一个”按钮，在弹出的“导入视频”对话 框（三）中设置视频的外观，如图2.3.14所示。 第2章 绘制和导入动画元素 图2.3.13 “导入视频”对话框（二） 图2.3.14 “导入视频”对话框（三） 第2章 绘制和导入动画元素 （5）单击“下一个”按钮，在弹出的“导入视频”对话框（ 四）中显示视频文件的保存选项，如图2.3.15所示。 （6）单击“完成”按钮，弹出“正在加载FLV尺寸”提示框 ，提示导入进程。 （7）稍等片刻，则完成视频文件的导入，如图2.3.16所 示。 第2章 绘制和导入动画元素 图2.3.15 “导入视频”对话框（四） 图2.3.16 导入视频文件 第2章 绘制和导入动画元素 下面根据本章所学的知识来绘制一头狮子，操作 步骤如下： （1）选择“文件”“新建”命令，创建一个新的动 画文件。 （2）选择“修改”“文档”命令，弹出“文档属性” 对话框，设置“尺寸”为“550 px400 px”，“背景颜色”为 “#9DACBF”，单击“确定”按钮。 第四节 应用举例绘制狮子 第2章 绘制和导入动画元素 （3）使用