FreeHand

You have children who want to play with your programs. Or, you're a jigsaw puzzle aficionado and want to share your own work. With Fireworks, you can create a puzzle with as little as two shapes, using them to "cut" the rest of the pieces.

Once the pieces are made you can get portions of an image into each piece - it really is simple! Once the puzzle is done you can bring it into Dreamweaver, where you'll add the ability for each piece to use draggable layers.

Puzzles are great fun and can be incorporated into many different kinds of sites. But keep in mind that the techniques you learn here apply to more than puzzles. For instance, the drag layer behavior can make any layer movable and can be used to drop items into a shopping cart. The techniques for making special shapes and getting images inside them works for any image you may want to place in a special shape. Image I is what the puzzle will look like when seen in a browser. Look at Image II for steps 1-4.

1. Start a new canvas and draw a 170x185 rectangle and a 65x45 ellipse.
2. ALT-drag out another copy of the ellipse. Position them on the rectangle and make each one a different color from the rectangle to make them easier to edit.
3. Use the Subselection tool to select the ellipses. Alter their shape slightly and position them with the Pointer tool.
4. Shift + Select all three objects and choose Modify > Combine Paths > Union.
5. Image II is the corner shape of the jigsaw puzzle. Now you need to make another puzzle shape with four "tabs" (see Image III). Use the same method as in the earlier steps to create a shape similar to this one.

Top Row
This puzzle will have nine pieces in total. By the time you're finished you'll be able to make a puzzle with as many pieces as you want.

