|
A partir de la versión MX, Flash introdujo el soporte para CSS, de esta forma podemos formatear contenido dentro de un campo de texto con las reglas que hayamos establecido. Es asi que podemos lograr texto más amigable para el usuario con un formateo de texto como el de una página HTML:
Sin embargo, el problema radica en que Flash soporte solo un puñado de propiedades. El siguiente cuadro muestra las soportadas...
| Propiedad CSS | Uso y valores admitidos | 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. | | display | Los valores admitidos son inline, block y none. | | 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. | 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. | | font-style | Los valores reconocidos son normal y italic. | | font-weight | Los valores reconocidos son normal y bold. | | kerning | Los valores reconocidos son true y false. El ajuste entre caracteres sólo se admite en las fuentes incorporadas. Algunas fuentes, como Courier New, no admiten el ajuste entre caracteres. La propiedad de ajuste entre caracteres sólo puede utilizarse en archivos SWF creados en Windows; no en archivos SWF creados en Macintosh. Sin embargo, estos archivos SWF pueden reproducirse en versiones no Windows de Flash Player y se aplica el ajuste entre caracteres. | | letter-spacing | La cantidad de espacio distribuido uniformemente entre caracteres. El valor especifica el número de píxeles que se añaden después de cada carácter durante el avance. Un valor negativo condensa el espacio entre caracteres. 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-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. | | text-align | Los valores reconocidos son left, center, right, y justify. | | text-decoration | Los valores reconocidos son none y underline. | | 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. |
Como ven, las propiedades soportadas son las más comunes. El código para crear el ejemplo es: Código:
//Asociamos la variable estilo al objeto StyleSheet var estilo:TextField.StyleSheet = new TextField.StyleSheet(); //Acciones a realizar si la hoja de estilo se carga correctamente estilo.onLoad = function() { //Aplicamos la hoja al campo de texto txt.styleSheet = this; //Habilitamos el modo HTML y le asignamos un borde al campo de texto txt.html = true; txt.htmlText = html_txt; txt.border = true; }; //Asignamos la hoja styleSheet.css a la variable estilo estilo.load("styleSheet.css"); //Cargamos de código HTML al campo de texto html_txt = "<br><h1>Lipsum regular</h1>"; html_txt += "<br><p><span class='negrita'>Lorem ipsum timeam equidem</span> honestatis ius at, illum etiam eos ei. Luptatum verterem per cu. Aeque inimicus est at, te elit ceteras est. Harum impedit te per. Duo quod nibh delicatissimi in, sint error nostro ius ad.</p>"; html_txt += "<br><img src='imagen.jpg' align='left' width='70' height='70'><p>Ea tota <a href='http://www.lorem-ipsum.info/generator3-es'>intellegam sed</a>, laboramu signife ex qui, te illum aeque vivendo sit. An pro ludus doming mollis, quo omnis malis oporteat cu, postea facilisis sit ad. In simul deterruisset has, consul nominavi at usu, <span class='negrita'><span class='italica'>vix ea suas exerci</span></span>. Quodsi adolescens est in, ea accusamus definiebas has. Mea elit cibo elaboraret te. No facete ceteros sed, ei has causae definitionem.</p>"; |
y la hoja de estilos styleSheet.css posee estas reglas: Código: p{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#444444; text-align:justify; margin-left:12px; margin-right:12px; } h1{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:20px; text-align:center; text-decoration:underline; }
.negrita{ font-weight:bold; } .italica{ font-style:italic; } a:link{ text-decoration:none; color:#3B89B0; } a:hover{ text-decoration:underline; } |
Descargar ejemplo ¿Te interesó este artículo?Puedes suscribirte al feed ó dejar tu email para recibir las últimas noticias, tal como lo hacen actualmente las 2255 personas que siguen al blog
|
- Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
- Lenguaje inapropiado será borrado.
| |