AS3 – Texto con formato con CSS

Publicado por Iván Gajate el 3 de abril de 2009 en AS2, AS3, Flash, Tutoriales

Si queremos un texto con formato en flash no es tan fácil como podría parecer. Al menos yo siempre tengo que andar buscando cómo lo hice la última vez 😛

(Archivo Flash, para verlo necesitas Adobe Flash Player.)

Para que se vea correctamente la letra, tenemos que crear un nuevo elemento en la biblioteca de tipo fuente (botón derecho en la biblioteca > Nueva Fuente…)

formato-css-2

Además, tiene que estar vinculada para ActionScript (botón derecho sobre la nueva fuente creada > Vinculación…)

formato-css-3

Ahora ya podemos crear un campo de texto de tipo dinámico y le ponemos un nombre de instancia,  campoTexto_txt por ejemplo, con el tipo de letra que hemos creado (aparecerá en nuestro listado de fuentes con un asterisco).

Es importantísimo que nos acordemos de incorporar los caracteres necesarios para poder escribir nuestro contenido. Yo siempre uso los Numerales y Latín Básico, e incluyo las vocales acentuadas y la ñ.

formato-css-1

Ahora ya podremos aplicarle estilo por programación.

Consiste en crear un objeto styleSheet y añadirle los estilos que queramos con las etiquetas css que queramos. Se lo asignamos al campo texto, y seteamos su htmlText (ojo, no es su propiedad text).

import flash.text.StyleSheet;

// Creo una nueva hoja de estilos y añado tres nuevos estilos: 'naranja' y 'negrita' y la etiqueta 'A'
var miCSS:StyleSheet = new StyleSheet();
miCSS.setStyle(".naranja", {color:'#FF9900', fontSize:'24', fontWeight:'bold'});
miCSS.setStyle(".negrita", {fontWeight:'bold'});
miCSS.setStyle("A", {color:'#000000'});
miCSS.setStyle("A:hover", {color:'#FF9900'});

// Asocio la hoja de estilos al campo de texto
campoTexto_txt.styleSheet = miCSS;

// Escribo el htmlText del campo de texto con sus etiquetas html
campoTexto_txt.htmlText = "Texto en <span class='naranja'>naranja</span> y en <span class='negrita'>negrita</span> con css :)<br><br><a href='http://www.google.es' target='_blank'>Enlace a Google</a>\r";

Nótese que he incluido un “\r” al final del enlace para evitar que flash ponga como zona activa el resto de líneas del campo de texto.

En AS2 es prácticamente igual, tan solo cambia la ruta de styleSheet. Incluyo un ejemplo.

Descargar ejemplo css

 

17 comentarios para “AS3 – Texto con formato con CSS”

  1. Por cierto, para evitar que los enlaces se “extiendan” a la siguiente línea de texto, basta con poner al final del htmlText un “br”

  2. Muy buen aporte colega, gracias por la info.