Emak Mafu Labs Blog

Just the other day I caught a developer here (who shall remain nameless) painstakingly positioning and resizing 3 assets from an external swf file, in order to give some resizable UI components we needed, the rounded corners they truly deserved. It would be much nicer to do this using just one sprite and purely in Actionscript though, wouldn’t it? Yes it would!

If you found Bryan’s post impenetrable and have some rectangles in need of a good rounding check have a look at this ridiculously easy snippet o’ code:

public function roundrect()
{
	var matr : Matrix = new Matrix();
	matr.createGradientBox(40,20,Math.PI/2);
	var grid : Rectangle = new Rectangle(10,10,30,30);
	var _myComponent = new Sprite();
	_myComponent.graphics.beginGradientFill(GradientType.LINEAR,[0xFFFFFF, 0xAEAEAE],[1,1],[0x00,0xFF], matr);
	_myComponent.graphics.drawRoundRect(0,0,50,50,20,20);
	_myComponent.scale9Grid = grid;
	_myComponent.height = 20;
	_myComponent.width = 100;
	_myComponent.x = 200;
	_myComponent.y = 200;
	addChild(_myComponent);
}

The above creates a rounded rectangle, _myComponent, and a rectangle called grid which fits squarely in the center of _myComponent and is used as the 9-segment scaling grid for _myComponent. Once done, you can resize the component freely and rounded corners of _myComponent will be preserved whatever the size. Scaled down to width=20 and height=20, you’ll get a perfect circle since this is the size of the rounded corners on the rounded rectangle. With the width increased to 200 you’ll get a lovely rounded button thing. Don’t get it? Look at the pretty pictures.

Scaled to 20 x 20:

Scaled to 200 x 20:

Careful: if you get an error using scale9Grid, make sure that the rectangle you are using for the grid fits within the bounds of the sprite you are scaling.

Tadaa!