So I thought to make use of this technique which greatly reduces the number of images one should embed into AS3/MXML code. Also these can be scaled infinitely since they are vectors, and that is good news for mobile applications that aim multi-density screens such as mobiles and tablets or even desktop.
For this example we used the “Signify” font family:
Heres a simple View with a button made with font-icon technique:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Custon Button" currentState="out">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@font-face {
src: url("assets/signify-webfont.ttf");
fontFamily: 'Signify';
embedAsCFF: true;
}
</fx:Style>
<s:states>
<s:State name="out"/>
<s:State name="in" />
</s:states>
<s:BorderContainer height="80" borderColor="#cccccc" borderWeight="2" cornerRadius="8" mouseOver="{this.currentState='in'}" mouseOut="{this.currentState='out'}"
horizontalCenter="0" verticalCenter="0">
<s:Rect width="100%" height="100%" bottomLeftRadiusX="8" bottomLeftRadiusY="8"
bottomRightRadiusX="8" bottomRightRadiusY="8" radiusX="8" radiusY="8">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color.out="#efefef" color.in="#1e1e1e"/>
<s:GradientEntry color.out="#afafaf" color.in="#4d4d4d"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label left="20" height="100%" color.out="#131313" fontFamily="Arial" color.in="#f7f7f7" fontSize="20" fontWeight="normal"
kerning="auto" paddingTop="7" text="Test" verticalAlign="middle"/>
<s:Label right="20" height="100%" color.out="#131313" color.in="#f7f7f7" fontFamily="Signify" fontSize="20"
fontWeight="normal" text="h" verticalAlign="middle"/>
</s:BorderContainer>
</s:View>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Custon Button" currentState="out">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@font-face {
src: url("assets/signify-webfont.ttf");
fontFamily: 'Signify';
embedAsCFF: true;
}
</fx:Style>
<s:states>
<s:State name="out"/>
<s:State name="in" />
</s:states>
<s:BorderContainer height="80" borderColor="#cccccc" borderWeight="2" cornerRadius="8" mouseOver="{this.currentState='in'}" mouseOut="{this.currentState='out'}"
horizontalCenter="0" verticalCenter="0">
<s:Rect width="100%" height="100%" bottomLeftRadiusX="8" bottomLeftRadiusY="8"
bottomRightRadiusX="8" bottomRightRadiusY="8" radiusX="8" radiusY="8">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color.out="#efefef" color.in="#1e1e1e"/>
<s:GradientEntry color.out="#afafaf" color.in="#4d4d4d"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label left="20" height="100%" color.out="#131313" fontFamily="Arial" color.in="#f7f7f7" fontSize="20" fontWeight="normal"
kerning="auto" paddingTop="7" text="Test" verticalAlign="middle"/>
<s:Label right="20" height="100%" color.out="#131313" color.in="#f7f7f7" fontFamily="Signify" fontSize="20"
fontWeight="normal" text="h" verticalAlign="middle"/>
</s:BorderContainer>
</s:View>
