用flash制作拼图动画游戏
用flash 制作拼图动画游戏
目的：将一张图片制作成拼图动画
1、打开flash 文档
2、修改→文档→背景 →设置背景颜色
3、文件→将一张准备好的图片导入到舞台，如图1。
4、修改→分离
5、铅笔工具→将图片分割成若干个不规则的小图片（如图2）
6、修改→转化为元件（将分离出的图片分别转化为元件）→影片剪 辑→命名1→确定
7、重复上述步骤，将所有分割出的图形都转化为元件，并依次命名
（图1）
（图2） （ 图3）
8、选中其中一个元件→窗口→行为→点击+下的小三角→影片剪
辑→开始拖动影片剪辑→确定→点击释放时将释放时改为按下时（如图3）
9、点击+下的小三角→影片剪辑→停止拖动影片剪辑→确定
10、回到场景→窗口→动作→将下方的脚本全选并复制如图4。
（图4 ）
11、选中其他元件→将复制的脚本粘贴到其他元件的动作脚本上。
12、控制→测试影片→观看效果
13、文件→导出→导出影片→桌面→确定
14、到桌面找到保存的文件→观看效果→完毕。
基于AS3.0和FlashCS5的拼图游戏设计与开发
基于AS3.0和FlashCS5的拼图游戏设计与开发作者：陈赵云来源：《电脑知识与技术》2021年第32期摘要：Flash二维动画制作入门容易，但要真正精通很难，关键之一是缺少能够深入学习、实践的参照案例。
该文详细介绍了基于ActionScript3.0和FlashCS5的拼图游戏设计与实现全过程，能够为初学者进一步地深入学习提供引导和借鉴。
关键词：ActionScript3.0;FlashCS5;拼图游戏中图分类号：TP311 文献标识码：A文章编号：1009-3044（2021）32-0075-031 系统功能介绍本拼图游戏是基于FlashCS5和ActionScript3.0设计，有3*3和4*4两种模式供玩家选择，单击主界面中对应的模式即可进入开始体验。
1）3*3模式即为九宫阁，相对简单，使用代码将原图拆分成9格并随机排列在游戏界面的主体位置，原图被等比例缩放置于游戏界面的右上角，游戏界面中包含游戏说明和返回首页的按钮。
2）4*4模式即为十六宫阁，相对更复杂，使用代码将原图拆分成16格并随机排列在游戏界面的主体位置，原图被等比例缩放置于游戏界面的右上角，游戏界面中同样包含游戏说明和返回首页的按钮。
无论九宫阁还是十六宫阁，右下角都为空，并且原图的右下角区块被放置在游戏整体界面的最右下方，当完成拼图时，单击最右下角的区块可以检验游戏是否完成。
2 系统功能实现1）打开FlashCS5软件，执行文件-->新建，在弹出的对话框中设置舞臺大小为800*600，然后选择ActionScript3.0，在新建的文档中把准备好的图片素材导入库面板中备用。
2）新建一名为result的影片剪辑备用。
影片剪辑的图层1第一帧为空白关键帧，第2帧到第20帧设计一个“恭喜过关”由小到大的形变动画;在影片剪辑的图层2第一帧和第二十帧输入stop（）;3）双击时间轴的图层1改名为文本图像，单击该图层的第一个关键帧，用文本工具在舞台上输入“拼图游戏”并设置合适的大小和位置;在第二帧中借助标尺在右侧200像素的上方插入图片素材的原图，将result影片剪辑放在原图的下方并命名为mcResult，最后在影片剪辑下方添加游戏说明。
FLASH课程动画制作：拼图游戏+广告预载动画+水晶苹果相册+花瓣动画
“拼图游戏”案例 三 、技能要点
控制影片剪辑拖放函数的使用 （1）startDrag函数 格式：startdrag("实例名",true/false，左，上，右，下); （2）stopDrag函数 格式：stopDrag（）； 作用：停止当前的拖动操作。 （3）_droptarget属性 MovieClip._droptarget属性（只读）；以斜杠语法 记号表示返回指定影片剪辑放置到的影片剪辑实例 的绝对路径。
（5）单击“背景”层的第1帧，保证图片和网格都被 选中，按Ctrl+B组合键，将图形和网格分离。 4、制作小图片元件 先将切割出来的小块图片转换为图形元件，再转 换为按钮元件，最后再转换为影片剪辑元件。 图形元件分别起名为：p1~p9 按钮元件分别起名为：b1~b9 影片剪辑元件分别起名为：m1~m9
“拼图游戏”案例 二、操作步骤
３、分割图片 （1）执行【视图】>【网格】>【显示网格】命令，在舞台上 显示出网格，再执行【视图】>【贴紧】>【贴紧至网格】命令。 （２）用”矩形工具”沿网格绘制出一个包含9×12个小格的 矩形；选取【线条工具】，沿网格将矩形分成3×3的网格； 效果如图:
“拼图游戏”案例 二、操作步骤
实例为止的路径（每层之间用“.”连接）；
相对路径：是从当前影片剪辑开始的路径。
“广告预载动画”案例 三 、技能要点
例如： 在主场景舞台上有一个实例名称为wj的影片剪辑，在wj实 例中还包含一个子影片剪辑wj1,在wj1实例中还包含一个孙 影片剪辑实例wj2。 对wj2使用play();命令，应该使用如下动作脚本： _root.wj.wj1.wj2.play(); 对wj使用stop();命令，应该用如下脚本： _root.wj.stop(); “_parent”用来引用嵌套在当前影片剪辑中的影片剪辑，可以使 用_parent来创建一个相对路径。 例如：1、若一个影片剪辑“flower”嵌套在影片剪辑 “flowermove”中，那么在影片剪辑“flower”里添加 _parent.play();语句表明让影片剪辑“flowermove”开始播放。 2、如果当前在“flowermove”中要让其播放，也可以使 用this.flowermove.play();,表示对其本身进行播放。
《Flash实训教程——游戏制作入门》课件第3章
3.1 游戏说明 3.2 打乱拼图 3.3 拼图的移动和判断 3.4 拼图完成的判断和界面美化
3.1 游 戏 说 明
本游戏是一个简单的拼图游戏。所有拼图的图片均为规 则的正方形，而非常见的拼图那样有不规则的形状。所有图 片在舞台上平铺，通过拖动图块到它应该在的位置，实现将 图块放到正确的位置上；而将原来占据该位置的图块自动切 换到所拖动图块原来的位置上。当所有图块均放置到正确位 置时，表明拼图正确完成。
(10) 单击场景1，返回主场景。
图3-2
3．打碎图片并随机摆放 (1) 从〖库〗面板中拖出“block_mc”影片剪辑，将它放 到舞台白色区域外面的灰色区域中。 (2) 在〖属性〗控制面板中，将此“block_mc”影片剪辑 的〖实例名称〗设置为“tu”。 (3) 新建层，命名为“action”。 (4) 选择第1帧，按F9键，插入如下Action Script语句： weizhi=Array(1,2,3,4,5,6,7,8,9,10,11,12); PieceLeft=12; ax=0; ay=0; for (c=0; c<12; c++) {
(4) 按Ctrl+F8键，在〖创建新元件〗对话框中，选择 〖类型〗为“影片剪辑”，〖名称〗为“block_mc”。确定 后，自动进入“block_mc”的编辑界面。
(5) 调出〖库〗面板，将“big_mc”影片剪辑拖动到舞台 上，在〖属性〗控制面板中，设置〖x〗和〖y〗为“0”， 〖实例名称〗为“img”。
2．制作基本元件 (1) 保持刚才导入的图片被选中(图片外会有一个灰色的 框)，按F8键，在〖转换为元件〗对话框中，将〖类型〗设 置为“影片剪辑”，〖名称〗设置为“big_mc”。现在可以 将舞台上的图片实例删去，库中元件不受影响。 (2) 使用〖矩形工具〗，在〖属性〗控制面板中将〖笔 触颜色〗设置为“无色”，〖填充颜色〗设置为任意颜色， 在舞台上画一个矩形。 (3) 保持矩形选中的状态，按F8键将它转换为影片剪辑， 〖名称〗为“mask_mc”，并将舞台上的实例删去，保留库 中的元件。
王馨--Flash制作趣味拼图游戏教学案例
Flash 制作趣味拼图游戏一、教学目标1、了解flash软件制作简单拼图的方法，学会选用适当的有效的途径进行外部导入、模板编辑、脚本创作。
2、通过制作拼图模板，理解工具箱里多种工具的操作使用；在脚本编写的过程中，理解编写语言的思路和方法。
3、在制作拼图游戏的过程中，树立学生积极向上的态度，鼓励学生自主探索创作的意识。
二、教学重难点1、重点：能够根据步骤完整的制作一个简单的趣味拼图。
2、难点：Actionscript事件处理代码结构的理解和运用。
三、制作过程1、第一步：准备拼图素材兴趣拓展，准备一张自己喜欢的图片，内容自选，建议图片格式：jpeg 格式。
该文件的优点是体积小巧，并且兼容性好，更是web的标准文件格式。
图片大小：分辨率高，图片清晰为宜。
2、第二步：导入素材文件单击菜单栏中【文件】-【导入】-【导入到舞台】，将图片对象导入从外部导入到舞台，也可以用电脑绘制的图片作为拼图背景。
3、第三步：打散图片对象单击选中要打散的图片，选择执行【修改】-【分离】菜单命令。
所谓的打散就是将原来的图片变成单纯的填充形式的矢量图。
打散之后就可以用flash8进行对矢量图的编辑割分操作了。
4、第四步：制作拼图模板这一部分采取自主探索的方式，教学视频中提供了三种使用不同工具来分割图片的方式，同学可以结合实际自主选择：①选择【线条工具】来分割图片；②选择【套索工具】-【多边形】来圈出自己所需要的图案；③通过对齐、标尺工具来平均分割图片，制作出形状相等的拼图模板。
5、第五步：零片转为元件单击选中分割后的零片，执行【修改】-【转换为元件】菜单命令。
有两点需要特别注意：第一，元件类型必须为“影片剪辑”；第二，根据需求修改元件名称。
提示学生要把分割后的每一个拼图零片都转换为影片剪辑。
6、第六步：输入脚本动作首先，讲授程序设计思路，细化思路语句，转换成事件处理代码结构：n (press) { startDrag();}//当单击按下鼠标时，开始拖拽元件；on (release) {stopDrag();}//当松开鼠标时，停止拖动元件；7、第七步：测试生成游戏选中【控制】-【测试影片】菜单命令，可以通过界面查看程序是否能够顺利运行，如果测试没有问题，单击【菜单】-【导出】-【导出影片】选项，导出swf格式的flash文件。
用Flash制作七巧板
首
先
选
工
2、选择线条颜色
具
3、选择填充颜色
在场景中按住Shift键绘制正方形
第二步 绘制线条
选择直线工具
首
先
按住Shift键绘制正方形的两条对角线。
选
工
思考1：如何绘制其他线条？
具
思考2：如何删除多余的线条？
第三步 填充颜色
分
首
别
先 选 具
七 个 板
块
用Flash制作七巧板
主讲：车文娟
1600
七巧板
十是可 九我以 世国拼 纪古出 最代 流劳 行动种 的人以 谜民上 题的的 之发图 一明案 。。。
七巧板组图
七巧板组图
绘制七巧板
七巧板组成：
把一个正方形裁剪成4 个大小不一的等腰直角三角 形、一个正方形和一个平行 四边形。
第一步 绘制正方形
1、单击选择矩形绘图工具
构建造型
箭头工具
任务：移动和定 位板块
任务：旋转板块
任意变形工具
必要时可以借助“修改”菜单 “变形”命令“水平翻转”或
“垂直翻转”命令
保存并导出图像
方法：单击“文件”菜单“导出图像” 命令
建议：导出的图像文件格式为GIF或JPG。
作业
选择填充颜色
进 行
填
充
第四步 擦除所有线条
1、选择橡皮擦工具
2、单击选择橡皮擦模式 3、选用“擦除线条“状 态
第五步 移开每个板块
选择箭头工具
注意：移动过程中，不要将两个色块叠放。 转换成元件： 1、单击选中一个板块； 2、单击“插入”菜单“转换成元件”命令；
FLASH CS4 设计拼图游戏
FLASH CS4 设计拼图游戏在本例拼图游戏中，如果拖动的小图片处于正确位置的附近时，释放鼠标即会将图片吸附到该位置上。
当所有的小图片都放置在正确位置时（即拼合成为一张完整的图像），就会提示游戏胜利。
另外，本游戏采用的是外部图片，游戏者可以自定义所要进行拼图的图片，以增强游戏的可玩性。
Flash拼图游戏如图13-24所示。
图13-24 Flash拼图游戏设计过程：（1）新建588×442像素的空白文档，在舞台中制作开始游戏界面，如图13-25所示。
图13-25 制作开始游戏界面（2）新建“猴子”影片剪辑元件，在舞台中制作两只猴子，并将其转换为影片剪辑。
然后，制作猴子上下飘动的动画，如图13-26所示。
图13-26 制作猴子上下飘动动画（3）返回场景，将“猴子”影片剪辑元件拖至舞台中，并为其绘制阴影，如图16-27所示。
图13-27 拖入猴子影片剪辑（4）新建“开始游戏”按钮元件，在舞台中制作按钮弹起、经过和按下的形状，并分别将其转换为影片剪辑元件，如图13-28所示。
图13-28 制作开始游戏按钮（5）返回场景，将“开始游戏”按钮元件拖至舞台的右下角，并设置其【实例名称】为Play_Btn，如图13-29所示。
图13-30 拖入开始游戏按钮（6）新建“背景”影片剪辑元件，在舞台中绘制一个渐变矩形，并在其左上角输入puzzleGame文字。
然后，将该影片剪辑元件导出为bg自定义类，如图13-31所示。
图13-31 制作游戏背景（7）新建“计时器”影片剪辑，在舞台中制作计时器界面，并设置“时间进度条”影片剪辑和动态文本的【实例名称】分别为timebar和Time_txt。
然后，将该影片剪辑导出为time_mc类，如图13-32所示。
图13-32 制作计时器（8）新建“计分器”影片剪辑，在舞台中制作计分器背景，并在其上插入一个动态文本，设置其【实例名称】为Score_txt。
然后，将该影片剪辑元件导出为score_mc，如图13-33所示。
Flash拼图游戏制作课程设计报告
目录第1章需求分析 (1)1.1 引言 (1)1.2 课程设计题目 (1)1.3 课程设计目的 (1)1.4 程序运行环境及开发工具 (1)1.5 课程设计任务及要求 (1)第2章概要设计 (2)2.1 设计原理及方法 (2)第3章详细设计 (3)3.1 第一步： (3)3.2 第二步: (3)3.3 第三步 (4)3.4 第四步 (5)3.5 第五步 (5)3.6 第六步 (6)3.7 第七步 (7)3.8 第八步 (8)3.9 第九步 (8)3.10 第十步 (9)3.11 第十一步 (9)3.12 第十二步 (10)3.13 第十三步 (10)3.14 第十四步 (11)第4章系统调试与运行结果 (13)4.1 系统调试 (13)4.2 运行结果 (14)第5章总结与体会 (15)参考文献： (15)第1章需求分析1.1 引言FLASH作为一款目前最流行的网络动画制作软件，恐怕不知道的人少之又少。
其实FLASH强大的功能不光能让我们轻松制作动画，我们还可以利用它完成一些意想不到的工作。
比如说是拼图游戏，在这个领域应用非常广泛！而且可以制作各种丰富有趣的小游戏来，是非常的有趣的！1.2 课程设计题目拼图游戏设计1.3 课程设计目的本课程的设计的目的是通过实践使同学们经历多媒体应用系统开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的案例，理解并初步掌握常用多媒体软件的使用，利用多媒体计算机等设备进行音频与视频数据的获取和处理、图像处理与图像文件格式转换、超文本超媒体在交互式多媒体软件的应用；通过《多媒体课程设计》实验，使学生能够达到提高多媒体技术的实际开发应用能力，了解系统分析、系统设计、系统实施的主要环节和步骤以及软件文档的制作过程。
1.4 程序运行环境及开发工具硬件：PC机一台软件：Windows 7，PhotoshopCS4，Flash81.5 课程设计任务及要求设计“拼图游戏”，游戏是Flash制作中很重要的一部分，主要应用的是flash内嵌的action编程脚本。
用flash制作拼图动画游戏
用flash制作拼图动画游戏
用flash 制作拼图动画游戏
目的：将一张图片制作成拼图动画
1、打开flash 文档
2、修改→文档→背景→设置背景颜色
3、文件→将一张准备好的图片导入到舞台，如图1。
4、修改→分离
5、铅笔工具→将图片分割成若干个不规则的小图片（如图2）
6、修改→转化为元件（将分离出的图片分别转化为元件）→影片剪辑→命名1→确定
7、重复上述步骤，将所有分割出的图形都转化为元件，并依次命名
（图1）
（图2）（图3）
8、选中其中一个元件→窗口→行为→点击+下的小三角→影片剪
辑→开始拖动影片剪辑→确定→点击释放时将释放时改为按下时（如图3）
9、点击+下的小三角→影片剪辑→停止拖动影片剪辑→确定
10、回到场景→窗口→动作→将下方的脚本全选并复制如图4。
（图4 ）
11、选中其他元件→将复制的脚本粘贴到其他元件的动作脚本上。
12、控制→测试影片→观看效果
13、文件→导出→导出影片→桌面→确定
14、到桌面找到保存的文件→观看效果→完毕。
用Flash制作拼图游戏,制作flash拼图游戏
用Flash制作拼图游戏,制作flash拼图游戏首先，让我们来构思一下游戏的大致样子:画面上散落着N多块碎图片，透过这些碎图片我们可以隐约看到后面的一块方形的区域，然后在屏幕的右边赫然写着几个大字——简易拼图游戏。
OK，构思完毕，下面我们就开做吧。
一、制作图块1(拼图拼图，没图怎么做拼图呢,所以，我们得先找张图片过来，并将其导入到Flash中。
选择File>Import，导入要做为拼图素材的图片。
2(选中刚刚导入的图片，选择Modify>Transform>Scale，将图片的大小重新进行调整。
3(调整完图片大小后，按Ctrl+B将其打散。
4(选择直线工具，在图片上画个十字，将图片分为四块。
因为本例只是要介绍制作拼图的原理，所以这里就只做四个图块。
5(按Ctrl+Alt+Shift+R，显示标尺，然后从标尺上拉出线重合。
6(按Ctrl+Alt+;锁定引导线。
接着按住Ctrl键然后用鼠标在四条黑线边界的中间拉出一个拐点。
7(再次按住Ctrl键将突起的两端拉回，形成一个小三角(如图1)。
8(使用鼠标将小三角变形成小圆弧(如图2)。
图29(单击选中左上角的那块图片，按F8弹出元件属性对话框。
在Name中输入g1，然后将Behavior选为Graphic，单击OK后将所选图片转化为图形元件g1。
同样地，将剩下的另外三块图片使用同样的方法分别转化为图形元件g2、g3、g4。
然后将刚才用来分割图片的黑线删除。
10(选中g1、g2、g3、g4四个元件，按Ctrl+C拷贝一份。
11(按Ctrl+V将刚才复制的元件粘贴上来。
12(单击选中g1，按F8弹出元件属性对话框。
在Name中输入b将Behavior选为Button，单击OK后将所选元件g1转化为按钮元件b1。
同样地，将剩下的另外三块图片使用同样的方法分别转化为按钮元件b2、b3、b4。
13(单击选中b1，按F8弹出元件属性对话框。
在Name中输入m1，然后将Behavior选为Movie Clip，单击OK后将所选元件b1转化为影片剪辑m1。
Flash实验十三 拼图游戏
实验十三拼图游戏实验目的：◆鼠标的拖动与释放动作函数的使用◆不同元件之间进行转换的方法◆分割图形的技巧实验环境与设备：安装有Photoshop CS3的计算机。
实验原理：通过标尺锁定、元件转换、色调效果、“对齐”面板等来制作拼图效果，当用户用鼠标拖动某一图块时，该图块随之移动，直到释放鼠标后，图块停放在相应的位置，最终拼成一幅完整的图片，最终效果如图1所示。
图1 最终效果图实验考核：实例的源文件（.fla）以及.jpg格式的文件+实验报告。
实验步骤： 1:步骤1：打开Flash CS3应用程序。
步骤2：按“Ctrl+N”组合键新建一个Flash文档。
步骤3：按“Ctrl+J”组合键弹出“文档属性”对话框，其参数设置如图2所示，设置完成后单击“确定”按钮。
图2 “文档属性”对话框步骤4:选择“文件”→“导入”→“导入到库”命令，弹出“导入到库”对话框，如图3所示。
选择一幅汽车图片后单击“打开”按钮，将其导入到“库”面板中。
图3 “导入到库”对话框步骤5:按“Ctrl+L”组合键打开“库”面板，如图4所示，将刚才导入的图片拖动到舞台上。
步骤6:按“Ctrl+K”组合键打开“对齐”面板，如图5所示。
分别单击“对齐”面板中的“匹配宽和高”按钮、“水平中齐”按钮和“垂直中齐”按钮，使其和舞台尺寸相匹配且放置于舞台的中心位置，如图6所示。
图4 “库”面板 图5 “对齐”面板步骤7:选中导入的图片，按“Ctrl+B ”组合键将其打散。
步骤8:选择工具箱中的直线工具，然后在图片上绘制两条垂直的直线作为图片的分割线，如图7所示。
步骤9:“视图”→“标尺”命令，将标尺显示出来，然后移动鼠标指针到标尺上，分别拖出一条竖向和一条横向的辅助线，并与前面的直线重合。
步骤10:视图”→“辅助线”→“锁定辅助线”命令，将辅助线锁定。
步骤11:选择工具箱中的选择工具，按住“Ctrl ”键的同时将刚才绘制的直线向左拉出一个小三角，如图8所示。