Thursday, 22 May 2008

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.

14 comments:

Matthew 12 June 2008 11:43  

Nice tutorial, if a little short. Suggestion: your next tutorial could be how to add snapping to a jigsaw, or how to 'fuse' two pieces together to show that they are in the right place.

neesa_jun 11 September 2008 19:52  

thank u soooo much for this entry..it helps me a lot!!keep sharing ya...

Anne-Lise 18 April 2009 11:31  

Very nice tut!
Can anyone please tell me how to hyperlink some of the jigsawpieces? Thanks!

iliketo 19 April 2009 03:41  

@Anne-Lise

If you add hyperlinks to the jigsawpieces than you might not be able to drag the pieces.

Anne-Lise 19 April 2009 08:06  

Ok thanks, it's not a big problem.

Something else: when I checked my jigsaw in FireFox, I noticed it was difficult to "pick up" the pieces and drag them...
(In IE7 everything works fine.)

iliketo 19 April 2009 08:38  

@Ann-Lise

I use firefox and it works completely fine.

Anonymous 6 December 2009 21:26  

hey nice tutorial. I am trying 2 develop 9 piece jigsaw puzzle. But I got stuck after inserting code you mentioned above. What is next step?
you said "Repeat the same code for each of your movie clip sections, changing the instance name each time". Do u mean that we need to add another layer or do u mean that add the same code (but different instances) in same window of actions. Please help me on this.

thanks
Sharon

iliketo 7 December 2009 02:51  

@Sharon

No, why would you need to add a new layer??

You use the same code, but change the instance names.

Anonymous 7 December 2009 07:23  

I am highly delighted by your prompt response. So should I add same code in same action window and then run the program?

thanks again

Sharon

Anonymous 7 December 2009 08:22  

Hey,
One more thing I want to share that I cut 9 pieces in photoshop and then all are import to stage. Is it correct or I need to import them one by one.

Thanks

Sharon

iliketo 7 December 2009 09:13  

@Sharon

Yes, add the code to the same actions window. Why would you add code to different actions windows???

And it doesn't matter whether you import the images one by one, or import them all at once, as long as all the images are on the stage.

Creative Share 8 December 2009 12:28  

thanks, your tutorial really helped me. now I'm completing the final project in my undergraduate taking in the field of visual communication design. Bandung. :)

Lockerbie 9 December 2009 03:14  

@Ilike2: I tried to mail you using the contactform, but it doesn't seem to work as it should.
Is there an other way to contact you? Thanks.

iliketo 9 December 2009 07:33  

@Lockerbie

What do you need to know?

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP