Drag and drop jigsaw

In this tutorial you will learn how to create a drag and drop puzzle in Actionscript 2.0. This effect uses the same code as the draggable objects tutorial. I have used a free stock image of a delicious cheeseburger which can be downloaded from www.sxc.hu

Update: Actionscript 3 version now available here.

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.

An alternative method of writing the code above is to place all the instances of the movie clips into an array and then use a ‘For loop’ to control the drag and drop of each movie clip instance. This avoids you having to write out repeated lines of code. If you have over twenty puzzle pieces then I recommend you use the below method as it can save you a lot of time.

//Array to hold all the burger movie clips
var burgerArr:Array = [burger_mc, burger2_mc, burger3_mc, 
burger4_mc, burger5_mc, burger6_mc, burger7_mc];

//Function to control the drag and drop of each burger
for (i = 0; i< burgerArr.length; i++) {
 burgerArr[i].onPress = function() {
  startDrag(this);
 }
 burgerArr[i].onRelease = function() {
  stopDrag();
 }
}

Step 6

Test your movie Ctrl + Enter.



You should now have a nice drag and drop jigsaw.