Web 2.0 Styles in AS 3

OK, it’s trendy to the extreme, but I was checking out that “Web 2.0” style you see all over the place now – you know, the slick, glossy, rounded corner, slight dropshadowed look. Come on, you know you love it. Anyway, I started analyzing how it some of it was done and started looking at coding it into AS3. The result, so far, is my GradientBar class, which you can invoke like so:

[as]var bar:GradientBar = new GradientBar(barColor, barWidth, barHeight, cornerRadius=5);[/as]

It extends Sprite, so you can use it as a display object, like so:

[as]var bar:GradientBar = new GradientBar(barColor, stage.stageWidth – 20, 34, 10);
bar.x = 10;
bar.y = 10;
bar.shadowType = “none”;
addChild(bar);[/as]

And here’s an example in use:

[kml_flashembed movie=”http://www.bit-101.com/as3/gradientbar/Web20.swf” height=”50″ width=”400″ /]

You can get the source here:

http://www.bit-101.com/as3/gradientbar/srcview/
(Note that the internal shapes are draw in into Shape objects!)

This usage example is a visual example only, not really the way I would code an interactive button bar, but still looks pretty cool. And the GradientBar class itself needs a lot of work itself. I’m just throwing it out there as an experiment more than anything else.

This entry was posted in Flash. Bookmark the permalink.

3 Responses to Web 2.0 Styles in AS 3

  1. sascha/hdrs says:

    Goodness! What can I say! Hey you use the same code formatting as I do! … No, wait! There’s an equal sign without spaces around it in the constructor arguments! Hmmmmmm…. 🙂
    I’m writing a lightweight component framework for use in games! This will be of help! Thanks! Didn’t knew that it’s called Web2.0 look though!

  2. Benz says:

    Hi Keith,

    i tried to make your class work as a skin but had some problems.
    You can check out the result here: http://www.richapps.de/?p=45.

    Anyway great work I like that style!

  3. katratxo says:

    Hi,
    I tried your code with the Flex 2 SDK on Linux and works great!!!
    😀

Leave a Reply