How to Make Puzzle Games in Flash

It is simple to create a computerized jigsaw puzzle in Flash.

Flash is software web designers use to create animated videos and games. It is not difficult to use, although many people are intimidated by the thought of using it because it sounds complicated from its name. If you have Adobe Photoshop or other photo editing software, you can easily make a jigsaw puzzle out of your favorite digital photograph.

Things You'll Need

• Computer
• Adobe Photoshop or other photo editing software

Instructions

1. Load your photo editing software. Go to the file menu to open the photo.

2. Hold down the "Shift" key while selecting part of the image. Draw a puzzle piece shape with the selection tool.

3. Copy the selection.

4. Create a new file. Make the new file transparent by clicking the option for transparency.

5. Paste your selection into the new file. Save the file. Make sure that the file format is Compuserve GIF. Flash requires files to be in this format. To double check the format, look underneath your file name. There should be a drop down menu of different file formats. If this menu is not displaying ".gif", click the arrow to access the menu. Scroll down until you find the correct file format and click on it.

6. Repeat Steps 1 through 5 until you've created all your puzzle pieces.

7. Import the first puzzle piece into Flash by clicking "File" followed by "Import" and double-clicking the file you want to import. Repeat this step for all the puzzle pieces.

8. In Flash, convert each puzzle piece into a graphic symbol by going to the Insert menu and choosing "Convert to Graphic Symbol."

9. Convert each piece into a movieclip using the Insert menu.

10. Insert a new button by going to the File menu. Click "Insert" and choose "New Button." When prompted, give the button a name such as "piece 1 button" to help you remember what it is for.

11. Open your library. Drag one of the graphic symbols you have made onto the stage. A dot will appear on your button. Drag the dot to the far right.

12. Double click the movieclip symbol in the library. Drag the button on top of the movieclip.

13. Right click the button and hit "Actions."

14. Copy this code into the ActionScript window:

    on (press) {
    startDrag ("");
    }

    on (release) {
    stopDrag ();
    }

15. Test whether the piece drags. If it is working, repeat Steps 10 through 15 for each puzzle piece. If it is not working, repeat Step 13 and double check the code to make sure it has copied correctly.

References

• Vox Communications: Making Shapes Draggable
• Vox Communications: Make a Flash Puzzle