CSS en Flash

CSS - Flash - Tutoriales - Publicado el...

15/01/2007

Flash admite unas cuantas propiedades de la especificación CSS1 original. Las propiedades CSS admitidas son:

text-align: Los valores reconocidos son left, center, right y justify.
font-size: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
text-decoration: Los valores reconocidos son none y underline.
margin-left: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
margin-right: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
font-weight: Los valores reconocidos son normal y bold.
kerning: Los valores reconocidos son true y false.
font-style: Los valores reconocidos son normal e italic.
letterSpacing: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
text-indent: Sólo se utiliza la parte numérica del valor. Las unidades (px, pt) no se analizan; los píxeles y los puntos son equivalentes.
font-family: Lista de fuentes que se deben utilizar, separadas por comas, en orden descendente de conveniencia. Se puede utilizar cualquier nombre de familia de fuentes. Si especifica un nombre de fuente genérico, se convertirá a una fuente de dispositivo adecuada. Hay disponibles las siguientes conversiones de fuentes: mono se convierte en _typewriter, sans-serif se convierte en _sans y serif se convierte en _serif.
color: Sólo se admiten valores de color hexadecimales. No se admiten los nombres de los colores (como blue). Los colores se escriben en el siguiente formato: #FF0000.

En el siguiente ejemplo vamos a cargar un texto externo dentro de una instancia de texto y le vamos a aplicar un css, también externo.

1.- Creamos una caja de texto dinámico, multilínea al que damos el nombre de instancia "miTexto".
2.- Por otro lado deberemos tener un documento de texto, con el nombre de "texto.txt" que contiene algo como:

<span class="cuerpo"><span class="titulo">Accesibilidad:</span> Conjunto de características de un sitio web que facilitan su uso por parte de personas con algún tipo de discapacidad. En este sentido, desde el W3 Consortium se esta promoviendo el programa WAI. En coordinación con todo tipo de organizaciones internacionales, la WAI persigue promover la accesibilidad a través de cinco áreas de trabajo tecnología; guías de ayuda, herramientas, formación e investigación y desarrollo.</span>

3.- Además deberemos tener una hoja de estilos con nombre "styles.css", en la que definimos los estilos:

/* CSS Document */
.cuerpo {
  font-family: "_sans";
  color: #336699;
}
.titulo{
  font-family: "_typewriter";
  color: #FF0000;
  font-size:14px;
  font-weight:bold;
}

4.- En este ejemplo, tanto el CSS como el texto y el documento Flash deben estar en la misma carpeta.
5.- Ahora tan sólo nos queda cargar tanto el documento de texto como la hoja de estilos y asignarlos a la caja de texto.

miTexto.html = true;

//Carga del CSS y
//asignacion a la caja de texto
var miEstilo = new TextField.StyleSheet();
miEstilo.onLoad = function(cargado:Boolean):Void {
    if (cargado) {
         miTexto.styleSheet = this;
    } else {
        trace("Error cargando el CSS.");
    }
};
miEstilo.load("styles.css");

//Carga del texto y
//asignacion a la caja de texto
var CargaTexto = new LoadVars();
CargaTexto.load("texto.txt");
CargaTexto.onData = function(src) {
	if (src != undefined) {
		miTexto.htmlText = src;
	} else {
		trace("No se pudo cargar el texto.");
	}
};