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

June 5, 2008 • 5,145 views

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://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

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

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

web design Jun 6th, 2008 at 12:58 pm

Excellent improvement.
Peter V Cook Sep 6th, 2008 at 4:50 pm

Thank you, very straightforward example!
Hz Oct 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 Oct 20th, 2008 at 9:54 pm

My bad…
line 17 in the source code should read:
myCSS.setStyle("em", {fontStyle:'italic'});
Thanks for pointing that out Hz
mata Oct 27th, 2008 at 4:39 pm

cool one thanks