Oct
27
2008

Making <p> and <br> Tags Work with htmlText in ActionScript 3.0

by   |  Posted in Tutorials  |  34 comments

I had one hell of a time trying to figure out why my paragraph breaks (<p>) and line breaks (<br>) were not working when I was using htmlText in Flash CS3 with ActionScript 3.0. All of the other HTML tags that are allowed by Flash worked fine, but those two break tags just would do anything. I had created a TextField variable called “info” and all the code checked out but there was one very important thing that I needed to put in place before it would all work the way I needed it to.

Here is the code that wouldn’t work:

var info:TextField = new TextField();
info.htmlText = "First line. <br> Second line. <br> Third line.";
addChild(info);

Here is what is should have looked like:

var info:TextField = new TextField();
info.multiline = true;
info.htmlText = "First line. <br> Second line. <br> Third line.";
addChild(info);

Why wasn’t my original code working? Well, to make sure that the HTML tags for paragraph breaks and line breaks would function properly, I needed to set the TextField’s multiline parameter to “true”. Just one tiny line of code and then everything worked perfectly. I hate it when that happens!

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
If you liked this, please share it.

Tags: , , , , , , , , , , , , , ,

Short URL: http://bit.ly/cTPORw

Discussion 34 Comments

  1. James on May 14, 2009 at 5:21 am

    Thanks for that – that was driving me nuts! The text API in AS3 is pretty confusing really, what with html, textFormat and styleSheets all interacting in unpredictable ways.

  2. Juanlu001 on May 16, 2009 at 8:10 am

    Ohhhhhh yeah! Thank you very much!

  3. ActionCat on May 16, 2009 at 3:10 pm

    Thank god I found your article. Was driving me nuts, too.

  4. Russell on May 26, 2009 at 5:37 pm

    I also discovered that the multiline property has to be set BEFORE you set the htmlProperty, otherwise the P and BR tags will still not work.

    • Thijs on January 15, 2010 at 9:44 am

      Thanks, that fixed it for me.

    • Sai on November 3, 2010 at 8:39 am

      Thanks this article and your answer very much :D

    • chp on February 28, 2011 at 5:59 am

      This made my day!

  5. Alex on June 26, 2009 at 3:14 pm

    Thank you thank you thank you thank you thank you!!!! Wow, wasted so much time trying to figure that one out. Much appreciated!

  6. bryn on July 24, 2009 at 3:57 pm

    You Rock!

  7. max on August 21, 2009 at 6:38 am

    OMG i <3 u

  8. Jeff on August 26, 2009 at 4:30 pm

    damn, i was going crazy.. thanks for posting. i still hate as3!

  9. Gregory on September 20, 2009 at 12:46 pm

    Thanks for your post on this topic. You probably just saved me 30 minutes of digging around the Flash Docs.

  10. tano on October 12, 2009 at 3:52 pm

    great, this was really where I was looking for! lame that the appendText method is not working for htmlText as well. Anyways, thanks for the post, you really helped me out!

  11. Karen on October 20, 2009 at 11:59 pm

    I would really appreciate some help!

    I’m trying to use the TextArea component with a slider and a numeric stepper to display some text. I thought perhaps allowing the text to be enlarged would be useful for those with bad eyes, but I don’t know how to format the text (paragraphs, bold headings, regular body text …etc.)

    Initially when the TextArea comes up, it does not have the font or size that it is supposed to. The values for the slider and stepper are the same as what is in the code.

    This is the code I’m using:

    import fl.events.*;
 
ta.text = "WORK EXPERIENCE XMEDIA: Graphic &amp; Multimedia Designer (full time) July 2005 to present. Creative direction and lay-out of various types of print and online advertisements. Online advertising and promotions designed mostly in Flash accompanied with a static gif or designed only as a static gif or jpg. Print design has included retail, automotive, real estate, promotional and spec advertisements as well as special sections, internal and external posters, internal and external corporate documents, logo design, leave behinds, wrapping paper and client presentations and liaison. SAATCHI &amp; SAATCHI CANADA: Junior Art Director Internship (full time) July 2002 to present. Creative direction and lay-out of various types of print and online advertisements. Online advertising and promotions designed mostly in Flash accompanied with a static gif or designed only as a static gif or jpg. Print design has included retail, automotive, real estate, promotional and spec advertisements as well as special sections, internal and external posters, internal and external corporate documents, logo design, leave behinds, wrapping paper and client presentations and liaison.";
 
