Actionscript: TextFormat vs StyleSheet

For handling formatting of TextFields in Actionscript, your two easy options are TextFormat and StyleSheets. And they are mostly equivalent in the level of formatting control that they offer:

TextFormat StyleSheet Note
blockIndent - value to indent entire block instead of only first line
- display Supported values are inline, block, none
bold fontWeight TF: true|false; SS: normal:bold
bullet - TF: part of bulleted list
color color TF: AS notation (0xFFFFFF); SS: HTML (#FFFFFF)
font fontFamily TF: 1 font; SS: uses comma separated list of fonts
indent textIndent  
italic fontStyle TF: true|false; SS: normal|italic
kerning kerning  
leading leading  
leftMargin marginLeft  
letterSpacing letterSpacing  
rightMargin marginRight  
size fontSize  
tabStops - Size of tab
target - target of link if url != null
underline textDecoration TF: true|false; SS: none|underline
url - Setting to non-null value makes text a clickable link

(Created from Adobe docs on StyleSheets and TextFormat)

The use of the two types of flash text formatting options are very similar as well:

// TextFormat

var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.color = 0xFF0000;
format.size = 10;
format.underline = true;

var myTextField:TextField = new TextField();
myTextField.text = "Hello World";
myTextField.defaultTextFormat format;
addChild(myTextField);

//StyleSheet

var style:StyleSheet = new StyleSheet();

var myStyle:Object = new Object();
myStyle.fontFamily = "Verdana";
myStyle.color = "#FF0000";
myStyle.fontSize = 10;
myStyle.fontStyle = "italic";

style.setStyle(".myClass",myStyle);

var myTextField:TextField = new TextField();
myTextField.style = style;
myTextField.htmlText = "<span class='myClass'>Hello World</style>";

addChild(myTextField);

You can probably see that, given the ability to create CSS class definitions, the StyleSheet route gives more control over the appearance of your text. It was for that reason, and because I read a helpful post on rollovers with StyleSheets that I had originally implemented my most recent simple actionscript menu with styles. StyleSheets are also nice as they relieve you of the burden of manually having to attach listeners for MOUSE_OVER/MOUSE_OUT or ROLL_OVER/ROLL_OUT (there are differences, but they can be functionally equivalent).

But it ultimately kicked me in the ass and I discovered that there are reasons to still use TextFormat. My specific problem was that, on the ROLL_OVER, I was increasing the font size of my menu item and all of the growth pushed down and to the right. There are times that this might be desirable, but not for this project. Instead, I wanted to grow the size in both left and right (I was good with down). And at this point it becomes apparent that CSS is not the same as CSS-P and there is not a mechanism for specifying positioning information in the CSS class. So I kept the StyleSheet, but added the event listeners to yank the TextField leftwards on ROLL_OVER and restore it on ROLL_OUT. This, I told myself, would be a simple way to resolve the problem. And it was, even though it didn't work well. For reasons that defied my ability to diagnose, the event firing of the ROLL_OVER/ROLL_OUT was not synchronized with the application of the styles. The net effect would be odd combination of movement and resizing that never predictably came together in anything one might consider smooth.

So, after setting the problem aside for awhile, I came back with the happy realization that my menu items were very simple one word phrases and that I didn't need any of the nifty extra class specification that StyleSheets offer. In fact, I was just setting a font family, color, and size. So, since I was listening for the ROLL_OUT/ROLL_OVER anyway, manually substituting the TextFormat at the same time and through the same method allowed for predictable behavior. And all was well and we lived happily ever after with code that looked like:

// Snipped & Simplified (STUFF IS MISSING!!)

private var _overFormat:TextFormat;
private var _outFormat:TextFormat;

private function init(e:Event = null):void {
// ....

// entry point

_overFormat = new TextFormat();
_outFormat = new TextFormat();

_overFormat.color = 0xFFFF00;
_overFormat.size = 20;
_overFormat.font = "Arial";

_outFormat.color = 0x0000FF;
_outFormat.size = 14;
_outFormat.font = "Arial";

// ....
    
myTextField.addEventListener(MouseEvent.ROLL_OVER, slide);
myTextField.addEventListener(MouseEvent.ROLL_OUT, slide);
}




private function slide(e:MouseEvent):void {            
var vectorX:int = 0;
switch(e.type) {
case "rollOver":                    
vectorX = -15;
TextField(e.currentTarget).setTextFormat(_overFormat);
break;
case "rollOut":
vectorX = 15;
TextField(e.currentTarget).setTextFormat(_outFormat);
break;
}            

TextField(e.currentTarget).x += vectorX;
}

So the happy moral of the story is that while StyleSheets are great and they can solve some otherwise painful formatting problems, don't count the TextFormat out in its ability to come through in other situations.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
BlogCFC was created by Raymond Camden. This blog is running version 5.9.1.001. Contact Blog Owner