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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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://blog.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
Loading ...
15 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!