Flash cs4教程:经典简单的“填色”游戏-Flash实例教程

【 tulaoshi.com - FLASH 】

　　简介：本例将制作一个经典的简单的填色游戏。游戏内容是，控制吸管吸取颜色，给人换上不同颜色的着装。

　　本例内容所涉及到的知识点：

　　Color类以及Startdrag()、Mouse.hide()、Mouse.show()方法等。

　　1.Color类和Color中的SetRGB（）改变颜色。

　　2.使用Startdrag()实现鼠标跟随效果，使用Mouse.hide()和Mouse.show()实现隐藏和显示鼠标的效果。

　　游戏操作方法：

　　玩家通过控制吸管单击颜色按钮，吸取所点的颜色，然后在用吸管单击图中某一区域，此区域就会填充相应的颜色。如果感觉选取的颜色不合适，可以单击清除按钮，清除图片颜色。效果如下图填色所示。

　　

　　实例-填色

　　一．素材准备

　　1. 声音素材

　　在这个游戏中只有4个音效，分别是上一张和下一张两个按钮上的翻页音效素材声音1和素材声音2、吸管吸取颜料时的音效素材声音3、清除按钮上的清除音效素材声音4，声音素材请到本站相关板块下载。

　　2．元件素材

　　（1）在这个游戏里用到两个图形元件，是背景图形元件和显示区图形元件。新建背景图形元件，作为游戏的整体背景，如图1所示。新建显示区图形元件，用来放置需要填色的影片剪辑，如图2所示。

　　

图1

　　（2）制作两个翻页按钮上一张和下一张同时加入和Play按钮一样的音效。如图3和图4所示。

　　

　（3）制作一个Play按钮，作为游侠的开始按钮。按Ctrl+F8组合键新建按钮，然后在弹起帧绘制一个play字样的图形。同时在指针经过帧和按下帧加入声音素材声音1和素材声音2，如图5所示。

　　

　　（4）.制作清除按钮，用于清除图片上添加的颜色，按下帧加入声音，加入素材声音4。效果如图6所示。

　　

　　（5）.制作颜色按钮，用于选取颜色。在按下帧加入素材声音3素材，如图7所示。在这里制作好一个颜色按钮以后，用同样的方法在制作九个不同颜色的按钮，并分别加入素材声音3素材。分别摆放成如图8所示。

　　

　　（6）.下面的来制作影片剪辑，按Ctrl+F8组合键新建boy影片剪辑。把图层名称改为底，然后绘制一个大一点的白色圆形，分成均匀的4份并转换影片剪辑。在新增一个图层，命名为轮廓，在这个图层上绘制一个小男孩的轮廓。在底层上新增多层，在每层上分别绘制小男孩的头发、衣服、鞋、鞋底等，并转换为影片剪辑，如图9所示。

　　

　　制作完男孩的影片剪辑，用同样的方法制作girl和man两个影片剪辑，如图10和图11所示。

　　

　（7）.新建吸管影片剪辑。在第1帧制作一个吸管吸取颜料影片剪辑。在第4帧插入关键帧，把颜料影片剪辑缩小一些，并把第1帧与第4帧之间创建补间动画。新增图层2，在这层制作一个吸管，在第2帧插入关键帧，把吸管缩小一点。新增图层3，选择图层3的第一帧，打开其动作面板添加

　　stop();语句。

　　 选择第4帧插入关键帧，在动作面板上添加以下代码：

　　gotoAndStop(1); //该影片剪辑跳转到第1帧并停止播放

　　如图12所示：

　　

　　（8）.新建小图标1影片剪辑，在第1帧绘制一个boy图像。为了美观，在boy图像下面添加一个背景。同样的方法制作小图标2和小图标3。如图13所示。

　　

　　（9）.新建sound影片剪辑，在第1帧绘制一个小矩形，打开其动作面板，添加stop();语句。在第2帧添加声音3，并且在第3帧插入若干帧直到波形全部显示。如图14所示。

　　

　　（10）.新建控制吸管影片剪辑，在第1帧绘制一个小矩形，用来添加程序控制吸管。如图15所示。

　　

　　3.颜色控制

　　（1）.新建flash文档，舞台大小设置为550x400像素，颜色设置为灰色，帧频默认，保存文档为颜色控制。将我们在前面准备好的boy影片剪辑和两个颜色按钮拖入舞台。设置boy影片剪辑的实例名称为boy。如图16所示。

　　

　　（2）.选中第1帧打开动作面板添加var sezhi;语句，定义色值变量。接下来选中黄颜色按钮打开动作面板，添加如下代码：

　　on (release) {

　　 _root.sezhi = 16765734;

　　 //赋予变量sezhi的值为16765734

　　}

　　选中蓝色按钮打开动TuLaoShi.com作面板，添加如下代码：

　　on (release) {

　　 _root.sezhi = 3368703;

　　}

　　效果如图17和18所示：

　　

　　（3）.打开boy实例，设置它的发影片剪辑的实例名称为a1，以此类推，设置实例中影片剪辑的实例名称为a2、a3。选中a1打开动作面板，添加如下代码：