var tf:TextFormat = new TextFormat("Verdana", 20);
 
slyda.addEventListener(SliderEvent.THUMB_DRAG, slydaChange);
 
function slydaChange(e:SliderEvent):void
{
tf.size = slyda.value;
ta.setStyle("textFormat", tf);
ns.value = e.value;
}
 
ns.addEventListener(Event.CHANGE, nsChange);
 
function nsChange(e:Event):void
{
tf.size = ns.value;
ta.setStyle("textFormat", tf);
slyda.value = ns.value;
}

    I hope you can help me out!
    Thank you!!!

    • c.bavota on October 21, 2009 at 10:42 am

      Hey Karen,

      Hmm. That’s a tough one. Is the font embedded?

    • Karen on October 23, 2009 at 12:47 am

      I’m not sure how to deal with embedding fonts and making them work with the code I am using. Embedding fonts is still new to me. I did figure out how to add the fonts to my library – is that what you mean? I just don’t understand how to make it work with components.
      I hate not being able to figure something out, so I do appreciate the help a great deal.

    • c.bavota on October 26, 2009 at 1:08 pm

      Take a look at this.

      http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/

    • Jason on May 24, 2010 at 2:15 pm

      Thanks!! One less gray hair.

  12. Tobias on October 28, 2009 at 1:12 pm

    Ah Details, Details…
    After my own trials and tribulations with the break tag – Just wanted to also point out that if you are importing node text from an xml document into a text area as htmlText, and you want the break tag in particular to be recognized, you have to escape the braces in the xml node so it looks like &lb;br&rb;
    The xml document wont let you get away without a closing break, and flash wont recognize the self closing break you would usually use.
    Live and learn!

    • Tobias on October 28, 2009 at 1:19 pm

      Bah! My mind did not code complete that correctly. The properly escaped tag is <br>

    • Tobias on October 28, 2009 at 1:20 pm

      Make that

      &lt;br&gt;
  13. Brian O on November 23, 2009 at 7:46 pm

    Thanks! This was killing me for over an hour!

  14. Ondra on December 25, 2009 at 2:49 pm 
    Thanks so much, I guess every newcommer to AS3 has a hard time figuering this out
  15. Toni on February 10, 2010 at 11:33 am

    Grrrrrrrreaaaa! Thanks a lot. It was driving me crazy!

  16. actionscription on March 15, 2010 at 1:09 pm

    Remember to set your “multiline” property to true before you list your “htmlText”. This will result in the most accurate html formatting. (At least I notice a difference when I’m using the tag.)

    • actionscription on March 18, 2010 at 1:27 am

      using the list item tage ().

  17. JustAnotherDesigner on June 29, 2010 at 10:52 am

    Ohhh very nice! Thank you so much! I was wondering why the and tags weren’t working! :) Your solution fixed my code, thank you!

  18. umit on June 29, 2010 at 6:42 pm

    great tip.

  19. highfiver on September 6, 2010 at 3:11 pm

    Thanks! that was driving me crazy for a couple of hours. Also beware to heed the reminder about moving the multiline property before you set the htmlProperty. That fixed it!!!!!!

  20. RickW on October 27, 2010 at 1:12 pm

    Thank you!

  21. stltennisguy on November 10, 2010 at 3:14 pm

    Cool, thank you!

  22. Milan from SK on December 8, 2010 at 9:59 am

    Thanks, that saved me..

  23. InspiritGames on March 11, 2011 at 12:20 pm

    Thanks a lot, setting multiline parameter to true helped.

  24. X. on May 13, 2011 at 1:07 am

    Thank you.