Home Contact RSS

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

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5 out of 5)
Loading ... Loading ...

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

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Actionscript

  1. import TextField.StyleSheet;
  2.  
  3. myHTMLText = "
  4. <h1>HTML Text (sample header)</h1>
  5. Here is some <em>sample</em> <strong>html text</strong> "+
  6. "filling a text box <a href="http://blog.circlecube.com">this link to circlecube</a> and example headers"+
  7. "<h1>Header h1</h1><h2>Header h2</h2>";
  8.  
  9. //create and initialize css
  10. var myCSS:StyleSheet = new StyleSheet();
  11. myCSS.setStyle("body", {fontSize:'15',color:'#000066'});
  12. myCSS.setStyle("h1", {fontSize:'25',color:'#000000'});
  13. myCSS.setStyle("h2", {fontSize:'19',color:'#000000'});
  14. myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'});
  15. myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'});
  16. myCSS.setStyle("b", {fontWeight:'bold'});
  17. myCSS.setStyle("em", {fontWeight:'bold'});
  18.  
  19. //ensure html support and apply css to it
  20. myHTML.html = true;
  21. myHTML.styleSheet = myCSS;
  22. myHTML.htmlText = myHTMLText;
  23. //resize the textbox to exact fit the text in it
  24. //myHTML.autoSize = "left";

Download

open source flashhtmlcss.zip

Tags: , , , , , ,

Related posts

flashden banner

Gravatar

web design said,

June 6, 2008 @ 12:58 pm

Excellent improvement.

RSS feed for comments on this post · TrackBack URI

Leave a Comment