网页动画设计与制作FlashMX2004 项目3-颜色的编辑.ppt

《网页动画设计与制作FlashMX2004 项目3-颜色的编辑.ppt》由会员分享，可在线阅读，更多相关《网页动画设计与制作FlashMX2004 项目3-颜色的编辑.ppt（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页动画设计与制作Flash项目3-颜色的编辑项目三项目三 颜色的编辑颜色的编辑 【项目背景项目背景】通过上一个项目，小张己动手创作了一些角色与画面。现在，经理要求小张将角色与画面设计得更完美、更富有感染力一些。经理要求他设计一个“地球馅汤团”造型、一个“立方体”包装设计，并要求他给“东方明珠”进行配色与着色。【项目分析项目分析】Flash中如何管理颜色对象？怎样对绘制好的图形对象进行着色？完成着色的图形能否修改颜色？【任务分解任务分解】任务1：使用混色器面板。任务2：修改渐变和位图填充。任务3：使用颜色样本面板。任务任务1 使用混色器面板使用混色器面板 了解笔触颜色和填充色的区别。熟悉纯色、

2、渐变色和位图填充三类着色方案。利用混色器面板设计“地球馅汤团”。1了解笔触颜色和填充色的区了解笔触颜色和填充色的区别别（1）笔触颜色 （2）填充色 （3）使用工具栏控件来应用笔触和填充颜色 （4）用”属性”面板选择笔触颜色、样式和粗细 （5）使用”属性”面板应用纯色填充 2熟悉纯色、渐变色和位图填充熟悉纯色、渐变色和位图填充三类着色方案三类着色方案（1）纯色：“颜色样本颜色样本”“颜色选择器颜色选择器”“调色板”或直接输入数值 （2）渐变色：“线性渐变线性渐变”“放射状渐变放射状渐变”（3）位图填充 3利用混色器面板设计利用混色器面板设计“地球馅地球馅汤团汤团”1（1 1）新建）新建Flash

3、Flash文件，命名为文件，命名为“汤圆汤圆”；（2 2）在工具箱选择）在工具箱选择“椭圆形工具椭圆形工具”，在混色器面板单击取色井，将笔触，在混色器面板单击取色井，将笔触颜色设置为红色，将填充色设置为透明；颜色设置为红色，将填充色设置为透明；（3 3）使用）使用“椭圆形工具椭圆形工具”，同时按住，同时按住 Shift Shift 键绘制一个大小合适的正圆键绘制一个大小合适的正圆形，作为整个汤圆的外轮廓；形，作为整个汤圆的外轮廓；（4 4）在工具箱选择）在工具箱选择“铅笔工具铅笔工具”，在混色器面板单击取色井，将笔触颜，在混色器面板单击取色井，将笔触颜色设置为红色，填充色保留原有色彩；色设置为

4、红色，填充色保留原有色彩；（5 5）使用）使用“铅笔工具铅笔工具”的伸直模式，绘制的伸直模式，绘制6 6段圆弧，构成汤圆的切入面；段圆弧，构成汤圆的切入面；（6 6）在工具箱选择）在工具箱选择“线条工具线条工具”，保留混色器面板的颜色设定，绘制，保留混色器面板的颜色设定，绘制3 3条短直线段，将切入面分割成三个部分，完成整个汤圆的轮廓线绘制条短直线段，将切入面分割成三个部分，完成整个汤圆的轮廓线绘制 ；（7 7）在工具箱选择）在工具箱选择“颜料桶工具颜料桶工具”，在混色器面板将填充色设定为，在混色器面板将填充色设定为“放放射状射状”渐变着色方式，然后在下方色带的取色块上单击，可分别选择渐渐变着

5、色方式，然后在下方色带的取色块上单击，可分别选择渐变的起始和结束颜色，再单击取色井进入颜色样本，将起始颜色设为白变的起始和结束颜色，再单击取色井进入颜色样本，将起始颜色设为白色，结束颜色设为浅灰色；色，结束颜色设为浅灰色；（8 8）使用）使用“颜料桶工具颜料桶工具”为汤圆的主体外皮部分着色，采用设定好的为汤圆的主体外皮部分着色，采用设定好的“放射状放射状”渐变着色方案，用鼠标单击外皮的偏左上方高光点位置，完成渐变着色方案，用鼠标单击外皮的偏左上方高光点位置，完成球体效果着色；球体效果着色；3利用混色器面板设计利用混色器面板设计“地球馅地球馅汤团汤团”2（9 9）仍然使用）仍然使用“颜料桶工具颜

6、料桶工具”，在混色器面板将填充色，在混色器面板将填充色设定为设定为“纯色纯色”渐变着色方式，然后单击取色井进入颜色渐变着色方式，然后单击取色井进入颜色样本，将色彩设为浅灰色；样本，将色彩设为浅灰色；（1010）使用）使用“颜料桶工具颜料桶工具”为汤圆的切入面部分着色，采为汤圆的切入面部分着色，采用设定好的用设定好的“纯色纯色”着色方案，用鼠标单击左侧切入面区着色方案，用鼠标单击左侧切入面区域，完成着色；域，完成着色；（1111）重复第）重复第9 9步、第步、第1010步的做法，为汤圆右侧切入面着步的做法，为汤圆右侧切入面着更浅的灰色（更浅的灰色（#CCCCCC#CCCCCC），汤圆下侧切入面着

7、白色；），汤圆下侧切入面着白色；（1212）再在工具箱选择）再在工具箱选择“颜料桶工具颜料桶工具”，在混色器面板将，在混色器面板将填充色设定为填充色设定为“位图填充位图填充”着色方式，然后在下方位图选着色方式，然后在下方位图选择区域内选取择区域内选取“地球地球”图片；图片；（1313）使用）使用“颜料桶工具颜料桶工具”为汤圆露出的内馅部分着色，为汤圆露出的内馅部分着色，采用设定好的采用设定好的“位图填充位图填充”着色方案，用鼠标单击内馅区着色方案，用鼠标单击内馅区域，完成着色域，完成着色 ；（1414）使用）使用“选择工具选择工具”将所有的轮廓线条选中，然后按将所有的轮廓线条选中，然后按 De

8、lete Delete 键删除，选择时按住键删除，选择时按住 Shift Shift 键可以实现多项选择键可以实现多项选择任务任务2 修改渐变和位图填充修改渐变和位图填充 了解填充变形工具。利用填充变形工具修改渐变或位图填充。利用渐变和位图填充进行“立方体”包装设计。1填充变形工具填充变形工具 使用填充变形工具，可以用于调整填充的大小、方向或者中心，使渐变填充或位图填充变形2利用填充变形工具修改渐变或利用填充变形工具修改渐变或位图填充位图填充（1 1）改变渐变或位图填充的中心点的位置：可以拖动中心点，）改变渐变或位图填充的中心点的位置：可以拖动中心点，如图如图3-313-31所示。所示。（2

9、2）更改渐变或位图填充的宽度：可以拖动边框两边上的方形）更改渐变或位图填充的宽度：可以拖动边框两边上的方形手柄（此选项只调整填充的大小，而不调整包含该填充的对象的手柄（此选项只调整填充的大小，而不调整包含该填充的对象的大小大小（3 3）更改渐变或位图填充的高度：可以拖动边框上下边上的方）更改渐变或位图填充的高度：可以拖动边框上下边上的方形手柄。形手柄。（4 4）旋转渐变或位图填充：可以拖动角上的圆形旋转手柄。还）旋转渐变或位图填充：可以拖动角上的圆形旋转手柄。还可以拖动圆形渐变或填充边框最下方的手柄。可以拖动圆形渐变或填充边框最下方的手柄。（5 5）缩放线性渐变或者填充：可以拖动边框中心的方形

