CSS en Flash: sólida pareja

22/ago/2006 12

Desde Flash MX 2004 que se permite importar información de hojas de estilo CSS para los campos de texto dinámicos de una película Flash. Lo interesante de esto es la capacidad de manejar externamente el estilo del texto que contiene la película, sin tener que publicarla nuevamente con una nueva, por ejemplo tipografía, o color de texto. Otra ventaja es tener en una misma caja de texto diferentes estilos (recordemos que estamos trabajando con textos dinámicos, y éstos deben tener el mismo tipo de texto para cada campo) sin tener que fraccionar ese bloque en diferentes partes. A continuación veremos cómo cargar una hoja de estilos CSS, manipularla ya lo sabemos pero la implementaremos dentro de una película Flash 7+.

Necesitas primero un campo de texto dinámico. Esto es lo más fácil, hazla del tamaño que quieras . Luego, un importante ítem a ser seleccionado: en Properties, asegúrate de seleccionar Multiline no wrap y Render text as HTML, como en la imagen siguiente:

CSS en Flash

Ahora, dale un nombre a esa instancia (campo de texto dinámico), en este caso usaré output. Por último, hora de agregar algo de acción. En el primer frame, copia el siguiente código Actionscript:

var format = new TextField.StyleSheet();
var path = "http://www.csslab.cl/ejemplos/flash/flash.css";
var quick = "<br><p class=’uno’>Lorem ipsum dolor sit amet.</p><br><p class=’dos’>Lorem ipsum dolor sit amet.</p><br><p class=’tres’>Lorem ipsum dolor sit amet.</p><br><p class=’cuatro’>Lorem ipsum dolor sit amet.</p>";
format.load(path);
format.onLoad = function(loaded) {
if (loaded) {
output.styleSheet = format;
output.text = quick;
} else {
output.text = "Error cargando archivo CSS";
}
};

Lo que hace el anterior código, es primero que nada crear un objeto que controle el flujo del CSS, y decir dónde está el archivo CSS, en este caso desde el mismo servidor en que está alojado CSSLab, mejor si es absoluto. Luego el texto a ser desplegado, en HTML, con sus respectivas clases. Por último, carga el CSS (onLoad) y lo aplica al campo de texto dinámico que creamos, llamado output. Ahora, el archivo CSS:

.uno {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
color: #FF0099;
}
.dos {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #333333;
}
.tres {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #FF9900;
}
.cuatro {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
color: #000000;
}

Aún la implementación de CSS en Flash es limitado. Son soportados gran parte de las propiedades de CSS1, y en Flash 8 aseguran que este número aumentó: text-align, font-size, text-decoration, margin-left, margin-right, font-weight, font-style, letter-spacing, text-indent, font-family, color.

Ver resultado final

Links:

Comentarios

  1. seba [#]

    Muy bueno el post, leyendo de a poco el blog he aprendido bastante…

    saludos!

  2. Lo mejor de la semana - aNieto2K [#]

    […] CSS + Flash, sólida pareja. Muy buen artículo sobre el uso de estas dos tecnologías juntas. […]

  3. JAQ [#]

    Está muy bien, pero tengo dos dudas: Una es si no es posible cargar el texto que queramos desde un XML y así no tener que modificar de nuevo los .swf. Y otra es si en caso de que haya más texto aparece el scroll o habría que crearlo aparte.

    Gracias por tu ayuda.

  4. CSSLab Admin [#]

    jaq, si claro q es posible cargar txt desde un XMl en Flash, de hecho es algo muy facil, lo tendre en cuenta en un prox. articulo. para el scroller, tienes q agregarle ya el campo de texto el componente de scroll del mismo flash. salu2

  5. Diego Filloy Ring [#]

    Muchisimas gracias por todo este tutorial, ya que me ha funcionado a la perfección.
    Sigan con el buen trabajo que se hace aqui…
    Adios !

  6. Diego Quinteros [#]

    hola, muy interesante el recurso. actualmente intento desarrollar una “sagrada trinidad”…..flash, css y xml….es decir, que el texto formateado sea el del archivo xml (porque después de todo, pienso que para que sea dinámico no habremos de quedarnos en el css…
    A quien conozca algún tutorial por la red, pues compartidlo, por favor.

  7. Marten [#]

    Buenas, muy interesante el articulo. Ahora queria saber si es posible (con css) agregar scroles a un textField de flash de manera dinamica…

    Saludos

  8. CSSLab Admin [#]

    Marten: si eso es posible, claro utilizando la componente q trae el mismo Flash. Los scrollbars aparecerán si hay o no mas texto q lo requieran. salu2

  9. Freedom [#]

    Interesante… Me sirvio muchisimo. Ahora tengo una pregunta… Yo desearia saber si puedo cargar esto desde un .xml:

    ejemplo:

    var datos:Array = [[“dato1″, “resultado1″],
    [“dato2, “resultado2″]];

    Kisiera como poder ejecutar eso desde un XML alguien me podria ayudar?

  10. yamarashi [#]

    A ver si esto te sirve mejor…

    //ahora llamamos a la hoja de estilos que utilizaremos
    ejemploStyle = new TextField.StyleSheet();
    ejemploStyle.load(“ejemplo.css”);
    mi_ejemplo.styleSheet = ejemploStyle;
    //ahora, llamaremos al texto contenido en el archivo xml
    ejemploContent = new XML();
    ejemploContent.ignoreWhite = true;
    ejemploContent.load(“ejemplo.xml”);
    ejemploContent.onLoad = function(exito) {
    if (exito) {
    mi_ejemplo.text = ejemploContent;
    }
    };

  11. isabel [#]

    Holaa, mi pregunta es que si se puede hacer la operacion inversa, es decir, a una pagina en CSS introducirle archivos en .swf…

    Espero respuesta…gracias y saludos

  12. CSSLab Admin [#]

    No, Isabel. No puedes manejar archivos Flash desde un .css asi como un background: url(pelicula.swf); es imposible. salu2.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab