TextField

Class StyleSheet

Object

public class StyleSheet
extends Object

Player version:

Flash Player 7

The StyleSheet class lets you create a StyleSheet object that contains text formatting rules for font size, color, and other styles. You can then apply styles defined by a style sheet to a TextField object that contains HTML- or XML-formatted text. The text in the TextField object is automatically formatted according to the tag styles defined by the StyleSheet object. You can use text styles to define new formatting tags, redefine built-in HTML tags, or create style classes that you can apply to certain HTML tags.

To apply styles to a TextField object, assign the StyleSheet object to a TextField object's styleSheet property.

Flash Player supports a subset of properties in the original CSS1 specification (www.w3.org/TR/REC-CSS1). The following table shows the supported Cascading Style Sheet (CSS) properties and values, as well as their corresponding ActionScript property names. (Each ActionScript property name is derived from the corresponding CSS property name; if the name contains a hyphen, the hyphen is omitted and the subsequent character is capitalized.)

CSS property	ActionScript property	Usage and supported values
`color`	`color`	Only hexadecimal color values are supported. Named colors (such as `blue`) are not supported. Colors are written in the following format: `#FF0000`.
`display`	`display`	Supported values are `inline`, `block`, and `none`.
`font-family`	`fontFamily`	A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it is converted to an appropriate device font. The following font conversions are available: `mono` is converted to `_typewriter`, `sans-serif` is converted to `_sans`, and `serif` is converted to `_serif`.
`font-size`	`fontSize`	Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
`font-style`	`fontStyle`	Recognized values are `normal` and `italic`.
`font-weight`	`fontWeight`	Recognized values are `normal` and `bold`.
`kerning`	`kerning`	Recognized values are `true` and `false`. Kerning is supported for embedded fonts only. Certain fonts, such as Courier New, do not support kerning. The kerning property is only supported in SWF files created in Windows, not in SWF files created on the Macintosh. However, these SWF files can be played in non-Windows versions of Flash Player and the kerning still applies.
`letter-spacing`	`letterSpacing`	The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added to the advance after each character. A negative value condenses the space between characters. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
`margin-left`	`marginLeft`	Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
`margin-right`	`marginRight`	Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
`text-align`	`textAlign`	Recognized values are `left`, `center`, `right`, and `justify`.
`text-decoration`	`textDecoration`	Recognized values are `none` and `underline`.
`text-indent`	`textIndent`	Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

You can use the StyleSheet class to perform low-level text rendering. However, in Flex, you typically use the Label, Text, TextArea, and TextInput controls to process text.

Property Summary

Properties inherited from class Object

__proto__, __resolve, constructor, prototype

Event Summary
	`onLoad = function(success:Boolean) {}` Invoked when a `load()` operation has completed.

Constructor Summary
	`StyleSheet()` Creates a StyleSheet object.

Method Summary
	`clear() : Void` Removes all styles from the specified StyleSheet object.
	`getStyle(name:String) : Object` Returns a copy of the style object associated with the specified style (`name`).
	`getStyleNames() : Array` Returns an array that contains the names (as strings) of all of the styles registered in this style sheet.
	`load(url:String) : Boolean` Starts loading the CSS file into the StyleSheet.
	`parseCSS(cssText:String) : Boolean` Parses the CSS in `cssText` and loads the StyleSheet with it.
	`setStyle(name:String, style:Object) : Void` Adds a new style with the specified name to the StyleSheet object.
	`transform(style:Object) : TextFormat` Extends the CSS parsing capability.

Methods inherited from class Object

addProperty, hasOwnProperty, isPropertyEnumerable, isPrototypeOf, registerClass, toString, unwatch, valueOf, watch

Event Detail

onLoad Event Handler

public onLoad = function(success:Boolean) {}

Player version:

Flash Player 7

Invoked when a load() operation has completed. If the StyleSheet loaded successfully, the success parameter is true. If the document was not received, or if an error occurred in receiving the response from the server, the success parameter is false.

Parameters

success:Boolean — A Boolean value that indicates whether the CSS file loaded successfully (true) or not (false).

Example
The following example loads the CSS file named styles.css into the StyleSheet object my_styleSheet. When the file has finished loading successfully, the StyleSheet object is applied to a TextField object named news_txt.

