# Making a Picture Puzzle Using Fireworks and Dreamweaver

(Available to only 4.0 or better browsers)

**In Fireworks:**

1.  Create or import a picture. \*\*Write down its dimensions. You'll
    need this later.

2.  With rulers visible, drag guides onto the picture so you have a
    tic-tac-toe-type pattern. Warning: The following process can get
    confusing. It's best to start small, with no more than nine puzzle
    pieces. Once you get the hang of the process, you can go nuts if you
    want.

3.  Do File\>Export. Do whatever optimizing you want to do. Click Next.
    In the next window, under Slicing, select Slice Along Guides. Under
    HTML, select Dreamweaver2 and select the directory where you want
    this file saved.

What Fireworks does is create a bunch of little pictures from the
sliced-up image and names them based on their location in the table, Row
1, Column 1; Row 1, Column 2; etc. The HTML file that you save will be a
table that arranges these little pictures in their proper places to
re-form the whole picture. The HTML file name will be the picture's
filename.htm. For instance, Mypix.jpg, sliced up and saved as a table
would be Mypix.htm.

**In Dreamweaver:**

## Open the following windows: (You can nest them if you want to)

-   Objects

-   Properties

-   Behaviors

-   Layers

## Open the saved file. Using the above example, open Mypix.htm. This should be a table made up of small pictures comprising the whole. Don't try to move anything at this point!

1.  File\>Convert\>Table to Layers. This will automatically put each
    picture into its own separate layer. Again, don't touch anything!

2.  It is less confusing if you rename the layers to something that
    makes sense. In the Layers window, double click on each layer name
    (Layer 1, Layer 2, etc.) in turn and rename. I find it easiest to
    name them by their position in the grid, r1c1, r1c2, r1c3, r2c1,
    etc.)

3.  In the layers inspector, Select r1c1 or whatever you called the
    top-left piece. In the inspector, note its left and top locations.
    You'll need these in the next step.

4.  Create a new layer using Insert\>Layer. In the properties inspector,
    name the layer "field" Make this new layer four pixels larger in
    height and width than the original image's size (see \*\* above)
    Select a nice background color for the layer. Make the Z order for
    this layer 0 (zero) to put it behind all of the other pieces and
    make the left and top locations for this layer 2 less than the left
    and top locations of the top-left piece. This should give you a 2
    pixel wide frame around the assembled puzzle.

5.  Click on \<Body\> in the lower-left corner of the Dreamweaver window

6.  In the Behavior Inspector (window), select Events for 4.0 Browsers
    and click on the Add Behavior (+) button. Select "Drag Layer"

7.  In the Layer window that comes up, select each layer in turn. For
    each, select "unconstrained" and "get current position." If you want
    the puzzle piece to snap into position if the viewer gets close, do
    that. The smaller the number of pixels, the closer they have to be
    before the layer snaps.

8.  Click OK

9.  Repeat steps 7, 8, and 9 for each layer except the field layer. I
    find it helps to draw a chart and mark off each piece as I do it

10. When all layers have an attached behavior, save the document.

11. Now and only now: Drag each puzzle piece (layer) by its layer handle
    to a different, scrambled location and save again

12. Admire your work in a browser.

Remember when you post the puzzle to the server, you need to FTP not
only the HTML file but the many sliced picturelets as well.

Tom Davies

National Park Service

Philadelphia Support Office