1、FLASH CS3 实例 拼图游戏FLASH CS3 实例 拼图游戏拼图游戏是通过鼠标拖动裁切的小图片，将其放置到拼图框中，以组成一幅完整的图片。如果拖动的小图片处于正确位置附近时，即会自动被吸附到正确位置。当所有小图片都放置到拼图框中且位置正确，就会宣布游戏胜利。另外，该拼图游戏中的图片是调用的外部图片，所以可以自行更改拼图图片，以增强游戏的可玩性。如图12-60所示。图12-60 拼图游戏准备游戏元素利用【矩形工具】绘制黑色调的游戏机外壳，通过在【颜色】面板中设置渐变填充色，并调整填充效果形成绿色的显示屏、白色玻璃罩等十分逼真的游戏机外形。（1）在空白的文档中，将BG.jpg背景图像导入到
2、舞台中，并设置文档尺寸的大小与图像大小相同，如图12-61所示。图12-61 导入背景图像（2）使用【基本矩形工具】和【线条工具】绘制游戏机的外形，并通过【颜料桶工具】为其填充渐变色，如图12-62所示。图12-62 绘制圆角矩形填充完渐变色后，可以通过【渐变变形工具】调整渐变颜色。（3）在外壳的中间部分绘制一个白色矩形，通过【选择工具】调整其四个角。然后，为其填充白色透明渐变，如图12-63所示。图12-63 绘制高光效果（4）新建“roll”影片剪辑，在2个图层中分别绘制彩条和矩形，然后创建遮罩动画，如图12-64所示。图12-64 创建彩条滚动动画（5）返回场景。将“roll”影片剪辑拖
3、入到舞台中，并在游戏机外壳下面绘制灰色渐变矩形，如图12-65所示。图12-65 绘制矩形（6）使用【矩形工具】绘制两个圆角矩形，分别设置颜色为#212F0B和#AAED45。然后，将两个矩形重叠，形成游戏面的显示屏，如图12-66所示。图12-66 绘制显示屏（7）利用【线条工具】在最底层矩形左边的上下两缺口之间绘制装饰用的图形。然后，复制并旋转该图形，将其放置在矩形右边，如图12-67所示。图12-67 绘制装饰物（8）在舞台中绘制一个白色的矩形，在【颜色】面板中设置其为渐变透明，该矩形为游戏机的玻璃罩，如图12-68所示。图12-68 绘制玻璃罩（9）新建“button”按钮元件，创建一
4、个开始按钮，并将该按钮元件转换为“playB”影片剪辑元件，如图12-69所示。图12-69 创建开始按钮（10）返回场景。将“playB”影片剪辑拖入到舞台中，然后在游戏机外壳上输入文字，并绘制阴影，如图12-70所示。图12-70 拖入按钮（11）使用【矩形工具】在舞台中绘制一个小些的圆角矩形，然后在该圆角矩形范围内再绘制两个直角矩形，如图12-71所示。图12-71 绘制矩形（12）将“roll”影片剪辑拖到最小矩形的上面，并改变其大小。然后，复制并缩小刚才绘制的屏幕，将其放置在最大的圆角矩形上面，如图12-72所示。图12-72 复制屏幕图形并调整大小（13）复制玻璃罩图形和阴影图形，
5、调整其大小并移动到适当的位置。然后，在小圆角矩形上输入文字，如图12-73所示。图12-73 复制玻璃屏和阴影（14）至此拼图游戏的各个元素制作完成，保存文档后按快捷键CtrlEnter预览动画，如图12-74所示。图12-74 预览效果制作拼图动画本例首先通过复制位图中的像素，将大图片裁切成25个小图片。然后，通过startDrag()方法和stopDrag()方法来拖动小图片至拼图框中。最后，根据小图片的坐标和剩余个数为判断是否达到胜利的条件。（1）选择舞台中的开始按钮，在【属性】面板中设置其实例名称为“playB”，如图12-75所示。图12-75 设置实例名称（2）新建“win”影片剪
6、辑，在舞台中输入“WIN”文字，创建文字由小变大的补间动画，并在最后一帧输入“stop();”代码。然后，设置该元件的类名称为“win”，如图12-76所示。图12-76 创建补间动画（3）新建“together”AS文件，将其保存在与Flash源文件同一目录的code文件夹中，如图12-77所示。图12-77 新建AS文件（4）在AS文件中创建package包、together类以及together()函数，并导入所有要用到的类，代码如图12-78所示。图12-78 创建package包（5）将光标置于together类中，声明本例中用到的所有变量，代码如图12-79所示。图12-79 声明
7、变量（6）将光标置于第31行，创建loaderPic()函数，该函数用来加载外部图片，并侦听加载图片的进度，代码如图12-80所示。图12-80 loaderPic()函数（7）将光标置于第41行，创建onComplete()函数，该函数将外部的图片绘制在picBD位图图像上并显示在舞台中。然后，调用copyPixel()函数，代码如图12-81所示。图12-81 onComplete()函数（8）将光标置于第71行，创建copyPixel()函数，该函数用来创建小图片，并根据坐标和大小将大图片的区域像素复制到小图片中，代码如下所示。public function copyPixel() ma
8、ssWidth=Math.round(picWidth/n) /小图片的宽,round是让空隙出现在边缘 massHeight=Math.round(picHeight/n) /小图片的高,同上 leaveNum=n*n /剩下的块数 var massBD:BitmapData var massBitmap:Bitmap var massSprite:Sprite /小图片置放的容器 for(var i=0;in;i+) for(var j=0;jn;j+) massBD=new BitmapData(massWidth,massHeight)/小图片的BitmapData massBD.co
9、pyPixels(picBD,new Rectangle(i*massWidth,j*massHeight,massWidth,massHeight),new Point(0,0)/根据坐标和大小复制picBD位图中的区域至小图片上 massBitmap=new Bitmap(massBD) massSprite=new Sprite() massSprite.x=stage.stageWidth-275+Math.random()*180-picx/massSprite实例的X坐标 massSprite.y=stage.stageHeight-440+Math.random()*180-pi
10、cy/massSprite实例的Y坐标 massSprite.addEventListener(MouseEvent.MOUSE_DOWN,massDown)/侦听对massSprite实例按下鼠标事件 调用massDown()函数 massSprite.addEventListener(MouseEvent.MOUSE_UP,massUp)/侦听对massSprite实例弹起鼠标事件 调用massUp()函数 massSprite.name=MS+i+j/massSprite实例名称 massSprite.addChild(massBitmap)/将小图片加入到massSprite实例的显示
11、清单中 mySprite.addChild(massSprite)/将massSprite实例加入到mySprite容器的显示清单中 （9）将光标置于第107行，创建massDown()函数，该函数响应鼠标按下事件，用来拖动小图片，并显示在舞台的最上层，如图12-82所示。图12-82 massDown()函数（10）将光标置于第114行，创建massUp()函数，该函数响应鼠标弹起事件，判断小图片放置的位置是否正确，以及是否达到胜利的条件，代码如下所示。function massUp(e:MouseEvent) e.target.stopDrag() /停止拖动图片 var pici=Num
12、ber(e.target.name.charAt(2) var picj=Number(e.target.name.charAt(3) if(Math.abs(e.target.x-pici*massWidth)=20&Math.abs(e.target.y-picj*massHeight)=20) /如果放置小图片的坐标与正确位置的坐标小于等于20 e.target.removeEventListener(MouseEvent.MOUSE_UP,massUp) /删除侦听鼠标弹起事件 e.target.removeEventListener(MouseEvent.MOUSE_DOWN,mas
13、sDown) /删除侦听鼠标按下事件 e.target.x=pici*massWidth e.target.y=picj*massHeight /小图片粘合到正确位置 leaveNum- /小图片剩余个数减1 if(leaveNum=0) /如果小图片的剩余个数小于或等于0时 var wins=new win; wins=new win(); wins.x=333; wins.y=250; stage.addChild(wins); /在舞台中显示wins对象 （11）至此together.as文件制作完成。然后，在code文件夹下创建名称为“loadMC”的AS文件，并创建package包，
14、代码如图12-83所示。图12-83 package包（12）将光标置于第10行，创建侦听鼠标单击playB按钮事件，以及所调用的onMcDown()函数，该函数用来删除拼图框中的图片，并重新加载外部图片，如图12-84所示。图12-84 loadMC文件trycatch语句表示如果try代码块内的任何代码抛出了一个错误，控制将传递给catch代码块。（13）至此loadMC文件制作完成。返回到Flash源文件中，在【属性】面板的【文档类】文本框中输入“code.loadMC”，用来调用该AS文件，如图12-85所示。图12-85 调用loadMC文件（14）保存文档后按快捷键CtrlEnter预览动画，如图12-86所示。单击开始按钮即可开始拼图游戏。图12-86 预览效果
