1、网页动画设计与制作Flash,项目3-颜色的编辑,项目三 颜色的编辑,【项目背景】 通过上一个项目，小张己动手创作了一些角色与画面。现在，经理要求小张将角色与画面设计得更完美、更富有感染力一些。经理要求他设计一个“地球馅汤团”造型、一个“立方体”包装设计，并要求他给“东方明珠”进行配色与着色。,【项目分析】,Flash中如何管理颜色对象？ 怎样对绘制好的图形对象进行着色？ 完成着色的图形能否修改颜色？,【任务分解】,任务1：使用混色器面板。 任务2：修改渐变和位图填充。 任务3：使用颜色样本面板。,任务1 使用混色器面板,了解笔触颜色和填充色的区别。 熟悉纯色、渐变色和位图填充三类着色方案。
2、利用混色器面板设计“地球馅汤团”。,1了解笔触颜色和填充色的区别,（1）笔触颜色 （2）填充色 （3）使用工具栏控件来应用笔触和填充颜色 （4）用”属性”面板选择笔触颜色、样式和粗细 （5）使用”属性”面板应用纯色填充,2熟悉纯色、渐变色和位图填充三类着色方案,（1）纯色： “颜色样本” “颜色选择器” “调色板”或直接输入数值 （2）渐变色： “线性渐变” “放射状渐变” （3）位图填充,3利用混色器面板设计“地球馅汤团”1,（1）新建Flash文件，命名为“汤圆”； （2）在工具箱选择“椭圆形工具”，在混色器面板单击取色井，将笔触颜色设置为红色，将填充色设置为透明； （3）使用“椭圆形工具
3、”，同时按住 Shift 键绘制一个大小合适的正圆形，作为整个汤圆的外轮廓； （4）在工具箱选择“铅笔工具”，在混色器面板单击取色井，将笔触颜色设置为红色，填充色保留原有色彩； （5）使用“铅笔工具”的伸直模式，绘制6段圆弧，构成汤圆的切入面； （6）在工具箱选择“线条工具”，保留混色器面板的颜色设定，绘制3条短直线段，将切入面分割成三个部分，完成整个汤圆的轮廓线绘制 ； （7）在工具箱选择“颜料桶工具”，在混色器面板将填充色设定为“放射状”渐变着色方式，然后在下方色带的取色块上单击，可分别选择渐变的起始和结束颜色，再单击取色井进入颜色样本，将起始颜色设为白色，结束颜色设为浅灰色； （8）使用
4、“颜料桶工具”为汤圆的主体外皮部分着色，采用设定好的“放射状”渐变着色方案，用鼠标单击外皮的偏左上方高光点位置，完成球体效果着色；,3利用混色器面板设计“地球馅汤团”2,（9）仍然使用“颜料桶工具”，在混色器面板将填充色设定为“纯色”渐变着色方式，然后单击取色井进入颜色样本，将色彩设为浅灰色； （10）使用“颜料桶工具”为汤圆的切入面部分着色，采用设定好的“纯色”着色方案，用鼠标单击左侧切入面区域，完成着色； （11）重复第9步、第10步的做法，为汤圆右侧切入面着更浅的灰色（#CCCCCC），汤圆下侧切入面着白色； （12）再在工具箱选择“颜料桶工具”，在混色器面板将填充色设定为“位图填充”着
5、色方式，然后在下方位图选择区域内选取“地球”图片； （13）使用“颜料桶工具”为汤圆露出的内馅部分着色，采用设定好的“位图填充”着色方案，用鼠标单击内馅区域，完成着色 ； （14）使用“选择工具”将所有的轮廓线条选中，然后按 Delete 键删除，选择时按住 Shift 键可以实现多项选择,任务2 修改渐变和位图填充,了解填充变形工具。 利用填充变形工具修改渐变或位图填充。 利用渐变和位图填充进行“立方体”包装设计。,1填充变形工具,使用填充变形工具，可以用于调整填充的大小、方向或者中心，使渐变填充或位图填充变形,2利用填充变形工具修改渐变或位图填充,（1）改变渐变或位图填充的中心点的位置：可
6、以拖动中心点，如图3-31所示。 （2）更改渐变或位图填充的宽度：可以拖动边框两边上的方形手柄（此选项只调整填充的大小，而不调整包含该填充的对象的大小 （3）更改渐变或位图填充的高度：可以拖动边框上下边上的方形手柄。 （4）旋转渐变或位图填充：可以拖动角上的圆形旋转手柄。还可以拖动圆形渐变或填充边框最下方的手柄。 （5）缩放线性渐变或者填充：可以拖动边框中心的方形手柄。 （6）更改放射状渐变的半径：可以拖动环形边框中间的圆形手柄。 （7）倾斜形状中的填充：可以拖动边框顶部或右边圆形手柄中的一个。 （8）在形状内部平铺位图：可以缩放填充。,3利用渐变和位图填充进行“立方体”包装设计1,（1）新建
7、Flash文件，命名为“立方体”； （2）使用“矩形工具”和“线条工具”绘制立方体轮廓线，绘制时按住 Shift 键以保证画出正方形，以及斜边倾角为45度； （3）将画好的立方体轮廓线复制三份摆放，以供后面我们分别采用纯色、渐变色和位图填充三种着色方案来实现立体效果； （4）“纯色”着色方案，首先选择颜料桶工具，然后在混色器面板中选择纯色填充方案，再选择填充色为浅黄色（#FFFF99）； （5）用颜料桶工具为正方体正面着色，鼠标单击该区域内任一点即可 ； （6）重复第4、第5步，为正方体上面着明黄色（#FFFFCC），侧面着暗黄色（#CCCC99），完成黄色立方体 ； （7）“线性渐变”着色方
8、案，首先选择颜料桶工具，然后在混色器面板中选择线性渐变填充方案，再选择起始颜色为黑色（#000000），结束颜色为白色（# FFFFFF）； （8）用颜料桶工具为正方体正面着色，单击该区域内任一点即可；,3利用渐变和位图填充进行“立方体”包装设计2,（9）用填充变形工具，将线性渐变的方向调整为沿正方形对角线方向，将渐变的范围调整到与立方体表面大小相一致； （10）重复第8、第9步，为正方体上面和侧面分别填充合适的渐变色，完成黑白立方体； （11）“位图填充”着色方案，首先选择颜料桶工具，然后在混色器面板中选择位图填充方案，再选择图片为“黄色小鸭”； （12）用颜料桶工具为正方体正面着色，鼠标单
9、击该区域内任一点即可； （13）用颜料桶工具为正方体侧面着色，鼠标单击该区域内任一点即可，然后用填充变形工具，将位图填充的倾角调整为45度角方向，将位图填充的大小缩放到与立方体正面位图大小相一致； （14）用相同的方法处理立方体的上面，完成黄色小鸭包装立方体，如图3-46所示； （15）使用“选择工具”将所有着色完成的立方体轮廓线条选中，然后按 Delete 键删除，选择时按住 Shift 键可以实现多项选择。,任务3 使用颜色样本面板,了解调色板。 熟悉颜色样本面板。 利用颜色样本面板给“东方明珠”着色。,1调色板,调色板包含了一些常用的标准色彩，还可以存放该Flash 文件中用到的一些用户
10、自定义颜色，该调色板存储在 Flash 文件中。默认的调色板是 216色的 Web 安全调色板。 可以在 Flash 文件之间，也可以在 Flash 和其他应用程序（如 Macromedia Fireworks 和 Adobe Photoshop）之间导入导出纯色和渐变调色板。,2颜色样本面板,（1）复制颜色或删除颜色 （2）加载或保存默认调色板 （3）从调色板中清除所有的颜色 （4）要加载 Web 安全 216 色调色板 （5）对调色板中的颜色进行排序 （6）导入调色板 （7）导出调色板,3利用颜色样本面板给“东方明珠”着色,（1）打开项目三中任务一完成的Flash文件“东方明珠”； （2）
11、将绘制好的轮廓曲线，和填充好的黑色剪影效果图形先复制一份留存，以免后面操作如果失误破坏原稿还要重新绘制； （3）使用“颜色样本”面板为东方明珠的黑色剪影着彩色：先用“选择工具”选中要上色的黑色色块，然后在“颜色样本”面板中单击想要使用的颜色即可，如图3-58所示； （4）将整个东方明珠完成上色工作； （5）使用“选择工具”将轮廓曲线选中，然后按 Delete 键删除，选择时可按住 Shift 键实现多项选择。,项目小结,在Flash中，控制颜色主要是使用“混色器”和“颜色样本”两个面板，除了纯色以外，还可以用渐变色以二维绘画来模拟三维立体效果，更能使用任选的位图来对矢量色块做填充，从而实现很多特殊效果。在学习过程中，要特别注意不同着色方案之间的比较，抓住它们各自的特点，才能得心应手的使用颜色。 虽然用户可使用Flash中许多工具去对对象进行着色，但到底使用哪种颜色也许还是个问题。 其实，多学习些色彩的知识就能较好地解决这个问题。 还有，别忘了应该不断丰富每个人的个人图库。,
