connectedpixel.com

actionscript, web development

"Ultimate Aqua Button" in Flash8

Submitted by joelmay on 11 October, 2005 - 1:09pm.

Since OSX first appeared, I've been in love with the aqua button look. I still love it.

CommunityMX has a great tutorial by Brian Edgin on creating an aqua button with Fireworks. It looks like a real piece of glass. I've seen a few Flash-only aqua buttons. They're very cool, but they're not as nice as the Fireworks version. Flash 7 was not capable of that degree of realism.

But now we have blends and filters in Flash 8. We can make an all-vector aqua button with the same quality as the Fireworks version.

Notice the transparency in the button. Notice the desaturated color on the edges. Notice that the shadow is not using alpha -- it's using "multiply". I don't have an intuitive sense of what multiply blend means yet. It's on my list of things to study.

We now have the parameters of the button under programmatic control. We can change the color of the button, squish it, change its shape, move the shadow, go wild. I'm about to go on an aqua binge myself.

I'm not going to explain how it's done; that would be steeling CommunityMX's content. But if you're interested, get the Fireworks tutorial (it's free) and figure out how to translate it to Flash yourself. It's a great exercise for learning Flash filters and blend modes.

Anonymous (not verified) Says:

I came to the same realization yesterday!!!

11 October, 2005 - 3:38pm

I was looking at a Fireworks 3d smiley tut yesterday and then had a thought...Hey! Why don't I try that with the new Flash 8 filters? I got pretty good results from it.

You can check out my smiley crew at this link:
http://www.manuelsaintvictor.com/blog/?p=93

What I'm looking forward to is somebody finding a way to make that Eye Candy 4000 plugin work with Flash!

Mani

joelmay Says:

Cool smileys. Don't drop

13 October, 2005 - 12:09pm

Cool smileys. Don't drop them on a hard floor; they'll shatter.

One thing about translating Fireworks effects: the numeric parameters don't translate directly. You have to play around to find what works.