MACROMEDIA FLASH MX 2004 - ACTIONSCRIPT - Page 145

Formatting text with Cascading Style Sheets 145
9 Open the Actions panel (Window > Development Panels > Actions) and add the following code
to the Actions panel:
// Create a new style sheet object
var style_sheet = new TextField.StyleSheet();
// Location of CSS file that defines styles
var css_url = "html_styles.css";
// Create some HTML text to display
var storyText:String = "<p class='headline'>Flash Player now supports
Cascading Style Sheets!</p><p><span class='byline'>San Francisco, CA</
span>--Macromedia Inc. announced today a new version of Flash Player that
supports Cascading Style Sheet (CSS) text styles. For more information,
visit the <a href='http://www.macromedia.com'>Macromedia Flash web site.</
a></p>";
// Load CSS file and define onLoad handler:
style_sheet.load(css_url);
style_sheet.onLoad = function(ok) {
if (ok) {
// If the style sheet loaded without error,
// then assign it to the text object,
// and assign the HTML text to the text field.
news_txt.styleSheet = style_sheet;
news_txt.text = storyText;
}
};
Note: For simplicity, the HTML text being styled is “hard-coded” into the script; in a real-world
application you’ll probably want to load the text from an external file. For information on loading
external data, see Chapter 10, “Working with External Data,” on page 177.
10 Save the file as news_html.fla to the same directory that contains the CSS file you
created previously.
11 Run the movie (Control > Test Movie) to see the styles applied to the HTML
text automatically.
Using styles to define new tags
If you define a new style in a style sheet, that style can be used as a tag, just as you would use a
built-in HTML tag. For example, if a style sheet defines a CSS style named
sectionHeading,
you can use
<sectionHeading> as an element in any text field associated with the style sheet.
This feature lets you assign arbitrary XML-formatted text directly to a text field, so that the text
will be automatically formatted using the rules in the style sheet.
For example, the following style sheet creates the new styles
sectionHeading, mainBody,
and emphasized.
sectionHeading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px; display: block
}
mainBody {
color: #000099;
text-decoration: underline;
font-size: 12px; display: block
}
emphasized {
font-weight: bold; display: inline
}