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