Web 2.0 Styles in AS 3

Nov 12 2006 Published by under Flash

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”;

And here’s an example in use:

You can get the source here:

(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.

5 responses so far. Comments will be closed after post is one year old.