Evenly distribute components relatively their size

Question

Say there is HGroup which is 100px wide, and there are two images within: image_1 is 20px and image_2 is 30px.

I want image_1 to be centered within first 40 pixels (from pixel 11 to 30) and image_2 within remaining 60 pixels (from pixel 56 to 85) since they divide the whole 100-pixels wide space relatively their size.

Is there a component or property within Spark which allow to do that?

Answer 1

Maybe I'm wrong, but there isn't any method to do this. The instances names have been created for the example:

// container width = 100
var C:HGroupContainer = new HGroupContainer();
this.addChild(C);

const W1:int = 40;
const W2:int = 60;

var r1:Rect1 = new Rect1();
r1.x = (W1 - r1.width) / 2;
this.addChild(r1);

var r2:Rect2 = new Rect2();
r2.x =  W1 + (W2 - r2.width) / 2; 
this.addChild(r2);

The coordinates x = 0, y = 0 corresponding to the upper-left corner of the images.

Answer 2

You have to wrap the images in HGroups and set the horizontal alignment to center there. That's the Flex way to do it.