Broken htmlText in Actionscript 3.0 - funky display from incremented display using string.substring

Question

This is an issue with textField.htmlText in actionScript 3.0 and the class I'm making for it.

In an attempt not to post my whole class, I've managed to boil down the problem to what seems like a silly and almost impossible-to-overcome issue. It seems that TextFields (specifically, ones created with ActionScript) have an unbearably hard time with a Type-Writing effect created by

myTextField.htmlText =  myString.substr(0, length);

where length is an ever-increasing increment. Let's get a more specific example, however. To start, we have some random string on frame 1 of our .fla file:

var Text0:String = 'It wasn\'t like we didn\'t have love. John and I shared much of our love, but for some reason something went terribly wrong one day...\nWe talked less, we saw each other less, we hardly even got to know each other anymore. The love was dried up, and if I stayed I would have withered, and choked on words I could never share...';

Using my class, it takes this string and for X keywords applies Y HTML tags around those words:

var textBuildah = new textBuilder(); //Class name, for this example, is textBuilder
Text0 = textBuildah.htmlModify(Text0, ['love', 'red'], ['we', '~#FCFE12']);

This takes Text0 (we're still in the Actions of Frame 1 here) and does this to it:

trace(Text0) // Outputs: It wasn't like <FONT COLOR="#FCFE12">we</FONT> didn't have <FONT COLOR="#FF0000">love</FONT>. John and I shared much of our <FONT COLOR="#FF0000">love</FONT>, but for some reason something <FONT COLOR="#FCFE12">we</FONT>nt terribly wrong one day... We talked less, <FONT COLOR="#FCFE12">we</FONT> saw each other less, <FONT COLOR="#FCFE12">we</FONT> hardly even got to know each other anymore. The <FONT COLOR="#FF0000">love</FONT> was dried up, and if I stayed I would have withered, and choked on words I could never share...

I'm assuming all those HTML tags are correct. Then, we do this:

textBox.htmlText = Text0 //textBox is a text field that was put on the stage and named "textBox" using the properties window

And it displays exactly as I want it (bottom right of this picture) [ i49.tinypic.com/2upts1v.jpg ]. Add http:// to see it.

Then, I erase the line of code above, and try this:

var Length:Number = 0;
textBox.addEventListener(Event.ENTER_FRAME, writeText);

function writeText(e:Event):void {
    if (Length < Text0.length) {
        Length ++;
        e.currentTarget.htmlText = Text0.substring(0, Length);
        trace(e.currentTarget.htmlText+"\n"+e.currentTarget.name+"\n");
    } else {
        e.currentTarget.htmlText = Text0;
        e.currentTarget.removeEventListener(Event.ENTER_FRAME, writeText);
    }
}

And, it works like just doing textBox.htmlText = Text0;

Then, we try something new. We create a textField using ActionScript, and apply the same Event Listener to it:

var LengthTwo:Number = 0;
var myTextField = new TextField();
myTextField.x = 100
myTextField.y = 100;
myTextField.width = 200;
myTextField.height = 150;
myTextField.wordWrap = true;

addChild(myTextField);

mytextField.addEventListener(Event.ENTER_FRAME, writeText);

function writeTextTwo(e:Event):void {
if (LengthTwo < Text0.length) {
    LengthTwo++;
    e.currentTarget.htmlText = Text0.substring(0, Length);
    trace(e.currentTarget.htmlText+"\n"+e.currentTarget.name+"\n");
} else {
    e.currentTarget.htmlText = Text0;
    e.currentTarget.removeEventListener(Event.ENTER_FRAME, writeText);
}
}

It produces something like you see in the center of this picture. [ i49.tinypic.com/2upts1v.jpg ]. Add http:// to see it. Also, while it types, it changes colors frequently and disorientatingly. I did a few traces, and I realized that the htmlText of the myTextField has extra tags at the beginning of it. Here's a snapshot of one of the traces:

<P ALIGN="LEFT"><FONT FACE="Times Roman" SIZE="12" COLOR="#FF0000" LETTERSPACING="0" KERNING="0">It wasn&apos;t like <FONT COLOR="#FCFE12">we</FONT> didn&apos;t have love. John and I shared much of our love, but for some reason something <FONT COLOR="#FCFE12">we</FONT>nt terribly wrong one day...</FONT></P><P ALIGN="LEFT"><FONT FACE="Times Roman" SIZE="12" COLOR="#FF0000" LETTERSPACING="0" KERNING="0">We talked less, <FONT COLOR="#FCFE12">we</FONT> saw each other less, <FONT COLOR="#FCFE12">we</FONT> hardly even got to know each other anymore. The love was dried up, and if I stayed I would have withered, and choked on words I could never share..</FONT></P>
instance5

<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Calibri" SIZE="10" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">It wasn&apos;t like <FONT COLOR="#FCFE12">we</FONT> didn&apos;t have <FONT COLOR="#FF0000">love</FONT>. John and I shared much of our <FONT COLOR="#FF0000">love</FONT>, but for some reason something <FONT COLOR="#FCFE12">we</FONT>nt terribly wrong one day...</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Calibri" SIZE="10" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">We talked less, <FONT COLOR="#FCFE12">we</FONT> saw each other less, <FONT COLOR="#FCFE12">we</FONT> hardly even got to know each other anymore. The <FONT COLOR="#FF0000">love</FONT> was dried up, and if I stayed I would have withered, and choked on words I could never share..</FONT></P></TEXTFORMAT>
textBox

I've realized that throughout this process, a Text Field put on the stage and set to Render HTML Tags will keep it's beginning tags

<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Calibri" SIZE="10" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">

There and simply make changes to the specified pieces inside. However, for a Text Box added VIA Actionscript 3.0, it changes any of the above starter-tags as the writeText function goes on and the subString starts to include more and more HTML tags.

Does anyone have any idea what I'm missing? Is there a property I need to define to get rid of this weird effect?

Also, if the explanation was too long, this is a .fla that produces exactly the same problem I've been having. The middle textfield is the problem. The textField in the bottom-right corner is not a problem.

If you can't handle .fla that's made for CS3/4, have this:

var Text0:String = 'It wasn\'t like <font color = "#FCFE12">we</font> didn\'t have <font color = "#FF0000">love</font>. John and I shared much of our <font color = "#FF0000">love</font>, but for some reason something <font color = "#FCFE12">we</font>nt terribly wrong one day...\nWe talked less, <font color = "#FCFE12">we</font> saw each other less, <font color = "#FCFE12">we</font> hardly even got to know each other anymore. The <font color = "#FF0000">love</font> was dried up, and if I stayed I would have withered, and choked on words I could never share...';
var myTextField:TextField = new TextField();
var Length:Number = 0;
var LengthTwo:Number = 0;
myTextField.x = 75;
myTextField.y = 100;
myTextField.width = 400;
myTextField.height = 150;
myTextField.wordWrap = true;
myTextField.textColor = 0xFFFFFF;
addChild(myTextField);

textBox.addEventListener(Event.ENTER_FRAME, writeText);
myTextField.addEventListener(Event.ENTER_FRAME, writeTextTwo);

function writeText(e:Event):void {
    if (Length < Text0.length) {
        Length ++;
        e.currentTarget.htmlText = Text0.substring(0, Length);
        trace(e.currentTarget.htmlText+"\n"+e.currentTarget.name+"\n");
    } else {
        e.currentTarget.htmlText = Text0;
        e.currentTarget.removeEventListener(Event.ENTER_FRAME, writeText);
    }
}

function writeTextTwo(e:Event):void {
if (LengthTwo < Text0.length) {
    LengthTwo++;
    e.currentTarget.htmlText = Text0.substring(0, Length);
    trace(e.currentTarget.htmlText+"\n"+e.currentTarget.name+"\n");
} else {
    e.currentTarget.htmlText = Text0;
    e.currentTarget.removeEventListener(Event.ENTER_FRAME, writeText);
}
}

So far, I have tried setting the TextFormat for myTextField right underneath the textField definition. Then I tried setting a specific TextFormat outside of the field. I've tried making the defaultTextFormat a new format, I've tried resetting the style sheet within the writeText function... It's been a little bit of a logistical nightmare for me. I have no idea how to stop the weird color changes in the .fla...

The problem doesn't only happen with color, however. It happens with bold, italics, etc. that you put into the function and do that Type-Writing effect upon. However, if you just set htmlText = x, then it looks fine.

Any ideas?

EDIT: There seems to be a slight problem with implementing the same things using Bold, Italics, Underline, etc. If anyone has any idea on how to do that with the above text, or to create a similar effect using htmltext with bold, italics, etc - answer here!

Answer 1

You can see in your IDE created TextField that you have a default TextFormat that is present whenever you change the text that reset the font,color,size, etc..

So for your dynamic as3 TextField create a new TextFormat with all your format you want to keep and then in you event listener just reset the defaultTextFormat property before writting it:

var Text0:String = 'It wasn\'t like <font color = "#FCFE12">we</font> didn\'t have <font color = "#FF0000">love</font>. John and I shared much of our <font color = "#FF0000">love</font>, but for some reason something <font color = "#FCFE12">we</font>nt terribly wrong one day...\nWe talked less, <font color = "#FCFE12">we</font> saw each other less, <font color = "#FCFE12">we</font> hardly even got to know each other anymore. The <font color = "#FF0000">love</font> was dried up, and if I stayed I would have withered, and choked on words I could never share...';
var myTextField:TextField = new TextField();
var Length:Number = 0;
var LengthTwo:Number = 0;
myTextField.x = 75;
myTextField.y = 100;
myTextField.width = 400;
myTextField.height = 150;
myTextField.wordWrap = true;
addChild(myTextField);

// create a TextFormat
var tf:TextFormat = new TextFormat("Calibri", 10, 0xffffff);

myTextField.addEventListener(Event.ENTER_FRAME, writeTextTwo);

function writeTextTwo(e:Event):void {
  if (LengthTwo < Text0.length) {
    LengthTwo++;

    // reset the default TextFomat
    e.currentTarget.defaultTextFormat = tf;

    e.currentTarget.htmlText = Text0.substring(0, Length);
    trace(e.currentTarget.htmlText+"\n"+e.currentTarget.name+"\n");
  } else {
    e.currentTarget.htmlText = Text0;
    e.currentTarget.removeEventListener(Event.ENTER_FRAME, writeText);
  }
}