Actionscript 3.0: Aplicar estilos CSS a campos de texto

Actionscript 3.0: Aplicar estilos CSS a campos de texto


Deprecated: Function split() is deprecated in /home/km100runner/esedeerre.com/buscador.php on line 56

Etiquetas: StyleSheet parseCSS styleSheet htmlText


Deprecated: Function split() is deprecated in /home/km100runner/esedeerre.com/buscador.php on line 66

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.   h1 {

  3.   font-family: Times New Roman, Times, _serif;

  4.   font-size: 30;

  5.   font-weight: bold;

  6.   }

  7.   h2 {

  8.   font-family: Arial, Helvetica, _sans;

  9.   font-size: 24;

  10.   }

  11.   p{

  12.   font-size: 15;

  13.   }

  14.   a{

  15.   color: #009900;

  16.   }

  17.   a:hover{

  18.   color: #00ff00;

  19.   }

  20.  

Lo primero que tenemos que hacer, es cargar la hoja de estilos. Para ello, utilizamos una instancia de Loader:

  1.  
  2. cargador = new URLLoader();
  3. cargador.addEventListener(Event.COMPLETE, onCSSFileLoaded);
  4. cargador.load(new URLRequest("http://www.esedeerre.com/ejemplos/as3/css/ejemplo.css")); 
  5.  

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.   public function onCSSFileLoaded(event:Event):void
  3.   {
  4.   var sheet:StyleSheet = new StyleSheet();
  5.   sheet.parseCSS(cargador.data);
  6.   campo.styleSheet = sheet;
  7.   campo.htmlText = texto;
  8.   }
  9.  

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

Enlaces coloreados en Flash con Actionscript 2.0 y CSS

Enlaces coloreados en Flash con Actionscript 2.0 y CSS


Deprecated: Function split() is deprecated in /home/km100runner/esedeerre.com/buscador.php on line 56

Etiquetas: StyleSheet htmlText load TextField createTextField

Lo primero es tener nuestro archivo CSS. Yo voy a utilizar uno sencillo:

  1.  
  2. a{

  3.     font-size:16pt;

  4.     color:#0000ff;

  5.     text-decoration:underline;

  6. }

  7. d{

  8.     font-size:20pt;

  9.     color:#ff0000;

  10. }

  11. e{

  12.     font-size:18pt;

  13.     color:#00ff00;

  14. }

  15. f{

  16.     font-size:14pt;

  17.     color:#ff00ff;

  18. }

  19.  

En la parte Flash, cargamos el archivo CSS, y configuramos el campo de texto para que utilice la hoja de estilos que hemos cargado:

  1.  
  2. //Creo el campo de texto
  3.  
  4. createTextField("Texto_txt",0,0,0,300,300);
  5.  
  6. //Creo las variables que van a contener el texto html
  7.  
  8. var txt0:String = "<d>Este sería del tipo d</d><br/>";
  9. var txt1:String = "<e>Este sería el primer e</e><br/>";
  10. var txt2:String = "<f>Este es del tipo f</f><br/>";
  11. var txt3:String = "<a href = 'http://www.esedeerre.com'>Este sería un enlace coloreado</a>";
  12.  
  13. //Creo la variable para vargar el CSS
  14.  
  15. var loadCSS = TextField.StyleSheet = new TextField.StyleSheet();
  16.  
  17. //Cuando carguen los estilos, relleno el campo con el html
  18.  
  19. loadCSS.onLoad = function(){
  20.         Texto_txt.html = true;
  21.         Texto_txt.styleSheet = loadCSS;
  22.         Texto_txt.htmlText = txt0 + txt1 + txt2 + txt3;
  23. }
  24.  
  25. //Cargo los estilos
  26.  
  27. loadCSS.load("url del css");
  28. stop();
  29.