10、手柄。）缩放线性渐变或者填充：可以拖动边框中心的方形手柄。（6 6）更改放射状渐变的半径：可以拖动环形边框中间的圆形手）更改放射状渐变的半径：可以拖动环形边框中间的圆形手柄。柄。（7 7）倾斜形状中的填充：可以拖动边框顶部或右边圆形手柄中）倾斜形状中的填充：可以拖动边框顶部或右边圆形手柄中的一个。的一个。（8 8）在形状内部平铺位图：可以缩放填充。）在形状内部平铺位图：可以缩放填充。3利用渐变和位图填充进行利用渐变和位图填充进行“立方体立方体”包装设计包装设计1（1 1）新建）新建FlashFlash文件，命名为文件，命名为“立方体立方体”；（2 2）使用）使用“矩形工具矩形工具”和和“线条工

11、具线条工具”绘制立方体轮绘制立方体轮廓线，绘制时按住廓线，绘制时按住 Shift Shift 键以保证画出正方形，以及斜键以保证画出正方形，以及斜边倾角为边倾角为4545度；度；（3 3）将画好的立方体轮廓线复制三份摆放，以供后面我们分别）将画好的立方体轮廓线复制三份摆放，以供后面我们分别采用纯色、渐变色和位图填充三种着色方案来实现立体效果；采用纯色、渐变色和位图填充三种着色方案来实现立体效果；（4 4）“纯色纯色”着色方案，首先选择颜料桶工具，然后在混色器着色方案，首先选择颜料桶工具，然后在混色器面板中选择纯色填充方案，再选择填充色为浅黄色（面板中选择纯色填充方案，再选择填充色为浅黄色（#F

12、FFF99#FFFF99）；）；（5 5）用颜料桶工具为正方体正面着色，鼠标单击该区域内任一）用颜料桶工具为正方体正面着色，鼠标单击该区域内任一点即可点即可 ；（6 6）重复第）重复第4 4、第、第5 5步，为正方体上面着明黄色（步，为正方体上面着明黄色（#FFFFCC#FFFFCC），侧），侧面着暗黄色（面着暗黄色（#CCCC99#CCCC99），完成黄色立方体），完成黄色立方体 ；（7 7）“线性渐变线性渐变”着色方案，首先选择颜料桶工具，然后在混着色方案，首先选择颜料桶工具，然后在混色器面板中选择线性渐变填充方案，再选择起始颜色为黑色色器面板中选择线性渐变填充方案，再选择起始颜色为黑色（

13、#000000#000000），结束颜色为白色（），结束颜色为白色（#FFFFFF#FFFFFF）；）；（8 8）用颜料桶工具为正方体正面着色，单击该区域内任一点即）用颜料桶工具为正方体正面着色，单击该区域内任一点即可；可；3利用渐变和位图填充进行利用渐变和位图填充进行“立方体立方体”包装设计包装设计2（9 9）用填充变形工具，将线性渐变的方向调整为沿正方）用填充变形工具，将线性渐变的方向调整为沿正方形对角线方向，将渐变的范围调整到与立方体表面大小形对角线方向，将渐变的范围调整到与立方体表面大小相一致；相一致；（1010）重复第）重复第8 8、第、第9 9步，为正方体上面和侧面分别填充合适的渐

14、变步，为正方体上面和侧面分别填充合适的渐变色，完成黑白立方体；色，完成黑白立方体；（1111）“位图填充位图填充”着色方案，首先选择颜料桶工具，然后在混色着色方案，首先选择颜料桶工具，然后在混色器面板中选择位图填充方案，再选择图片为器面板中选择位图填充方案，再选择图片为“黄色小鸭黄色小鸭”；（1212）用颜料桶工具为正方体正面着色，鼠标单击该区域内任一点）用颜料桶工具为正方体正面着色，鼠标单击该区域内任一点即可；即可；（1313）用颜料桶工具为正方体侧面着色，鼠标单击该区域内任一点）用颜料桶工具为正方体侧面着色，鼠标单击该区域内任一点即可，然后用填充变形工具，将位图填充的倾角调整为即可，然后用

