• inicio
  • tutoriales flash
  • trucos flash
  • faq's flash
  • enlaces flash
  • suscribirse al feed RSS

tutoriales ( todos | principiante | medio | avanzado | AS 1.0 | AS 2.0 | AS 3.0 | top )

Tutorial FLASH - Aplicar estilos CSS con ActionScript 2.0

| | Más
Versión Flash: 8 y superiores   |   Compatible con ActionScript 2.0   |   Nivel: Medio   |   Hits: 40592

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

| | Más
flash 1flash 1flash 1flash 2flash 1flash 3flash 1flash 4