Integración de CSS dentro de Flash. Scour Design. Tutoriales de Flash, ActionScript, CSS, Photoshop, ImageReady...

\n"; } } } lecturas();

          


Integración de CSS dentro de Flash

      

Autor: www.leandrodonofrio.com

Resultado

No tiene instalado el plugin de Flash necesario, haga click aquí para descargarlo gratuitamente.

Si lo deseas, puedes descargarte el archivo del ejemplo aquí.

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...

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:

    

  1. //Asociamos la variable estilo al objeto StyleSheet
    2. 

  2. 
var estilo:TextField.StyleSheet = new TextField.StyleSheet();
    3. 

  3. //Acciones a realizar si la hoja de estilo se carga correctamente
    4. 

  4. estilo.onLoad = function() {

    5. 

  5. //Aplicamos la hoja al campo de texto
    6. 

  6. txt.styleSheet = this;
    7. 

  7. //Habilitamos el modo HTML y le asignamos un borde al campo de texto
    8. 

  8. txt.html = true;
    9. 

  9. txt.htmlText = html_txt;
    10. 

  10. txt.border = true;
    11. 

  11. 
};
    12. 

  12. //Asignamos la hoja styleSheet.css a la variable estilo
    13. 

  13. estilo.load("/articulos/tutoriales/flash/styleSheet.css");
    14. 

  14. //Cargamos de código HTML al campo de texto
    15. 

  15. html_txt = "<br><h1>Lipsum regular</h1>";
    16. 

  16. 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>"    ;
    17. 

  17. 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>"    ; 
    18.

y la hoja de estilos styleSheet.css posee estas reglas:

    

  1. p {

    2. 

  2. 	font-family:Verdana, Arial, Helvetica, sans-serif;
    3. 

  3. 	font-size:10px;
    4. 

  4. 	color:#444444;
    5. 

  5. 	text-align:justify;
    6. 

  6. 	margin-left:12px;
    7. 

  7. 	margin-right:12px;
    8. 

  8. }
    9. 

  9.  
    10. 

  10. h1 {

    11. 

  11. 	font-family:Verdana, Arial, Helvetica, sans-serif;
    12. 

  12. 	font-size:20px;
    13. 

  13. 	text-align:center;
    14. 

  14. 	text-decoration:underline;
    15. 

  15. }
    16. 

  16.  
    17. 

  17. 
.negrita {

    18. 

  18. 	font-weight:bold;
    19. 

  19. }
    20. 

  20.  
    21. 

  21. 
.italica {

    22. 

  22. 	font-style:italic;
    23. 

  23. }
    24. 

  24.  
    25. 

  25. a:link {

    26. 

  26. 	text-decoration:none;
    27. 

  27. 	color:#3B89B0;
    28. 

  28. }
    29. 

  29.  
    30. 

  30. a:hover {

    31. 

  31. 	text-decoration:underline;
    32. 

  32. 
} 
    33.
Scour Design ™ Todos los Derechos Reservados © Carlos Carmona Xhtml 1.1 Strict Válido!CSS Nivel 2 Válido! Nivel Triple-A de Conformidad con las Directrices de Accesibilidad Web (WAI)