import TextField.StyleSheet;
this.createTextField("news_txt", 999, 10, 10, 320, 240);
news_txt.multiline = true;
news_txt.wordWrap = true;
news_txt.html = true;

var my_styleSheet:StyleSheet = new StyleSheet();
my_styleSheet.onLoad = function(success:Boolean) {
    if (success) {
    news_txt.styleSheet = my_styleSheet;
    news_txt.htmlText = "<p class=\"heading\">Heading goes here!"
        + "</p><p class=\"mainBody\">Lorem ipsum dolor "
        + "sit amet, consectetuer adipiscing elit, sed diam nonummy "
        + "nibh euismod tincidunt ut laoreet dolore magna aliquam "
        + "erat volutpat.</p>";
    }
};
my_styleSheet.load("styles.css");

For the complete code for styles.css, see the example for getStyle(). For an example of asynchronously loading style sheets using ActionScript 2.0, see the example for getStyle().

Constructor Detail

StyleSheet Constructor

public StyleSheet()

Player version:

Flash Player 7

Creates a StyleSheet object.

Example
The following example loads in a style sheet and traces the styles that load into the document. Add the following ActionScript to your ActionScript or FLA file:

import TextField.StyleSheet;
var my_styleSheet:StyleSheet = new StyleSheet();
my_styleSheet.onLoad = function(success:Boolean) {
    if (success) {
        trace("Styles loaded:");
        var styles_array:Array = my_styleSheet.getStyleNames();
        trace(styles_array.join(newline));
    } else {
        trace("Error loading CSS");
    }
};
my_styleSheet.load("styles.css");

The styles.css file contains two styles, called .heading and .mainbody, so the following information is displayed in the Output panel:The styles.css file contains two styles called .heading and .mainbody; the following information writes to the log file:


  Styles loaded:
  .heading
  .mainBody

The complete code for styles.css is found in the example for getStyle().

See also

StyleSheet.getStyle()

Method Detail

clear Method

public clear() : Void

Player version:

Flash Player 7

Removes all styles from the specified StyleSheet object.

Example
The following example loads a StyleSheet called styles.css into a SWF file, and displays the styles that are loaded in the Output panel. The following example loads a StyleSheet called styles.css into a SWF file, and writes the styles that are loaded to the log file. When you click clear_btn, all styles from the my_styleSheet object are removed.

// Create a new StyleSheet object
import TextField.StyleSheet;
var my_styleSheet:StyleSheet = new StyleSheet();

my_styleSheet.onLoad = function(success:Boolean) {
    if (success) {
        trace("Styles loaded.");
        var styles_array:Array = my_styleSheet.getStyleNames();
        for (var i = 0; I < styles_array.length; i++) {
            trace("\t"+styles_array[i]);
        }
        trace("");
    } else {
        trace("Error loading CSS");
    }
};

// Start the loading operation
my_styleSheet.load("styles.css");

clear_btn.onRelease = function() {
    my_styleSheet.clear();
    trace("Styles cleared.");
    var styles_array:Array = my_styleSheet.getStyleNames();
    for (var i = 0; i<styles_array.length; i++) {
        trace("\t"+styles_array[i]);
    }
    trace("");
};

getStyle Method

public getStyle(name:String) : Object

Player version:

Flash Player 7

Returns a copy of the style object associated with the specified style (name). If there is no style object associated with name, the method returns null.

Parameters

name:String — The name of the style to retrieve.

Returns

Object — A style object; otherwise null.

Example
The following example loads styles from a CSS file, parses the StyleSheet and displays style names and property values in the Output panel. The following example loads styles from a CSS file, parses the StyleSheet and writes style names and property values to the log file. Create a ActionScript file called StyleSheetTracer.as and enter the following code in the file:

