htmlText y CSS

Publicado por Iván Gajate el 6 de agosto de 2009 en AS2, AS3, Flash, Tutoriales

Cada vez le estoy cogiendo mas el gusto a esto de usar un texto con formato html en Flash. Ya vimos como se hacía, y yo no lo usaba demasiado porque había que crear la fuente el la biblioteca, y meter mas líneas de código, pero hoy en el curro me ha ahorrado mucho tiempo y veo que al final no son tantas líneas.

Yo antes para hacer algo como esto

htmltext1

donde sabía que eran cuatro títulos cortos, cada uno con un color, distintos tamaños y cuerpos y ya. Pues no me liaba, metía cuatro campos de texto con cuatro nombres y los seteaba de base de datos.

Pero como ya decía Ale Muñoz en Sofá Naranja, "Cualquier elemento de diseño puede existir cero, una o infinitas veces".

Lo que se traduce en mi diseño en que ya no son cuatro noticias, son infinitas, con un paginado muy mono debajo, unas banderitas a la izquierda de cada título y que si un título es muy largo fluya hacia abajo 🙁
Ha llegado el momento de dejarse de vaguerías y hacerlo bien: htmlText y CSS.

Lo primero es lo de la fuente incrustada, porque ahora cada línea puede tener una fuente distinta y el nombre que yo le he dado en el cuadro de vinculación de la biblioteca parece que no lo usa para nada.
Para obtener el nombre de las fuentes incrustadas en mi película podemos acceder con enumerateFonts:

var misFuentes:Array = Font.enumerateFonts(false); 

for each(var f:Font in misFuentes){ 
	trace(f.fontName); 
}

Con el false le indico que solo quiero las incrustadas, no todas las del sistema. Y así puedo ver que mi fuente se llama "Abadi MT Condensed Extra Bold", y no "Abadi" que es como yo la había vinculado.

Así que ahora ya puedo hacer mi hoja de estilos incluyendo la fuente y el cuerpo:

var _css:StyleSheet = new StyleSheet();
_css.setStyle(".oscuro", {color:"#5C4030", fontSize:"18", fontFamily:"Abadi MT Condensed Extra Bold"});
_css.setStyle(".claro", {color:"#BF7F80", fontSize:"18", fontFamily:"Abadi MT Condensed Extra Bold"});

_titulares.styleSheet = _css;

No todas las etiquetas css están disponibles, ni se llaman igual. Por StyleSheet se pueden usar alguna más.

Lo de las banderitas me daba un poco más de miedo, porque las etiquetas html de Flash (CS3) son muy limitaditas y las imágenes muchas veces hacen un poco lo que quieren.

htmltext2

Pero resulta que se puede acceder a las imágenes por un id, y tratarlas como cualquier objeto, de hecho, es un clip de película con 22 banderas una en cada fotograma, y una vez insertada hago un gotoAndStop(fotograma) al que le corresponda 🙂

var contenido:String = "";

for(var i:uint=1; i<4; i++) {
	contenido += "<img id='banderita_" + i + "' width='16' height='11' align='left' vspace='6' hspace='3' src='Banderitas'></img>"
	contenido += "<span class='claro'>" + _datos[i].titulo + "</span><br>";
}
			
_titulares.htmlText = contenido;

for(i=1; i<4; i++) {
	var img:MovieClip = MovieClip(_titulares.getImageReference("banderita_"+i));
	img.gotoAndStop(fotograma);
}

Mediante getImageReference(id) tengo una referencia al clip de película de cada banderita, pudiendo hacer cualquier cosa de MovieClip: cambiar su posición, rotación, anchura…. Súper potente.

Ahora es mucho mas fácil dar formato a un texto, y para el típico listado de cosas con cierto formato ahorran mucho tiempo, pues al final lo único que tienes es un campo con un htmlText, puedes hacerle un scroll o lo que quieras, y te despreocupas de posicionar todos los elementos fluidos con respecto al anterior.

 

18 comentarios para “htmlText y CSS”

  1. Para obtener el nombre de la fuente embebida, también podemos hacerlo así (la fuente tiene FuenteEmbebida como nombre de clase de vinculación):

    var fuente:Font = new FuenteEmbebida();
    trace(fuente.fontName);

  2. Por cierto, trucazo lo del getImageReference 🙂

  3. Gran post Iván, muy currado y me ha venido de miedo, que yo también soy de los que aplican los estilos a capón, por vaguería.

  4. Claro, es lo bueno del CDATA y del UTF8, tu escribe directamente la palabra acentuada, el xml lo tienes que guardar con formato utf8 y Flash lo pilla en utf8 directamente.

  5. Creo que no se entendio bien, lo quise decir es que en el xml viene escrito por ejemplo: “&e acute;” (puse un espacio para que se visualize el codigo) y flash muestra eso en vez de “é”.

  6. Hola Carlos
    me alegro que te guste el blog 😉
    No hay problema en visualizar caracteres extraños, pero tienes que asegurarte de que están incorporados esos caracteres.
    Fíjate en cómo se hace http://www.yporqueno.es/blog/as3-texto-con-formato-con-css, además de incrustar los Numerales y Latín Básico, incluyo algunos caracteres con acentos, eñes… y en tu caso la “¿” y la “è”

  7. Antes que nada, Excelente BLOG!!
    Hago una consulta, tengo un xml que se crea dinamicamente con etiquetas “<![CDATA[” y con el cual lleno campos mediante htmlText pero casi todas las “Entidades HTML” como: “¿”, “é”, etc. no se visualizan. Alguna solucion!?