Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Working with Text and Strings > Formatting text with Cascading Style Sheet styles > Applying a style sheet to a TextArea component

Applying a style sheet to a TextArea component

To apply a style sheet to a TextArea component, you create a style sheet object and assign it HTML styles using the TextField.StyleSheet class. You then assign the style sheet to the TextArea component's styleSheet property.

The following examples create a style sheet object, styles, and assign it to the myTextArea component instance.

Using a style sheet with a TextArea component:

1. Create a new Flash document and save it as textareastyle.fla.
2. Drag a TextArea component from the User Interface folder of the Components panel to the Stage and give it an instance name of myTextArea.
3. Add the following ActionScript to Frame 1 of the main Timeline:

   // Create a new style sheet object and set styles for it.
   var styles:TextField.StyleSheet = new TextField.StyleSheet();
   styles.setStyle("html", {fontFamily:'Arial,Helvetica,sans-serif',
                       fontSize:'12px',
                       color:'#0000FF'});
   styles.setStyle("body", {color:'#00CCFF',
                       textDecoration:'underline'});
   styles.setStyle("h1",{fontFamily:'Arial,Helvetica,sans-serif',
                       fontSize:'24px',
                       color:'#006600'});
   
   /* Assign the style sheet object to myTextArea component. Set html property to true, set styleSheet property to the style sheet object. */
   myTextArea.styleSheet = styles;
   myTextArea.html = true;
   
   var myVars:LoadVars = new LoadVars();
   // Define onData handler and load text to be displayed.
   myVars.onData = function(myStr:String):Void {
       if (myStr != undefined) {
           myTextArea.text = myStr;
       } else {
           trace("Unable to load text file.");
       }
   };
   myVars.load("http://www.helpexamples.com/flash/myText.htm");
   

   The preceding block of code creates a new TextField.StyleSheet instance that defines three styles: for the html, body, and h1 HTML tags. Next, the style sheet object is applied to the TextArea component and HTML formatting is enabled. The remaining ActionScript defines a LoadVars object that loads an external HTML file and populates the text area with the loaded text.

4. Select Control > Test Movie to test the Flash document.

Flash CS3

Comments

Add Comment

No screen name said on Feb 4, 2008 at 10:14 AM :

There seems to be a problem here. The TextArea component does not have a "styleSheet" property!

adbe_paul said on Feb 7, 2008 at 10:19 AM :

This page describes the ActionScript 2.0 TextArea component, which does have a .styleSheet property. Perhaps you are thinking of the ActionScript 3.0 (Flash CS3) TextArea component?

LannyMcNie said on Mar 4, 2008 at 8:16 AM :

The CS3 components do not support stylesheets natively. It can easily be added by extending the component. Here is a tutorial with source code: http://www.gskinner.com/blog/archives/2008/03/adding_css_supp.html

Also note that TextFields with stylesheets are not editable.

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00000913.html

Add Comment