1. Position the corner piece in the top left corner of your canvas.
2. ALT-drag out a copy of the shape and then choose Modify > Transform > Flip Horizontal, placing this copy at the right side of your canvas.
3. To determine how wide the canvas needs to be, place the top corners of the shape with four tabs between the two corner pieces (see Image IV). Adjust the right side if necessary.
4. Choose Modify > Canvas > Fit Canvas.
5. Make sure both corner pieces are aligned to the top of the canvas at y:0.
6. Move the center shape to the side for now and change its fill color (so you can better see what you're going to do next).
7. Draw a red rectangle to fill the space between the corner puzzle pieces (see Image V). Try lowering the opacity to see through to the tabs on the corner shapes while you're drawing. Make the rectangle 185 pixels high (the same as the base shape).
8. Put the opacity back up to 100% if you lowered it. Select the left corner shape, press SHIFT, and select the center shape.
9. Copy and paste the left-corner shape and hide the bottom copy in the Layers panel.
10. Select the right-corner shape, copy and paste it, and turn off the visibility of the bottom copy in the Layers panel.

    You're making all these copies because once you use the corners as "cookie cutters" the original shape will be gone.

11. Move the red rectangle down in the Layers panel so that it sits below the gray shapes (see Image VI).
12. Select the left corner shape then SHIFT+ to select the red shape. Choose Modify > Combine Paths > Punch. As you can see, you made the shape in the side of the center puzzle piece that fits the corner shape (see Image VII).
13. Select the right-corner shape, SHIFT+select the red shape, and choose Modify > Combine Paths > Punch again.
14. Turn your corner pieces' visibility back on in the Layers panel. The top row of the puzzle is now done (see Image VIII).

Center Row

1. Draw a rectangle that's 170x185 and make one more copy. Place one rectangle on each side of the canvas.
2. Copy each of these new rectangles and hide these copies in the Layers panel.
3. Move the center shape so that it sits above the side pieces (you may need to adjust the center piece's size). Change the height and/or width so that it fills the center area.
4. Select the center piece and copy and paste it one time. Hide the view of the duplicate copy. Ensure that the center piece is at the top of the Layers panel (see Image IX).
5. SHIFT-select the top center piece, and each of the side pieces of the top row (see Image X). With all three pieces selected, choose Modify > Combine Paths > Punch.
6. Make a copy of both top left and right corner pieces and hide them. You're going to use the corners to punch out the tab in the top of the side pieces of the second row.
7. Turn the visibility of the four-tabbed center piece back on. Move the copies of the corner pieces and the center piece up into the Layers panel so that they're above the blue side pieces (see Image XI). (Now you can see why using different colors while building your puzzle is a good idea.)
8. SHIFT+select the left corner and the left side and choose Modify > Combine Paths > Punch. Repeat this for the right-hand side of the puzzle. Turn the visibility back on for the corner shapes on the top row.

Bottom Row

1. Make a copy of each top corner shape and drag them down to the bottom of your canvas. Use Modify > Transform > Flip Vertical for both shapes and position them as shown in Image XII. If your canvas isn't large enough to fit all the shapes, choose Modify > Canvas > Canvas Size and make it larger.
2. Make two copies of each bottom corner shape and hide two of them. You should have three bottom corner shapes with only one visible.
3. Drag the bottom corner shapes above the blue sides so that you can see their gray tabs above the blue shapes (see Image XIII).
4. SHIFT+select one of the gray bottom corners and a left blue side shape and punch it as usual. Repeat for the other side of the puzzle.
5. Turn the visibility back on for each bottom corner piece.
6. Draw a new rectangle to fit into the remaining space. Make it bright yellow (see Image XIV).
7. Copy and paste the four-tabbed center piece and hide the copy. Move it up on the Layers panel so that it sits above the yellow shape.
8. SHIFT+select the center gray shape and the bottom yellow shape and Modify > Combine Paths > Punch.
9. Select the bottom corner shapes and drag them up the Layers panel so their tabs are visible above the yellow shape.
10. SHIFT+select a bottom corner and the yellow shape and punch (see Image XV). Repeat for the other side.
11. Choose Modify > Canvas > Fit Canvas. You should now have a total of nine shapes in the puzzle. If you still have extras in the Layers panel, delete them now.
12. Change the object names in the Layers panel. Working left to right and top down, name the top left corner shape p1, the top center shape p2, and so on.
13. Save the file as puzzle_shapes.png and keep it open.

As you can see, it isn't difficult to make the puzzle pieces, it just takes a while. Remember to always make a copy of the piece that's acting as the "cookie cutter". Selecting a piece makes it easy to identify in the Layers panel so you can move the correct one above the shape.

Adding a Picture
Let's add images to the puzzle pieces to prepare them for use in Dreamweaver. You'll add a drag layer behavior in Dreamweaver, which will allow the pieces to move.

Prepare the Structure
Import an image the size of your puzzle. Ideally you'd know the image size prior to making your puzzle pieces.

1. Back in your puzzle_shapes.png document, add a new layer called Image and drag it to the bottom of the Layers panel. Rename Layer 1 as Pieces.
2. Select the Image layer and import (CTRL+R) a photo (in my case parrot.png). Click at the top left of the document to place the image.

   The current puzzle shape colors don't matter so don't bother changing them. Each piece will be used as a mask. You now need to place each piece on its own frame.

3. Select the Pieces layer and choose Select > Select All. Open the Frames panel and from the Options pop-up menu, select Distribute to Frames. Click on a frame; you'll see that it contains one puzzle piece (see Image XVI). Each frame contains a piece except for Frame 1, which is the image (see Image XVII).
4. You want the photo to be visible in every frame so you'll need to set it to be shared by all layers. Double-click the Image layer name and check Share across frames (see Image XVIII). Click OK in the warning dialog that pops up.
5. Double-click the Image layer again and deselect the Share this Layer option. Another dialog opens. Basically, instead of sharing the layer the image will now be copied into each frame automatically. Click on All (see Image XIX). What you just did was copy the image to every frame instead of simply sharing the same image. You'll need an actual copy in every frame.

   Note: Another way to get the image placed precisely in all frames is to select it and choose Copy to Frames > All from the Frames panel options menu.

6. You can now select and delete Frame 1. The frames will renumber automatically. All you need now are the frames with the puzzle pieces in them.
7. Save your file. A copy will be saved as puzzle2.png in the download folder.

Putting the Image into the Pieces
Now you need to get the part of the image below each piece into the puzzle piece. It sounds tough, but wait until you see how easy it is!

Image XIX corresponds to steps 1-3 below, but the cloverleaf is cropped out, indicating that it is masked.

1. Select Frame 1; select the puzzle piece and cut it (CTRL+X).
2. Select the parrot image and choose Edit > Paste As Mask. Your piece may look different than mine depending on how your pieces were distributed to the frames.
3. To make it look more like a puzzle piece select Bevel and Emboss > Inner Bevel from the Effects menu. Change the width to 3.

   You'll repeat steps 1-3 for each puzzle piece, so to save on the repetition, let's make a command. It'll save you repeating the previous three steps for each piece.

4. Open the History panel. Select the last two operations (which should be Paste and Set Effects). Notice that the Cut operation is separated between black lines, indicating that it cannot be added to the command.
5. Select the Save As command from the History panel's Options menu and name this command puzzleMask (see Image).
6. Open the Frames panel and select Frame 2 (see Image XXII).
7. Cut the puzzle piece in Frame 2 and then select the image.
8. Choose puzzleMask from the bottom of the Commands menu.
9. Repeat steps 7 and 8 for the remaining frames.

Background Image
You now have nine frames, each containing a puzzle piece. You'll need to add the background image in again. The background will be the image the user uses as a guide for putting the puzzle together.

1. Select the last frame in the Frames panel and choose Duplicate Frame from the Options menu. Check After the current frame and click OK.
2. In frame 10 (the new duplicate) select the puzzle piece and choose Modify > Ungroup. Deselect by clicking off the document then select the puzzle piece and delete it. You'll be left with just the image.
3. Select the image and choose Adjust Color > Hue/Saturation from the Effects menu. Change the saturation and lightness as needed.
4. In the Effects area you may see the inner bevel effect on the image, select it and click the minus (-) sign.
5. Double-click Frame 1 and name it "p1". Repeat for all 9 frames except number 10 the last one. Name it "background" (see Image XX). Save your file.

Exporting as CSS Layers
Let's export the frames as CSS layers. Fireworks will export the individual frames as individual CSS layers and do part of the work for you in order to make finishing the puzzle in Dreamweaver faster. Fireworks will make the HTML page automatically.

1. Choose Modify > Canvas > Canvas Color and make it transparent (see Image XXI.
2. In the Optimize panel, select GIF as the export file format and set the Colors to 128. Choose Index Transparency and set the Matte to none.
3. Choose File > Export. In the Export dialog box, navigate to your site folder. In the Save as type field, select CSS Layers from the drop-down menu and Fireworks Frames from the Source drop-down menu. Check Put images in subfolder so that Fireworks will automatically add a separate images folder. Also check Trim images and then click Save to export.

The trim image option will cut away the extra masked area of the entire image and leave you with only the puzzle piece.

Powering the Puzzle in Dreamweaver
If you don't already have Dreamweaver installed, you can get a 30-day trial from Macromedia (www.macromedia.com/downloads). You'll need to register if you haven't before - but it's free.

You'll be adding the Drag Layer behavior to make your puzzle pieces move. The Drag Layer behavior in Dreamweaver allows you to drag layers within an HTML page. There are a lot of possibilities built into the behavior. You can choose to constrain where the layer is dragged to, and by how much, and can even have it snap into place when the piece gets close to the area it belongs in.

1. Open Dreamweaver. Choose > Site > Manage Sites > New > Site. Name the site "Puzzle". Click the folder next to Local Root folder and navigate to your puzzle folder. Select it and open.
2. Open the Files panel (F8). Double click on the puzzle_done.htm file to open it (this is the file that Fireworks generated). It contains all the puzzle pieces in it even though you can't see them.
3. Open the Design (panel groups on the right) panel and click on the Layers tab to open the Layers panel (see Image XXII). Select a puzzle piece and notice that it's in its proper position. Using the Layers panel is going to be the only practical way to select these layers.

   Notice in the Layers panel that the name you gave to each frame in Fireworks has now become the layer name in Dreamweaver (see Image XXIII). A quirk of Fireworks is that it gave the layers the name of the image. If you select one of the layers and look in the Property inspector, notice that the Image name is the same as the layer name. This won't work because layers must have unique IDs.

4. Select the first numbered layer. In the Property inspector, delete the name and change it to "pz1" and press Enter/Return. Repeat this for all nine puzzle pieces giving them unique names.
5. Select the <body> tag in the Tag Selector. The Drag Layer behavior will be attached to the body tag using an onLoad event.
6. Click on the Tag Inspector panel group and open the Behaviors panel. Click the Add (+) button and select Drag Layer from the list (see Image XXIV).
7. The Drag Layer dialog box opens (see Image XXV). Select pz1 from the Layer drop-down menu. Notice that all the layers in the document are listed.
8. Leave Unconstrained checked. Click the Get Current Position button. These are the coordinates that will be used to determine whether the piece is dragged to the correct position.
9. Set the Snap if within field to 15 pixels. When the user gets to within 15 pixels, the piece will snap into place.
10. Close the dialog box and repeat steps 8-11 for every puzzle piece (but not the background).
11. Save your file. Now select a puzzle piece in the Layers panel and click and drag on the white square handle. Drag the piece to the right side. Mix them up and stack them. When you select a piece that is at the top of the document you won't see the white square handle you drag with (see Image XVI). Use the keyboard arrow keys to lower it. Then you can drag it over to the side.
12. Save and preview. Test out your puzzle. Drag each piece into place to be sure you didn't forget to add the Drag Layer behavior to one of them (see Image XVII).

And voila, you're done!