Flash动画制作之—绘制素材02.ppt

,第2讲绘制素材,了解Flash绘图工具的使用方法。使用Flash绘图工具绘制简易场景效果。掌握图层的概念，并学习绘制复制图形的方法。掌握艺术类动画素材的绘制方法。,2.1绘制简单图形2.2绘制复杂图形2.3课后作业,本章大纲,2.1绘制简单图形,2.1.1知识点讲解,Flash8提供了强大的绘图工具，给用户制作动画素材带来了方便和快捷。其【工具】面板中的具体工具的名称和快捷键如图2-1所示。,【选择】工具（V）,【任意变形】工具（Q）,【线条】工具（N）,【钢笔】工具（P）,【椭圆】工具（O）,【铅笔】工具（Y）,【描边】工具（S）,【滴管】工具（I）,【手形】工具（H）,笔触颜色,填充颜色,紧贴至对象,平滑,【部分选择】工具（A）,【填充变形】工具（F）,【套索】工具（L）,【文本】工具（T）,【刷子】工具（B）,【颜料桶】工具（K）,【橡皮擦】工具（E）,【缩放】工具（M，Z）,伸直,图2-1Flash8【工具】面板,用户使用Flash的绘图工具进行图形绘制的时候，可尽量使用对应工具的快捷键去控制工具的选择和更换，这样可以大大提高工作效率。,矢量图形：定义：用矢量曲线来描述图像，包括颜色和位置等属性。特点：矢量图形与分辨率无关，可以显示在各种分辨率的输出设备上，而不影响品质。应用：矢量图形适合用于线性图，特别是二维卡通动画中，能够有效地减少文件容量。位图图像：定义：用像素排列在网格内的彩色点来描述图像。特点：位图图像跟分辨率有关，在比图像本身的分辨率低的输出设备上显示位图时会降低它的外观品质。应用：位图图像适合用于表现层次和色彩细腻丰富，包含大量细节的图像。矢量图形与位图图形的特点对比如图2-2所示。,图2-2矢量图形与位图图形,根据用途的不同，工具可分为以下5类（1）规则形状绘制工具。主要包括【矩形】工具、【椭圆】工具、【多角星形】工具和【线条】工具。（2）不规则形状绘制工具。主要包括【钢笔】工具、【铅笔】工具、【笔刷】工具和【文字】工具。（3）形状修改工具。主要包括【选择】工具、【部分选择】工具和【套索】工具。（4）颜色修改工具。主要包括【墨水瓶】工具、【颜料桶】工具、【滴管】工具、【橡皮檫】工具、【颜色】工具和【填充变形】工具。（5）视图修改工具。主要包括【手形】工具和【缩放】工具。,2.1.2范例解析（一）常用绘图工具练习,1、使用规则图形绘制工具【矩形】工具、【椭圆】工具、【多角星形】工具依次绘制如图2-3所示的图形。2、使用不规则图形绘制工具【钢笔】工具绘制“花”、【铅笔】工具绘制“叶”、【笔刷】工具绘制“人”和【文字】工具输入文字，得到如图2-4所示的图形,图2-3绘制规则图形,图2-4绘制不规则图形,3、使用形状修改工具【选择】工具、【部分选择】工具、【套索】工具将如图2-4所示的不规则图形进行修改，得到如图2-5所示的效果。4、使用颜色修改工具【墨水瓶】工具、【颜料桶】工具、【滴管】工具、【颜色】工具和【填充变形】工具对如图2-5所示的图形进行颜色修改，得到如图2-6所示的效果。,图2-5修改图形,图2-6为图形上色,2.1.3范例解析（二）绘制“简易建筑物”,本例将使用Flash8中基本的绘图工具绘制一座既简单又生动的建筑物，带领读者来一同体验绘制素材的快乐，设计思路及效果如图2-7所示,图2-7设计思路及效果图,图2-8选择【文档属性】选项,1、绘制建筑物轮廓,（1）新建一个Flash文档，在舞台上单击鼠标右键，在弹出的快捷菜单中选择【文档属性】命令，如图2-8所示。在弹出的【文档属性】对话框中设置文档【尺寸】为“420px230px”，文档其他属性使用默认参数，效果如图2-9所示,图2-9【文档属性】对话框,图2-10设置【属性】面板参数,（2）在工具面板中选择【矩形】工具，在【属性】面板中设置【笔触颜色】为“黑色”，【笔触高度】为“1”，如图2-10所示。单击旁边的按钮，弹出如图2-11所示的颜色设置对话框，单击按钮设置【填充颜色】为“无”。并确认【对象绘制】功能没有启动，如图2-12所示。,图2-11设置颜色,填充颜色,笔触颜色,笔触高度,笔触样式,颜色为无,对象绘制,边角半径设置,图2-12设置绘制属性,：【对象绘制】按钮。没按下状态表示未启用对象绘制功能，通常称为“合并绘制”，表示在重叠绘制图形时，会自动进行合并，如果选择的图形与另一个图形合并，移动时则会永久改变下方的图形，如图2-13所示；按下时表示启用对象绘制功能，分离或重排重叠图形时，也不会改变它们的外形。如图2-14所示。：【边角半径】设置。单击该按钮，弹出【矩形设置】对话框，如图2-15所示。当【边角半径】为0时，表示绘制的图形是一般矩形；当边角半径不为0时，表示绘制的图形是倒圆角矩形，效果如图2-16所示。,图2-13未启动【对象绘制】功能,图2-14启动【对象绘制】功能,图2-16两种矩形的区别,图2-17设置大小和位置,图2-15【矩形设置】对话框,一般矩形,倒圆角矩形,（3）在舞台上绘制一个矩形当作“第一个屋顶”，利用【选择】工具，双击矩形的任一线条，将整个矩形选中，然后在【属性】面板中设置宽高为“100.6px30.1px”，位置坐标x、y分别为“66.2”、“2.1”，如图2-17所示。,对于非对象绘制的连续线条或含有填充的图形，双击其中一个线条，可以选中连续线条。双击图形的填充，则可以选中整个图形，包含图形外部的所有链接线条。对于选择一定区域范围内的图形，可以使用框选。在图形的外部，单击鼠标，向图形内部拖动，会看到形成的虚框，继续拖动鼠标至虚框完全包含所需图形，则可选中所需图形。,（4）绘制矩形，效果如图2-18所示。（5）利用工具，拖动鼠标，效果如图2-19所示。,第1个屋顶,第2个屋顶,变形中心,移动后,图2-18绘制矩形,图2-19移动中心点,（6）在【变形】面板中的设置参数如图2-20所示。,图2-20设置“第1个屋顶”变形,如果找不到【变形】面板，可以执行【窗口】/【变形】菜单命令，将【变形】面板打开。如果约束没有被取消勾选，则被选中图形的x、y方向变形将保持大小一致,（7）使用任意工具。（8）在【变形】面板中设置参数如图2-21所示。,【变形】面板,“第1个屋顶”变形效果,“第2个屋顶”变形效果,【变形】面板,图2-21设置“第2个屋顶”变形,（9）选择【线条】工具，效果如图2-22所示。,图2-22连接两图形,在这里绘制线条时，确认【贴紧至对象】处于按下状态，以方便在连接两个图形时捕捉两图形的端点,（10）删除多余线条，效果如图2-23所示。,图2-23删除多余线条,连接两图形的线条,（11）利用【线条】工具，按住Shift键向下拖动，绘制3条竖直线条，效果如图2-24所示。,图2-24绘制3条竖直线条,对于【椭圆】工具和【矩形】工具，按住Shift键拖动可将形状限制为圆形和正方形。对于【线条】工具，按住Shift键拖动，可将线条角度限制为45的倍数，其中包括水平和竖直方向,（12）接着利用【线条】工具绘制剩余的线条，效果如图2-25所示。,图2-25绘制剩余的线条,高度128px,高度95.3px,高度77.7px,剩余的线条,剩余的线条,确保如图2-25所示的图形，每个区域都是封闭区域。如果不封闭，则会在填充颜色时失败。,（1）选择【矩形】工具，设置【笔触颜色】为“黑色”，【笔触高度】为“1”，【填充颜色】为“无”，绘制一个矩形来当作“矩形门”，并设置其宽高为“18.5px32.5px”，位置坐标x、y分别为“259.5”、“175.6”。（2）按住Ctrl+C快捷键，复制“矩形门”。（3）按住Ctrl+V快捷键，粘贴“矩形门”，在【属性】面板中设置位置坐标x，y分别为“110.6”、“138.2”，形成第2个“矩形门”，效果如图2-26所示。,2、绘制矩形门和窗户,确保绘制的矩形处于被选中的状态，复制矩形。后面将多次用到这种复制操作，减少重复绘制的难度。粘贴完成后，保持粘贴出的矩形处于被选中状态，否则由于未启动【对象绘制】按钮，所绘制矩形线条可能和其他线条重叠，并自动进行合并。,（4）选择【矩形】工具，绘制一个矩形当作“矩形窗”。（5）利用【线条】工具绘制窗格，完成“第1个矩形窗”的绘制。（6）按Ctrl+C快捷键，复制“矩形窗”（7）按Ctrl+V快捷键，粘贴“矩形窗”，在【属性】面板中设置其位置坐标x、y分别为“89.7”、“46.9”，形成第2个“矩形窗”，效果如图2-27所示,复制的矩形门,第1个矩形门,复制的矩形窗,第1个矩形窗,图2-26绘制门,图2-27绘制窗户,3、制作倾斜门和窗（1）选中已绘制的“第1个矩形门”将变形中心调至左下角。（2）在【变形】面板中，设置其变形参数如图2-28所示，按键盘上的Enter键执行命令。,变形面板,“第1个矩形门”变形效果,图2-28设置“第1个矩形门”变形,（3）选中“第2个矩形门”，按照同样操作对其进行倾斜变形。,需要删除的线条,缩小的第2个矩形门,图2-29删除多余线条,图2-30“矩形门”变形后的效果,（4）删除两矩形门下端多余的线条，效果如图2-29所示。,修改变形后，两个“矩形门”的最下端和建筑物轮廓的最下端部分的线条重合或叠加，如图2-29所示，造成错误，因此需要删除多余的线条。,（5）选中“第2个矩形门”，在【变形】面板中请读者根据情况调整。（6）使用【线条】工具在两个门内分别绘制一条表现其立体感的直线，如图2-30所示的效果,（7）选中已绘制的“第1个矩形门窗”将变形中心调至左下角。,（8）在【变形】面板中，设置其变形参数如图2-31所示，按键盘上的Enter键执行命令。（9）选中“第2个矩形窗”，按照同样操作对其进行倾斜变形。（10）在【变形】面板中，勾选，设置其x、y方向变形都为90%，则可得到缩小的“第2个矩形窗”，效果如图2-32所示。,变形面板,第1个矩形窗”变形效果,缩小的第2个矩形窗,图2-31矩形窗的变形,图2-32所有“矩形门窗”变形后的效果,4、绘制弧形窗和路灯。（1）选择【椭圆】工具，在【属性】面板中设置。,（2）利用【矩形】工具绘制一个矩形并设置，效果如图2-33所示。（3）删除多余的线条，效果如图2-34所示。（4）利用【线条】工具绘制窗格，效果如图2-35所示。（5）按住Shfit键绘制45线条，效果如图2-36所示,45线条,图2-33绘制矩形,图2-34删除线条,图2-35绘制窗格,图2-36绘制45线条格,（6）选中已绘制的“第1个弧形窗”，按Ctrl+C快捷键复制。,（7）按Ctrl+V快捷键，粘贴“弧形窗”，在【属性】面板中设置其位置坐标x，y分别为“89.7”、“46.9”，形成“第2个弧形窗”，效果如图2-37所示。,复制的弧形窗,第1个弧形窗,图2-37绘制弧形窗,（8）在【变形】面板中，设置“第1个弧形窗”变形参数如图2-38所示，按键盘上的Enter键执行命令。（9）选中“第2个弧形窗”，按照同样操作对其进行倾斜变形。,变形面板,“第1个弧形窗”变形效果,图2-38设置“第1个弧形窗”变形,（10）在【变形】面板中，勾选，设置其x、y方向变形都为90%，则可得到缩小的“第2个矩形窗”，效果如图2-39所示。,图2-39弧形门窗变形后的整体效果,（11）利用【线条】工具和【椭圆】工具绘制灯柱、灯罩和灯泡，参数如图2-40所示，并删除多余的线条。（12）选中整个路灯，在【属性】面板中设置其位置坐标x、y分别为“14.2”、“62.0”,直径为17.4px的圆,直径17.4px的大圆,直径10.0px的小圆,绘制灯柱,绘制灯罩和灯泡,删除多余线条,图2-40绘制路灯,5、填充房屋颜色。（1）选择【颜料桶】工具，设置【填充颜色】为“#568BAB”，填充两个“屋顶”的区域，效果如图2-41所示。（2）使用同样的方法填充其他区域的颜色，颜色参数如图2-42所示。,#568BAB,#CCCCCC,#FFFF00,#DCEFED,#9FC6CE,#79F4DB,图2-41填充房身的颜色,图2-42填充其他区域的颜色,6、修改线条颜色和粗细。（1）选中建筑物的轮廓，修改【笔触颜色】为“#999999”，【笔触样式】为“极细”,（2）选中所有门窗的轮廓和路灯的轮廓，修改【笔触颜色】为“#666666”，【笔触样式】为“2”，效果如图2-43所示。,读者也可以根据自己的喜好修改填充的颜色、线条的颜色、粗细和样式，或者删除所有线条。,7、添加自定义线条或填充。（1）利用【线条】工具绘制窗户的光泽，选择【颜料桶】工具，设置【填充颜色】为“#999999”，填充“矩形门”的阴影区域，效果如图2-44所示。（2）保存测试影片，一个简单生动的建筑物制作完成。,建筑物的轮廓,路灯的轮廓,门窗的轮廓,窗户的光泽,门的阴影,图2-43修改线条颜色和粗细,图2-44添加自定义线条或填充,2.1.4课堂练习绘制“简易场景”,请同学们自己使用绘图工具绘制一个简易场景，效果如图2-45所示。,图2-45效果图,1、新建一个Flash文档，文档所有属性使用默认参数。2、绘制背景，效果如图2-46所示。,3、绘制金字塔，效果如图2-47所示,#FF0000,#00CCFF,#FFFFFF,#FFFFFF,#FFFF00,图2-46绘制背景,#880002,#000000,#FF8400,金字塔填充色,图2-46绘制背景,图2-47绘制金字塔,4、绘制线条，最终效果如图2-48所示。,#FF6600,图2-48绘制线条,2.2绘制复杂图形,2.2.1知识点讲解,使用Flash8进行复杂图形绘制时，一般都需要利用图层来管理各个图形元素，所以本节首先从图层的概念入手进行讲解，进而深化到学习较复杂的图形绘制.,一、图层的概念图层被比喻成透明的醋酸纤维薄片，在舞台上一层层地向上叠加。在图层上可以进行对象绘制和编辑，并且各个图层上的绘制相互不会影响。透过一个图层的空白部分可以看到它下面图层的内容，如图2-49所示。,图层1上的图形,图层2上的图形,真实效果,图2-49图层效果一,二、对图层的操作。,表2-1图层操作控制按钮及功能,2.2.2范例解析（一）图层操作练习,1、新建一个Flash文档，单击【插入图层】按钮新建如图2-50所示的图层效果。,图2-50新建图层,2、分别在各个图层上绘制如图2-51所示的简单图形。,图层1,图层2,图层3,图层4,图2-51绘制简单图形,3、然后对图层进行如图2-52所示的操作后观察舞台的效果。,无操作隐藏图层锁定图层显示轮廓,图2-52图层操作,2.2.3范例解析（二）绘制“仿真苹果”,本例将使用Flash8常用绘图工具来绘制精美的苹果，效果如图2-53所示。,图2-53效果图二,1、绘制苹果轮廓。（2）新建一个Flash文档，设置文档【尺寸】为“550px300px”，文档其他属性使用默认参数。（2）利用【插入】/【新建元件】命令，打开【创建新元件】对话框。设置【名称】为“苹果”，【类型】为“图形”，效果如图2-54所示。（3）单击按钮进入“苹果”元件的编辑界面。（4）新建并重命名图层，直至图层效果如图2-55所示。,图2-54设置【名称】及【类型,图2-55图层效果二,（5）选择【椭圆】工具，如图2-56所示。（6）选择【任意变形】工具，如图2-57所示，得到效果如图2-58所示。,图2-56绘制椭圆,图2-57调整苹果的轮廓,图2-58轮廓的最终效果,这里调节外轮廓时，需要用户利用【封套】工具对轮廓各个锚记点的位置及切线手柄进行调节，直到调出满意的效果。,2、为苹果上色。（1）选择【颜料桶】工具，得到如图2-59所示的效果。（2）选中“底色层”图层上图形的轮廓线，按Ctrl+X快捷键剪切轮廓线，然后锁定“底色层”图层。（3）选中“高光层”图层的第1帧，按Ctrl+Shift+V快捷键将轮廓线粘贴到“高光层”。（4）选择【颜料桶】工具，得到如图2-60所示的效果。,图2-59填充苹果颜色,【混合器】面板,填充颜色,【混合器】面板,填充高光颜,图2-60制作高光效果,（5）删除轮廓线，锁定“高光层”。（6）选择【椭圆】工具并设置，效果如图2-61所示。,图2-61制作亮点,【混合器】面板,填充高光颜色,3、绘制凹陷效果。（1）锁定“亮点层”图层，利用【线条】工具，【选择】工具调节，调整后的效果如图2-62所示。（2）选择【颜料桶】工具，填充凹陷轮廓线内部，然后删除轮廓线，效果如图2-63所示。,（3）锁定“凹陷层1”，选择【矩形】工具，最终效果如图2-64所示。,图2-62绘制苹果上部凹陷轮廓,图2-63填充苹果上部凹陷轮,综合效果,矩形效果,图2-64制作苹果蒂凸起的部分,（4）选择【椭圆】工具，并设置，效果如图2-65所示。,图2-65制作苹果蒂高光效果,综合效果,椭圆处于选中状态的效果,4、绘制苹果蒂。（1）锁定“凹陷层2”和“凹陷层3”图层，选择【线条】工具，调整后的效果如图2-66所示。（2）选择【颜料桶】工具，颜色设置如图2-67所示，然后填充苹果蒂下半部分。（3）选择【颜料桶】工具，颜色设置如图2-68所示，填充苹果蒂上半部分，然后删除多余的线条，效果如图2-69所示。,图2-66绘制苹果蒂轮廓,图2-67【颜色】面板,图2-68【颜色】面板,图2-69填充苹果蒂,利用【刷子】工具时，需设置【刷子大小】为，设置【刷子形状】为，然后进行斑点的绘制操作。,5、制作斑点。（1）选择【刷子】工具，在“斑点”图层上绘制斑点，效果如图2-70所示。,（2）选中“斑点”图层上的第1帧，按F8快捷键将所有斑点图形转换为影片剪辑元件，并命名为“斑点”，然后选中舞台上的斑点元件，在【滤镜】面板中为元件添加模糊效果，参数设置如图2-71所示，最后苹果的效果如图2-72所示。至此，苹果的绘制完成。,图2-70制作苹果上的斑点,图2-71添加模糊效果,图2-72最终苹果图形,6、绘制盘子。（1）新建一个图形元件并命名为“盘子”。（2）选择【椭圆】工具进行设置，效果如图2-73所示。（3）使用同样的方法，在舞台上绘制一个宽高为“223px58px”的椭圆，然后调整其位置，效果如图2-74所示。（4）利用【线条】工具连接小椭圆和大椭圆，效果如图2-75所示,图2-73绘制上部两个椭圆,图2-74绘制下部的小椭圆,图2-75绘制线条,（5）选择所有线条，按Ctrl+B快捷键将图形打散，然后删除多余线条，效果如图2-76所示。（6）选择【颜料桶】工具，在【颜色】面板中设置【填充颜色】的【类型】为“放射状”，从左至右第1个色块颜色为“白色”，第2个色块颜色为“#EAE9DF”，第3个色块为“#F7F9F9”，颜色设置如图2-77所示，然后填充盘子中央，效果如图2-78所示。,图2-76删除多余线条,注意此处的设置,图2-77【颜色】面板三,图2-78填充盘子中央,（7）选择【颜料桶】工具，在【颜色】面板中设置【填充颜色】为“#DDDBCC”，填充盘子边缘。（8）选择【颜料桶】工具，在【颜色】面板中设置【填充颜色】为“放射状”，从左至右第1个色块颜色为“#B7B1A6”，第2个色块颜色为“#CCC7B3”，颜色设置如图2-79所示，填充盘子下部区域，效果如图2-80所示。（9）删除多余线条，效果如图2-81所示。,图2-79【颜色】面板四,图2-80填充盘子底部,图2-80删除轮廓线,7、设置场景。（1）回到主场景中，新建并重命名图层，直至图层效果如图2-82所示。（2）选择【矩形】工具，设置【笔触颜色】为“无”，设置【填充颜色】为“线性渐变”，从左至右第1个色块为“#CCFF00”，第2个色块为“#00CC66”，在“背景”图层上绘制一个宽高为“550px300px”的矩形，并相对舞台居中对齐，如图2-83所示。,图2-82图层效果,颜色面板,矩形,图2-83绘制背景二,（3）然后将【库】面板中的“盘子”元件和“苹果”元件分别放置到“盘子”图层和“苹果”图层上，并调整它们的位置，得到如图2-84所示的效果。,图2-84放置到舞,（4）保存测试影片，一个精美的苹果效果制作完成。,2.2.4课堂练习绘制“精美爱心”,请同学们自己使用绘图工具绘制一个精美的爱心，效果如图2-85所示。,1、新建一个Flash文档，设置背景颜色为“黑色”，文档其他属性使用默认参数。2、利用【直线】工具绘制一条直线，然后利用【选择】工具将直线设置成如图2-86所示的曲线。3、利用【部分选取】工具调节直线两端的锚点将曲线调整到如图2-87所示的效果。4、复制出另一半构成心形，并使用【修改】/【变形】/【水平翻转】菜单命令水平翻转复制出的曲线，然后调整位置形成如图2-88所示的效果。,图2-85效果图,图2-86绘制曲线,图2-87调节曲线形状,图2-88复制出另一半构成心形,5、填充心形，并删除边线，具体参数设置及最终效果如图2-89所示。,#AF057C,#E207C8,【颜色】面板,填