1、1第三章 角色与场景的绘制项目目标：掌握 flash 中常用绘图工具的使用；能够根据前期设计图与分镜头台本使用 flash 绘制相应角色与场景；初步了解 flash 动画短片的制作规范。项目介绍：角色与场景设计与制作是动画前期的重要环节。本书所选用的两个片源中， 苹苹果果中的角色及其动作最终是在 PhotoShop 中完成，场景在 Flash 中绘制而成。 春节则整好相反，角色及其动作在Flash 中设计并绘制，场景在 PhotoShop 中完成。在本章中，我们的重点在于掌握 Flash 中的绘图工具，所以使用的实例均以 Flash 的绘制为主，以苹苹角色为突破口，以苹苹果果中的场景为例介绍软
2、件工具的使用与制作规范。项目分析：本章的重点在于用 flash 的绘图工具绘制出短片所需要的角色和场景。在绘制中，要掌握 flash 各个绘图工具的功能、使用方法，元件、组的初步使用。当然，规范的使用软件进行绘制，掌握一些窍门，提高工作效率也很重要。教学建议： 虽然本章任务主要是用 flash 软件绘制出所需的角色和场景。但也要开拓学生思路，发挥他们的想象力，自己设计并手绘出角色的各种造型、服装，以及各个场景的线稿等。同时，也要引导学生不要囿于软件的学习，养成使用软件进行设计的思维方式。建议学时 12 课时。学习建议：规范很重要，所以在绘制中要根据要求规范你的操作；效率也很重要，所以有意识的提
3、高你的工作效率，比如学会使用快捷键等等；效果更重要，请严格要求自己，每一根线条，每一处渐变，每一块填色都要做到细致、美观，不要因为是练习就草率。23.1 苹苹的 Flash 绘制方法任务目标：初步掌握 Flash 软件的绘图功能；使用 Flash 软件绘制出女主角苹苹；能够使用 Flash 绘制出其他角色；初步了解短片制作规范。任务分析：在第二章中我们已经了解苹苹果果中角色和场景设计的风格，并且设计出了具体的角色造型、比例图、转面图、口型图等。本节任务就是要根据角色设计稿使用 Flash 软件绘制出女主角苹苹。任务可以分为三个层次。第一，Flash 软件绘图功能的掌握；第二，使用 Flash软
4、件绘制出所需要的角色造型；第三，在绘制中领会并内化项目制作规范，提高工作效率。这三个层次相辅相成、逐层递进，最终应该融会贯通，浑然一体。知识必备：Flash 的前身是 Future Wave 公司的 Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑 Flash 文档。1996 年 11 月，美国 Macromedia 公司收购了 Future Wave，并将其改名为 Flash。在出到Flash 8 以后，Macromedia 又被 Adobe 公司收购。最新版本为 Adobe Flash Professional CS5.5。Flash 是目前行业里使用最广泛
5、的二维动画制作软件。从角色、场景的绘制，动作的制作，到镜头的合成、输出等完整的二维短片制作流程都可以在这个软件里完成。有很多公司设计稿、分镜等工作也使用 Flash 制作。比如本书所选春节宣传短片中，导演为制作人员绘制了电子分镜。这样可以在真正制作之前预览片子的大体效果，为制作定好调子、节奏等，避免前期设计与中后期制作之间出现较大的偏差而导致工作不能完成或者过多的返工等。要进行 Flash 动画项目的开发，首先要了解并设置工作环境。每个动画公司和制作人员通常都有自己的工作习惯，良好的工作习惯会让你的工3作更有效率。一、 建立文档从开始菜单中找到 Adobe Flash Professional
6、 CS5.5，单击打开软件，弹出软件初始对话框。如图 311 所示。选择“新建”列表中的第一个选项 ActionScript 3.0，新建一个空白文档。图 311：Flash 启动初始画面如果你已经打开了软件，也可以使用“文件”“新建” （Ctrl+N）命令建立文档，如图 312 所示。点击“新建文档”对话框中的ActionScript 3.0 选项，对话框右边出现一系列参数，在此可以设置文档的属性。因为本片播出媒体为制标清电视，所以设置其分辨率（也就是舞台的大小）为水平方向 720pixel（像素） ，垂直方向为576pixel（像素） ，帧频为 25fps（帧/秒） 。4图 312：Fla
7、sh 中新建文档图二、 设置工作环境Flash cs5.5 为我们设置了更加方便的工作环境。不过，很多资深动画制作人员都有自己习惯的工作习惯，这时往往要重新规划工作区。如图 313 所示是启动 Flash cs 5.5 的初始界面，最常用的工具面板、时间轴面板、属性面板等都是可以拖曳的活动面板。图 313：工作环境设置示意图5鼠标按住面板的顶部深灰色区域可以将面板拖动到合适的位置。如图314 所示。图 314：拖动面板示意图在菜单“窗口”“工作区”中可以选择适合的工作区环境。如图315 所示。图 315：工作区设置示意图未打开的面板也可以在“窗口”菜单中打开。比如要打开对齐面板，就可以选择“窗
8、口”“对齐” （Ctrl+K）命令，如图 316 所示。6图 316：打开指定面板示意图三、绘图工具的使用Flash cs 5.5 具有强大的绘图功能。本小节先介绍最基本也是最常用的几个工具的使用。如图 317 所示。图 317：工具面板图1. 线条工具（快捷键 N） 。使用线条工具可以绘制各种各样的直线，线条工具在 Flash 中的造型能力极强。按快捷键 N 键，在舞台的空白区域拉出几根线条，选中线条在“属性” （Ctrl+F3）上设置线条的属性。在属性面板中，位置和大小指的是线条距离舞台左上角的位置。也就是说坐标原点在舞台的左上角。在笔触选项中可以设置线条的颜色、笔触的粗细、样式等，也可以
9、将端点和结合部设置为你所需要的样式。如图318 和图 319 所示。7图 318：属性面板 图 319：线条样式示意图2. 吸附工具。当需要连续绘制线条时，如果不希望线条结合点断裂，可以先将吸附工具点中，这样绘制的线条端点将结合在一起，在调整结合点时比较方便，用颜料桶倾倒颜色时不会颜色倒不进去的情况。如图3110 所示。图 3110：吸附工具示意图3. 选择工具（V） 。Flash 中选择工具的功能有两种：选取：用选择工具单击对象可以选取图形，双击鼠标可以选取连续的线条，或者相连的线条和填充，从而设置图形属性，或者移动、删除图形等。调节：当把选择工具悬停在线条上的时候，鼠标下方出现一小段曲线，
10、表示可以从此处调整线条的弯曲。当将鼠标悬停在线条端点或结合点时，鼠标下方出现一个直角，表示可以调整端点。在实际绘制中这是非常常用的一种方法,苹苹的眉毛、耳朵等部位都是用这种方法绘制而来。如图83111 所示。图 3111：选择工具的调节作用在实际绘制时，经常需要给线条增加节点，这时，可以按住 Ctrl 键，点住线条拖动鼠标，根据需要增加多个节点，这样可以保证高效的增加节点，而且确保线条之间是闭合的，方便进一步调整和后期填色。如图3112 所示。图 3112：按住 Ctrl 键增加节点在实际制作中，也经常需要将线稿导入到 Flash 中，然后根据线稿新建一个图层进行描线，将线稿转换为 Flash
11、 文档。熟练的使用线条工具和选择工具进行描线是动画师的基本工作。如图 3113 和图 3114 所示为短片春节中的一张线稿，制作人员根据导演给的线稿进行描线，绘制出窗台的场景图。9图 3113：在线稿上描线绘制 1 图 3114：在线稿上描线绘制2技术点睛：描线时一般使用极细线，鲜亮的颜色，比如绿色、红色。这样看起来很清晰，放大后线条也不会变粗。4. 矩形工具（R）和椭圆工具（O）矩形工具（R）和椭圆工具（O）在工具面板上的同一个位置，如图3115。可以绘制出各种矩形和椭圆，按住 Shift 键可绘制出正方形或者正圆。这也是比较实用的绘图工具。许多封闭的图形，比如人物的眼睛、脸部、耳朵、气球、
12、轮胎等等物件都可以从椭圆经调整得来。而像门窗、家具等规整物件可以用矩形绘制调节得来。10图 3115：矩形与圆形工具切换5. 油漆桶工具（K） ，也叫颜料桶工具，用来为封闭的图形填色。注意通常要求封闭的图形，如果图形有缺口（眼睛不一定能看出来，要放大若干倍之后才能看出） ，往往颜色倒不进去，如图 3116 所示。这时需要用选择工具拖动线条端点将缺口“堵起来” 。可见，前面介绍的方法如按住Ctrl 键增加节点、吸附工具等都可以有效杜绝“缺口” 。图 3116：图形未闭合示意图6. 笔触颜色和填充颜色工具分别用来给线条和填充区域上色。如果需要统一调整所有线条的颜色，可以全选（Ctrl+A）舞台中的
13、图形对象，使用笔触颜色工具选择设定的颜色即可。7. 对象绘制（J） 。当选中直线等绘图工具时，Flash 提供了两种绘图模式，即普通绘制与对象绘制（J） ，如图 3117 所示。当选择对象绘制时，图 3111绘制的图形周围会出现蓝色的线框，图形自成一体，不会与其他图形混合。双击图形可进入绘制对象编辑模式。而普通绘制模式之下，当选中图形时，图形上面布满密密麻麻的点点，使用菜单命令“修改”“组合”（Ctrl+G）将其组合时，与对象绘制模式绘制的图形效果类似。在实际制作中，为避免所绘制图形之间相互干扰，出现不必要的麻烦，通常可以使用对象绘制模式，或者及时将所绘制图形组合（Ctrl+G） 。而最终若是
14、需要一体编辑时，可以选中所有图形，使用分离命令（Ctrl+B）将组合或者对象再分离成普通模式，便于修改。图 3117：对象绘制示意图四、图层与帧的简单操作图层是图形图像处理与动画制作中的重要概念。Flash 中的图层与时间轴共用同一个面板，表现了画面在从空间与时间上的变化。如图3118 所示。在时间轴面板（Ctrl+Alt+T）的左下角是“新建”图层按钮。对于暂时不做修改的图层，通常要锁定,以免发生不必要的错误。锁定图标右侧是轮廓图标。点中它可以将所有图层或者某个图层以轮廓线的方式查看，忽略场景中的填充和细节。在图 3118 中，时间轴右侧的两个图层上分别有一个空心小圆圈和一个实心圆点，前者表
15、示这是一个空白关键帧，也就是改帧上没有任何图形元素；后者表示关键帧。通常新建一个图层都会自动生成一个空白关键帧，等待你添加内容。12图 3118：图层与帧示意图五、保存 Flash 动画项目使用“文件”“保存” （Ctrl+S）或者“文件”“另存为”（Ctrl+Shift+S）可以保存你的动画项目，存成.fla 文件。记得一定要养成好习惯，经常保存文件，防止不必要的损失。13任务实施：第一步：绘制苹苹的头部通常为了适合中期动画制作，苹苹的每个关节都相应地分开打成组合或者元件，以方便利用关节制作动画，因此把苹苹的头部分成脸部，眼睛，眉毛，鼻子，嘴巴，耳朵和头发，发髻等部分分别绘制，再进行组合。1
16、、绘制苹苹的脸部轮廓。1使用工具栏中的“椭圆工具” （O） ，在工具栏“笔触颜色”选取黑色， “填充颜色”选择无填充颜色。或者在“颜色”面板选取笔触颜色为黑色 ，填充颜色为无填充颜色 ，如图 3119。图 3119：取消笔触示意图 图 3120：苹苹脸部轮廓画出一个椭圆形脸部轮廓，使用任意变形工具（Q） ，调整椭圆以适合苹苹的脸部轮廓，如图 3120 所示。技术点睛：苹苹的造型比较可爱，所以脸部轮廓也比较圆满，使用椭圆工具来绘制比较合适。如果使用线条拼接，易产生较多节点，影响美观。2在“颜色”面板选取脸部的颜色#FDEBE7，如图 3121 所示。使用颜料桶工具（K）倾倒在黑色椭圆内。14技术
17、点睛：苹苹正值七八岁年纪，其脸色粉嫩、白皙，健康有光泽，所以在选择肤色时注意舍弃暗沉不健康的颜色。图 3121：颜色面板 图 3122：脸部轮廓组合3使用“选择工具” （V）在脸部的填充区域双击鼠标，选中整个脸部将其组合（Ctrl+G） ，如图 3122 所示。4把制作完成的脸部轮廓暂放一旁，继续绘制脸部其他部分。2、绘制苹苹的眉毛。1使用“线条工具” （N） ，绘制一条直线，拉线条的时候注意眉毛的长度。使用选择工具调整线条的弧度，在“属性”面板（Ctrl+F3）调整线条的粗细，可以直接移动滑标，或者直接输入数值 1.75，如图 3123 和3124 所示。绘制完成，将眉毛组合（Ctrl+G）
18、 。图 3123：眉毛的绘制15图 3124：眉毛粗细设置 2选择已画好的左眉毛，移放在脸部轮廓的相应位置，如图 3125 所示。技术点睛：五官的排列应注意参考角色设定图，同时注意小朋友一般长相比较稚嫩，五官未必“张开” ，额头一般较为饱满，五官分布一般在脸部的中下部集中。图 3125：左眉毛 图 3126：调节同一图层上对象的层次如果脸部轮廓覆盖住了左眉毛，使用“修改”“排列”“上移一层”（Ctrl+上箭头） ，使左眉毛组合放置在脸部轮廓组合之上。反之，下移一16层（Ctrl+下箭头） 。如图 3126 所示。3复制左眉毛。选择左眉毛, 菜单“编辑”“直接复制” （Ctrl+D） ，如图 3
19、127 所示。复制出另一条眉毛，把眉毛移到相应的位置，如图3128 所示。图 3127：直接复制 图 3128：直接复制出眉毛4水平翻转左眉毛。复制的眉毛，形状与左眉毛一模一样，应该要水平翻转左眉毛，变成右眉毛。菜单“修改”“变形”“水平翻转”, 如图3129 和 3130 所示。图 3129：水平翻转命令 图 3130：水平翻转眉毛17如对眉毛形状不满意，双击进入组合直接调整眉毛形状后，再双击空白区域退出组合编辑模式。 技术点睛：在实际绘制时，是一边绘制一边把各部位组合拼接成一个整体，这样可以不时检查各部位的绘制是否正确，比例是否合适等。当然也可以等各部位全部分开绘制好后再放置到相应位置，成
20、为一个整体。步骤上没有对错之分，主要取决于个人或公司的制作习惯与偏好。3、绘制苹苹的鼻子与嘴巴。依照上述绘制眉毛的步骤方法，绘制鼻子与嘴巴。1绘制鼻子线条，调整线条的弧度，如图 3131 所示。2选择鼻子，打成组合，移放在脸部轮廓的相应位置上，如图 3132所示。3绘制嘴巴，调整线条的弧度。选择嘴巴，将其组合。移放在脸部轮廓的相应位置上，如图 3133 所示。图 3131：绘制鼻子 图 3132：鼻子 图 3133：嘴巴4、绘制苹苹的眼睛。1绘制上眼线、眼睫毛与下眼线，调整线条的弧度，上眼线的弧度较大，一条直线不能完成，可以使用三条短线来完成大弧度的绘制，如图技术点睛：在角色设定中，苹苹眼睛大
21、而圆，所以，鼻子的位置应偏下，给眼睛流出足够的空间。183134 所示。图 3134：眼睛绘制 2绘制棕色眼瞳。使用工具栏中的“椭圆工具” （O） ，在工具栏“笔触颜色”选取黑色， “填充颜色”选择棕色。也可以在“颜色”面板选取笔触颜色为黑色，填充颜色棕色#481500，选择颜色的方法很多，要根据自己的习惯或者绘制的便捷程度相应选择。3在文档空白处，绘制出一个椭圆，黑色线条，棕色填充颜色，调整椭圆形状，并将其组合（Ctrl+G） ，如图 3135 所示。图 3135：绘制眼瞳 4绘制眼白，调整眼白形状，稍稍倾斜并组合。如图 3136 所示。图 3136：绘制眼白5调整眼线、眼瞳、眼白的位置。把
22、棕色眼瞳挪回原来的位置。如出现棕色眼瞳覆盖住眼白的情况，通过鼠标右键调整组别之间的层次位置。全选眼睛，打成一个整组，如图 3137 所示。19图 3137：眼睛整体 图 3138：脸部6选择已绘制好的左眼睛，复制出另一个眼睛，将之水平翻转，摆放到脸部合适位置。如图 3138 所示。5、绘制苹苹的耳朵1绘制耳朵轮廓。并调整线条的弧度，如图 3139 所示。图 3139：绘制耳朵2闭合耳朵曲线，填充颜色。因为要填充颜色，所以一定要使耳朵周围曲线闭合，否则颜色会倾倒不进去。如图 3140 左图所示，添加一条辅助线，使耳朵闭合。填充好颜色后，再删除辅助线，恢复原来线条状态。如图 3140 右图所示。图
23、 3140：给耳朵填色 图 3141：苹苹头部 203选择已绘制好的左耳朵，复制出另一个耳朵，并水平翻转复制好的左耳朵, 摆放在头部两侧相应位置。如图 3141 所示。6、绘制苹苹的头发。1绘制三条直线，调整线条的弧度，符合头部轮廓。如图 3142 所示。图 3142：绘制头发轮廓 图 3143：绘制头发轮廓2使用上述方法绘制出整个头发轮廓，确保闭合头发曲线，如图3143 所示。3填充头发和发箍的颜色，然后删除闭合用的辅助线。选择所有头发，组合。如图 3144 所示。图 4144：给头发填色图 4145：头发与脸部组合在一起4将头发盖到前面绘制的脸部上面，调整头发的比例与位置。处理好层次关系。
24、如图 3145 所示。此时的苹苹已经很可爱了，下面再给她添上发饰、腮红等装饰会更加鲜活。7、绘制苹苹的发髻、装饰、腮红等211先绘制发髻和装饰的曲线，并填充发髻的颜色。如图 3146 所示。图 3146：绘制发饰2用椭圆工具绘制苹苹的腮红。小女孩的脸部总是红扑扑的，绘制腮红会使脸部看起来更红润。在“颜色面板”选取径向渐变，填充颜色#FF0000，径向的两边都是相同的红色，腮红整体的颜色会纯净一些。内部颜色的 Alpha 为 35%，外部颜色的 Alpha 为 0%。最后框选腮红打成组别。如图 3147 组图所示。图 4147：绘制腮红3框选头部所有组合，打成头部组合，如图 3148 所示。一般
25、情况下，在动画中期制作时，头部会作为一个整体来调整动作，所以头部一般会打成一个整体组合，和身体各部位分开的组合，略有不同。22图 3148：组合整个头部23第二步：绘制苹苹的身体前面我们详细介绍了苹苹头部的画法，相信你应该基本掌握了 Flash软件的绘制功能。1、绘制苹苹的颈部绘制颈部的曲线，并调整线条的弧度，闭合曲线，填充颈部颜色，删除辅助线条，将其组合并移放到苹苹头部下面，调整比例，放置一边备用。如图 3149 所示和 3150 所示。图 3149：绘制颈部 图 3150：头部加上颈部 2、绘制苹苹的胳膊与手1绘制胳膊的曲线，调整线条的弧度，填充胳膊颜色，填充颜色#D1D9F0，如图 31
26、51 所示。图 3151：绘制胳膊 图 3152：绘制手部2绘制手部的曲线并调整线条的弧度，填充手部颜色，如图 3152 所示。3分别把胳膊和右手组合，并相应地调整位置。复制手臂，并水平翻转出左手臂。如图 3153 所示。24图 3153：组合手臂并复制3、绘制苹苹的上衣与裙子1绘制上衣的曲线。分别填充颜色。如图 3154 所示。图 3154：绘制苹苹上衣2绘制裙子的外形曲线，使用红色格子图片，打散后，把裙子曲线放置在图片上，删除多余地图片，最后组合。如图 3155 所示。图 3155：绘制裙子4、绘制苹苹的腿与鞋子依旧是先绘制腿和鞋子的外形曲线，接着填色，腿部颜色可以吸取脸部或者手部的肤色，鞋子的颜色为#CC0033，然后打成组合。25另一条腿和鞋子可以依照此法再绘制一个，或者复制已画好的组合，然后水平翻转。如图 3156 所示。图 3156：绘制苹苹腿和鞋子第三步：组合出一个完整的苹苹苹苹的各部件都绘制并打成了相应的组合，最后将各部件合理缩放、排列，组合出如图 3157 左图所示的苹苹，然后选中头部和身体组成一个大的组合，如图 3157 右图所示。图 3157：组合出一个完整的苹苹
