Question

How can I extend components like buttons to use x and y value as the center of the component, not the top left?

Answer 1

It’s pretty easy in Flex 4 :). They have a transformAround method in the UIComponent, that allows you to transform the position/scale/rotation of a component around any arbitrary pivot. So you could do this:

override public function set x(value:Number):void
{
    var pivot:Vector3D = new Vector3D(this.width/2, this.height/2, 0);
    var translation:Vector3D = new Vector3D(value, this.y, this.z);
    transformAround(pivot, null /* scale vector */, null /* rotation vector */, translation);
}

You could customize/optimize that, but that’s the jist :).

If you’re using Flex 3, then I’d look into how they did that. It’s pretty hardcore, lots of Matrix/Matrix3D stuff.