怎样用Flash制作拼图游戏

Flash广泛用于创建吸引人的应用程序,包含丰富的视频、声音、图形和动画。江苏省新课程《多媒体技术应用》模块中的动画加工部分所用的平台就是Flash。对于高中阶段的学生,课标上要求实现逐帧动画、运动动画、形变动画、文件保存与导出等处理。Flash的魅力不仅限于此,利用它制作出丰富多彩、有趣的小游戏也是学生向往和感兴趣的事。拼图游戏的趣味性也可以增加学生学习信息技术的兴趣,提高他们的动手能力,培养他们的创新能力。网上有很多有关Flash制作拼图游戏的教程,但讲解塌槐大多比较复杂,步骤比较烦琐。本文作者通过反复试验和探究,总结出使用Flash制作拼图游戏的简捷方法,供读者参考。本文作者所使用的Flash版本为Macromedia Flash8。一、素材准备找几张图像并不迅衫模是难事,但有时找亩缓到的图像并不一定合用,需要对其进行一些加工。

第一步:图片的准备工作

既然是拼图,当然首先就要有图片了,我找到的是一幅320*240象素的jpg图片,通过Fireworks将其切割成12块(每块80*80px),然后分别保存成12个jpg小图片备用，名称最好有一定规律，比如我将他们分别命名为pic1～pic12，当然你也可以利用其他图象处理工具来实现这一步。

第二步:建立Flash文件

打开今天的主角――Flash,通过菜单Modify Document...或毕春汪Ctrl+J打开Document Properties面板(由于盗匪使用的是Flash MX,一些快捷键可能与Flash 5的有所不同,不过盗匪会尽量给出Flash 5中相应的快捷键的,这个在Flash 5中的快捷键是Ctrl+M),将画面大小改为400*600px,其他可以保持默认值。

第三步:制作用来判断位置的Movie Clip

在场景中通过菜单File Import或Ctrl+R导入12块已经处理好的小图片,然后按照原图顺序摆放在场景的下半部,选中左上角第一块,选择菜单Insert Convert to Symbol或按F8键,在d出的Convert to symbol面板中选择Movie Clip(以后简称MC),控制点选择在图片中心(这一点很重要,Flash 5中可能没有这个选项,不过好在Flash 5的默认值就是中心),name为check1(也可以根据自己的习惯取名),其余的图片用同样的方手仔法处理。

然后选择菜单Window Properties或Ctrl+F3,打开Properties面板,按顺序为这些图片分别填写Instance Name为b1～b12,以便以后在Action中调用.选中所有MC(Ctrl+A),将他们的Alpha属性设置为30％,这样做只是为了使MC看上去模糊,让玩家不能清楚地辨认出是哪部分,以增大游戏难度。

第四步:制作用来拖拽的MC

这是比较重要的一步,我们将利用这个MC来实现森型图块的拖拽以及位置的判断,在这里我们运用了MC中嵌套Button的方法以实现代码重用,这是个很重要的方法,希望大家加以重视.

选择菜单Insert New Symbol...或Ctrl+F8新建Button(以下简称BT),取名为button_body,确定后进入编辑界面,在Timeline(时间线)中右键单击Hit帧,在快捷菜单中选择New Keyframe建立关键帧 ,选择矩形工具(R),绘制一个矩形,选择选取工具 (V),双击矩形,在Properties面板中将宽、高、X坐标、Y坐标分别设置为80、80、0、0新建MC 取名button_action,确定后进入MC编辑窗口,Ctrl+L打开Library(库),将刚刚建立的button_body拖进来,同样将X、Y坐标设置为(0,0).

下面开始为BT(按钮)添加AS,选中刚才拖进来的button_body,通过菜单Window Actions或F9键(Flash 5中为Ctrl+Alt+A)打开Actions面板,利用快捷键Ctrl+Shift+E(Flash 5 中为Ctrl+E,前提是选中了Actions面板)转换到Expert Mode(专家模式,这个模式下编写AS比较灵活,建议使用),填入下面的代码:

on (press) {//按下鼠标

startDrag(_parent, false, 50, 50, 350, 550)//使图块可以在一定范围内被拖拽

}

on (release) {//释放鼠标

stopDrag()//停止拖拽

for (i=1i <=12i++) {//判断图块所在位置

if (_parent._x <=eval(\"_root.b\"+i)._x+40 and _parent._x>=eval(\"_root.b\"+i)._x-40 and

_parent._y <=eval(\"_root.b\"+i)._y+40 and _parent._y>=eval(\"_root.b\"+i)._y-40) {

//如果被拖拽的图块中心点进入某个判断位置的MC的范围内时

_parent._x = eval(\"_root.b\"+i)._x//设置图块的坐标,使其吸附到相应的位置

_parent._y = eval(\"_root.b\"+i)._y

}

}

}

这样,拖拽组件button_action就制作好了,在下面的制作中将重复用到这个MC.

第五步:制作被拖拽的图块

新建MC,命名为pic1(这个名称无关紧要),确定后进入编辑窗口,在Library中将button_action拖入,设置坐标为(0,0),再从Library中将最初导入的图片pic1.jpg拖入,坐标(0,0),重复这个步骤,直到所有图块都拥有自己相应的MC.

顺便再做一个按钮，命名为button_back,用来在游戏完成后开始新的游戏.

第六步:游戏的完成工作

回到场景中,将TimeLine中已存在的层命名为\"位置判断层\"，点击TimeLine左下角的Insert Layer按钮 ,新建三个层,分别命名为\"图块层\"、\"AS层\"和\"按钮与提示层\".选择\"图块层\",将Library中的pic1～pic12这几个MC拖入该层。特别注意:这里是MC,而不是图片,我们可以按住Ctrl键同时选择不连续的多个Symbol。按顺序在Properties面板中分别填写Instance Name为p1～p12。

选择\"按钮与提示层\",将第二帧设为关键帧(如果你使用的是flash 5请选择第四帧,并顺便用F5将\"图块层\"添加两帧内容帧),并在Properties面板(flash 5中为Frame面板)中填写Frame Label为\"over\",选择文字工具(A),在中间位置写入胜利后的提示,如:\"Good You Win !!\",再拖入button_back到合适位置,并捆绑AS:

on(release){

prevFrame()//回到前一帧,开始新游戏

//Flash 5中应该是gotoAndPlay(1)

} 现在进入冲刺阶段,选择\"AS层\",选择第一帧,捆绑AS:

stop()//flash 5中请将这句去掉

for (i=1i <=12i++) {//游戏初始化

eval(\"p\"+i)._x = random(240)+80//随即设置图块的位置于场景上半部的一定区域内

eval(\"p\"+i)._y = random(160)+70

}

_root.onEnterFrame = function() {

//flash 5中请去掉这句和最后一个\"}\",将下面的AS捆绑到该层的第二帧,并在第三帧捆绑gotoAnfPlay(2)

b = 0

for (j=1j <=12j++) {

if (eval(\"p\"+j)._x == eval(\"b\"+j)._x and eval(\"p\"+j)._y == eval(\"b\"+j)._y) {

//判断图块是否在正确的位置上,如果是

b += 1//变量加一

}

}

if (b == 12) {//如果所有图块的位置都正确

gotoAndStop(\"over\")//显示胜利信息

}

}

至此,拼图游戏就制作完成了,赶快Ctrl+Enter测试一下吧！

动动脑筋,还可以为游戏添上时间限制,加大游戏的难度,或者在游戏过程中用一个按钮来隐藏/显示测试图片等

这样就ok了

---