Absolute dimensions


You can set the dimensions of any UI element using the width and height properties.

SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
    <box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
    <box id="leftBox" width="200" height="40" x="110" y="20"/>
    <box id="rightBox" width="100" height="80" x="430" y="40"/>
</composer>

AS3
leftBox.width = 200;
leftBox.height= 40;
rightBox.width = 100;
rightBox.height = 80;

or

leftBox.setDimensions(200, 40);
rightBox.setDimensions(100, 80);

OUTPUT





Proportional dimensions


You can alternatively set percentage values for width and height that are relative to the parent composer's dimensions.

SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
    <box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
    <box id="leftBox" width="50%" height="40" x="0" y="20"/>
    <box id="rightBox" width="33%" height="80" right="0" y="40"/>
</composer>

AS3
Percentage values are not supported in AS3.

OUTPUT





Relative dimensions


You may also set the dimensions relative to the parent composer's dimensions. In SMXML you may define relative dimensions as percentage or pixel values. They start with a - symbol. They mean how much less of the parent composer's dimension. In the example below leftBox is 40 pixels while rightBox is 50% less in height than the parent composer.

SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
    <box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
    <box id="leftBox" width="200" height="-40" x="0" y="0"/>
    <box id="rightBox" width="100" height="-50%" right="0" y="0"/>
</composer>

AS3
leftBox.height= -40;

Percentage values are not supported in AS3.

OUTPUT


Please see AComposable for details on dimension properties.

There are no comments on this page. [Add comment]

Valid XHTML 1.0 Transitional :: Valid CSS :: Powered by WikkaWiki