import TextField.StyleSheet;
class StyleSheetTracer {
    // StyleSheetTracer.displayFromURL  
    // This method displays the CSS style sheet at
    // the specified URL in the Output panel.
    static function displayFromURL(url:String):Void {
        // Create a new StyleSheet object
        var my_styleSheet:StyleSheet = new StyleSheet();
        // The load operation is asynchronous, so set up
        // a callback function to display the loaded StyleSheet. 
        my_styleSheet.onLoad = function(success:Boolean) {
            if (success) {
                StyleSheetTracer.display(this);
            } else {
                trace("Error loading style sheet "+url);
            }
        };
        // Start the loading operation.
        my_styleSheet.load(url);
    }
    static function display(my_styleSheet:StyleSheet):Void {
        var styleNames:Array = my_styleSheet.getStyleNames();
        if (!styleNames.length) {
            trace("This is an empty style sheet.");
        } else {
            for (var i = 0; i<styleNames.length; i++) {
                var styleName:String = styleNames[i];
                trace("Style "+styleName+":");
                var styleObject:Object = my_styleSheet.getStyle(styleName);
                for (var propName in styleObject) {
                    var propValue = styleObject[propName];
                    trace("\t"+propName+": "+propValue);
                }
                trace("");
            }
        }
    }
}

Create a CSS document called styles.css, which has two styles called .heading and .mainBody that define properties for font-family, font-size and font-weight. Enter the following code in the CSS document:


  /~ In styles.css ~/
  .heading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
  }
  .mainBody {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
  }

Finally, in a FLA or ActionScript file, enter the following ActionScript to load the external style sheet, styles.css:

StyleSheetTracer.displayFromURL("styles.css");

This displays the following in the Output panel:This writes the following information to the log file:


  Style .heading:
    fontWeight: bold
    fontSize: 24px
    fontFamily: Arial, Helvetica, sans-serif
  
  Style .mainBody:
    fontWeight: normal
    fontSize: 12px
    fontFamily: Arial, Helvetica, sans-serif

See also

TextField.StyleSheet#getStyleNames()

getStyleNames Method

public getStyleNames() : Array

Player version:

Flash Player 7

Returns an array that contains the names (as strings) of all of the styles registered in this style sheet.

Returns

Array — An array of style names (as strings).

Example
This example creates a StyleSheet object named styleSheet that contains two styles, heading and bodyText. It then invokes the StyleSheet object's getStyleNames() method, assigns the results to the array names_array, and displays the contents of the array in the Output panel.It then invokes the StyleSheet object's getStyleNames() method, assigns the results to the array names_array, and writes the contents of the array to the log file.

import TextField.StyleSheet;
var my_styleSheet:StyleSheet = new StyleSheet();
my_styleSheet.setStyle("heading", {fontsize:'24px'});
my_styleSheet.setStyle("bodyText", {fontsize:'12px'});
var names_array:Array = my_styleSheet.getStyleNames();
trace(names_array.join("\n"));

The following information appears in the Output panel:The following information writes to the log file:


  bodyText
  heading

See also

StyleSheet.getStyle()

load Method

public load(url:String) : Boolean

Player version:

Flash Player 7

Starts loading the CSS file into the StyleSheet. The load operation is asynchronous; use the onLoad() callback handler to determine when the file has finished loading. The CSS file must reside in the same domain as the SWF file that is loading it.

Parameters

url:String — The URL of a CSS file to load. The URL must be in the same domain as the URL where the SWF file currently resides.

Returns

Boolean — false if no parameter (null) is passed; true otherwise. Use the onLoad() callback handler to check the success of a loaded StyleSheet.

Example
For an example of asynchronously loading style sheets using ActionScript 2.0, see the example for getStyle().

The following example loads the CSS file named styles.css into the StyleSheet object my_styleSheet. When the file has loaded successfully, the StyleSheet object is applied to a TextField object named news_txt.

import TextField.StyleSheet;
this.createTextField("news_txt", 999, 10, 10, 320, 240);
news_txt.multiline = true;
news_txt.wordWrap = true;
news_txt.html = true;

var my_styleSheet:StyleSheet = new StyleSheet();
my_styleSheet.onLoad = function(success:Boolean) {
    if (success) {
    news_txt.styleSheet = my_styleSheet;
    news_txt.htmlText = "<p class=\"heading\">Heading goes here!</p>"
        + "<p class=\"mainBody\">Lorem ipsum dolor sit amet, consectetuer "
        + "adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet "
        + "dolore magna aliquam erat volutpat.</p>";
    }
};
my_styleSheet.load("styles.css");

For the complete code for styles.css, see the example for getStyle().

parseCSS Method

public parseCSS(cssText:String) : Boolean

Player version:

Flash Player 7

