Skip navigation

Get a beveled text appearance using a drop shadow filter.

I was pointed to scrapblog.com recently as an example of a nice looking flex site, and the question came up regarding the beveled labels on buttons. It’s super easy to do, and here’s an example for you.

View Application

View Source

There are two particularly nice things about implementing styles like this. Firstly, we have a class called BevelButton.as which has a matching css style (note it’s not the class selector .BevelButton, but the type selector BevelButton), so each instance of the button doesn’t need to have a styleName property set. Secondly, you can also build in glow and other filters on mouse events if you wish by updating one actionscript class, and there’s no need to do this all over the place.

Here’s another example, using glow filters in the class file.

View Application

View Source

Note: The button itself is a hacked duplicate from scrapblog’s buttons using screen-shots. I hope they don’t mind me using this as an example. DON’T use these graphics in your apps, please.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: