Tutorial FLASH - Aplicar estilos CSS con ActionScript 2.0

Versión Flash: 8 y superiores   |   Compatible con ActionScript 2.0   |   Nivel: Medio   |   Hits: 40712

Desde Flash Player 7 podemos aplicar estilos CSS a cajas de texto generado como HTML. Para ello tenemos a nuestra disposición la clase StyleSheet en AS 2.0 y AS 3.0. En este tutorial vamos a describir su uso en la versión del lenguaje 2.0.

COMO HACERLO.

Para poder emplear estilos CSS en Flash necesitamos, en primer lugar, que el texto a formatear se renderice como texto HTML, esto es independiente de la versión de ActionScript elegida. En el tutorial vamos a emplear una caja de texto dinámico con nombre instancia caja_txt. Hemos elegido una caja de texto dinámico aunque el código es igualmente válido para aplicar estilos a componentes TextArea y Label cuya propiedad html tenga el valor true. Fijaos en el fla que hay dentro del zip descargable como están incorporadas las fuentes dentro de la caja para poder mostrar todos los caracteres y las negritas y cursivas.

Lo primero que hay que hacer es crear un nuevo objeto StyleSheet, para ello comenzamos el código con:

import TextField.StyleSheet; //necesario para poder crear el objeto StyleSheet
var estilosCSS:StyleSheet = new StyleSheet();

El paso siguiente es completar el objeto estilosCSS con definiciones de estilos. Esto podemos hacerlo de dos maneras.

La primera opción es añadir definiciones de estilo con ActionScript, en concreto con el método setStyle. En este bloque de código se crea un objeto StyleSheet y se le añade una definición de estilo para la etiqueta A, de modo que queda personalizado el aspecto de los vínculos. El método setStyle recibe dos parámetros, el primero es el nombre de la etiqueta o la clase a personalizar y el segundo son las propias definiciones de estilo expresadas en la forma de objeto con propiedades.

// --- código AS 2.0 ---
import TextField.StyleSheet; //necesario para poder crear el objeto StyleSheet
var estilosCSS:StyleSheet = new StyleSheet();
var objetoDeEstiloj:Object = new Object();
objetoDeEstiloj.color = "#666666";
objetoDeEstiloj.textDecoration = "underline";
estilosCSS.setStyle("A", objetoDeEstiloj);
delete objetoDeEstiloj;

Este código es la versión extendida. Las últimas cinco líneas se pueden reemplazar por esta, aunque es menos legible:

estilosCSS.setStyle("A", {color:'#666666',textDecoration:'underline'});

Si os fijais en los nombres de las propiedades, se ve que textDecoration es parecida pero no igual a text-decoration, propiedad empleada en CSS. Esto nos indica que si definimos estilos con ActionScript los nombres de las propiedades son un poco diferentes y hay que tener muy claras las equivalencias. A continuación os mostramos la correspondencia entre propiedades, consultad la documentación de Flash para ampliar información sobre estas propiedades admitidas y sus posibles valores.

 

Propiedad CSS	Propiedad equivalente ActionScript (válido para 2.0 y 3.0)
color	color
display	display
font-family	fontFamily
font-size	fontSize
font-style	fontStyle
font-weight	fontWeight
kerning	kerning (sólo archivos creados en Windows)
leading	leading
letter-spacing	letterSpacing
margin-left	marginLeft
margin-right	marginRight
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent

 

Hasta aquí hemos vista la primera manera de completar un objeto StyleSheet con definiciones de estilo, nos hemos detenido a explicarla pero creemos que la segunda opción es la más interesante.

Esta seria alternativa consiste en cargar las definiciones desde un archivo externo con el método load. Esto nos permite mantener total independencia entre los estilos y la película swf, evitando tener que compilar de nuevo el swf para aplicar algún cambio. Además, no vamos a tener que preocuparnos de las propiedades equivalentes en ActionScript ya que este archivo externo es una hoja de estilos CSS como las que se emplean de toda la vida para formatear páginas HTML y por tanto, hay que usar las propiedades propias de CSS.

Para invocar el método load es necesario enviar como parámetro la url del archivo externo que contiene las definiciones de estilo. Además, hay que definir la función que se ha de ejecutar tras recibir la carga del archvo externo. En esta función tras comprobar que la carga se ha efectuado correctamente es el momento de aplicar los estilos a la caja de texto mediante su propiedad StyleSheet. Mirad el código de ejemplo.

import TextField.StyleSheet; //necesario para poder crear el objeto StyleSheet
var estilosCSS:StyleSheet = new StyleSheet(); // creamos el objeto StyleSheet
var texto:String="Haz clic <a href='http://www.tutoriales-flash.com'>aquí</a> para más info"; // texto HTML a formatear
estilosCSS.onLoad = function(success:Boolean) { // función que se ejecutar al recibir datos externos
 if (success) { // si la carga ha ido bien
  caja_txt.styleSheet = estilosCSS; // aplicamos estilos
  caja_txt.htmlText = texto; // aplicamos texto HTML
 } else { // si no ha ido bien
  trace("Error cargando estilos CSS");
 }
};
estilosCSS.load("hoja1.css");

Para finalizar, una cosa muy importante a tener en cuenta es que hay que aplicar los estilos antes que el valor del texto HTML, en caso contrario no se aplicarán los estilos. Aquí podeís descargar los archivos del inicio del tutorial con el código comentado. CSS_AS20.zip