Drawing a simple box
The example below shows a simple box component with no style applied.
SMXML
<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="simpleBox" width="200" height="80" x="210" y="40"/>
</composer>
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="simpleBox" width="200" height="80" x="210" y="40"/>
</composer>
OUTPUT
Drawing rounded rectangles
You may specify a rounded attribute for box the value of which is the diameter of roundness for the corners of the rectangle. So if you wish to draw your box with corners rounded in a 10 pixel radius then set rounded to 20.
SMXML
<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="leftBox" rounded="20" width="200" height="80" x="110" y="40"/>
<box id="rightBox" rounded="8" width="200" height="80" x="360" y="40"/>
</composer>
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="leftBox" rounded="20" width="200" height="80" x="110" y="40"/>
<box id="rightBox" rounded="8" width="200" height="80" x="360" y="40"/>
</composer>
AS3
leftBox.rounded = 20;
rightBox.rounded = 8;
rightBox.rounded = 8;
OUTPUT
Drawing speech bubbles
You may specify a bubble attribute for box in case you wish to render it with a bubble stem. You may use the bubbleside attribute to specify which side the stem should appear on and bubbleorientation to align the stem on the chosen side. See the chart below for possible combinations of values for these attributes.
| bubbleside | bubbleorientation |
|---|---|
| top | left |
| top | center |
| top | right |
| right | top |
| right | center |
| right | bottom |
| bottom | left |
| bottom | center |
| bottom | right |
| left | top |
| left | center |
| left | bottom |
SMXML
<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="leftBox" bubble="20" bubbleside="left" bubbleorientation="center" width="200" height="80" x="110" y="40"/>
<box id="rightBox" bubble="10" bubbleside="bottom" bubbleorientation="right" rounded="20" width="200" height="80" x="360" y="40"/>
</composer>
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="leftBox" bubble="20" bubbleside="left" bubbleorientation="center" width="200" height="80" x="110" y="40"/>
<box id="rightBox" bubble="10" bubbleside="bottom" bubbleorientation="right" rounded="20" width="200" height="80" x="360" y="40"/>
</composer>
AS3
leftBox.bubble = 20;
leftBox.bubbleside = Box.LEFT;
rightBox.bubble = 10;
rightBox.bubbleside = Box.BOTTOM;
rightBox.bubbleorientation = Box.RIGHT;
rightBox.rounded = 20;
leftBox.bubbleside = Box.LEFT;
rightBox.bubble = 10;
rightBox.bubbleside = Box.BOTTOM;
rightBox.bubbleorientation = Box.RIGHT;
rightBox.rounded = 20;
OUTPUT
Applying Styles
Here is a comprehensive list of styles that can be applied on a box component.
| Style type | Attribute name | Description |
|---|---|---|
| fill | fill | The fill style for the box. |
| stroke | stroke | The stroke around the edge of box. |
| filter | filter or filters | The filter(s) applied to the box. |
The example below shows a box component with fill,stroke and filter styles applied.
SMXML
<!DOCTYPE composer SYSTEM "http://samplemath.com/smaf/smxml.dtd">
<composer>
<style>
<fill style="boxFill" type="linear">
<color ratio="0">0x0000ff</color>
<color ratio="255">0xff0000</color>
</fill>
<stroke style="boxStroke" size="2">
<color>0x0000ff</color>
</stroke>
<filter style="boxFilter" type="dropshadow">
<color alpha=".36">0x000000</color>
<angle>55</angle>
<distance>7</distance>
<strength>2</strength>
<blurx>27</blurx>
<blury>27</blury>
</filter>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="styledBox" width="200" height="80" x="210" y="40" fill="boxFill" stroke="boxStroke" filter="boxFilter"/>
</composer>
<composer>
<style>
<fill style="boxFill" type="linear">
<color ratio="0">0x0000ff</color>
<color ratio="255">0xff0000</color>
</fill>
<stroke style="boxStroke" size="2">
<color>0x0000ff</color>
</stroke>
<filter style="boxFilter" type="dropshadow">
<color alpha=".36">0x000000</color>
<angle>55</angle>
<distance>7</distance>
<strength>2</strength>
<blurx>27</blurx>
<blury>27</blury>
</filter>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<box id="styledBox" width="200" height="80" x="210" y="40" fill="boxFill" stroke="boxStroke" filter="boxFilter"/>
</composer>
OUTPUT
See the SMAF reference for more information on the box component.
There is one comment on this page. [Display comment]