Paquete | flash.text |
Clase | public dynamic class StyleSheet |
Herencia | StyleSheet EventDispatcher Object |
Versión del lenguaje: | ActionScript 3.0 |
Versiones de motor de ejecución: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Para aplicar estilos a un objeto TextField, asigne el objeto StyleSheet a la propiedad styleSheet
de un objeto TextField.
Nota: los campos de texto con hojas de estilos no son editables. Es decir, un campo de texto con la propiedad type
definida como TextFieldType.INPUT
aplica el objeto StyleSheet al texto predeterminado del campo de texto, pero el usuario ya no podrá editar el contenido. Utilice la clase TextFormat para asignar estilos a los campos de texto de entrada.
Flash Player admite un subconjunto de propiedades en la especificación CSS1 original (www.w3.org/TR/REC-CSS1). En la tabla siguiente, se muestran las propiedades CSS y los valores admitidos, así como los nombres de propiedad de ActionScript correspondientes. Cada nombre de propiedad de ActionScript se deriva del nombre de propiedad CSS correspondiente; si el nombre contiene un guión, éste se omite y el carácter siguiente irá en mayúscula.
Propiedad CSS | Propiedad de ActionScript | Uso y valores admitidos |
---|---|---|
color
|
color
| Sólo se admiten valores de color hexadecimales. No se admiten los nombres de los colores (como blue ). Los colores se escriben en el siguiente formato: #FF0000 . |
display
|
display
| Los valores admitidos son inline , block y none . |
font-family
|
fontFamily
| Lista de fuentes que se deben utilizar, separadas por comas, en orden descendente de conveniencia. Se puede utilizar cualquier nombre de familia de fuentes. Si especifica un nombre de fuente genérico, se convertirá a una fuente de dispositivo adecuada. Las siguientes conversiones de fuentes se encuentran disponibles: mono se convierte a _typewriter , sans-serif se convierte a _sans y serif se convierte a _serif . |
font-size
|
fontSize
| Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes. |
font-style
|
fontStyle
| Los valores reconocidos son normal e italic . |
font-weight
|
fontWeight
| Los valores reconocidos son normal y bold . |
kerning
|
kerning
| Los valores reconocidos son true y false . El kerning sólo se admite en las fuentes incorporadas. Algunas fuentes, como Courier New, no admiten el ajuste entre caracteres. La propiedad kerning sólo puede utilizarse en archivos SWF creados en Windows; no en archivos SWF creados en Macintosh. Sin embargo, estos archivos SWF pueden reproducirse en versiones que no son para Windows de Flash Player y se aplica el ajuste entre caracteres. |
leading
|
leading
| Cantidad de espacio distribuido uniformemente entre líneas. El valor especifica el número de píxeles que se añaden después de cada línea. Un valor negativo condensa el espacio entre líneas. Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes. |
letter-spacing
|
letterSpacing
| Cantidad de espacio distribuido uniformemente entre caracteres. El valor especifica el número de píxeles que se añaden después de cada carácter. Un valor negativo condensa el espacio entre caracteres. Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes. |
margin-left
|
marginLeft
| Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes. |
margin-right
|
marginRight
| Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes. |
text-align
|
textAlign
| Los valores reconocidos son left , center , right y justify . |
text-decoration
|
textDecoration
| Los valores reconocidos son none y underline . |
text-indent
|
textIndent
| Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes. |
Elementos de API relacionados
Propiedad | Definido por | ||
---|---|---|---|
constructor : Object
Una referencia a la clase de objeto o función constructora para una instancia de objeto determinada. | Object | ||
styleNames : Array [solo lectura]
Un conjunto que contiene los nombres (cadenas) de todos los estilos registrados en esta hoja de estilos. | StyleSheet |
Método | Definido por | ||
---|---|---|---|
Crea un nuevo objeto StyleSheet. | StyleSheet | ||
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registra un objeto de detector de eventos con un objeto EventDispatcher, de modo que el detector reciba la notificación de un evento. | EventDispatcher | ||
Elimina todos los estilos del objeto de hoja de estilos. | StyleSheet | ||
Distribuye un evento en el flujo del evento. | EventDispatcher | ||
Devuelve una copia del objeto de estilo asociado al estilo llamado | StyleSheet | ||
Comprueba si el objeto EventDispatcher tiene detectores registrados para un tipo concreto de evento. | EventDispatcher | ||
Indica si un objeto tiene definida una propiedad especificada. | Object | ||
Indica si hay una instancia de la clase Object en la cadena de prototipo del objeto especificado como parámetro. | Object | ||
Analiza la CSS de CSSText y carga junto a ésta la hoja de estilos. | StyleSheet | ||
Indica si existe la propiedad especificada y si es enumerable. | Object | ||
Elimina un detector del objeto EventDispatcher. | EventDispatcher | ||
Establece la disponibilidad de una propiedad dinámica para operaciones de bucle. | Object | ||
Añade un nuevo estilo con el nombre especificado en el objeto de hoja de estilos. | StyleSheet | ||
Devuelve la representación de cadena de este objeto, con formato según las convenciones específicas de configuración regional. | Object | ||
Devuelve la representación de cadena del objeto especificado. | Object | ||
Amplía la capacidad de análisis de la CSS. | StyleSheet | ||
Devuelve el valor simple del objeto especificado. | Object | ||
Comprueba si hay registrado un detector de eventos con este objeto EventDispatcher o con cualquiera de sus ascendientes para el tipo de evento concreto. | EventDispatcher |
styleNames | propiedad |
StyleSheet | () | Información sobre |
public function StyleSheet()
Versión del lenguaje: | ActionScript 3.0 |
Versiones de motor de ejecución: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Crea un nuevo objeto StyleSheet.
Elementos de API relacionados
clear | () | método |
public function clear():void
Versión del lenguaje: | ActionScript 3.0 |
Versiones de motor de ejecución: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Elimina todos los estilos del objeto de hoja de estilos.
getStyle | () | método |
public function getStyle(styleName:String):Object
Versión del lenguaje: | ActionScript 3.0 |
Versiones de motor de ejecución: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Devuelve una copia del objeto de estilo asociado al estilo denominado styleName
. Si no hay ningún objeto de estilo asociado a styleName
, se devuelve null
.
Parámetros
styleName:String — Una cadena que especifica el nombre del estilo que se va a recuperar.
|
Object — Un objeto.
|
Elementos de API relacionados
Ejemplo
Cómo utilizar este ejemplo
Consulte el ejemplo de los métodos parseCSS() o transform() para ver ilustraciones sobre cómo utilizar el método
getStyle()
.
parseCSS | () | método |
public function parseCSS(CSSText:String):void
Versión del lenguaje: | ActionScript 3.0 |
Versiones de motor de ejecución: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Analiza la CSS de CSSText
y carga junto a ésta la hoja de estilos. Si un estilo de CSSText
ya se encuentra en styleSheet
, se conservarán las propiedades de styleSheet
y sólo se añadirán o modificarán las de CSSText
en styleSheet
.
Para ampliar la capacidad de análisis de CSS, puede sustituir este método creando una subclase de la clase StyleSheet.
Parámetros
CSSText:String — El texto CSS que se va a analizar (una cadena).
|
Ejemplo ( Cómo utilizar este ejemplo )
En el constructor, se crea un campo de texto multilínea y su contenido se establece en una cadena con formato HTML. (El encabezado HTML y las etiquetas span no se procesan antes de que se aplique el estilo CSS.) Se crea un objeto URLRequest
para identificar la ubicación del archivo CSS; para este ejemplo, el archivo CSS se encuentra en el mismo directorio que el archivo SWF. El archivo se carga con un objeto URLLoader
. Hay dos detectores de eventos añadidos para el objeto URLLoader loader
. Si se produce un error de entrada o salida, se invoca el método errorHandler()
, que muestra un mensaje de error en el campo de texto. Una vez recibidos todos los datos y colocados en la propiedad data del objeto URLLoader loader
, se invoca el método loaderCompleteHandler()
. Este método analiza los estilos CSS de los datos cargados del archivo y rellena el objeto StyleSheet sheet
con las definiciones de estilos.
Cuando el usuario hace clic en el campo de texto, se llama al método clickHandler()
. La sentencia if del método clickHandler()
realiza la comprobación para asegurarse de que la carga del archivo haya finalizado antes de aplicar la hoja de estilos al campo de texto. Para que surta efecto la hoja de estilos, la propiedad htmlText
se debe reasignar con el contenido después de que se asigne la hoja de estilos al campo de texto. Los valores de propiedad font-family
y color
CSS para la etiqueta de encabezado también se añaden al contenido del campo de texto. (Los valores de estas propiedades serán "undefined" si los valores de la hoja de estilo no están aplicadas.)
A continuación se muestra el ejemplo de un contenido del archivo CSS que se puede utilizar con este ejemplo. Antes de ejecutar este ejemplo, cree un archivo de texto, cópiele el siguiente contenido CSS, guárdelo con el nombre de archivo test.css
y colóquelo en el mismo directorio que el archivo SWF.
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 | () | método |
public function setStyle(styleName:String, styleObject:Object):void
Versión del lenguaje: | ActionScript 3.0 |
Versiones de motor de ejecución: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Añade un nuevo estilo con el nombre especificado en el objeto de hoja de estilos. Si no hay ningún estilo con dicho nombre en la hoja de estilos, se añadirá. Si ya hay algún estilo con este nombre en la hoja de estilos, se sustituirá. Si el parámetro styleObject
tiene el valor null
, se eliminará el estilo indicado.
Flash Player crea una copia del objeto de estilo que se pasa a este método.
Para ver una lista de los estilos admitidos, consulte la tabla en la descripción de la clase StyleSheet.
Parámetros
styleName:String — Una cadena que especifica el nombre del estilo que se va añadir a la hoja de estilos.
| |
styleObject:Object — Objeto que describe el estilo o null .
|
transform | () | método |
public function transform(formatObject:Object):flash.text:TextFormat
Versión del lenguaje: | ActionScript 3.0 |
Versiones de motor de ejecución: | AIR 1.0, Flash Player 9, Flash Lite 4 |
Amplía la capacidad de análisis de la CSS. Los desarrolladores avanzados pueden sustituir este método ampliando la clase StyleSheet.
Parámetros
formatObject:Object — Un objeto que describe el estilo, incluye reglas de estilo como propiedades del objeto o null .
|
flash.text:TextFormat — Objeto TextFormat que contiene el resultado de la asignación de reglas de CSS a las propiedades de formato de texto.
|
Elementos de API relacionados
Ejemplo ( Cómo utilizar este ejemplo )
transform()
para aplicar un estilo de un archivo CSS a un objeto TextFormat para un campo de texto.
Los estilos CSS se utilizan generalmente para dar formato al contenido HTML. Sin embargo, al usar el método transform()
de un objeto StyleSheet, se pueden asignar estilos CSS específicos a un objeto TextFormat y aplicarse después al campo de texto.
Los objetos URLRequest
y URLLoader
se utilizan para cargar el archivo CSS. Se añade un detector de eventos al evento Event.COMPLETE
, que tiene lugar una vez que se reciben todos los datos y se colocan en la propiedad de datos del objeto URLLoader loader
. El método loaderCompleteHandler()
analiza después el CSS de los datos cargados del archivo y rellena el objeto StyleSheet sheet
con los estilos. El método getStyle()
de la hoja de estilos recupera los estilos de párrafo HTML, que se asignan después al objeto TextFormat cssFormat
utilizando el método transform()
de la hoja de estilos. Finalmente, el formato de texto predeterminado del campo de texto inputField
se establece con el nuevo formato de texto cssFormat
.
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); } } }
Tue Jun 12 2018, 02:12 PM Z