AS 3.0 Jigsaw Puzzle

To do the above Jigsaw Puzzle use the mouse to click on a piece, and keep the mouse button held down. Move the piece to a new location, and then release the mouse button to drop it into position.

If all goes well, then the finished puzzle should look like this:


Luna Park at Melbourne Australia by Passy's World of ICT

Previously at Passy World we made a Jigsaw Puzzle in Flash Actionscript 2.0.

This can be found at the following webpage on our blog:

http://passyworldofict.blogspot.com/2009/05/making-jigsaw-puzzle-in-flash.html

There is a PDF document on the AS 2.0 page, that may be useful to refer to.

However, we do have a detailed YouTube "How To" video below, that can be viewed to make the AS 3.0 version of the Jigsaw Puzzle.

First we need a picture that is resized to around 550 pixels wide, using Photoshop or Fireworks. We can save the picture from this blog post, or obtain your an image of our own choice from the internet, save it, and resize it to 550 wide.

The image is then imported into our Flash project. We break the image into "pieces". Each of these pieces is converted into a Flash movie clip image, and also given a unique instance name, such as "Piece1_mc", "Piece2_mc", etc.

It is important that our Flash stage is bigger than the image, (eg. Stage size set to 800x600 pixels), so that we have room to move the puzzle pieces around.

We then write some Actionscript 3.0 code that allows us to move the pieces around using the mouse.

The following code is for an 7 piece puzzle, but can be easily adjusted to any number of pieces.



If you would like to see this same code in Flash Actionscript format, then click the following link:

http://www.passyworld.com/passyImagesSix/ASCode730x616GIF.gif

If you are very new to Flash Actionscript 3.0 programming, then it may be useful to do our basic tutorial on "Drag and Drop" which can be accessed by clicking the link below:

http://passyworldofict.blogspot.com/2011/04/as30-drag-and-drop.html

The following YouTube Video provides a full step by step instructions to make the Jigsaw Puzzle Project.

Use the bottom right hand corner player controls to watch the video full screen in HD format to obtain maximum clarity.



Hopefully all this hasn't been too puzzling for anyone.

Enjoy,
Big Passy Wasabi