Text Formatting (Italics, Bold) Bug and Solution in Flash Pro CC

I recently worked on a project that required formatted text (italics) to be read in from a file and placed into a textfield that was using an embedded font. "No problem," I thought, "I can just use the htmlText attribute." Well, it turns out that isn't the case. Flash Pro CC seems to have trouble handling italics/bold when compared to Flash CS6. To demonstrate this, let's take a look at a very simple .fla file.

First, set up the .fla by following the steps below.

1) Create a new ActionScript 3 project.
2) Create a new, dynamic textfield on the stage.
3) Specify a regular style font (I used Myriad Pro Regular).
4) Give the textfield an instance name (my_txt).

Now first, we want to establish that htmlText and the italic tag works in the first place. Pull up the actions panel (f9 on Windows) and enter the following code:

my_txt.text = "Hello, <i>World</i>!";

If you run this, you should see something like the output shown below.

That's good; that's what we expect to see.

Now let's take things a step further and embed the font on the textfield. If you run the program now, you'll notice the text is no longer italicized despite the fact that we've set it using htmlText.

This is probably not what we expect, but perhaps it is understandable. Afterall, we didn't embed any italic font. Let's fix that. Perform the following steps:

1) Create another textfield on the stage.
2) Embed the italics version of your font. (Myriad Pro Italic in my case)

This is where things get interesting. If published with Flash CS6 or lower, the text shows up as expected. The word "Hello" is normal and "World" is italicized. However, if published with Flash CC, the italics are still ignored. I tried getting this to work using several methods: embedding the italics, exporting the font for linkage, creating static fields using the font...all of this failed. There is, however, a work around using the setTextFormat method.


var italic:TextFormat = new TextFormat("Myriad Pro Italic", 16, 0x000000);
my_txt.text = "Hello, World!";

input.setTextFormat(italic, 7, 12);

This will get you italics in an embedded textfield with Flash CC. Note though, that it does not work with Flash CS6 and lower.

While the above might not seem too bad, keep in mind that this was a very contrived example. If you're working with large amounts of external text, this likely means you'll need to have your own special italic tags in the text and write a parser to find them and apply the text format as needed. This is a considerable amount of work for something that was, until recently, easily achievable using htmlText.

You can download the sample .fla file (CS6) below.

This file was tested with the following versions of Flash:

-Works with htmlText-
CS5.5
CS6

-Requires TextFormat Work Around-
CC
CC 2014

Download Test File

Bookmark and Share

4 Responses to “Text Formatting (Italics, Bold) Bug and Solution in Flash Pro CC”

  1. Hans Magnus Nedreberg says:

    Hello, and thanks for addressing this issue!

    I am working on exactly that kind of a problem with larger amounts of text, and I’m trying to look for and tags. And then apply setTextFormat. But I’m having a problem applying the formatting, even if I can trace out the indexes of the tags in the string:

    feedBackText = “This is bold, and this is some more text, and this is bold too. But this is not bold. This is bold!”;
    feedbackTextField.htmlText = feedBackText;

    textBgr.height = feedbackTextField.height;

    var startBoldPos:int = 0;
    var closeBoldPos:int = 0;
    var i:uint = 0;

    while(true) {

    startBoldPos = feedBackText.indexOf(““, startBoldPos);
    closeBoldPos = feedBackText.indexOf(“
    “, startBoldPos);

    if(startBoldPos > 0) {
    i++;
    // This line is the trouble:
    feedbackTextField.setTextFormat(_boldFormat, startBoldPos-((7)*i), closeBoldPos-((10)*i));
    trace(“i is: ” + i);
    trace(“Feedbacktext: ” + feedBackText);
    trace(“Start bold: ” + startBoldPos);
    trace(“End bold: ” + closeBoldPos + “\n”);
    } else {
    feedbackTextField.setTextFormat(_boldFormat, startBoldPos, closeBoldPos-3);
    // trace(“Feedbacktext: ” + feedBackText);
    // trace(“Start bold: ” + startBoldPos);
    // trace(“End bold: ” + closeBoldPos + “\n”);
    }

    if(startBoldPos == -1) break;
    startBoldPos = closeBoldPos;
    }

    I startBoldPos and closeBoldPos seem to trace the correct index, but if you run the code, you see that the formatting is wrong.

    Any advice?

    Thanks again,
    Hans Magnus

  2. Hans Magnus Nedreberg says:

    Sorry, my <b> tags were formatted to html in the comment above, but they were supposed to show around what is bold. Like

    startBoldPos = feedBackText.indexOf(“<b>”, startBoldPos);
    closeBoldPos = feedBackText.indexOf(“</b>”, startBoldPos);

  3. Rhuno says:

    Hi Hans,

    The problem comes from the textfield’s string being a different length than the feedBackText string. This is because the textfield htmlText does not count the html tags so this throws off your indices. What you could do is after finding the positions, remove that set of tags from your string and adjust the end tag by -3 (I think, haven’t tried it). By the end the two strings should match in length.

    I’ll look into this more later today or tomorrow to see if I can get you an example, but maybe this can get you started.

  4. Rhuno says:

    Ok, I made just a few adjustments to your code and got this working:

    var startBoldPos:int = 0;
    var closeBoldPos:int = 0;
    var i:int = -1;

    while(true) {

    startBoldPos = feedBackText.indexOf(“<b>”, startBoldPos);
    closeBoldPos = feedBackText.indexOf(“</b>”, startBoldPos);

    if(startBoldPos > 0) {
    i++;

    if(i >= 1)
    feedbackTextField.setTextFormat(_boldFormat, startBoldPos-(i*7), closeBoldPos – (i*7) – 3);
    else
    feedbackTextField.setTextFormat(_boldFormat, startBoldPos, closeBoldPos – 3);

    }
    else
    feedbackTextField.setTextFormat(_boldFormat, startBoldPos, closeBoldPos – 3);

    }

Leave a Reply

Subscribe to RSS feed FGS5 Badge