Usar CSS en Flash

Cuantas veces hemos querido poder cambiar el diseño visual de mi desarrollo en Flash, sin tener que cambiar los componentes uno a uno. Un trabajo tedioso y que definitivamente nos quitaría mucho tiempo.

El propósito de este manual es que podamos controlar la apariencia grafica de nuestro sitio hecho en flash  editando tan solo un archivo CSS. Para este manual recomiendo tener un conocimiento mínimo de lo que son las hojas de estilo CSS, si no sabes de lo que te estoy hablando te dejo un pequeño tutorial de css basico.

Supongamos que tienes diferentes textbox en tu sitio web y decides que ya no te gusta la fuente, tamaño o el color que le pusiste. Si esto pasa y tienes hechos unos 10 campos de texto ¿Imaginas cambiar uno a uno manualmente? Pues eso ya es cosa del pasado.

Flash nos permite agregarle propiedades a todos nuestros campos de textos usando CSS, permitiendo así cambiar la apariencia grafica de nuestro sitio sin grandes esfuerzos. Y esto es posible ya que Flash también contiene propiedades muy parecidas a las del CSS de XHTML. Para darte una idea mencionaré algunas:

Propiedad de CSS	Propiedad de Actionscript	Uso y valores soportados
text-align	textAlign	Reconoce los valores de izquierda, derecha y centrado.
font-size	fontSize	Solo la parte numérica del valor es usado, expresado en px o pt.
text-decoration	textDecoration	Reconoce los valores none y underline.
margin-left	marginLeft	Solo la parte numérica del valor es usado. Expresado en pixeles o puntos (px, pt). Y pone un margen en el lado izquierdo.
margin-right	marginRight	Solo la parte numérica del valor es usado. Expresado en pixeles o puntos (px, pt). Y pone un margen en el lado derecho.
font-weight	fontWeight	Reconoce valores normal y bold.
font-style	fontStyle	Reconoce valores normal e italic.
color	color	Solo acepta valores hexadecimales o algunos nombres de colores en ingles, como red, black, yellow.

Necesitamos una forma de decirle a nuestro textbox como ajustar su formato o una parte de nuestro texto. Las propiedades de las hojas de estilo CSS no son buenas para esto, es por eso que necesitamos usarlas en conjunción con etiquetas HTML (Hipertext Markup Lenguague).

En la siguiente tabla muestro unas etiquetas que Flash soporta desde la versión MX 2004 y posteriores:

Nombre de Estilo
p
body
li
a
a:link
a:hover
a:active

Estas son algunas etiquetas de las tantas que soporta  Flash MX 2004, solo por mencionar algunas.

Descripción del uso de hoja de estilos CSS.

Ahora haremos nuestra hoja de estilos CSS como un archivo de texto. En mi caso usaré Dreamweaver para crearla. Las formas de definir nuestro estilo son variadas y depende de lo que queramos hacer, un ejemplo sería lo siguiente:

p {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11px;
  color: #0000FF;
}

En el código anterior definimos un estilo para todas las etiquetas <p>

Por ejemplo: si escribimos <p>Hola Mundo</p>, el texto que está entre la etiquetas <p></p>,  tomará las propiedades del estilo que definimos, que serían: tipo de fuente Arial, tamaño de la fuente de 11 pixeles y color #0000FF (rojo).

Podemos hacer estilos tipo clase que pueden ser aplicadas  a elementos HTML específicos usando las etiquetas <p>  o <span> (cabe aclarar que no son clases de ActionScript).

Las clases CSS se inician con un punto, puede ser el que queramos, pero recomiendo que sea un nombre alusivo al elemento al que queremos modificar, por ejemplo, si queremos definir las propiedades de los títulos, un nombre candidato para la clase sería:

.titulo{
  font-family: Arial,Helvetica,sans-serif;
  font-size: 14px;
  color: #FF0000;
} 

Ya que tenemos la clase hecha, se la aplicaremos a la etiqueta <span> de esta forma:

<span class='titulo'>Este es mi titulo 1</span>

El nombre de la clase entre comillas va escrito sin el punto, este solo se usa para definir a la clase.

