本節要點：交互圖標（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、要對某個對象設置移動、擦除、設置目標區域等操作，可以先打開這個對象，再設置，可以使這個對象顯示出來，否則，有時可能看不到要設置的對象。

源文件：點擊這里下載