Building a Drag Layer Puzzle | Macromedia Studio MX Bible

< Day Day Up >

Drag Layer is a Dreamweaver behavior that enables the dragging of layers in an HTML page. The function also includes options to constrain the drag direction and amount, snap the layer when within a specified distance to a target, and the option to add alerts if the user correctly positions the layer. You can use Drag Layer to build movable interface elements or, as shown in Figure 44-2, a jigsaw-style puzzle. Figure 44-2 shows the puzzle as it will appear when you finish the following exercise.

click to expand
Figure 44-2: The completed puzzle for the Habitat Alert site

On the CD-ROM

Save the Habitat Alert44 folder from the chapter44_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the Site panel of the Site Definition drop-down menu and change the path to the Local Root folder.

Habitat Alert site Let's use the Drag Layer behavior to build the Habitat Alert card puzzle. For this exercise, the layers necessary were created during export from Fireworks.

Use the Site panel to locate and select puzzle\puzzle_card _done.htm and press F12 to preview it in a browser. The puzzle pieces are stacked to one side. Drag pieces to put the puzzle back together. Some of the pieces pop up an alert when you successfully place them in the correct position.

Close the finished example and open puzzle\puzzle_card.htm. The Drag Layer behavior requires layers; in this case, the puzzle tray and all its pieces were created in Fireworks using masking and the CSS Layers export option. Click to select the first puzzle piece image (images are exported as rectangles) and delete its name in the Property inspector. Repeat for all puzzle piece images. See caution note for explanation. Save your page.

Caution

Export CSS Layers from Frames in Fireworks uses the frame names for the image files, as the image name, and for the layer names. Because layers must have unique IDs, the Drag Layer behavior will fail unless you either remove or rename the images.

Cross-Reference

For more information about masking in Fireworks, see Chapter 19.

The Drag Layer function must be called before the user can drag any layer so it is best to attach the behavior to the <body> tag using the onLoad event. Select the <body> tag using the Tag selector.
Use the Behaviors panel. Click Add (+) to add the Drag Layer behavior. The Layer menu lists all the layers in the active document. Select layer p1. Click the Get Current Position button. All of these layers are already in their final Drop Target positions because that's how they were created in Fireworks. The behavior uses the coordinates to know when the user moves the draggable layer to the correct location Before you finish the exercise, you move all the layers (except for the puzzle tray) to new positions so that the puzzle is ready to use. Set the Snap if Within field to 10px to make the puzzle a bit harder, as shown in Figure 44-3. Because the user may need to move the puzzle pieces in all directions, leave the movement of the pieces unconstrained.

Figure 44-3: The Drag Layer basic options

Tip
Use Constrained (limited) movement when creating moveable interface elements, such as slider controls or a sliding menu.
Click the Advanced tab of the Drag Layer dialog box and leave the default settings (Figure 44-4) but add alert('way to go!'); in the When Dropped, Call JavaScript field. This creates a pop-up alert window with the text as indicated. The Call JavaScript field can also accept similar expressions or function calls but executes whether or not the user drops the layer successfully.

Figure 44-4: The Advanced Drag Layer options include adding JavaScript alerts.
Close the dialog box.
Repeat Step 5 for each layer except the puzzletray, each time selecting the correct layer, getting the current location, and setting the target zone.

After all pieces are draggable, randomly reopen the Drag Layer behaviors for some of the pieces and set an alert, as you did in Step 6, changing the message between the single quotes.

Tip

When done, save the page and preview in a browser to be sure that all pieces are draggable. It's easy to accidentally forget a layer or use the same layer twice, and you want to be sure that all layers are draggable before you move the layers from their original positions in Dreamweaver.

After you have tested and are sure that every piece is draggable in a browser, return to Dreamweaver and move all the layers to the right of the puzzle tray. Click an image and select its layer. When layers are at the top of the document, you can't grab the layer handle; use the Tag selector to select the <div> instead.

Tip

Grabbing the image to move the layer drags only the image out of the layer. Always grab the layer handle or select the <div> and use the arrow keys. Hold the Shift key down to move in 10-px increments.

< Day Day Up >