Texto con scroll a dos columnas en Flash CS3
Este es un ejemplo de texto con scroll en una maquetación de dos columnas (siguiendo este mismo ejemplo se podrian colocar tres o mas columnas sin problema). Lo interesante del ejemplo es que podremos controlar el desplazamiento entre las diferentes columnas de texto con un mismo scroll.
Este serÃa el ejemplo:
El primer paso será colocar en nuestra pelÃcula dos cajas de texto y un componente slider (esto lo podrÃamos haber hecho por código, pero como no es importante para el ejemplo lo haremos "a mano". El uso del componente slider tambien es opcional, tambien podrÃamos haber utilizado un scroll personalizado)
Para seguir el ejemplo llamaremos a los TextFields "texto1" y "texto2". Al componente slider lo llamaremos "slide".
Ahora pasemos al código. Primero de todo será obtener el texto. Este texto lo podemos sacar de un xml, base de datos o de donde sea. Para el ejemplo lo colocaré directamente en una variable:
Ahora colocaremos el texto dentro de la caja de texto "texto1", y comprobaremos si el texto es demasiado largo para caber en la primera caja. Si es demasiado largo colocaremos este mismo texto en la segunda caja, en caso contrario ocultaremos el componente slider ya que no será necesario hacer scroll.
if (texto1.maxScrollV> 1) {
texto2.htmlText = texto1.htmlText;
} else {
slider.visible = false;
}
Ahora tenemos que desplazar el texto de la segunda caja para que la última lÃnea de la primera caja enlace con la primera lÃnea de la segunda caja. Para esto tendrÃamos que saber el número total de lÃneas que caben en la caja, esto lo podriamos saber haciendo una prueba manual pero como podria interesarmos cambiar el tamaño del texto a través de código y esto harÃa variar el número de lÃneas es mejor hacer la comprobación tambien a través de código. Esta función nos devolverÃa el número de lineas de la caja:
var texto:String = caja.htmlText;
caja.htmlText = "";
var num:Number = 0;
while (caja.maxScrollV <= 1) {
caja.htmlText += (num+"<br/>");
num++;
}
caja.htmlText = texto;
return num - 1;
}
La idea de esta función es que va colocando lineas de texto hasta que detecta que es necesario un scroll (maxScrollV mayor de 1) entonces devuelve el valor de las lÃneas añadidas. Sabiendo este valor cambiaremos el scroll vertical de la segunda caja de texto.
texto2.htmlText = texto1.htmlText;
var maxlines:Number = getMaxLines(texto1);
texto2.scrollV += maxlines;
} else {
slider.visible = false;
}
Nos faltarÃa hacer una última comprobación, que serÃa el caso en que el texto no llenase toda la segunda caja. Entonces tendrÃamos que llenar la caja con lineas en blanco y ocultar el slider.
texto2.htmlText = texto1.htmlText;
var maxlines:Number = getMaxLines(texto1);
trace("ssss"+texto1.scrollV)
texto2.scrollV += maxlines;
var num:int = maxlines - texto1.maxScrollV;
if (num>0) {
for (var i = 0; i <= num; i++) {
texto2.htmlText += "<br/>";
texto2.scrollV++;
}
slider.visible = false;
}
} else {
slider.visible = false;
}
Finalmente solo falta programar el slider para que desplace el texto.
Le indicaremos al componente slider que los pasos de scroll serán tantos como tantas lÃnas ocultas tenga la segunda caja de texto.
slider.maximum = texto2.maxScrollV-texto2.scrollV;
Añadiremos al componente un evento THUMB_DRAG para cuando arrastremos el slider y un evento CHANGE para cuando cliquemos sobre la barra. Haremos que el scroll de la primera caja sea en relación al valor del slider y que el scroll de la segunda caja vaya en relación con el de la primera.
slider.maximum = texto2.maxScrollV-texto2.scrollV;
slider.addEventListener(SliderEvent.THUMB_DRAG, scrollTexto);
slider.addEventListener(SliderEvent.CHANGE, scrollTexto);
function scrollTexto(event:SliderEvent):void {
texto1.scrollV = 1+slider.value;
texto2.scrollV = texto1.scrollV + maxlines;
}
Y listo!
Post relacinonados:
5 Comments »
RSS feed for comments on this post. TrackBack URI
no podras subir el ejemplo pero en flash mx 2004
Estoy intentando pasarlo a Flex pero no lo consigo... ¿alguna posibilidad de ver el mismo ejemplo similar pero hecho en Flex? Estoy convencido de que despertarÃÂa mucho interés.
El texto se repite al final de la columna 1 y al principio de la columna 2
Para los que todavÃÂa estamos intentando programar en AS2 ¿cómo puedo sustituir el maxScrollV y obtener las lìneas sobrantes a la caja? ¿existe algún comando equivalente en CS2 o algún código sencillo que haga los mismo? De antemano gracias.
Podrias indicar como extraer el texto de un xml?