In order to make a puzzle where you can drag the pieces into place, you will first need to select a picture and slide it into pieces. You can use an image editor like Adobe photoshop, create some guides on top, then use the marquee tool to select each square copy it and paste it into a new file. Then save the graphics – I recommend you name them something like puz1.jpg, puz2.jpg etc. You may want to start with a really simple puzzle that contains only 4 or 9 pieces. The one below uses 12. Make sure you first set the image resolution of the large image using image size command to 72 dpi first before you begin copying pieces. Note this tutorial assumes you are already familiar with basic menus in Flash.

Create a Folder and save each puzzle piece into the folder. Also save a copy of the completed image into the folder as well.

Start Flash MX – to create the puzzle we are going to use two scenes. The first scene will include a picture of the completed puzzle and a button below it that will take you to Scene 2, which contains the scattered puzzle pieces and as a guide a faded picture of the completed puzzle. When the user drags a piece of the puzzle and lets go – the puzzle will snap into place. In other words – simply clicking on a puzzle piece will make it jump to its correct position.

Below is a screen shot of scene 1. I included a black bounding box and the finished picture – you may wish to use a larger image. The text instructs the user to click on the button below in order to randomize the puzzle pieces. The arrow in a circle button was taken from the button library in Flash. Before you add a script to the button select Insert>Scene to add a second scene to your movie.

Download