Loading a simple asset
The example below shows a simple Asset component instance 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"/>
<asset id="simpleAsset" x="210" y="40" url="http://samplemath.com/smaf/img/logo.png"/>
</composer>
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<asset id="simpleAsset" x="210" y="40" url="http://samplemath.com/smaf/img/logo.png"/>
</composer>
Scaling assets
If you apply width and height properties to an Asset in SMXML, the asset loaded doesn't get rendered in its original size but scaled to the dimensions provided in SMXML. You may use the scale attribute to specify the scale mode to be used. The default scale mode is Asset.STRETCH.
The example below shows Assets being scaled using different scale modes.
OUTPUT
SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<asset id="scaleNone" x="50" y="30" width="100" height="100" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
<asset id="scaleStretch" scale="stretch" x="200" y="30" width="100" height="100" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
<asset id="scaleFit" scale="fit" x="350" y="30" width="100" height="100" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
<asset id="scaleCrop" scale="crop" x="500" y="30" width="100" height="100" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
</composer>
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<asset id="scaleNone" x="50" y="30" width="100" height="100" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
<asset id="scaleStretch" scale="stretch" x="200" y="30" width="100" height="100" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
<asset id="scaleFit" scale="fit" x="350" y="30" width="100" height="100" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
<asset id="scaleCrop" scale="crop" x="500" y="30" width="100" height="100" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
</composer>
AS3
scaleStretch.scale = Asset.STRETCH;
scaleFit.scale = Asset.FIT;
scaleCrop.scale = Asset.CROP;
scaleFit.scale = Asset.FIT;
scaleCrop.scale = Asset.CROP;
Smoothing
You may use the smoothing boolean attribute to specify whether the Asset should be rendered using smoothing or not. This mainly comes to play when scaling assets different from their original dimensions. The default value is false to optimize on performance.
The example below shows an Asset being scaled using smoothing on the left and not on the right.
OUTPUT
SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<asset id="smoothAsset" scale="crop" x="50" y="0" width="250" height="200" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
<asset id="notSmoothAsset" scale="crop" x="300" y="0" width="250" height="200" url="http://samplemath.com/smaf/img/logo.png"/>
</composer>
<composer>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<asset id="smoothAsset" scale="crop" x="50" y="0" width="250" height="200" url="http://samplemath.com/smaf/img/logo.png" smoothing="1"/>
<asset id="notSmoothAsset" scale="crop" x="300" y="0" width="250" height="200" url="http://samplemath.com/smaf/img/logo.png"/>
</composer>
AS3
smoothAsset.smoothing = true;
Applying Styles
Styles that can be applied on an Asset component.
| Style type | Attribute name | Description |
|---|---|---|
| filter | filter or filters | The filter(s) applied to the Asset. |
The example below shows an Asset component with filter styles applied.
OUTPUT
SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<style>
<filters style="assetFilter">
<filter type="glow">
<color>0xffffff</color>
<distance>0</distance>
<strength>9</strength>
<knockout>0</knockout>
<blurx>2</blurx>
<blury>2</blury>
</filter>
<filter type="dropshadow">
<color alpha=".36">0x000000</color>
<angle>55</angle>
<distance>7</distance>
<strength>2</strength>
<blurx>27</blurx>
<blury>27</blury>
</filter>
</filters>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<asset id="styledAsset" x="210" y="30" url="http://samplemath.com/smaf/img/logo.png" filter="assetFilter"/>
</composer>
<composer>
<style>
<filters style="assetFilter">
<filter type="glow">
<color>0xffffff</color>
<distance>0</distance>
<strength>9</strength>
<knockout>0</knockout>
<blurx>2</blurx>
<blury>2</blury>
</filter>
<filter type="dropshadow">
<color alpha=".36">0x000000</color>
<angle>55</angle>
<distance>7</distance>
<strength>2</strength>
<blurx>27</blurx>
<blury>27</blury>
</filter>
</filters>
</style>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<asset id="styledAsset" x="210" y="30" url="http://samplemath.com/smaf/img/logo.png" filter="assetFilter"/>
</composer>
See the SMAF reference for more information on the Asset component.
There are 6 comments on this page. [Display comments]