Actionscript 3.0: Aplicar estilos CSS a campos de texto
Los campos de texto en flash pueden contener texto simple o texto en formato HTML. El texto en formato HTML se almacena en la propiedad htmlText. Sobre los campos con texto HTML podemos aplicar hojas de estilo CSS, creadas en el código de la aplicación o cargadas en tiempo de ejecución.
En este ejemplo vamos a ver como cargar un archivo css, y aplicar estos CSS a un TextField que contiene un teto HTML. La hoja de estilos que vamos a utilizar, es esta:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
h1 { font-family: Times New Roman, Times, _serif; font-size: 30; font-weight: bold; } h2 { font-family: Arial, Helvetica, _sans; font-size: 24; } p{ font-size: 15; } a{ color: #009900; } a:hover{ color: #00ff00; } |
Lo primero que tenemos que hacer, es cargar la hoja de estilos. Para ello, utilizamos una instancia de Loader:
1 2 3 |
cargador = new URLLoader(); cargador.addEventListener(Event.COMPLETE, onCSSFileLoaded); cargador.load(new URLRequest("http://www.esedeerre.com/ejemplos/as3/css/ejemplo.css")); |
Una vez cargado el archivo, salta el evento COMPLETE, y creamos una instancia de StyleSheet, parseamos el CSS cargado, y se lo aplicamos al campo de texto. Después de aplicar el CSS al campo de texto, podemos rellenar el campo con el texto HTML que queramos:
1 2 3 4 5 6 7 |
public function onCSSFileLoaded(event:Event):void { var sheet:StyleSheet = new StyleSheet(); sheet.parseCSS(cargador.data); campo.styleSheet = sheet; campo.htmlText = texto; } |