　　on (release) {

　　 _root.boy.a1color = new Color(_root.boy.a1);

　　 //新建作用于影片剪辑a1的颜色对象

　　 _root.boy.a1color.setRGB(_root.sezhi);

　　 //设置影片剪辑a1的颜色

　　} //如图19所示

　　

　　（4）.将a1中的代码分别复制到其它a2、a3、a4实例中。这里要注意，将语句中的颜色对象改为与它对应的实例名称。例如a2实例中的代码如下：

　　on (release) {

　　 _root.boy.a2color = new Color(_root.boy.a2);

　　 _root.boy.a2color.setRGB(_root.sezhi);

　　}//如图20所示：

　　

　　4.游戏实现

　　1.新建flash文档，舞台大小设置为550x400像素，颜色默认，帧频设置为30帧/秒，保存文档名为填色

　　2.在填色文档时间轴添加如图21所示图层：

　　

　3.为了方便舞台时间轴的跳转，在标签图层的第2帧、第4帧、第6帧分别添加tu1、tu2、tu3帧标签。

　　4.选择背景图层第1帧，在素材中将 背景图形元件拖入舞台，然后在舞台上添加游戏名称。选择按钮图层第1帧，从做好的影片剪辑素材中将Play按钮剪辑拖入舞台。选择图图层的第1帧，从素材中将3个小图标拖入舞台，并将它们排列整齐，得到如图22所示效果。

　　5.选中Play按钮打开其动作面板，添加如下代码：

　　on (release) {

　　 play();

　　}

　　6.选择小图标1，在其动作面板上添加如下代码：

　　onClipEvent (enterFrame) { //反复执行下面的语句

　　 this.onRollOver = function() { //鼠标指针移至该影片剪辑上时

　　 this.onEnterFrame = function() { //反复执行下面的语句

　　 if (this._xscale100) { //如果这个影片剪辑的横缩放比例小于100

　　 this._xscale = this._yscale += 5; //则横纵缩放比例递增

　　 }

　　 };

　　 };

　　 this.onRollOut = function() { //鼠标指针移开该影片剪辑上时

　　 this.onEnterFrame = function() {

　　 if (this._xscale80) { //如果这个影片剪辑的横缩放比例小于80

　　 this._xscale = this._yscale -= 5; //则横纵缩放比例递减

　　 }

　　 };

　　 };

　　 this.onRelease = function() { //单击该影片剪辑时

　　 _root.gotoAndPlay("tu1"); //跳转到tu1帧，并且播放

　　 };

　　}

　　这些代码实现效果是鼠标移动到小图标上，小图标逐渐增大，而鼠标移开时，小图标又回复到原来的状态。单击小图标会跳转到相应的帧播放。

　　7.将上步中在小图标1上的代码分别复制到其它两个小图标的动作面板上，要注意的是，它的跳转的帧分别要更改成tu2和tu3。

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

　　9.选择白颜色按钮，在它的动作面板中添加代码，并将这些语句复制到其它9个颜色按钮的动作面板上，在这里要注意，给变量_root.sezhi赋的值要与按钮颜色的色值相对应。

　　白颜色按钮代码如下：

　　on (press) {

　　 _root.sezhi = 16777215; //赋予变量sezhi的值为16777215

　　}

　　on (press, release) {

　　 myColor = new Color(_root.xiguan.yanliao); //新建作用于吸管里颜料的颜色对象

　　 myColor.setRGB(_root.sezhi); //设置影片剪辑yanliao的颜色

　　}

　　选择下一张按钮，在其动作面板上添加如下代码：

　　on (rollOver) { //鼠标指针移至该按钮上时

　　 Mouse.show(); //鼠标显示

　　 setProperty("_root.xiguan", _alpha, "0"); //实例xiguan的透明度为0

　　}

　　on (rollOut) { //鼠标指针移开该按钮上时

　　 Mouse.hide(); //鼠标隐藏

　　 startDrag("_root.xiguan", true); //实例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");

　　}

　　10.选择图图层的第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();

　　}

　　把上面a1中的代码分别复制到其它的a2、a3实例中。需要注意的是，要将语句中的颜色对象改为与它们各自的实例名称分别对应。

　12.选择吸管层的第2帧，从素材中将吸管影片剪辑拖入舞台，实例名称命名为xiguan。

　　13.选择显示区层第2帧，从素材中将控制吸管和sound两个影片剪辑拖入到场景中但不要放在舞台上，sound影片剪辑实例名称命名为sound。选择影片剪辑控制吸管的实例，在其动作面板上添加以下代码：

　　 onClipEvent (mouseDown) { //当鼠标按下时

　　 _root.xiguan.gotoAndPlay(2); //实例xiguan跳转到第2帧，并开始播放

　　}

　　14.选择程序层的第1帧，在其动作面板上添加如下语句:

　　stop();

　　var sezhi;

　　选择第2帧，在其动作面板上添加如下代码：

　　Mouse.hide();

　　startDrag("_root.xiguan", true); //隐藏鼠标，实现吸管跟随

　　选择第3帧，在其动作面板添加如下代码：

　　stop();

　　制作完成以后如图22所示

　　

　　到这我们完成了第一个图的填色游戏

　　15.接下来你在第4帧和第7帧制作其它两张图的填色游戏，制作过程和第一张的制作过程相同，这里就不在给大家介绍了，又不明白的可以参考我提供的源文件。