Absolute positioning
You can set the position of any UI element using the x and y 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="200" height="40" x="330" y="100"/>
</composer>
<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="200" height="40" x="330" y="100"/>
</composer>
AS3
leftBox.x = 110;
leftBox.y = 20;
rightBox.x = 330;
rightBox.y = 100;
leftBox.y = 20;
rightBox.x = 330;
rightBox.y = 100;
OUTPUT
Proportional positioning
You may alternatively use percentage values for the x and y 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="50%" y="10%"/>
<box id="rightBox" width="200" height="40" x="70%" y="50%"/>
</composer>
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="leftBox" width="200" height="40" x="50%" y="10%"/>
<box id="rightBox" width="200" height="40" x="70%" y="50%"/>
</composer>
AS3
Percentage values are not supported in AS3. In this case you would have to perform the calculations based on the width and height properties of the UI element.OUTPUT
Positioning from edge of parent composer
You may specify how many pixels away the UI element is from the edge of the parent composer. If the UI element has width and height
properties defined, this width and height is taken into consideration when calculating the distance. Supported attributes are left, top, right and bottom. Percentage values are also supported for these attributes.
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" left="40" bottom="40"/>
<box id="rightBox" width="200" height="40" right="10" top="10"/>
</composer>
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="leftBox" width="200" height="40" left="40" bottom="40"/>
<box id="rightBox" width="200" height="40" right="10" top="10"/>
</composer>
AS3
leftBox.left = 40;
leftBox.bottom = 40;
rightBox.right = 10;
rightBox.top = 10;
leftBox.bottom = 40;
rightBox.right = 10;
rightBox.top = 10;
OUTPUT
Rotation
You can set the rotation of any UI element in angles.
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" rotation="25"/>
<box id="rightBox" width="200" height="40" x="530" y="20" rotation="90"/>
</composer>
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="leftBox" width="200" height="40" x="110" y="20" rotation="25"/>
<box id="rightBox" width="200" height="40" x="530" y="20" rotation="90"/>
</composer>
AS3
leftBox.rotation = 25;
rightBox.rotation = 90;
rightBox.rotation = 90;
OUTPUT
Please see AComposable for details on position properties.
There are no comments on this page. [Add comment]