Assets
From FHTML
Contents |
1 Why Assets?
- FluidHtml, like most UI systems (but not html) supports the concept of storing re-usable assets in an asset library.
- Use
<style type="xml/fhtmlassets" >to declare an asset library. There can be only one per page. - Assets are described using XML. CSS is wonderful, but it isn't the answer to everything.
- In our opinion, CSS has no business describing something as potentially elaborate as an animation. XML is far more descriptive and can accomplish more in a clear, easier to understand way.
- Because CSS is really only suited to simple property declarations, complex properties end up being comma-delimited lists of space delimited arguments. Yuck! We support both, but maintain that XML is better suited for this purpose.
- Supported asset types include:
- Drawing elements: background, border, filter, shape and animation.
- External Files: xml, text, sound, font, bitmap, swf, svg and custom code modules.
2 Example Asset Library
<!--Bitmaps as backgrounds-->
<bitmap name="panel" src="bitmap/panel.png" />
<bitmap name="arrow" src="bitmap/scroll_arrow_down.png" />
<bitmap name="transparency" src="bitmap/transparent/sc2.png" />
<bitmap name="onePixelBlack" src="bitmap/gifs/000000.gif" />
<bitmap name="brushedMetal" src="bitmap/brushed_metal.jpg" />
<!--These background assets point to the bitmaps above-->
<background type="bitmap" name="onePixelNative" bitmap="onePixelBlack"
repeat="repeat" alpha=".5"
/>
<background type="bitmap" name="brushedMetal" bitmap="brushedMetal"
repeat="repeat"
/>
<background type="bitmap" name="onePixel" bitmap="onePixelBlack"
repeat="repeat" alpha=".5" scaleGrid="{x:20, y:20, r:-20, b:-20}"
/>
<background type="bitmap" name="panel" bitmap="panel" repeat="repeat-scale"
scaleGrid="{x:20, y:20, r:-20, b:-20}"
/>
<background type="bitmap" name="arrow_position" bitmap="arrow"
repeat="no-repeat" x="right" y="bottom"
/>
<!--Solid background-->
<background name="myBlueBg" type="solid" color="0x0000FF" alpha="1" />
<!--Gradient background-->
<background name="redGrad" type="gradient" colors="[0x0000FF, 0xFF0000]"
alphas="[1, 1]"
/>
<!--Define a border and its background by referring to a background asset-->
<border name="myBorder" thickness="10" background="redGrad" />
<!--SWF as a background-->
<swf name="mySwf" src="swf/test_background_swf.swf" />
<background name="mySwfBg" type="swf" swf="mySwf" />
<!--Pixelbender as a background-->
<pixelbender name="blobs" src="assets/pbf/metaBlobs.pbj" />
<background name="pixelbender" type="pixelbender" pixelbender="blobs" />
<!--Fonts-->
<font name="Helvetica_Neue" src="fonts/Helvetica_Neue.swf" />
<font name="Trebuchet_MS" src="fonts/Trebuchet_MS.swf" />
<font name="Tahoma" src="fonts/Tahoma.swf" />
<font name="Arial" src="fonts/Arial.swf" />
<!--A fancy shape-->
<shape
type="morphShape"
name="myShape"
points='[[{x:0, y:0}],
[{x:"33%", y:"33%"}, {x:"66%", y:"33%"}, {x:"100%", y:0}],
[{x:"66%", y:"33%"}, {x:"66%", y:"66%"}, {x:"100%", y:"100%"}],
[{x:"66%", y:"66%"}, {x:"33%", y:"66%"}, {x:0, y:"100%"}],
[{x:"33%", y:"66%"}, {x:"33%", y:"33%"}, {x:0, y:0}]]'
/>
<!--Some filter examples (you can easily combine single filters into arrays)-->
<filter name="combo">
<item name="dropShadow" filterType="dropShadow" distance="10"
angle="45" color="0x000000" alpha=".75" blurX="10" blurY="10"
strength="1" quality="1"
/>
<item name="topWhiteHighlight" filterType="bevel" distance="11"
angle="90" highlightColor="0xFFFFFF" highlightAlpha=".75"
shadowColor="0x000000" shadowAlpha=".5" blurX="10" blurY="10"
strength="1" quality="1" type="inner"
/>
<item name="glow" filterType="glow" color="0xFFFFFF" alpha="100"
blurX="4" blurY="0" strength=".55" quality="1" inner="true"
/>
</filter>
<filter name="osxUp">
<item name="topWhiteHighlight" filterType="bevel" distance="-11"
angle="180" highlightColor="0xFFFFFF" highlightAlpha="0"
shadowColor="0xFFFFFF" shadowAlpha="100" blurX="0" blurY="0"
strength=".5" quality="1" type="inner"
/>
<item name="dropShadow" filterType="dropShadow" distance="10"
angle="90"color="0x000000" alpha="100" blurX="10" blurY="10"
strength=".30" quality="1"
/>
<item name="blur" filterType="blur" blurX="0" blurY="0"
strength=".3" quality="1"
/>
<item name="cmf" filterType="colorMatrix" red="2" green="1"
blue="1" alpha="1"
/>
</filter>
<!--A simple animation-->
<animation name="myRotation" duration="6" easing="inOutSine" >
<frame>
<action property="rotation" end="500" />
</frame>
</animation>
<bitmap name="panel" src="bitmap/panel.png" />
<bitmap name="arrow" src="bitmap/scroll_arrow_down.png" />
<bitmap name="transparency" src="bitmap/transparent/sc2.png" />
<bitmap name="onePixelBlack" src="bitmap/gifs/000000.gif" />
<bitmap name="brushedMetal" src="bitmap/brushed_metal.jpg" />
<!--These background assets point to the bitmaps above-->
<background type="bitmap" name="onePixelNative" bitmap="onePixelBlack"
repeat="repeat" alpha=".5"
/>
<background type="bitmap" name="brushedMetal" bitmap="brushedMetal"
repeat="repeat"
/>
<background type="bitmap" name="onePixel" bitmap="onePixelBlack"
repeat="repeat" alpha=".5" scaleGrid="{x:20, y:20, r:-20, b:-20}"
/>
<background type="bitmap" name="panel" bitmap="panel" repeat="repeat-scale"
scaleGrid="{x:20, y:20, r:-20, b:-20}"
/>
<background type="bitmap" name="arrow_position" bitmap="arrow"
repeat="no-repeat" x="right" y="bottom"
/>
<!--Solid background-->
<background name="myBlueBg" type="solid" color="0x0000FF" alpha="1" />
<!--Gradient background-->
<background name="redGrad" type="gradient" colors="[0x0000FF, 0xFF0000]"
alphas="[1, 1]"
/>
<!--Define a border and its background by referring to a background asset-->
<border name="myBorder" thickness="10" background="redGrad" />
<!--SWF as a background-->
<swf name="mySwf" src="swf/test_background_swf.swf" />
<background name="mySwfBg" type="swf" swf="mySwf" />
<!--Pixelbender as a background-->
<pixelbender name="blobs" src="assets/pbf/metaBlobs.pbj" />
<background name="pixelbender" type="pixelbender" pixelbender="blobs" />
<!--Fonts-->
<font name="Helvetica_Neue" src="fonts/Helvetica_Neue.swf" />
<font name="Trebuchet_MS" src="fonts/Trebuchet_MS.swf" />
<font name="Tahoma" src="fonts/Tahoma.swf" />
<font name="Arial" src="fonts/Arial.swf" />
<!--A fancy shape-->
<shape
type="morphShape"
name="myShape"
points='[[{x:0, y:0}],
[{x:"33%", y:"33%"}, {x:"66%", y:"33%"}, {x:"100%", y:0}],
[{x:"66%", y:"33%"}, {x:"66%", y:"66%"}, {x:"100%", y:"100%"}],
[{x:"66%", y:"66%"}, {x:"33%", y:"66%"}, {x:0, y:"100%"}],
[{x:"33%", y:"66%"}, {x:"33%", y:"33%"}, {x:0, y:0}]]'
/>
<!--Some filter examples (you can easily combine single filters into arrays)-->
<filter name="combo">
<item name="dropShadow" filterType="dropShadow" distance="10"
angle="45" color="0x000000" alpha=".75" blurX="10" blurY="10"
strength="1" quality="1"
/>
<item name="topWhiteHighlight" filterType="bevel" distance="11"
angle="90" highlightColor="0xFFFFFF" highlightAlpha=".75"
shadowColor="0x000000" shadowAlpha=".5" blurX="10" blurY="10"
strength="1" quality="1" type="inner"
/>
<item name="glow" filterType="glow" color="0xFFFFFF" alpha="100"
blurX="4" blurY="0" strength=".55" quality="1" inner="true"
/>
</filter>
<filter name="osxUp">
<item name="topWhiteHighlight" filterType="bevel" distance="-11"
angle="180" highlightColor="0xFFFFFF" highlightAlpha="0"
shadowColor="0xFFFFFF" shadowAlpha="100" blurX="0" blurY="0"
strength=".5" quality="1" type="inner"
/>
<item name="dropShadow" filterType="dropShadow" distance="10"
angle="90"color="0x000000" alpha="100" blurX="10" blurY="10"
strength=".30" quality="1"
/>
<item name="blur" filterType="blur" blurX="0" blurY="0"
strength=".3" quality="1"
/>
<item name="cmf" filterType="colorMatrix" red="2" green="1"
blue="1" alpha="1"
/>
</filter>
<!--A simple animation-->
<animation name="myRotation" duration="6" easing="inOutSine" >
<frame>
<action property="rotation" end="500" />
</frame>
</animation>