Dynamic text style

15 posts

Flag Post

As my AS3 is improving, I need to know how to dynamically change the style of text. Here is what I have.

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
	public class Text extends Sprite {
		public var textBox:TextField;
		private var format:TextFormat;
		private const padding:uint = 20;
		private const posY:uint = 300;
		public function Text() {
			format = new TextFormat();
			format.bold = true;
			textBox = new TextField;
			textBox.x = padding;
			textBox.y = posY;
			textBox.width = stage.width-(padding*2);
			textBox.height = stage.height-posY-padding;
			textBox.setStyle("textFormat", format);
			textBox.text = "Hello, World";
			addChild(textBox);
		}
	}
}

The problem is with the format/bolding. The textBox.setStyle doesn’t work.

Also is there a way to incorporate HTML or CSS into text? That would be great, but I don’t think flash supports it.

 
Flag Post

use htmlText instead of text.

textBox.htmlText = "Hello, <b>bolded</b> World";
 
Flag Post

Very good. Does that work with all html including links? How do you change font size?

 
Flag Post

It works for most html tags. Here is a list of what it can support

Font size is in your textFormat.

format.size = 12;
 
Flag Post
Originally posted by UnknownGuardian:

It works for most html tags. Here is a list of what it can support

It’s pretty powerful. I built this site using dynamic HTML boxes (there’s a backend database and a set of ASPX scripts that generate the XML).

The only issue I had was inserting images into a textbox with the tag, the text didn’t want to wrap correctly (known issue with the Flash player), even when I specified a height.

 
Flag Post

Impossible. That site is to good for you Draco. :P

 
Flag Post

I still have the same problem though. It looks like HTML won’t be able to solve all my problems, so I need to use the TextFormat. Here is my error on line 18.

1061: Call to a possibly undefined method setStyle through a reference with static type flash.text:TextField.

Line 18 reads:

textBox.setStyle(“textFormat”, format);

 
Flag Post

To put a textFormat on a TextField, use the ‘defaultTextFormat’ property:

http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/text/TextField.html#defaultTextFormat

 
Flag Post

Ok, good it works. Is that how everybody changes their formats, by making it default?

 
Flag Post

Or you can go textField.setTextFormat(format,beginIndex,endIndex). http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/text/TextField.html#setTextFormat%28%29

 
Flag Post
Originally posted by UnknownGuardian:

Impossible. That site is to good for you Draco. :P

Well, I’ll admit that I had nothing to do with the design or the graphics, but I built 90% of the code from the ground up.

Er, maybe only 70% if you include the SWFAddress library.

There’s a few scroller objects that scroll too far, but that’s Mr. Shitty-Code’s code, which I didn’t feel like fixing. The only thing I managed to deduce was that the code was seeing the object’s height property as being ~10% larger than it really was (when using a static movieclip of 1000 pixels tall, as the Flash IDE said it was 6000 pixes, then the trace on that object.height returned 1100ish).

The only thing that could be better was if I could figure out why the Pro Bono section is so laggy, and I think that’s because Flash has to render the whole section (over 5000 pixels tall) even though most of it is under a mask.

 
Flag Post

masks are REALLY SLOW. Avoid them when you can.

 
Flag Post

That was the conclusion I came to, but I don’t know how to do it differently.

 
Flag Post
Ok, good it works. Is that how everybody changes their formats, by making it default?

It’s also worth looking up the StyleSheet class. It’s better for changing many areas at once, and is allows you to reuse CSS files to maintain a consistent theme.

var field:TextField = new TextField();
field.autoSize = "left";
field.styleSheet = new StyleSheet();

// Direct methods
field.styleSheet.parseCSS(".big{font-size:20;}");
field.styleSheet.setStyle(".small", {font-size: 5});

// From compile-time embed CSS
[Embed(source = "EmbedTheme.css", mimeType = "application/octet-stream")]
var embeddedCSS:Class;
filed.styleSheet.parseCSS(new embeddedCSS().toString());

// From run-time loaded CSS
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, function(e:Event):void {
	field.styleSheet.parseCSS(e.target.data);
});
try {
	loader.load(new URLRequest("ExternalTheme.css"));
catch (e:Error) {}

// Change dynamically
var timer:Timer = new Timer(1000);
var blink:Boolean;
timer.start();
timer.addEventListener(TimerEvent.TIMER, function (e:Event):void {
	field.styleSheet.setStyle("blink", (blink = !blink) ? {color:"#FFFFFF"} : null);
});

field.htmlText = "<blink><span class='big'>This</span> is a blink example!</blink>";
addChild(field);
The only thing that could be better was if I could figure out why the Pro Bono section is so laggy, and I think that’s because Flash has to render the whole section (over 5000 pixels tall) even though most of it is under a mask.

Did you try turning on cacheAsBitmap? I’ve heard that is much faster for large masked objects.

 
Flag Post
The only thing that could be better was if I could figure out why the Pro Bono section is so laggy, and I think that’s because Flash has to render the whole section (over 5000 pixels tall) even though most of it is under a mask.

Did you try turning on cacheAsBitmap? I’ve heard that is much faster for large masked objects.

That helped significantly. Thanks.