Scroll Pad

O.K. Here's the plan - We're going to design the Fireworks GUI you see here. Then, using Dreamweaver (and some downloaded DW Extensions courtesy of Projectseven.com), we're going to set it up as our own "interactive scrollpad", into which you can insert text or image links, as you see fit! Try hovering over the control buttons to see what we're aiming at here! So, the first step for you is to log into projectseven.com's download centre (www.projectseven.com) and download the "Layer Animagic" extension. While you're there, take a good look around at some of the best FREE Dreamweaver Extensions around! Al Sparber and the crew at projectseven are a Godsend for this sort of stuff! Install the Extension into Dreamweaver using the Extension Manager. When you have done this, fire up your Fireworks and let's create a scrolling interface!!! Of course, if you're only interested in the scrolling gizmos, you can jump straight to that section of the Tutorial from HERE.

The interface

O.K. - this is not much more than a box with a window in it. Oh, and a couple of buttons. And then there's the metallic fill. And an invisible scrolling layer. And....

Stage 1 - The basic interface.
Open a new canvas in Fireworks (150x450). Select the "Rounded Rectangle" tool. Open the "Object" panel and set the "Roundness" to 50. Then draw a 120x420 rectangle on the canvas, with a pale grey fill. Centre this object in the canvas (COMMANDS>DOCUMENT>CENTRE IN DOCUMENT). Now draw another rectangle (80x320) inside this object and centre the new rectangle in the canvas too. Give this rectangle a blue/green fill. Next, select the "Elipse" tool and draw a small (10x10), grey-filled circular button on the interface. Click/drag the button to the desired position at the bottom of the interface and create a clone on top of it by clicking EDIT>CLONE. Click/drag the clone into position alongside the original.

Stage 2 - Applying Fills and Effects.
Now let's apply a bit of "realism" to our interface with Fills and stuff!
Click the inner rectangle and apply an Inner Shadow effect (EFFECTS>SHADOW AND GLOW>INNER SHADOW) with the settings shown below.



The rectangle will still be selected at this point, so press/hold "Shift" and click the 2 buttons to include them in your selection, then apply an "Inset Emboss" effect (EFFECTS>BEVEL AND EMBOSS>INSET EMBOSS) with the settings as shown below.



Click anywhere on the canvas to de-select all objects, then Shift/click the 2 buttons and apply an Inner Glow effect (EFFECTS>SHADOW AND GLOW>INNER GLOW) with the settings shown below.



Now, click the outer rectangle and apply an Inner Glow effect as before, with the following settings:



It's all starting to look pretty real, now! O.K., while the outer rectangle is still selected, apply a Drop-Shadow effect (EFFECTS>SHADOW AND GLOW>DROP SHADOW), with the following settings:



Now for some texture!
First, we need to apply an "Aluminium" fill to the outer rectangle. See my "Custom Fills" Tutorial for a refresher on creating and saving custom fills for your graphics. As the outer rectangle is still selected, click to open the "Styles" panel and select "Aluminium" from the options on display there. Now, open the "Fill" panel and click the "Texture" drop-down and select "WAFFLE" (You can obviously try the other textures, such as "Grass". It's up to you!). Set the amount of texture to 50. Your settings should be as below:



O.K., so now we've got it looking cool and metallic!

And that should be pretty much it! The only other step I've taken (as far as "prettying" the thing up is concerned!), is to alter the linear fill to a slightly diagonal spread by dragging the SQUARE fill handle down/right, as shown below. And I only did that to add an extra degree of "somethingness" to the texture of the interface!!!

Now click EDIT>SELECT ALL and apply a slightly softening Gaussian Blur effect (EFFECTS>BLUR>GAUSSIAN BLUR), with a blur radius setting of 0.5.

Finally, Shift/click the 2 small buttons again and click INSERT>SLICE. Choose "Multiple" from the dialogue box which pops up. The reason for this will become clear in Part 2 of this project, when Dreamweaver does it's magic! Your last task is to name, save and export the file (html and images) to the destination folder in your Dreamweaver site.