Style htmlText with CSS in your Actionscript | Flash/CSS Tutorial

Posted on by Evan Mullins

Overview

In flash you can have text areas that are rendered as html. You can also apply formatting styles to this html. This will show a simple example on how to apply css to html text in flash. I’ll do a simple anchor tag style to show you the ropes. We’ll style a link to be underlined and then when you hover or mouse over it, we’ll change the color. It’s a design style that is widely used online in html, but flash doesn’t natively do it. As a matter of fact, flash doesn’t even natively underline links.

Steps

  1. Import TextField.StyleSheet
  2. create a style sheet object: var myCSS:StyleSheet = new StyleSheet();
  3. Specify your styles: myCSS.setStyle(“a:link”, {color:’#0000CC’,textDecoration:’underline’});
  4. Ensure that the text box is html enabled: myHTML.htmlText = myHTMLText;
  5. Apply the style sheet object to your html text box: myHTML.styleSheet = myCSS;

Example

[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/06/flashhtmlcss.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”500″ height=”250″]

Get Adobe Flash player

[/kml_flashembed]

Actionscript

[cc lang=”actionscript”]
import TextField.StyleSheet;

myHTMLText = ”

HTML Text (sample header)

Here is some sample html text “+
“filling a text box this link to circlecube and example headers”+
“

Header h1

Header h2

“;

//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle(“body”, {fontSize:’15’,color:’#000066′});
myCSS.setStyle(“h1”, {fontSize:’25’,color:’#000000′});
myCSS.setStyle(“h2”, {fontSize:’19’,color:’#000000′});
myCSS.setStyle(“a:link”, {color:’#0000CC’,textDecoration:’none’});
myCSS.setStyle(“a:hover”, {color:’#0000FF’,textDecoration:’underline’});
myCSS.setStyle(“b”, {fontWeight:’bold’});
myCSS.setStyle(“em”, {fontWeight:’bold’});

//ensure html support and apply css to it
myHTML.html = true;
myHTML.styleSheet = myCSS;
myHTML.htmlText = myHTMLText;
//resize the textbox to exact fit the text in it
//myHTML.autoSize = “left”;
[/cc]

Download

open source flashhtmlcss.zip

24 thoughts on “Style htmlText with CSS in your Actionscript | Flash/CSS Tutorial”

  7. Thanks for the tutorial. I think you should mention that this tutorial is for AS2 somewhere though.

    1. @David – Correct, sorry I didn’t mention it. This is AS2 version, AS3 isn’t too different, I’ll have to put together an article for that. Thanks

    1. @Luigi – Yes, this is possible, I don’t remeber the syntax off the top of my head, but a well thought google search should do the trick, good luck!

  10. @Luigi – Yes, this is possible, I don't remeber the syntax off the top of my head, but a well thought google search should do the trick, good luck!

  11. dude, this is the best, simplest and most straight-forward tutorial I have come accross on the Web. Very well done and many thanks!

      2. And I also wish to store the html text in XML file, in that case I can maintain html text dynamically. Can I apply CSS to the html text which I get from XML file? Thanks a lot, Evan you are awesome guy and very helpful!

  13. muito bom mais uma pergunta

    como seria para retornar de uma xml com campo assim

    Apollo teste
    campdafjsdfjasçdfasd
    fasdkfasldkjfasd

    Portuguese to English translation:
    very good one more question

    would like to return from a well field with xml

    Apollo Test
    campdafjsdfjasçdfasd

  15. The hover functionality happens regardless of whether there is a display object in front of the text or not (the TextEvent.LINK doesn’t fire when you click the text at least so that good). I found this out when using the “hoverable” text beneath a modal window. Anyone know a trick to keep this from happening? I don’t want to have to change my styles on the fly depending on if there is a DisplayObject in front of my text or not.

  17. after close each tag,it is going next line

    could you Please tell me the solution?

    Thanks

Comments are closed.