15、填充变形工具，将位图填充的倾角调整为4545度角方向，度角方向，将位图填充的大小缩放到与立方体正面位图大小相一致；将位图填充的大小缩放到与立方体正面位图大小相一致；（1414）用相同的方法处理立方体的上面，完成黄色小鸭包装立方体，）用相同的方法处理立方体的上面，完成黄色小鸭包装立方体，如图如图3-463-46所示；所示；（1515）使用）使用“选择工具选择工具”将所有着色完成的立方体轮廓线条选中，将所有着色完成的立方体轮廓线条选中，然后按然后按 Delete Delete 键删除，选择时按住键删除，选择时按住 Shift Shift 键可以实现多项选择。键可以实现多项选择。任务任务3 使用颜色

16、样本面板使用颜色样本面板 了解调色板。了解调色板。熟悉颜色样本面板。熟悉颜色样本面板。利用颜色样本面板给利用颜色样本面板给“东方明珠东方明珠”着色。着色。1调色板调色板 调色板包含了一些常用的标准色彩，还可以存放该Flash 文件中用到的一些用户自定义颜色，该调色板存储在 Flash 文件中。默认的调色板是 216色的 Web 安全调色板。可以在 Flash 文件之间，也可以在 Flash 和其他应用程序（如 Macromedia Fireworks 和 Adobe Photoshop）之间导入导出纯色和渐变调色板。2颜色样本面板颜色样本面板（1）复制颜色或删除颜色 （2）加载或保存默认调色板

17、（3）从调色板中清除所有的颜色 （4）要加载 Web 安全 216 色调色板 （5）对调色板中的颜色进行排序 （6）导入调色板 （7）导出调色板 3利用颜色样本面板给利用颜色样本面板给“东方明东方明珠珠”着色着色（1 1）打开项目三中任务一完成的）打开项目三中任务一完成的FlashFlash文件文件“东方明东方明珠珠”；（2 2）将绘制好的轮廓曲线，和填充好的黑色剪影效果）将绘制好的轮廓曲线，和填充好的黑色剪影效果图形先复制一份留存，以免后面操作如果失误破坏原图形先复制一份留存，以免后面操作如果失误破坏原稿还要重新绘制；稿还要重新绘制；（3 3）使用）使用“颜色样本颜色样本”面板为东方明珠的黑

18、色剪影着面板为东方明珠的黑色剪影着彩色：先用彩色：先用“选择工具选择工具”选中要上色的黑色色块，然选中要上色的黑色色块，然后在后在“颜色样本颜色样本”面板中单击想要使用的颜色即可，面板中单击想要使用的颜色即可，如图如图3-583-58所示；所示；（4 4）将整个东方明珠完成上色工作；）将整个东方明珠完成上色工作；（5 5）使用）使用“选择工具选择工具”将轮廓曲线选中，然后按将轮廓曲线选中，然后按 Delete Delete 键删除，选择时可按住键删除，选择时可按住 Shift Shift 键实现多项选择。键实现多项选择。项目小结项目小结 在在FlashFlash中，控制颜色主要是使用中，控制颜

19、色主要是使用“混色器混色器”和和“颜色颜色样本样本”两个面板，除了纯色以外，还可以用渐变色以两个面板，除了纯色以外，还可以用渐变色以二维绘画来模拟三维立体效果，更能使用任选的位图二维绘画来模拟三维立体效果，更能使用任选的位图来对矢量色块做填充，从而实现很多特殊效果。在学来对矢量色块做填充，从而实现很多特殊效果。在学习过程中，要特别注意不同着色方案之间的比较，抓习过程中，要特别注意不同着色方案之间的比较，抓住它们各自的特点，才能得心应手的使用颜色。住它们各自的特点，才能得心应手的使用颜色。虽然用户可使用虽然用户可使用FlashFlash中许多工具去对对象进行着色，中许多工具去对对象进行着色，但到底使用哪种颜色也许还是个问题。但到底使用哪种颜色也许还是个问题。其实，多学习些色彩的知识就能较好地解决这个问题。其实，多学习些色彩的知识就能较好地解决这个问题。还有，别忘了应该不断丰富每个人的个人图库。还有，别忘了应该不断丰富每个人的个人图库。