| Package | flash.text |
| Class | public dynamic class StyleSheet |
| Inheritance | StyleSheet EventDispatcherObject |
| 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'sstyleSheet property.
Note: A text field with a style sheet is not editable. In other words, a text field with thetype property set toTextFieldType.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 asblue) are not supported. Colors are written in the following format:#FF0000. |
display | display | Supported values areinline,block, andnone. |
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, andserif 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 arenormal anditalic. |
font-weight | fontWeight | Recognized values arenormal andbold. |
kerning | kerning | Recognized values aretrue andfalse. 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 areleft,center,right, andjustify. |
text-decoration | textDecoration | Recognized values arenone andunderline. |
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 | |
| Event | Summary | Defined By | ||
|---|---|---|---|---|
| [broadcast event] Dispatched when the Flash Player or AIR application gains operating system focus and becomes active. | EventDispatcher | ||
| [broadcast event] Dispatched when the Flash Player or AIR application operating loses system focus and is becoming inactive. | 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 namedstyleName. If there is no style object associated withstyleName,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 theparseCSS() ortransform() 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 inCSSText and loads the style sheet with it. If a style inCSSText is already instyleSheet, the properties instyleSheet are retained, and only the ones inCSSText are added or changed instyleSheet.
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.) AURLRequest 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 aURLLoader object. There are two event listeners added for theloader URLLoader object. If an IO error occurs, theerrorHandler() 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 theloader URLLoader object, theloaderCompleteHandler() method is invoked. This method parses the CSS styles from the data loaded from the file and fills thesheet StyleSheet object with the style definitions.
When the user clicks on the text field, theclickHandler() method is called. The if statement in theclickHandler() 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, thehtmlText property must be reassigned with the content after the style sheet is assigned to the text field. The CSSfont-family and thecolor 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 nametest.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 thestyleObject parameter isnull, 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, ornull. |
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, ornull. |
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 usingtransform() method of a StyleSheet object, specific CSS styles can be assigned to a TextFormat object and then applied to any text field.
TheURLRequest andURLLoader objects are used to load the CSS file. An event listener is added for theEvent.COMPLETE event, which occurs after all the data is received and placed in the data property of theloader URLLoader object. TheloaderCompleteHandler() method then parses the CSS from the data loaded from the file and fills thesheet StyleSheet object with the styles. ThegetStyle() method of the style sheet retrieves the HTML paragraph styles, which are then assigned to thecssFormat TextFormat object by using style sheet'stransform() method. Finally, the default text format of theinputField text field is set to the newcssFormat 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); } }}Thu Dec 6 2018, 01:12 PM -08:00