I’m creating buttons by swapping out images for the different states. Having said that, I’m interested to learn a better (cleaner code, loads faster, etc.) way to approach it. I’m not as familiar with the CSS Sprites, but if it’s more efficient and better code, I’m all for it.

Thanks!
Dot

Great question! And a little too deep to answer in a reply to a comment, so I’ll do a blog post on the topic of buttons with states and keeping the components aligned to a consistent registration point.

One question before I write the blog post: are you creating buttons on the web site by swapping out images for the different states (e.g., each state is a separate graphic and either loaded when needed or pre-loaded and cached) or are you using CSS Sprites where all of the states are in a single image, and the position of that background image is changed to reveal the different states?

How you use the button images will affect how they are created. If you use separate button state images, then we’ll use a different technique than if you use a single image and offset the coordinates.

Dave

Just want to say I love your tutorials and videos. I go over them all the time. Any time I come across something that stumps me I wonder “what Dave would say?” And sure enough, here’s a post about vector buttons.

I’m a newbie to FW (CS4) and think it’s a tremendous tool for us non-coders. I’m also new to web design and am working on a project with customized buttons. I’m struggling with the organizational aspects of the design, specifically with the buttons and their states (there are a lot of them and it’s a big site):

Do I make all the states of each button, convert them to symbols and throw them into the library? And should I bother grouping them first? Because of the design (they’re star-shaped, with stylized text), there are registration issues, so they can jump around from state to state if I’m not pixel-perfect with their placement.

Is that too complex and I should abandon all hope and go with simpler design, or might you have any insight or direction I can go to find help? I’d really like to use what I’ve come up with, because the site is a children’s music site and the design is fun and fanciful, but I really want it to function correctly.

Any help or direction would be lovely, and greatly appreciated.

Thanks for the tip about some of my buttons — they could definitely be improved!

I’ll try harder with the next version of my buttons! Hope I’ll be able to share it soon…

Wow, that’s hardcore, and not something I would typically think about using FW for. That’s obviously not something that FW does natively, but may be possible with scripting.

You should probably try to make contact with Aaron Beall, John Dunning, and/or Trevor McCauley (Senocular) – they are among the most talented and technical extension developers for FW. Aaron in particular has done some work with 3D objects and grids.

http://fireworks.abeall.com/
http://johndunning.com/
http://www.senocular.com/

Good luck!

But i’ll keep me that page as bookmark, as you can never have enough infosoures.

To answer your question i’m searching if there’s any roundtipping-like (might also be an addon or plugin, extension) solution to bring in a 3D objects mesh (most prefered from an OBJ file) as sort of vector-poly-grid, which also displays the exact view from the camera onto the object so i can translate / import a whole animated sequence in that form as single layers / bitmaps with the related vector objects into fireworks.

A bit similar to Swift 3D which prepares an animated mesh as the exact needed animation layers and tweens, clips, vectorhapes for Flash.

There are of course solutions how you could accomplish that task, but they are mostly extremely tedious, and in the case i need it for it would stretch the working time to an unacceptable extend.

If you know of something like that.. i’d be glad to get a hint, or direct information.

Greetings; Codewarrior

I’ve been doing information architecture / information design for 13+ years, and I’m definitely not a visual designer, but I like to stretch my skills in the programs I use on a regular basis, because they always do much more than I use them for.

I’ve been using FW for 10 years – what were you originally searching for? Have you tried the community at http://www.fireworksguruforum.com/ ? There are many talented people there, and if you’re looking for something involving the FW JS APIs and scripting, there’s a good chance you’ll run into someone there.

Thanks for stopping by – hope to see you again!

@ Michael: your Buttonset is nice, liked it just button nr. 8 has a bit issues with the outter border. the lights aren’t completely correct looking. Would eventually help when you move the fader middle almost on the same height as on the top area, and just change the width ( top to button) of the gradient a bit more. (expanding it a little bit) as the outter area is bigger, and also wouldn’t have the same height, so the gradient caused by the light falling on it, wouldn’t have the same optically height as the toparea.

But i guess this were just quick examples for Dave. And my suggestion isn’t needed at all, as you prolly can do way better then in this little example here =)

Keep on doing & learning Dave, seems you got the right drive for that

Actually i was coming across this page, bc i was searching for a special funtion in fireworks. But found this neat lil creative discussion.. so yeah… i’m off to search on.. and have a great time all of you ^^

Perhaps I’ll write a quick post, too, we’ll see… Not a lot of inspiration lately I have…

In essence, I used some ready-to-use Fireworks styles, just tweaked some of them to achieve these results. in the file, there are 9 layers, each contains one button + 1 background layer.

Glad you liked them!