flash 编程——填 色

第2章填色实例说明玩家通过控制吸管单击颜色按钮，吸取所点击的颜色，然后再用吸管单击图中某一区域，此区域就会填充相应的颜色。

如果感觉选取的颜色不合适，可以单击“清除”按钮，清除图片的颜色。

效果如图2.1所示。

图2.1 游戏效果这个游戏有3张图片，玩家可以根据自己的喜好给每张图填上不同的颜色。

学习目标通过本例的学习，可以了解如何用程序控制影片剪辑的颜色，怎样隐藏和显示鼠标。

利用学到的知识就可以制作一些生动有趣的小游戏。

材 准 备 3”、“清除”按钮上的清除2章 填色\声音”)。

(见配套光盘中的”)，如图2.2所示。

(见配套光盘中的“素材\图2.2 “背景”图形元件图2.3 (2) 制作一个Play “弹起”帧绘制一个“Play 加入声音“声音1”和“声音2”，如图色\按钮.fla ”)。

图2.4 Play按钮入声音“声音1”和“声音2”(见配套光盘中的“素材\第2章 填色\按钮.fla ”)，如图2.5所示。

图2.5 翻页按钮然后用同样的方法制作“上一张”按钮。

(4) 制作清除按钮，用于清除图片上填加的颜色。

在“按下”帧加入声音“声音4”(见配套光盘中的“素材\第2章 填色\按钮.fla ”)，如图2.6所示。

图2.6 清除按钮(5) 盘中的“素材\第2章 填色\按钮.fla ”)图2.7 然后用同样的方法制作其他9(6) 按Ctrl+F8组合键新建“boy 大一点的白色圆形，分成均匀的4层上分别绘制小男孩的头发、衣服、鞋等，并转换为影片剪辑(见配套光盘中的“素材\第2章填色\影片剪辑.fla ”)，如图2.8所示。

图2.8 “boy ”影片剪辑用同样的方法制作“girl ”和“man ”两个影片剪辑(见配套光盘中的“素材\第2章 填色\影片剪辑.fla ”)，如图2.9和图2.10所示。

图2.10 “man ”影片剪辑 帧制作一个吸管吸取的“颜料”影片剪辑。

在第1帧与第4帧之间创建2帧插入关键帧，把吸管句。

选择第4帧插入关键帧，在动作面板上添加以下代码：gotoAndStop(1);//该影片剪辑跳转到第1帧并停止播放制作完成后的“吸管”影片剪辑(见配套光盘中的“素材\第2章填色\影片剪辑.fla ”)如图2.11所示。

图2.11 “吸管”影片剪辑(8) 新建“小图标1”影片剪辑，在第1帧绘制一个boy 图像。

为了美观，在boy 图像下面添加一个背景。

同样制作“小图标2”和“小图标3”(见配套光盘中的“素材\第2章 填色\影片剪辑.fla ”)，如图2.12、图2.13和图2.14所示。

图2.12 “小图标1” 图2.13 (9) 新建“sound ”影片剪辑，在第1语句。

在第2帧添加“声音3如图2.15所示。

图2.15 “sound2.2 颜 色 控 制(1) 新建Flash 文档，舞台大小设置为550×400像素，颜色设置为灰色，帧频默认，保存文档为“颜色控制”(见配套光盘中的“素材\第2章 填色\颜色控制”)。

(2) 将素材准备中的boy 影片剪辑和两个颜色按钮拖入舞台。

设置boy 影片剪辑的实例名称为“boy ”，如图2.16所示。

图2.16 “颜色控制”的场景var sezhi;”语句，定义色值变量。

选中黄颜色的 16765734a1”，以此类推，设置a2”、“a3”…。

选中a1打开动作面板，添_root.boy.a1color.setRGB(_root.sezhi);//设置影片剪辑a1的颜色}提示颜色的控制需要用到Color类的相关方法。

●setRGB。

指定Color对象的RGB颜色，用法为myColor.setRGB(0xRRGGBB)，其中0xRRGGBB是要设置的十六进制或RGB颜色。

对于RR、GG、BB，每种代码由两个十六进制数字组成，这些数字指定每种颜色成分的偏移量。

0x告知动作脚本编译器该数字是十六进制数值。

比如下面代码设置影片剪辑mc的RGB颜色值为红色。

myColor = new Color(mc);myColor.setRGB(0xFF0000);●getRGB。

返回最后一次setRGB() 设置的数值。

比如下面的代码将获取Color对象myColor的RGB值，并将其转换为十六进制字符串，分配给value变量：Value= myColor. getRGB().toString(16);●setTransform。

为Color对象设置颜色转换信息。

用法为myColor. setTransform(Object)。

