CSSLab

Un laboratorio de ideas para la web en espaol

?

Inicio Enva tu Sitio

Publicado: ategoras

CSS Misc

Tags

CSS en Flash: slida pareja

Desde Flash MX 2004 que se permite importar informacin de hojas de estilo CSS para los campos de texto dinmicos de una pelcula Flash. Lo interesante de esto es la capacidad de manejar externamente el estilo del texto que contiene la pelcula, sin tener que publicarla nuevamente con una nueva, por ejemplo tipografa, o color de texto. Otra ventaja es tener en una misma caja de texto diferentes estilos (recordemos que estamos trabajando con textos dinmicos, y stos deben tener el mismo tipo de texto para cada campo) sin tener que fraccionar ese bloque en diferentes partes. A continuacin veremos cmo cargar una hoja de estilos CSS, manipularla ya lo sabemos pero la implementaremos dentro de una pelcula Flash 7+. Necesitas primero un campo de texto dinmico. Esto es lo ms fcil, hazla del tamao que quieras . Luego, un importante tem a ser seleccionado: en Properties, asegrate de seleccionar Multiline no wrap y Render text as HTML, como en la imagen siguiente: Ahora, dale un nombre a esa instancia (campo de texto dinmico), en este caso usar output. Por ltimo, hora de agregar algo de accin. En el primer frame, copia el siguiente cdigo 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 cdigo, es primero que nada crear un objeto que controle el flujo del CSS, y decir dnde 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 dinmico 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; } An la implementacin de CSS en Flash es limitado. Son soportados gran parte de las propiedades de CSS1, y en Flash 8 aseguran que este nmero aument: text-align, fontsize, text-decoration, margin-left, margin-right, font-weight, font-style, letter-spacing, textindent, font-family, color. Ver resultado final

Links:

Macromedia Adobe LiveDocs Kirupa