Parses the CSS in cssText and loads the StyleSheet with it. If a style in cssText is already in the StyleSheet, the StyleSheet retains its properties, and only the ones in cssText are added or changed.

To extend the native CSS parsing capability, you can override this method by creating a subclass of the StyleSheet class.

Parameters

cssText:String — The CSS text to parse.

Returns

Boolean — A Boolean value that indicates whether the text was parsed successfully (true) or not (false).

Example
The following example parses the CSS in css_str. The script displays information about whether it parsed the CSS successfully, and then displays the parsed CSS in the Output panel. The ActionScript writes information about whether it parsed successfully, and then writes the parsed CSS in the log file.

import TextField.StyleSheet;
var css_str:String = ".heading {font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; }";
var my_styleSheet:StyleSheet = new StyleSheet();
if (my_styleSheet.parseCSS(css_str)) {
    trace("parsed successfully");
    dumpStyles(my_styleSheet);
} else {
    trace("unable to parse CSS");
}
//
function dumpStyles(styles:StyleSheet):Void {
    var styleNames_array:Array = styles.getStyleNames();
    for (var i = 0; i<styleNames_array.length; i++) {
        var styleName_str:String = styleNames_array[i];
        var styleObject:Object = styles.getStyle(styleName_str);
        trace(styleName_str);
        for (var prop in styleObject) {
            trace("\t"+prop+": "+styleObject[prop]);
        }
        trace("");
    }
}

setStyle Method

public setStyle(name:String, style:Object) : Void

Player version:

Flash Player 7

Adds a new style with the specified name to the StyleSheet object. If the named style does not already exist in the StyleSheet, it is added. If the named style already exists in the StyleSheet, it is replaced. If the style parameter is null, the named style is removed.

Flash Player creates a copy of the style object that you pass to this method.

For a list of supported styles, see the table in the description for the StyleSheet class.

Parameters

	`name:String` — The name of the style to add to the StyleSheet.

	`style:Object` — An object that describes the style, or `null`.

Example
The following example adds a style named emphasized to the StyleSheet myStyleSheet. The style includes two style properties: color and fontWeight. The style object is defined with the {} operator.


  myStyleSheet.setStyle("emphasized", {color:'#000000',fontWeight:'bold'});

You could also create a style object using an instance of the Object class, and then pass that object (styleObj) as the style parameter, as the next example shows:

import TextField.StyleSheet;
var my_styleSheet:StyleSheet = new StyleSheet();

var styleObj:Object = new Object();
styleObj.color = "#000000";
styleObj.fontWeight = "bold";
my_styleSheet.setStyle("emphasized", styleObj);
delete styleObj;

var styleNames_array:Array = my_styleSheet.getStyleNames();
for (var i=0;i<styleNames_array.length;i++) {
    var styleName:String = styleNames_array[i];
    var thisStyle:Object = my_styleSheet.getStyle(styleName);
    trace(styleName);
    for (var prop in thisStyle) {
        trace("\t"+prop+": "+thisStyle[prop]);
    }
    trace("");
}

The following information appears in the Output panel:The following information writes to the log file:


  emphasized
    fontWeight: bold
    color: #000000

Note: Because Flash Player creates a copy of the style object you pass to setStyle(), the delete styleObj command in the code example reduces memory usage by deleting the original style object passed to setStyle().

transform Method

public transform(style:Object) : TextFormat

Player version:

Flash Player 7

Extends the CSS parsing capability. Advanced developers can override this method by extending the StyleSheet class.

Parameters

style:Object — An object that describes the style, containing style rules as properties of the object, or null.

Returns

TextFormat — A TextFormat object containing the result of the mapping of CSS rules to text format properties.

Example
The following example extends the transform() method:

import TextField.StyleSheet;
class AdvancedCSS extends StyleSheet {
    public function AdvancedCSS() {
        trace("AdvancedCSS instantiated");
    }

    public function transform(styleObject):TextFormat {
        trace("tranform called");
    }
}

Properties | Events | Methods

	Flash 8 ActionScript 2.0 Language Reference

Flash 8 ActionScript 2.0 Language Reference

Class StyleSheet

onLoad Event Handler

StyleSheet Constructor

clear Method

getStyle Method

getStyleNames Method

load Method

parseCSS Method

setStyle Method

transform Method