FLASH CS3实例拼图游戏.docx
- 文档编号:9473825
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:15
- 大小:2.75MB
FLASH CS3实例拼图游戏.docx
《FLASH CS3实例拼图游戏.docx》由会员分享,可在线阅读,更多相关《FLASH CS3实例拼图游戏.docx(15页珍藏版)》请在冰豆网上搜索。
FLASHCS3实例拼图游戏
FLASHCS3实例拼图游戏
拼图游戏是通过鼠标拖动裁切的小图片,将其放置到拼图框中,以组成一幅完整的图片。
如果拖动的小图片处于正确位置附近时,即会自动被吸附到正确位置。
当所有小图片都放置到拼图框中且位置正确,就会宣布游戏胜利。
另外,该拼图游戏中的图片是调用的外部图片,所以可以自行更改拼图图片,以增强游戏的可玩性。
如图12-60所示。
图12-60拼图游戏
准备游戏元素
利用【矩形工具】绘制黑色调的游戏机外壳,通过在【颜色】面板中设置渐变填充色,并调整填充效果形成绿色的显示屏、白色玻璃罩等十分逼真的游戏机外形。
(1)在空白的文档中,将BG.jpg背景图像导入到舞台中,并设置文档尺寸的大小与图像大小相同,如图12-61所示。
图12-61导入背景图像
(2)使用【基本矩形工具】
和【线条工具】
绘制游戏机的外形,并通过【颜料桶工具】
为其填充渐变色,如图12-62所示。
图12-62绘制圆角矩形
填充完渐变色后,可以通过【渐变变形工具】
调整渐变颜色。
(3)在外壳的中间部分绘制一个白色矩形,通过【选择工具】
调整其四个角。
然后,为其填充白色透明渐变,如图12-63所示。
图12-63绘制高光效果
(4)新建“roll”影片剪辑,在2个图层中分别绘制彩条和矩形,然后创建遮罩动画,如图12-64所示。
图12-64创建彩条滚动动画
(5)返回场景。
将“roll”影片剪辑拖入到舞台中,并在游戏机外壳下面绘制灰色渐变矩形,如图12-65所示。
图12-65绘制矩形
(6)使用【矩形工具】
绘制两个圆角矩形,分别设置颜色为#212F0B和#AAED45。
然后,将两个矩形重叠,形成游戏面的显示屏,如图12-66所示。
图12-66绘制显示屏
(7)利用【线条工具】在最底层矩形左边的上下两缺口之间绘制装饰用的图形。
然后,复制并旋转该图形,将其放置在矩形右边,如图12-67所示。
图12-67绘制装饰物
(8)在舞台中绘制一个白色的矩形,在【颜色】面板中设置其为渐变透明,该矩形为游戏机的玻璃罩,如图12-68所示。
图12-68绘制玻璃罩
(9)新建“button”按钮元件,创建一个开始按钮,并将该按钮元件转换为“playB”影片剪辑元件,如图12-69所示。
图12-69创建开始按钮
(10)返回场景。
将“playB”影片剪辑拖入到舞台中,然后在游戏机外壳上输入文字,并绘制阴影,如图12-70所示。
图12-70拖入按钮
(11)使用【矩形工具】
在舞台中绘制一个小些的圆角矩形,然后在该圆角矩形范围内再绘制两个直角矩形,如图12-71所示。
图12-71绘制矩形
(12)将“roll”影片剪辑拖到最小矩形的上面,并改变其大小。
然后,复制并缩小刚才绘制的屏幕,将其放置在最大的圆角矩形上面,如图12-72所示。
图12-72复制屏幕图形并调整大小
(13)复制玻璃罩图形和阴影图形,调整其大小并移动到适当的位置。
然后,在小圆角矩形上输入文字,如图12-73所示。
图12-73复制玻璃屏和阴影
(14)至此拼图游戏的各个元素制作完成,保存文档后按快捷键Ctrl+Enter预览动画,如图12-74所示。
图12-74预览效果
制作拼图动画
本例首先通过复制位图中的像素,将大图片裁切成25个小图片。
然后,通过startDrag()方法和stopDrag()方法来拖动小图片至拼图框中。
最后,根据小图片的坐标和剩余个数为判断是否达到胜利的条件。
(1)选择舞台中的开始按钮,在【属性】面板中设置其实例名称为“playB”,如图12-75所示。
图12-75设置实例名称
(2)新建“win”影片剪辑,在舞台中输入“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声明变量
(6)将光标置于第31行,创建loaderPic()函数,该函数用来加载外部图片,并侦听加载图片的进度,代码如图12-80所示。
图12-80loaderPic()函数
(7)将光标置于第41行,创建onComplete()函数,该函数将外部的图片绘制在picBD位图图像上并显示在舞台中。
然后,调用copyPixel()函数,代码如图12-81所示。
图12-81onComplete()函数
(8)将光标置于第71行,创建copyPixel()函数,该函数用来创建小图片,并根据坐标和大小将大图片的区域像素复制到小图片中,代码如下所示。
publicfunctioncopyPixel(){
massWidth=Math.round(picWidth/n)
//小图片的宽,round是让空隙出现在边缘
massHeight=Math.round(picHeight/n)
//小图片的高,同上
leaveNum=n*n
//剩下的块数
varmassBD:
BitmapData
varmassBitmap:
Bitmap
varmassSprite:
Sprite
//小图片置放的容器
for(vari=0;i for(varj=0;j massBD=newBitmapData(massWidth,massHeight) //小图片的BitmapData massBD.copyPixels(picBD,newRectangle(i*massWidth,j*massHeight,massWidth,massHeight),newPoint(0,0)) //根据坐标和大小复制picBD位图中的区域至小图片上 massBitmap=newBitmap(massBD) massSprite=newSprite() massSprite.x=stage.stageWidth-275+Math.random()*180-picx //massSprite实例的X坐标 massSprite.y=stage.stageHeight-440+Math.random()*180-picy //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实例的显示清单中 mySprite.addChild(massSprite) //将massSprite实例加入到mySprite容器的显示清单中 } } } (9)将光标置于第107行,创建massDown()函数,该函数响应鼠标按下事件,用来拖动小图片,并显示在舞台的最上层,如图12-82所示。 图12-82massDown()函数 (10)将光标置于第114行,创建massUp()函数,该函数响应鼠标弹起事件,判断小图片放置的位置是否正确,以及是否达到胜利的条件,代码如下所示。 functionmassUp(e: MouseEvent){ e.target.stopDrag() //停止拖动图片 varpici=Number(e.target.name.charAt (2)) varpicj=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,massDown) //删除侦听鼠标按下事件 e.target.x=pici*massWidth e.target.y=picj*massHeight //小图片粘合到正确位置 leaveNum-- //小图片剩余个数减1 if(leaveNum<=0){ //如果小图片的剩余个数小于或等于0时 varwins=newwin; wins=newwin(); wins.x=333; wins.y=250; stage.addChild(wins); //在舞台中显示wins对象 } } } (11)至此together.as文件制作完成。 然后,在code文件夹下创建名称为“loadMC”的AS文件,并创建package包,代码如图12-83所示。 图12-83package包 (12)将光标置于第10行,创建侦听鼠标单击playB按钮事件,以及所调用的onMcDown()函数,该函数用来删除拼图框中的图片,并重新加载外部图片,如图12-84所示。 图12-84loadMC文件 try…catch语句表示如果try代码块内的任何代码抛出了一个错误,控制将传递给catch代码块。 (13)至此loadMC文件制作完成。 返回到Flash源文件中,在【属性】面板的【文档类】文本框中输入“code.loadMC”,用来调用该AS文件,如图12-85所示。 图12-85调用loadMC文件 (14)保存文档后按快捷键Ctrl+Enter预览动画,如图12-86所示。 单击开始按钮即可开始拼图游戏。 图12-86预览效果
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FLASH CS3 实例 拼图游戏
![提示](https://static.bdocx.com/images/bang_tan.gif)