分享
 
 
 

Flash cs4制作经典小游戏《填色》-Flash

王朝数码·作者佚名  2009-01-15
窄屏简体版  字體: |||超大  

本例有一定难度,如果您刚接触flash,请到网络学院相关板块学习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

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

图3

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

图5

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

图6

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

图7

图8

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

图9

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

图10

图11

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

“stop();”语句。

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

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

如图12所示:

图12

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

图13

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

图14

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

图15

3.颜色控制

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

图16

(2).选中第1帧打开动作面板添加“var sezhi;”语句,定义色值变量。接下来选中黄颜色按钮打开动作面板,添加如下代码:

on (release) {

_root.sezhi = 16765734;

//赋予变量sezhi的值为16765734

}

选中蓝色按钮打开动作面板,添加如下代码:

on (release) {

_root.sezhi = 3368703;

}

效果如图17和18所示:

图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所示

图19

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

on (release) {

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

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

}//如图20所示:

图20

4.游戏实现

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

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

图213.为了方便舞台时间轴的跳转,在“标签”图层的第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._xscale

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所示

图22

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有