How to make a Flash based jigsaw puzzle

I'm currently working on doing a jigsaw puzzle for my website.

I have searched everywhere in the web and couldn't find any. I wanted to do it with Flash and ActionScript.

I wanted like make the jigsaw puzzle like ESPN Cricket Jigsaw puzzle

Anybody can help me with this matter.

Thank You,
Best Regards,
Dasun

Solution

This is a really broad question so I'll break it down into 3 main tasks and give you a high-level overview:

1) Create the jigsaw puzzle images

2) Drag and drop pieces

3) Check if the pieces are dropped into the correct placement

Step 1 is mostly an image editing question and not programming, so there's not much to say here. Do note however that it is possible to automatically generate different puzzles using images submitted by the player or downloaded off the internet by doing things like applying vector masks and cloning the BitmapData into pre-created Movieclips.

Step 2 is mostly about adding mouse event listeners to the pieces and using startDrag() and stopDrag() in the listener functions. Something like:

piece.addEventListener(MouseEvent.MOUSE_DOWN, OnDrag);
piece.addEventListener(MouseEvent.MOUSE_UP, OffDrag);
function OnDrag(e:Event) {
  e.target.startDrag();
}
function OffDrag(e:Event) {
  e.target.stopDrag();
  //check placement
}

As noted in the comment, step 3 would happen when a piece is dropped. There are multiple ways to go about this, but my recommendation would be to store the solved positions in an Array when the puzzle is created, and then check all the pieces against the solution Array to see if the puzzle has been solved.

Incidentally, when checking placement it is generally best to check if the piece was dropped within a certain distance of the correct position, and if so snap it into place.