第七节　拼 图 游 戏

By 李 升

　　本节重点介绍“目标区域（Target Area）”交互响应类型。

本节要点：交互图标（Interation）　目标区域（Target Area）交互类型

本例简介：本例和魔板有点象，是通过鼠标的拖拽，将九个小图片组成大图片，如果拖拽的目的地正确，则自动对齐排好，否则回到原位置。将一个大图分为若干块小图，可以用Firework的切片功能简单做到。

完成后流程图：

运行界面：

制作步骤：

1、在流程线上拖入一个显示图标，命名为“Title”，在其中合适位置，输入“拼图游戏”标题和玩法。如上图文字。
2、使用“File”>>“Import...”命令，或工具栏上的导入图标，一次导入多个图像文件。将大图片和分割后的小图片共10个图像文件一次导入。

3、再拖入一个显示图标，命名为“line”，在其中画出九个方块，以方便上面的九个小图定位。然后调各小图位置，如图所示。

4、向流程线上拖入一个交互图标，命名为“Target Area”。向其右边拖入一个群组图标，命名为“r1_c1”，其作用是设计一块小图的拖动。交互响应类型选择“目标区域（Target Area）”。

5、双击“r1_c1”图标上面的图标，对其响应进行详细设置。先点按某一个小图片如“china_r1_c1.jpg”，然后将其拖到目的位置。“On Drop”选项选择“对齐目的位置的中心（Snap to Center）”，意思为拖动图片“china_r1_c1.jpg”在目的位置松开鼠标后，图片自动对齐目的区域的中心位置。
　　同样方法，设置其它八块小图片。

6、再拖一个群组图标到“Target Area”图标的右边，命名为“error”，其作用是：如果小图片没有被拖到目的位置，那么还回到原来位置。对其响应设置如下图。目的区域设置为整个屏幕，不限定拖动的目标（Accept Any Object）。

补充说明：1、小图片的制作，也可以使用Photoshop等图象处理软件。小图片的起始位置可以自由安排。
2、如果你觉得本例中的九个小图像使用了九个小图标看起来有点乱，也可以用一个群组图标。

技巧提示：
1、若对很多图标进行相同或相似的设置，可采用先设置好一个，然后复制，再调整的方法。这样可以更快地设置好多个图标。
2、要对某个对象设置移动、擦除、设置目标区域等操作，可以先打开这个对象，再设置，可以使这个对象显示出来，否则，有时可能看不到要设置的对象。

源文件：点击这里下载

作者：sintian　　　　转载敬请注明出处：http://sintian.126.com