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
- Import TextField.StyleSheet
- create a style sheet object: var myCSS:StyleSheet = new StyleSheet();
- Specify your styles: myCSS.setStyle(“a:link”, {color:’#0000CC’,textDecoration:’underline’});
- Ensure that the text box is html enabled: myHTML.htmlText = myHTMLText;
- Apply the style sheet object to your html text box: myHTML.styleSheet = myCSS;
Example
Actionscript
import TextField.StyleSheet;
myHTMLText = "
<h1>HTML Text (sample header)</h1>
Here is some <em>sample</em> <strong>html text</strong> "+
"filling a text box <a href="http://circlecube.com">this link to circlecube</a> and example headers"+
"<h1>Header h1</h1><h2>Header h2</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";
myHTMLText = "
<h1>HTML Text (sample header)</h1>
Here is some <em>sample</em> <strong>html text</strong> "+
"filling a text box <a href="http://circlecube.com">this link to circlecube</a> and example headers"+
"<h1>Header h1</h1><h2>Header h2</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";
Download
open source flashhtmlcss.zip
21 Comments
Excellent improvement.
Thank you, very straightforward example!
I don’t know but i don’t see your tag working.. looks bold to me and not italic.
My bad…
line 17 in the source code should read:
Thanks for pointing that out Hz
cool one thanks
Great tutorial, was a great help,
Many thanks,
Saf
Thanks for the tutorial. I think you should mention that this tutorial is for AS2 somewhere though.
@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
hi and thanks
is possible pick the text from a .txt file?
@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!
dude, this is the best, simplest and most straight-forward tutorial I have come accross on the Web. Very well done and many thanks!
You didn’t define data type for myHtml.
@Gav – no requirement to define the datatype in as2. But in as3 that would be needed, should I write a new tut on how to do this in as3?
Thanks Even for your prompt reply, it will be highly appreciated if you could write a new one.
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!
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
Nice and simple tutorial. Did you writte one for actionscript 3 ?
I really don’t think the StyleSheet changed much between as2 and as3. Just a few tweaks to this example (strict typing of myHTMLText jumps out at first) and it should work just fine in as3. Have you tried it? Let us know if you find any issues and I’d be happy to write an article detailing any differences you find.
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html
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.
Hi Really… Thanks Helped Me lot
after close each tag,it is going next line
could you Please tell me the solution?
Thanks