本節(jié)要點(diǎn)：交互圖標(biāo)（interation）　目標(biāo)區(qū)域（target area）交互類型

本例簡(jiǎn)介：本例和魔板有點(diǎn)象，是通過鼠標(biāo)的拖拽，將九個(gè)小圖片組成大圖片，如果拖拽的目的地正確，則自動(dòng)對(duì)齊排好，否則回到原位置。將一個(gè)大圖分為若干塊小圖，可以用firework的切片功能簡(jiǎn)單做到。

完成后流程圖：

運(yùn)行界面：

制作步驟：

1、在流程線上拖入一個(gè)顯示圖標(biāo)，命名為“title”，在其中合適位置，輸入“拼圖游戲”標(biāo)題和玩法。如上圖文字。
2、使用“file”>>“import...”命令，或工具欄上的導(dǎo)入圖標(biāo)，一次導(dǎo)入多個(gè)圖像文件。將大圖片和分割后的小圖片共10個(gè)圖像文件一次導(dǎo)入。

3、再拖入一個(gè)顯示圖標(biāo)，命名為“l(fā)ine”，在其中畫出九個(gè)方塊，以方便上面的九個(gè)小圖定位。然后調(diào)各小圖位置，如圖所示。

4、向流程線上拖入一個(gè)交互圖標(biāo)，命名為“target area”。向其右邊拖入一個(gè)群組圖標(biāo)，命名為“r1_c1”，其作用是設(shè)計(jì)一塊小圖的拖動(dòng)。交互響應(yīng)類型選擇“目標(biāo)區(qū)域（target area）”。

5、雙擊“r1_c1”圖標(biāo)上面的圖標(biāo)，對(duì)其響應(yīng)進(jìn)行詳細(xì)設(shè)置。先點(diǎn)按某一個(gè)小圖片如“china_r1_c1.jpg”，然后將其拖到目的位置。“on drop”選項(xiàng)選擇“對(duì)齊目的位置的中心（snap to center）”，意思為拖動(dòng)圖片“china_r1_c1.jpg”在目的位置松開鼠標(biāo)后，圖片自動(dòng)對(duì)齊目的區(qū)域的中心位置。
　　同樣方法，設(shè)置其它八塊小圖片。

6、再拖一個(gè)群組圖標(biāo)到“target area”圖標(biāo)的右邊，命名為“error”，其作用是：如果小圖片沒有被拖到目的位置，那么還回到原來位置。對(duì)其響應(yīng)設(shè)置如下圖。目的區(qū)域設(shè)置為整個(gè)屏幕，不限定拖動(dòng)的目標(biāo)（accept any object）。

補(bǔ)充說明：1、小圖片的制作，也可以使用photoshop等圖象處理軟件。小圖片的起始位置可以自由安排。
2、如果你覺得本例中的九個(gè)小圖像使用了九個(gè)小圖標(biāo)看起來有點(diǎn)亂，也可以用一個(gè)群組圖標(biāo)。

技巧提示：
1、若對(duì)很多圖標(biāo)進(jìn)行相同或相似的設(shè)置，可采用先設(shè)置好一個(gè)，然后復(fù)制，再調(diào)整的方法。這樣可以更快地設(shè)置好多個(gè)圖標(biāo)。
2、要對(duì)某個(gè)對(duì)象設(shè)置移動(dòng)、擦除、設(shè)置目標(biāo)區(qū)域等操作，可以先打開這個(gè)對(duì)象，再設(shè)置，可以使這個(gè)對(duì)象顯示出來，否則，有時(shí)可能看不到要設(shè)置的對(duì)象。

源文件：點(diǎn)擊這里下載