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
- 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
Tags: actionscript, as2, css, flash, html, open source, tutorial
Loading ...