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

5 Jun 2008

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

Author: Evan Mullins | Filed under: tutorial

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

Tags: actionscript, as2, css, flash, html, open source, tutorial

This entry was posted on Thursday, June 5th, 2008 at 8:03 pm and is filed under tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

15 Responses to “Style htmlText with CSS in your Actionscript | Flash/CSS Tutorial”

web design says: June 6th, 2008 at 12:58 pm
Excellent improvement.
Peter V Cook says: September 6th, 2008 at 4:50 pm
Thank you, very straightforward example!
Hz says: October 20th, 2008 at 2:43 pm
I don’t know but i don’t see your tag working.. looks bold to me and not italic.
Evan Mullins says: October 20th, 2008 at 9:54 pm
My bad…
line 17 in the source code should read:

1
myCSS.setStyle("em", {fontStyle:'italic'});

Thanks for pointing that out Hz
mata says: October 27th, 2008 at 4:39 pm
cool one thanks
Online Portfolio - Safwan Ahmedmia says: January 14th, 2009 at 9:34 am
Great tutorial, was a great help,

Many thanks,

Saf
David says: May 15th, 2009 at 1:20 pm
Thanks for the tutorial. I think you should mention that this tutorial is for AS2 somewhere though.
Evan Mullins says: May 17th, 2009 at 10:05 am
@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
luigi says: July 8th, 2009 at 6:24 am
hi and thanks
is possible pick the text from a .txt file?
circlecube says: July 8th, 2009 at 3:32 pm
@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!
karstor says: December 9th, 2009 at 12:50 pm
dude, this is the best, simplest and most straight-forward tutorial I have come accross on the Web. Very well done and many thanks!
Gav says: January 8th, 2010 at 9:27 pm
You didn’t define data type for myHtml.
Evan Mullins says: January 8th, 2010 at 11:01 pm
@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?
Gav says: January 10th, 2010 at 1:04 pm
Thanks Even for your prompt reply, it will be highly appreciated if you could write a new one.
Gav says: January 10th, 2010 at 1:07 pm
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!