Actionscript 3.0: Aplicar estilos CSS a campos de texto

Etiquetas: StyleSheet parseCSS styleSheet htmlText

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:

 
  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:

 
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:

 
  public function onCSSFileLoaded(event:Event):void
  {
  var sheet:StyleSheet = new StyleSheet();
  sheet.parseCSS(cargador.data);
  campo.styleSheet = sheet;
  campo.htmlText = texto;
  }
 

El código completo, y el ejemplo en Flash, tras el salto.

package 
{
	import flash.display.MovieClip;
	import flash.net.URLRequest;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.text.*;
 
	public class  EjemploCSS extends MovieClip
	{
        var cargador:URLLoader;
        var campo:TextField;
        var texto:String = "<h1>Esto es una cabecera h1</h1></br>" + 
            "<h2>Esto es una cabecera h2</h2></br>" + 
			"<p>Este es el contenido donde vamos a meter varios enlaces:</p>" + 
			"<p><a href='http://www.google.com'>Google</a></p>" + 
			"<p><a href='http://www.yahoo.com'>Yahoo</a></p>" + 
			"<p><a href='http://www.altavista.com'>Altavista</a></p>"
 
		public function EjemploCSS():void
		{
            campo = new TextField();
            campo.width = 300;
			campo.multiline = true;
            campo.autoSize = TextFieldAutoSize.LEFT;
			campo.selectable = false;
            addChild(campo);
            cargador = new URLLoader();
            cargador.addEventListener(Event.COMPLETE, onCSSFileLoaded);
            cargador.load(new URLRequest("http://www.esedeerre.com/ejemplos/as3/css/ejemplo.css"));
		}
 
        public function onCSSFileLoaded(event:Event):void
        {
            var sheet:StyleSheet = new StyleSheet();
            sheet.parseCSS(cargador.data);
            campo.styleSheet = sheet;
            campo.htmlText = texto;
        }
	}
 
}

Enlaces relacionados

Enlaces coloreados en Flash con Actionscript 2.0 y CSS

Comentarios

- Gonzalo
Muchas gracias por el ejemplo. Tengo una duda, es posible evitar los saltos de linea que mete el flash. Me explico, creo un estilo para un tag que cambia a rojo el color de la fuente y lo añado al fichero css. Si lo uso dentro de otro etiquetado, por ejemplo tu
, es decir:
hola que tal estás?
pretendiendo en la misma linea poner solo el "que" en rojo, obtengo en el swf: hola que tal estas? ¿Se puede evitar?. GRACIAS.
- Gonzalo
Muchas gracias por el ejemplo. Tengo una duda, es posible evitar los saltos de linea que mete el flash. Me explico, creo un estilo para un tag -j- que cambia a rojo el color de la fuente y lo añado al fichero css. Si lo uso dentro de otro etiquetado, por ejemplo tu -p-, es decir: -p- hola -j- que -/j- tal estás? -p- pretendiendo en la misma linea poner solo el "que" en rojo, obtengo en el swf: hola que tal estas? ¿Se puede evitar?. GRACIAS.
- hamoto
excelente!!
- qborreda
Hola Daniel Oye, las propiedades CSS para flash, no cambian un poco con respecto a las de CSS de toda la vida .. ? Es decir .. no deberían ser fontFamily, fontSize, fontWeight ?? para que Flash las parseara bien?
- victor
Muy buenas y gracias por el aporte! Tengo dos problemas y después de 2 horas ya no puedo mas... seguro que tu ya lo has hecho xD 1. Como puedo importar un txt para poder editarlo más facilmente? En este caso está dentro de la clase y es una movida. 2. Me gustaría que fuera en un campo de texto que yo creara, no generarlo nuevo. ¿Es posible? Mil gracias por el aporte y si me ayudas con esto ya no te digo...
- josue h
tengo una tarea me preguntan en que parte de del codigo html podemos ingresar el css?

Dejar un comentario