Programming SMAF: Drawing a simple box

Drawing a simple box

The example below shows a simple Box component with no style applied.

OUTPUT

SMXML

<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/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>

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.

OUTPUT

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" 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;

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

OUTPUT

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" 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;

Applying Styles

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.

OUTPUT

SMXML

<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/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>

See the SMAF reference for more information on the Box component.

Programming SMAF : UsingBox

Drawing a simple box

OUTPUT

SMXML

Drawing rounded rectangles

OUTPUT

SMXML

AS3

Drawing speech bubbles

OUTPUT

SMXML

AS3

Applying Styles

OUTPUT

SMXML