Object对象包括以下指定颜色转换值的属性：ra、rb、ga、gb、ba、bb、aa、ab。

●getTransform。

返回最后一次setTransform 方法设置的转换值。

(5) 将步骤(4)中a1中的代码分别复制到其他的a2、a3…实例中。

需要注意的是，将语句中的颜色对象改为与它对应的实例名称相对应。

(6) 测试影片，最终效果如图2.17所示。

图2.172.3 游戏(1) 新建Flash文档，舞台大小设置为550秒，保存文档名为“填色”。

图2.18 “填色”游戏时间轴(3) 为了方便舞台时间轴帧的跳转，在“标签”图层的第2帧、第4帧、第6帧分别添加tu1、tu2、tu3帧标签。

(4) 选择“背景”图层的第1帧，从素材中将“背景”图形元件拖入舞台，然后在舞台上添加游戏的名称。

选择“按钮”图层的第1帧，从素材中将Play按钮剪辑拖入舞台。

选择“图”图层的第1帧，从素材中将3个小图标拖入舞台，并将他们排列整齐，图2.19所示。

1帧2.20所示。

图2.20 “小图1”上的代码onClipEvent (enterFrame) {//反复执行下面的语句this.onRollOver = function() {//鼠标指针移至该影片剪辑上时this.onEnterFrame = function() {//反复执行下面的语句if (this._xscale<100) {//如果这个影片剪辑的水平缩放比例小于100this._xscale = this._yscale += 5;//则水平、垂直缩放比例递增}}; Array };//鼠标指针移开该影片剪辑上时////}};};//单击该影片剪辑时//跳转到tu1帧，并且播放};}(6) 将步骤(5)中在“小图标1”上添加的代码分别复制到其他两个小图标的动作面板上，需要注意的是，它们跳转的帧分别为“tu2”和“tu3”。

(7) 选择“显示区”层的第2帧，从素材中将“显示区”图形元件拖入舞台的左侧。

选择“按钮”层的第2帧，从素材中将10个颜色按钮、两个翻页按钮和一个清除按钮拖入舞台，放到适当的位置。

(8) 选择白颜色按钮，在其动作面板上添加如下代码：on (press) {_root.sezhi = 16777215;//赋予变量sezhi 的值为16777215}on (press, release) {myColor = new Color(_root.xiguan.yanliao);//新建颜色对象(吸管中的颜色)myColor.setRGB(_root.sezhi);//设置影片剪辑yanliao 的颜色}将这些语句复制到其他9个颜色按钮的动作面板上，需要注意的是，给变量_root.sezhi 赋的值要与按钮颜色的色值相对应。

选择“下一张”按钮，在其动作面板上添加如下代码(如图2.21所示)：//实例“xiguan”随鼠标setProperty("_root.xiguan", _alpha, "100");//实例“xiguan”的透明度为100}on (release) {_root.gotoAndPlay("tu2");}选择“清除”按钮，在其动作面板上添加如下代码；on (rollOver) {Mouse.show();setProperty("_root.xiguan", _alpha, "0");}on (rollOut) {Mouse.hide();startDrag("_root.xiguan", true);setProperty("_root.xiguan", _alpha, "100");}on (release) {_root.gotoAndPlay("tu1");}(9) 选择“图”图层的第3帧，从素材中将boy影片剪辑拖入舞台的左侧，实例名称命名为“boy”。

打开boy实例，设置它的“发”影片剪辑的实例名称为“a1”，以此类推，设置boy实例中其他剪辑的实例名称为“a2”、“a3”…。

选中a1打开动作面板，添加如下代码：on (release) {_root.boy.a1color = new Color(_root.boy.a1);_root.boy.a1color.setRGB(_root.sezhi);_root.sound.play(); Array }a1中的代码分别复制到其他的a2、a3(10) 选择“吸管”层的第2名为“xiguan”。

(11) 选择“显示区”层的第2入到场景中但不要放到舞台上，soundonClipEvent (mouseDown) {//当鼠标按下时_root.xiguan.gotoAndPlay(2);//实例“xiguan”跳转到第2}(12) 选择“程序”图层的第1Mouse.hide();startDrag("_root.xiguan", true);//隐藏鼠标，实现吸管跟随选择第2帧，在其动作面板上添加“stop();”语句。

(13) 在第4帧到第7帧制作其他两张图的填色游戏，制作过程与第一张图的制作过程相同，就不再介绍。

测试影片，最终效果如图2.1所示。

小结拓展本章讲解了“填色”游戏的制作过程，介绍了游戏的规则并准备了整个游戏的素材。

重点讲解了颜色控制的原理，除了介绍颜色控制在游戏中的运用，还通过两个小实例使得大家能更好地理解与使用它。