Author: Michael de la Pena
Date: October 13, 2006
Level: Beginner

This tutorial will show you how to add your own photos to the Jigsaw Puzzle applet. To add a new picture to the puzzle, you only need to do two things:

• XML
• Graphics editing
• Text editing

• Web browser with Flash plugin version 8 or higher
• Graphics editor
  Some options:
  • Adobe Photoshop. This is what the pros mostly use, but it expensive. You can download a free 30-day trial version. It is available for Macintosh and Windows.
  • The Gimp is a graphics editor that is about as powerful as Photoshop, but it can be downloaded for free. It is available for Macintosh, Windows and Unix.

  All the examples in this tutorial are taken from Photoshop, but similar features are available from The Gimp.

• Text editor — You do not need a complicated text editor to do this tutorial. Any editor that allows you to save a file as UTF8 will work. Notepad, which comes standard on every Windows computer, is a good text editor to use for this.

• index.html — the html file that loads Flash loader
• myglife_jigsaw_loader.swf — the starting Flash file
• myglife_jigsaw.swf — the main Flash file
• labels.xml — lists the words used in the activity's controls
• bitmaps.xml — lists the image files and thumbnails and their locations
• bitmaps — folder containing pictures that appear in the puzzle

This software is licensed to the public under the CC-GNU GPL.

Edit your photo so it will fit in the Jigsaw Puzzle, using Photoshop or another graphics program.

You will need to adjust several aspects of the photograph, so it will work in the Jigsaw:

• Size. A standard photo will be too big to fit into the Jigsaw Puzzle applet
• Shape. Most photos are rectangular. Jigsaw images need to be square.
• Composition. You’ll want to crop the image so it looks good in its new size and shape.

1. Open the image in Photoshop. First, select Open... from the File menu. This will cause the File Open dialog box to appear. Find your file on your hard drive, select it, and then click the open button.
   
   Figure 2: File Open dialog box
2. Select Image Size from the Image menu.
   
   Figure 3: Image Size dialog box

   Don't change the size yet, just look to see how big the picture is. It needs to be 200 pixels wide, by 200 pixels high to work properly in the Jigsaw puzzle. The example image is much bigger than that, and your photo probably will be too. You should crop the image before changing the size, so just click Cancel for now.

3. Select the crop tool from the Tools palette.
   
   Figure 4:
   Tools
   Palette
4. Hold down the Shift key with one hand and click the mouse in the image window with the other. This will allow you to drag out a square cropping area. The image must be a square to work in the Jigsaw puzzle. By "grabbing" the square "handles" at the corners, you can adjust the composition of the final picture for the jigsaw puzzle. When you are satisfied with the location of the crop outline, double-click inside the outline to crop the image.
   
   Figure 5: Crop Image
5. Select Image Size from the Image menu a second time. Make sure that Constrain Styles and Resample Image are checked. Change the Width and Height numbers to 200 and click OK.
   
   Figure 6: Image Size dialog box
6. Save the final 200 x 200 image, by selecting Save for Web... from the File menu. Save for Web... gives you many file format options. Jpg is the best format for this application, because it saves photographic images with efficient compression and good quality.
7. Next you will choose the Compression Quality of the saved image. Click the 4-Up tab at the top of the Save For Web dialog box. This shows a preview of the image at four different compressions. You want to choose a setting that balances good picture quality and small file size. The upper left image has 100 percent Quality jpg compression. This looks good in the preview, but it uses a lot of space (117 k in the example). The lower right image is at 14 percent Quality. This will make the file size tiny (2.46k) but the image looks a little strange. Some rectangular shapes called "compression artifacts" have appeared. This indicates that the quality is too low.
8. Select 60 percent quality (shown in the upper right), for good quality and small size (11.04k). Click the Save button and save the picture in the "bitmaps" folder with the name "kitten_final.jpg". Later you can use your own names, but for now use this name.
   
   Figure 7: Save For Web dialog box

Add the pathname for your new image to the Jigsaw "bitmaps.xml" file using a simple text editor like Notepad.

1. Open "bitmaps.xml" with any text editor such as Microsoft Notepad.
2. Add the following line to the end of the list of bitmaps:
   
   

   <bitmap ID="puzzleimage6">bitmap/kitten_final.jpg</bitmap>

   
   Figure 8: XML file
3. Save the file by selecting Save As from the File menu. Make sure that Encoding is set to UTF-8. This ensures compatibility with many languages and text editors.
   
   Figure 9: Save As dialog box

1. Double-click the "index.html" file to open a web browser window.
2. 2 Use the Change picture arrows to locate the thumbnail that shows the kitten. Click the thumbnail to set the puzzle pieces to show the kitten image. You should see some thing like the image in Figure 10.
   
   Figure 10: Kitten puzzle image

1. Add more photos to the Jigsaw puzzle. It will accept as many pictures as you are willing to prepare and add to the XML. Be sure to write the correct pathname to the image, and make sure that each picture has a unique ID name that starts with the word "puzzleimage" and ends with a number, starting with zero, and increasing sequentially. The file names can be whatever you like, as long as the files are pngs, jpgs or gifs, and you add the correct file name to the "bitmaps.xml" file.
2. Change the text on the buttons by updating the copy in the file called "labels.xml." You can change the English text, or translate the names of the buttons into another language.