Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Making an online puzzle using Freehand 10, Fireworks 4 and Dreamweaver 4

Making an online puzzle using Freehand 10, Fireworks 4 and Dreamweaver 4

You can make an online puzzle using FreeHand, Fireworks, and Dreamweaver. A step-by-step tutorial to create this online puzzle is outlined below.

Creating the puzzle lines in FreeHand 10
First make the division lines for puzzle pieces, as follows:

1 Choose a Web image for your puzzle. Determine the image’s pixel height and width.
2 In FreeHand, choose File > New.
3 Set the unit of measurement to pixels by clicking the Units pop-up menu at the bottom of the Document window and selecting pixels.
4 Draw a rectangle with the Rectangle tool.
5 On the Object panel, set the width and height of the rectangle to match the size of your puzzle image.
6 Click the Pencil or Pen tool on the tools panel.
7

Draw puzzle lines. The ends of the lines should cross the edge of the rectangle. Note that within the rectangle, lines can cross one another.

8 Choose Edit > Select > All.
9 Choose Modify > Combine > Divide.
10 Choose File > Export.
11 In the Export Document dialog box, name the file. Select FreeHand 9 Document (*.fh9) in the Save as type pop-up menu. Click Save. (In earlier versions of FreeHand, you can save the file rather than export it.)

Adding the image in Fireworks 4
Take advantage of the Fireworks masking feature to make “cut up” pieces of your image:

1 In Fireworks, choose File > Open. Navigate to find and select the FreeHand 9 file you just exported or saved.
2 Click Open. The Vector File Options dialog box will appear. Leave the default settings as they are. Click OK.
3

The paths, which together create the appearance of puzzle piece lines, will appear on the canvas. You can change the stroke on the paths (or add one) in Fireworks. For instance, you may want to select each path and, on the Stroke panel, select Pencil in the Stroke category pop-up menu along with 1-Pixel Soft in the Stroke name pop-up menu. You may want to select Black or a dark Gray for the Stroke color.

Note: If the paths that appear in Fireworks are not closed or appear to be joined, recreate your puzzle lines in FreeHand again.

4 Choose File > Import. Navigate to find and select the image for the puzzle. Click Open.
5 Click in the upper left-hand corner of the canvas to place the image.
6 Position the puzzle image so that it covers the entire canvas area. (If necessary, resize the image so that it fits over the canvas area exactly. Choose Windows > Info to open the Info panel, which will let you make minor adjustments to the pixel width and height of the image as well as to set the x,y coordinates each to 0.)
7 Select the image.
8 Choose Edit > Cut. This will place the image on the Clipboard.
9 Select a puzzle piece path. The easiest way to select a path is to click its thumbnail on the Layers panel.
10

Choose Edit > Paste Inside.

11 Repeat steps 9 and 10 for each piece of the puzzle.
12 Choose Commands > Document > Distribute to Layers.
13

Double-click the Foreground Layer name in the Layers panel. Change the name of the layer to Layer# (“#” representing here a number not already used in the Layers panel).

Note: Do not select the Share Across Frames option when renaming your layer.

14 Choose File > Export Preview.
15

On the Options tab, select GIF in the Format pop-up menu.

Note: Because the JPEG format does not allow transparent colors, the GIF format must be used for this process.

16

In the Transparency pop-up menu, select Alpha Transparency

17

In the Matte color pop-up box, select a color which will blend with the stroke you chose for your paths. If you used the settings in step 3 above, you may want to choose the medium gray (#999999).

18 Click Export. This opens the Export dialog box.
19 At the top of the dialog box, navigate to select a folder to export your HTML file into. Your HTML file should be exported into an already defined site in Dreamweaver.
20 Name your HTML file in the Name text box.
21 In the Save as Type (Save As for Macintosh) pop-up menu, select CSS Layers (.htm).
22 The Source pop-up menu should display Fireworks Layers. (If not, make this selection in the pop-up menu.)
23 Make sure the Trim Images option is selected.
24 Select the Put Images in Subfolder option. This will put your images into a subfolder named images, which will be located inside the folder you designated for the HTML file in step 19. If you would rather the images be placed in another folder, click Browse and navigate to find and select another folder in your site.
26

Click Save.

Adding Drag Layer functionality in Dreamweaver 4
Here’s where you’ll put the finishing touches on your online puzzle:

1 In Dreamweaver, open the HTML file exported from Fireworks.
2 Choose Window > Layers to open the Layers panel.
3 Click the name of a layer on the Layers panel to select it.
4 Shift-click each of the other layers on the Layers panel until all the layers are selected.
5 Press the arrow keys on the keyboard to nudge the puzzle into the desired position in the Document window. After the puzzle is positioned, click outside all the layers in the Document window to deselect them.
6 Choose Window > Behaviors to open the Behaviors panel.
7 Click Plus (+) to open the Actions pop-up menu. Select Show Events For and then 4.0 and Later Browsers.
8 Select a layer. Then click inside the layer to select the layer’s image. You will know that the image is selected because you will only see three black squares on the outer edge of the image. (If the layer is selected, you will see eight small black squares all around the edge of the layer.)
9 Click Plus (+) on the Behaviors panel and then select Drag Layer.
10 In the Drag Layer dialog box, click the name of the layer holding the selected image in the Layer pop-up menu.
11 In the Movement pop-up menu, select Unconstrained.
12 For the Drop Target, click Get Current Position. The drop target is the spot to which you want the visitor to drag the layer.
13 In the Snap if Within text box, enter a value (in pixels) to determine how close the visitor must get to the drop target before the layer snaps to the target. This example used 20 pixels for the Snap value.
14

Click OK.

15

With the image still selected, click the downward-pointing Events arrow on the Behaviors panel. In the Events pop-up menu, select (onMouseOver).

Note: The onMouseOver event is recommended for the Drag Layer action so that the action is called before the user attempts to drag the layer. Events in parenthesis are applied to null links. When an event in parenthesis is selected, Dreamweaver wraps a tag around the selected image. For maximum cross-browser compatibility, it’s a good idea to use these events.

16

Repeat steps 8 through 15 for the image in each layer. You may want to keep a checklist of all your layers to make sure you don’t miss any.

17

You may want to create a background or frame so your users will know approximately where to drag the puzzle pieces to. One way to do this is with another “background” layer. Insert > Layer.

18

Resize and reposition this new layer so it is the same size and is in the same position as the puzzle.

19 Give the layer a background color. (Selecting the layer and then click a color in the Background color box on the Property inspector.)
20

Change the z-index of the layer so that it is the layer which appears under all the rest. One way to do this is to click the background-color layer name in the Layers panel and drag it down to the bottom of the list of layers. Dreamweaver will reset the z-index of the layers.

21 Move the puzzle pieces around by dragging each layer to a new position in the Document window.
22 Save the document and preview in the browser.

Comments