On Jun 6, 2006, at 6:57 PM, Tereza Snyder wrote:
On Jun 6, 2006, at 8:43 PM, Josh Mellicker wrote:
Michelle and I wrote a stack today to do this, if no one else has
one and there is interest, I will post it
Please!
t
Fireworks is my favorite application for creating interfaces.
But getting those interfaces into Rev is not a simple process...
until now!
My genius wife and partner Michelle and I wrote an stack today to
make this process as painless as possible. I apologize for the
roughness in appearance, code and documentation but it works!
Here it is:
http://revcoders.org/import_fw.rev
FEATURES:
With one click, the "import_fw" stack:
- imports a background image and folder of sliced Fireworks images
- creates a new Rev stack and 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
fireworks!
HOW TO:
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:
bob_down.png
bob_over.png
bob.png
joe_down.png
joe_over.png
joe.png
mary_down.png
mary_over.png
mary.png
Finally, open our Rev stack, click the "go" button, and locate the
Director .htm file. All the rest is automatic.
These instructions are very rough, if this doesn't work perfectly for
anyone I will take screen snaps, and be much more detailed, etc.
Also, my text parsing code is horrible, if someone wants to help with
that that would be great!
_______________________________________________
use-revolution mailing list
use-revolution@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription
preferences:
http://lists.runrev.com/mailman/listinfo/use-revolution
