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 i开发者_如何学编程t 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

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.

Checkout this tutorial: http://www.communitymx.com/content/article.cfm?page=1&cid=8A2E0

It basically shows you step by step how to create such a game.

Just google for "flash jigsaw tutorial" and you should get a bunch of them.

Cheers