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.


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() {
Create TextField, assign StyleSheet and data
private function createTextField():void {
var textField:TextField = new TextField();

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

textField.styleSheet =
textField.htmlText = new XML(new xmlData());

Friday, April 17, 2009

Styling text within Flex 3 TextArea using external CSS file

If you ever wondered how to use external style-sheets within a Flex 3 TextArea control to format text here's a nice solution.

example application

Embed your textfield styles in flex-applications css file
Application {
fontFamily: embeddedFont;
styleSheet: Embed(source="textFieldStyles.css", mimeType="application/octet-stream");
Create StyleSheet from style-definition and assign it and your data to the TextArea instance
private function applicationComplete():void {
textArea.styleSheet =
textArea.htmlText = data;