La etiqueta <p>  se usa de la siguiente manera:

<p class='titulo'>Este es el titulo</p>

Creando nuestra hoja de estilo CSS

Ahora vamos a crear nuestro archivo CSS para usarlo en Flash. Los pasos a seguir seran los siguientes:

• Crear un objeto CSS.
• Agregar el estilo CSS
• Asignar el objeto de la hoja de estilo a un campo de texto que contenga el texto HTML.

Nota: Cuando asignamos un CSS a un campo de texto, ocurren cambios a su comportamiento normal, unos de esos cambios son que se convierte en un campo de texto de solo lectura y no puede ser editado por el usuario.

Ahora si creamos nuestra hoja de estilos y lo guardamos con el nombre que gustes en mi caso lo llamare “miCSS.css”:

p {
  color: #000000;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  display: inline;
}

a:link {
  color: #FF00FF;
  text-decoration: underline;
}

a:hover{
  color: #999999;
  text-decoration: none;
}

.titulo {
  color: #0000FF;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.concepto {
  color: #666600;
  font-style: italic;
  font-weight: bold;
  display: inline;
}

Creando la película Flash

Los pasos a seguir son:

1. Abrir un nuevo documento de Flash
2. Creamos un campo de texto sobre la escena.
3. Al campo de texto le modificamos la propiedades: texto dinámico, multilínea y seleccionar la opción generar texto como HTML. Como se ve en la siguiente imagen.



4. Toma una instancia del campo de texto y llámalo mi_texto.
5. Abrimos el panel de acciones, podemos abrirlo presionando la tecla F9. En el primer fotograma de la línea de tiempo agregamos el siguiente código en el panel de acciones, que ya abrimos anteriormente

//Creamos un nuevo objeto de hoja de estilo 
var myCSS = new TextField.StyleSheet();
//Especificamos la localización del archivo CSS, que creamos. 
var cssURL = "miCSS.css";
//Escribimos el texto que queremos mostrar
//pero como lo escribiriamos en HTML

ejemploTexto = "<p class='titulo'>Css en Flash MX 2004 </p>";
ejemploTexto += "<p><span class='concepto'>Hojas de estilo Css: </span>";
ejemploTexto += "Determinan el estilo y el formato de los elementos a los que se aplican";
ejemploTexto += "como textos, imagenes, etc.";
ejemploTexto += "Los links tambien se pueden personalizar ";
ejemploTexto += "<a href='http://www.cristalab.com'>Cristalab</a> ";
ejemploTexto += "Este ejemplo funciona de la misma manera en Flash 8.</p>";

//Cargamos el archivo CSS 
myCSS.load(cssURL);
//Definimos el manejador onLoad
myCSS.onLoad = function(exito) {
        if (exito) {
    /*Si el el archivo CSS se cargo sin ningun error lo asignamos al 
        objeto texto "miTexto" y asignamos el texto en HTML 
        al campo de texto "miTexto.text" */
           mi_texto.styleSheet = myCSS;
       mi_texto.text = ejemploTexto; //Puede ser un texto html" 
    }
};
 

En el codigo anterior creamos un nuevo objeto de hoja de estilo (es importante hacer notar que StyleSheet(); es una clase, mientras que styleSheet ( con ‘s’ minúscula inicial) que usamos en la parte miTexto.styleSheet  es una propiedad.)

Una vez hecho lo anterior usamos el método ‘load’ para cargar nuestro archivo CSS,  “miCSS.css” y usamos el método ‘onLoad’ para comprobar si se ha cargado correctamente, si es así entonces asociamos la hoja de estilo al campo de texto antes de asignar nuestro texto al campo de texto.

Guardamos la película como EjemploCSS.fla en la misma carpeta donde hayamos guardado nuestra hoja de estilos CSS, ejecuta la película con ctrl + Enter, para probar que funcione.

Esto es lo que tienes que ver:

Puedes cambiar las propiedades en tu hoja de estilos, como tamaño de fuente, colores, etc. Para hacer pruebas y ver que con solo cambiar unas cuantas líneas de código obtenemos lo que queremos en los elementos que lo aplicamos.

Este ejemplo funciona muy bien en Flash 8.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo