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:
- var _texto:String = "La comunicación nos hizo inteligentes. Sentientes. Es el mecanismo evolutivo con el que perpetuamos el conocimiento y la experiencia. Con ella nacieron conceptos como los sentimientos, el arte y la especulación del futuro..........//**aqui todo el texto en formato html **//..... ";
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.
- texto1.htmlText = _texto;
- 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:
- function getMaxLines(caja:TextField):Number {
- 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.
- if (texto1.maxScrollV > 1) {
- 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.
- if (texto1.maxScrollV > 1) {
- 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.
- import fl.events.SliderEvent;
- 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.
- import fl.events.SliderEvent;
- 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!
Compártelo:
Visto 27.202 veces
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?