Styling a Flex Button control using embedded fonts(转载)

it2024-11-22  27

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.

View MXML

<?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″.

转载:http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/

转载于:https://www.cnblogs.com/wuhenke/archive/2010/02/08/1665863.html

相关资源:数据结构—成绩单生成器
最新回复(0)