The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button’s default skin.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:String id="fileName" />
<mx:String id="fileSize" />
<mx:Script>
<![CDATA[
private function init():void {
var appInfo:LoaderInfo = Application.application.loaderInfo;
/* Just grab the filename from the SWF URL. */
fileName = (appInfo.url).split("/").pop();
/* Convert bytes to kilobytes. */
fileSize = (appInfo.bytesTotal / 1024).toFixed(2);
}
]]>
</mx:Script>
<mx:Style>
@font-face{
src: url("./fonts/base02.ttf");
fontFamily: "Base02";
}
.myButtonStyle {
embedFonts: true;
fontFamily: Base02;
fontWeight: normal;
fontSize: 24;
cornerRadius: 0;
letterSpacing: 4;
textRollOverColor: red;
skin: ClassReference(null);
icon: Embed(source="./assets/iconInstall.png");
}
</mx:Style>
<mx:ApplicationControlBar id="applicationControlBar" dock="true">
<mx:Label id="info" text="{fileName} ({fileSize}kb)" />
</mx:ApplicationControlBar>
<mx:Button id="btn" label="{btn.getStyle('fontFamily')}" styleName="myButtonStyle" />
</mx:Application>
View source is enabled in the following example.
I didn’t include the TrueType font in the source code ZIP. If you want to grab that exact font, head over to the creator’s site @ http://www.stereo-type.net/ and download “Base 02″.
{ 4 comments… read them below or add one }
Is there any trick to getting a common Button to use embedded fonts? I’ve got the following:
@font-face {
src: url(“fonts/Arial.ttf”);
fontFamily: ArialEmbedded;
fontStyle: normal;
fontWeight: normal;
}
Application {
color: white;
fontSize: 12px;
fontFamily: ArialEmbedded;
}
And the Button text defaults to some gross serif font. So i tried
Application, Button { …
And still nothing. So I just tried
Button {
embedFonts: true;
fontFamily: ArialEmbedded;…
Still doesn’t pick up the font. Still the serif.
Thank you.
Eric Fields,
The problem is that you only embedded the normal font weight for the Arial font, and by default the Button control’s label is bold. You have two options:
1) Set the button’s label to use normal font weight instead of bold by setting the
fontWeightstyle:<mx:Style> @font-face { src: url("fonts/Arial.ttf"); fontFamily: ArialEmbedded; fontStyle: normal; fontWeight: normal; } Application { color: white; fontSize: 12px; fontFamily: ArialEmbedded; } Button { fontWeight: normal; } </mx:Style>2) Embed both the normal and bold font weights in your application:
<mx:Style> @font-face { src: local("Arial"); fontFamily: ArialEmbedded; fontStyle: normal; font-weight: normal; } @font-face { src: local("Arial"); fontFamily: ArialEmbedded; fontStyle: normal; font-weight: bold; } Application { color: white; fontSize: 12px; fontFamily: ArialEmbedded; } </mx:Style>Peter
Thank you for this information.
I have spent many hours trying to figure out why the labels embed the font and the buttons did not. Who would have guessed that the buttons want the bold font.
Mystery Solved.
Thanks
RW
thanks for the article,i used flex button skinning using css and swf file , got idea from this tutorial
http://www.askmeflash.com/tutorial/4/skinning-a-flex-button-tutorial-using-skin-in-flex