Gradients, math and graphs

Josh Mellicker josh at
Mon Sep 10 22:02:04 EDT 2007

Hi David,

Sorry I missed this before... here is the stack:

On Sep 3, 2007, at 7:54 AM, David Bovill wrote:

> Josh - do I remember you mentioning that you had posted this stack to
> the list - I'd love to take a look now that I have downloaded
> Fireworks :)


Here's what it does:

With one click, the "import_fw" stack:

  - imports a background image and folder of sliced Fireworks images
  - creates a new card with the name of the FW doc
  - puts your background image on the card
  - places buttons on the card with position and size identical to  
your FW doc
  - assigns normal, over and down states to the icons of those buttons
  - sets up the buttons to work with the cool rollover script written  
by Chipp, Mark Waddingham, & Richard Gaskin and puts that script into  
your new stack

So basically, once you create your cool interface and export it, you  
open our stack, click the "go" button, and sit back and watch the  

I will work on better instructions upon request, until then here is a  
rough step-by-step, let me know if you have any problems:

1. create a cool interface for a card in Fireworks. Name your  
Fireworks doc what you want your Rev card name to be.

2. no need to make "symbols" for buttons (you can if you want) but I  
find just creating rectangles or circles is much easier to edit and  
change around

3. copy Frame 1 to Frames 2 & 3.

4. in Frame 2 (your buttons "rollover" state) make your buttons get  
brighter and put a glow around them

5. in Frame 3 (your buttons "down" state) make your buttons get even  
brighter and move them a pixel to the right and a pixel down

6. slice around your buttons (no overlapping!)

7. if you wish, you can name your slices cleverly, so that your card  
script can pick up on the name and trigger some action, saving you  
from having to program the buttons individually in Rev

8. set your optimize settings to PNG 32

9. export background:
turn off all your button layers and export your background as a  
single .png image (choose "Images Only"). Use the default name, but  
type in "_bkgd" (so if your Fireworks document is "GrooveMonkey",  
your background should be called "GrooveMonkey_bkgd.png".

10. export button images:
turn off your background layer and turn on all your button layers,  
and make sure your document background is transparent (your buttons  
will have an alpha channel so you can reposition if you wish while  
retaining glows, shadows, etc.)

11. Now for the secret sauce: export one more time and choose  
"Director (.htm)" from Export popup. "Put Images in Subfolder" (call  
it "images"). Click the "Options" button, and under "Document  
Specific", set the first popup to "slice", the next 5 to "None", and  
by "Frame Names", set them to "underscore" and "Rollover".

So your "images" folder now should have files named something like:


Finally, open our Rev stack, click the "go" button, and locate the  
Director .htm file. All the rest is automatic.

More information about the use-livecode mailing list