Drag and drop jigsaw

This flash tutorial will teach you how to create a drag and drop puzzle. This effect is fairly easy and uses the same code as the draggable objects tutorial.

For this tutorial I have used a free stock image of a delicious cheeseburger which is at:www.sxc.hu

Drag and drop jigsaw puzzle

Step 1

Create a new flash document.
Import your image onto the stage by selecting file > import > import to stage and then select the image you wish to use and click ok.

Step 2

Right click on your image and choose break apart.
Using the transform tool (q) or lasso tool (l) select small sections of your image and move them away from the original image. This creates the individual sections for your puzzle. Your image should look something like below:

**You may wish to use Photoshop to create more interesting sections for the jigsaw.

Step 3

Using the selection tool (v) choose each section in turn and convert it into symbol by selecting F8.
Give your symbol an appropriate name, check the movie clip button and click ok.

Step 4

Again using the selection tool (v) give each of movie clip an instance name. eg burger_mc, burger2_mc, burger3_mc, burger4_mc, etc.

Step 5

On the timeline, add a new layer called actions then select the first frame of the action layer and press F9. This opens up the actions window.

Add the following code:

burger_mc.onPress = function () {

startDrag(this);

}

burger_mc.onRelease = function () {

stopDrag();

}

burger2_mc.onPress = function () {

startDrag(this);

}

burger2_mc.onRelease = function () {

stopDrag();

}

Repeat the same code for each of your movie clip sections, changing the instance name each time.

You should now have a nice drag and drop jigsaw.