首页 >> 动画知识 >> flash游戏

Animation knowledge

flash游戏

Flash AS游戏:利用flash制作拼图游戏

大字小字2014年9月28日

  如何利用Flash常用的AS制作一个简单的拼图游戏,玩起来简单又容易Flash游戏,所说的简单可不是将图片简单的拼凑到一起的那种简单拼图就可以。简单的Flash制作拼图游戏的基础教程:把做好的成品,用鼠标将上面的图像碎片拖到下面的方框内的合适位置,为方便找位,游戏给出了有一定透明度的原图作为参考。可以发现在游戏中还设计了一个“吸附”功能,能够将拼图片轻松地整齐排列,同时游戏还会自动判断拼图是否全部正确完成。

  制作步骤:

  第一步:图片的准备工作

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

  第二步:建立Flash文件

  打开Flash,通过菜单Modify Document...或Ctrl+J打开Document Properties面板,不同的版本一些快捷键可能与Flash 5的有所不同,在Flash 5中的快捷键是Ctrl+M),将画面大小改为400*600px,其他可以保持默认值。

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

  在场景中通过菜单File Import或Ctrl+R导入12块已经处理好的小图片,然后按照原图顺序摆放在场景的下半部,选中左上角第一块,选择菜单Insert Convert to Symbol或按F8键,在弹出的Convert to symbol面板中选择Movie Clip(以后简称MC),控制点选择在图片中心,不过在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=1; i <=12; i++) {//判断图块所在位置

  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=1; i <=12; i++) {//游戏初始化

  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=1; j <=12; j++) {

  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测试一下!

分享打印返回


动画知识Animation knowledge

广州形动动画设计有限公司

电话:020-87612322

传真:020-87615976

手机:13570023373

Q Q: 853033818

邮箱:853033818@qq.com

地址:广州市越秀区达道路16号

最新动态

形动动画承接以下业务:flash制作、动漫制作、二维动画制作、2d动画设计,如有这方面的需要,请与我们联系:020-87612322!

Copyright © 2007-2014 广州形动动画设计有限公司  网站备案/许可证号:粤ICP备17050071号-1

业务咨询:020-87612322  招聘热线:020-87615976  地址:中国·广东省广州市越秀区东山街道寺右新马路108号丰伟大厦A座7楼