| Package | flash.text |
| Class | public dynamic class StyleSheet |
| Inheritance | StyleSheet  EventDispatcher Object |
| Language Version: | ActionScript 3.0 |
| Runtime Versions: | AIR 1.0, Flash Player 9, Flash Lite 4 |
To apply styles to a TextField object, assign the StyleSheet
object to a TextField object's styleSheet property.
Note: A text field with a style sheet is not editable. In other words, a text field with the type property set to TextFieldType.INPUT applies the StyleSheet to the default text for the text field, but the content will no longer be editable by the user. Consider using the TextFormat class to assign styles to input text fields.
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. |
leading
|
leading
| The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent. |
letter-spacing
|
letterSpacing
| The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added 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. |
Related API Elements
Hide Inherited Public Properties
Show Inherited Public Properties| Property | Defined By | ||
|---|---|---|---|
 | constructor : Object
A reference to the class object or constructor function for a given object instance. | Object | |
| styleNames : Array [read-only]
An array that contains the names (as strings) of all of the styles registered
in this style sheet. | StyleSheet | ||
| Method | Defined By | ||
|---|---|---|---|
Creates a new StyleSheet object. | StyleSheet | ||
| addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener
receives notification of an event. | EventDispatcher | |
Removes all styles from the style sheet object. | StyleSheet | ||
|
Dispatches an event into the event flow. | EventDispatcher | |
Returns a copy of the style object associated with the style named styleName. | StyleSheet | ||
|
Checks whether the EventDispatcher object has any listeners registered for a specific type
of event. | EventDispatcher | |
|
Indicates whether an object has a specified property defined. | Object | |
|
Indicates whether an instance of the Object class is in the prototype chain of the object specified
as the parameter. | Object | |
Parses the CSS in CSSText and loads the style sheet with it. | StyleSheet | ||
|
Indicates whether the specified property exists and is enumerable. | Object | |
|
Removes a listener from the EventDispatcher object. | EventDispatcher | |
|
Sets the availability of a dynamic property for loop operations. | Object | |
Adds a new style with the specified name to the style sheet object. | StyleSheet | ||
|
Returns the string representation of this object, formatted according to locale-specific conventions. | Object | |
|
Returns the string representation of the specified object. | Object | |
Extends the CSS parsing capability. | StyleSheet | ||
|
Returns the primitive value of the specified object. | Object | |
|
Checks whether an event listener is registered with this EventDispatcher object or any of
its ancestors for the specified event type. | EventDispatcher | |
styleNames | property |
StyleSheet | () | Constructor |
public function StyleSheet()| Language Version: | ActionScript 3.0 |
| Runtime Versions: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Creates a new StyleSheet object.
Related API Elements
clear | () | method |
public function clear():void| Language Version: | ActionScript 3.0 |
| Runtime Versions: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Removes all styles from the style sheet object.
getStyle | () | method |
public function getStyle(styleName:String):Object| Language Version: | ActionScript 3.0 |
| Runtime Versions: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Returns a copy of the style object associated with the style named styleName.
If there is no style object associated with styleName,
null is returned.
Parameters
styleName:String — A string that specifies the name of the style to retrieve.
|
Object — An object.
|
Related API Elements
Example
How to use this example
Please see the parseCSS() or transform() method's example for illustrations of how to use the
getStyle() method.
parseCSS | () | method |
public function parseCSS(CSSText:String):void| Language Version: | ActionScript 3.0 |
| Runtime Versions: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Parses the CSS in CSSText and loads the style sheet with it. If a style in
CSSText is already in styleSheet, the properties in
styleSheet are retained, and only the ones in CSSText
are added or changed in styleSheet.
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 (a string).
|
Example ( How to use this example )
In the constructor, a multiline text field is created and its content is
set to an HTML-formatted string. (The HTML heading and span tags are
not rendered before CSS style is applied.) A URLRequest
object is created to identify the location of the CSS file; for this example, the CSS file
is in the same directory as the SWF file. The file is loaded with a URLLoader
object. There are two event listeners added for the loader URLLoader object.
If an IO error occurs, the errorHandler() method is invoked, which displays
an error message in the text field. After all the data is received and placed in the data
property of the loader URLLoader object, the loaderCompleteHandler()
method is invoked. This method parses the CSS styles from the data loaded from the file and
fills the sheet StyleSheet object with the style definitions.
When the user clicks on the text field, the clickHandler() method is called.
The if statement in the clickHandler() method checks to make sure the file loading
was finished before applying the style sheet to the text field. In order for the style sheet to
take effect, the htmlText property must be reassigned with the content after the
style sheet is assigned to the text field. The CSS font-family and the color
property values for the heading tag also are appended to the content of the text field. (The values
of these properties will be "undefined" if style sheet values are not in effect.)
The following is an example of a content of the CSS file that can be used with this example.
Before running this example, create a text file, copy the following CSS content into it,
then save it with the file name test.css and place it in the same directory as the SWF file.
p {
font-family: Times New Roman, Times, _serif;
font-size: 14;
font-Style: italic;
margin-left: 10;
}
h1 {
font-family: Arial, Helvetica, _sans;
font-size: 20;
font-weight: bold;
}
.bluetext {
color: #0000CC;
}
package {
import flash.display.Sprite;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.events.IOErrorEvent;
import flash.events.Event;
import flash.events.MouseEvent;
public class StyleSheet_parseCSSExample extends Sprite {
private var loader:URLLoader = new URLLoader();
private var field:TextField = new TextField();
private var exampleText:String = "<h1>This is a headline</h1>"
+ "<p>This is a line of text. <span class='bluetext'>"
+ "This line of text is colored blue.</span></p>";
private var sheet:StyleSheet = new StyleSheet();
private var cssReady:Boolean = false;
public function StyleSheet_parseCSSExample() {
field.x = 10;
field.y = 10;
field.background = true;
field.multiline = true;
field.autoSize = TextFieldAutoSize.LEFT;
field.htmlText = exampleText;
field.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(field);
var req:URLRequest = new URLRequest("test.css");
loader.load(req);
loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
}
public function errorHandler(e:IOErrorEvent):void {
field.htmlText = "Couldn't load the style sheet file.";
}
public function loaderCompleteHandler(event:Event):void {
sheet.parseCSS(loader.data);
cssReady = true;
}
public function clickHandler(e:MouseEvent):void {
if (cssReady) {
field.styleSheet = sheet;
field.htmlText = exampleText;
var style:Object = sheet.getStyle("h1");
field.htmlText += "<p>Headline font-family is: " + style.fontFamily + "</p>";
field.htmlText += "<p>Headline color is: " + style.color + "</p>";
} else {
field.htmlText = "Couldn't apply the CSS styles.";
}
}
}
}
setStyle | () | method |
public function setStyle(styleName:String, styleObject:Object):void| Language Version: | ActionScript 3.0 |
| Runtime Versions: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Adds a new style with the specified name to the style sheet object.
If the named style does not already exist in the style sheet, it is added.
If the named style already exists in the style sheet, it is replaced.
If the styleObject 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
styleName:String — A string that specifies the name of the style to add to the style sheet.
| |
styleObject:Object — An object that describes the style, or null.
|
transform | () | method |
public function transform(formatObject:Object):flash.text:TextFormat| Language Version: | ActionScript 3.0 |
| Runtime Versions: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Extends the CSS parsing capability. Advanced developers can override this method by extending the StyleSheet class.
Parameters
formatObject:Object — An object that describes the style, containing style rules as properties of the object,
or null.
|
flash.text:TextFormat — A TextFormat object containing the result of the mapping of CSS rules
to text format properties.
|
Related API Elements
Example ( How to use this example )
transform() method to apply a style
from a CSS file to a TextFormat object for a text field.
CSS styles are used usually to format HTML content. However,
by using transform() method of a StyleSheet object, specific
CSS styles can be assigned to a TextFormat object and then applied to any text field.
The URLRequest and URLLoader objects are used to
load the CSS file. An event listener is added for the Event.COMPLETE
event, which occurs after all the data is received and placed in the data property of the
loader URLLoader object. The loaderCompleteHandler() method
then parses the CSS from the data loaded from the file and fills the sheet
StyleSheet object with the styles. The getStyle() method of the style sheet
retrieves the HTML paragraph styles, which are then assigned to the cssFormat
TextFormat object by using style sheet's transform() method. Finally, the default text
format of the inputField text field is set to the new cssFormat text format.
package {
import flash.display.Sprite;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFieldType;
import flash.events.IOErrorEvent;
import flash.events.Event;
public class StyleSheet_transformExample extends Sprite {
private var loader:URLLoader = new URLLoader();
private var inputField:TextField = new TextField();
private var sheet:StyleSheet = new StyleSheet();
public function StyleSheet_transformExample() {
inputField.x = 10;
inputField.y = 10;
inputField.background = true;
inputField.width = 300;
inputField.height = 200;
inputField.wordWrap = true;
inputField.multiline = true;
inputField.type = TextFieldType.INPUT;
addChild(inputField);
var req:URLRequest = new URLRequest("test.css");
loader.load(req);
loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
}
public function errorHandler(e:IOErrorEvent):void {
inputField.htmlText = "Couldn't load the style sheet file.";
}
public function loaderCompleteHandler(event:Event):void {
var cssFormat:TextFormat = new TextFormat();
sheet.parseCSS(loader.data);
var style:Object = sheet.getStyle("p");
cssFormat = sheet.transform(style);
inputField.defaultTextFormat = cssFormat;
}
}
}
package {
import flash.display.Sprite;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
public class StyleSheetExample extends Sprite {
public function StyleSheetExample() {
var style:StyleSheet = new StyleSheet();
var heading:Object = new Object();
heading.fontWeight = "bold";
heading.color = "#FF0000";
var body:Object = new Object();
body.fontStyle = "italic";
style.setStyle(".heading", heading);
style.setStyle("body", body);
var label:TextField = new TextField();
label.styleSheet = style;
label.htmlText = "<body><span class='heading'>Hello </span>World...</body>";
addChild(label);
}
}
}
Mon Apr 10 2017, 12:28 PM -07:00