Monday, April 20, 2009

Styling text within Flash TextField using ActionScript3 & external CSS file

I've made an example for styling text in an ActionScript3 project without using any Flex classes.
I embedded font, css & xml-files - feel free to load these at runtime.

source

Embed your fonts, styles & data
[Embed(source="/assets/font/Verdana.ttf", fontFamily="embeddedFont", mimeType="application/x-font-truetype")]
private static const embeddedFont:Class;
[Embed(source="/assets/font/Verdana Bold.ttf", fontFamily="embeddedFontBold", fontWeight="bold", mimeType="application/x-font-truetype")]
private static const embeddedFontBold:Class;
[Embed(source="/assets/css/textFieldStyles.css", mimeType="application/octet-stream")]
public static const styleSheet:Class;
[Embed(source="/assets/xml/data.xml", mimeType="application/octet-stream")]
public static const xmlData:Class;
Register fonts
public function Application() {
Font.registerFont(embeddedFont);
Font.registerFont(embeddedFontBold);
createTextField();
}
Create TextField, assign StyleSheet and data
private function createTextField():void {
var textField:TextField = new TextField();
addChild(textField);

textField.width = 500;
textField.multiline = true;
textField.wordWrap = true;
textField.autoSize = TextFieldAutoSize.LEFT;
textField.embedFonts = true;
textField.antiAliasType = AntiAliasType.ADVANCED;

textField.styleSheet =
StyleSheetUtil.forClassDefinition(styleSheet);
textField.htmlText = new XML(new xmlData());
}

No comments:

Post a Comment