Texto con scroll a dos columnas en Flash CS3

En este tip mostraré 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 "texto". 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:

Código :

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. Muchos de esos sentimientos sólo son posibles cuando compartimos lo que nuestro cerebro compone con otro individuo. Como el amor.<br/><br/>Mitsuki reflexionaba eso a bordo de la nave-prisión. Axe le cortó el cuello a Shiro en Presea y él decidió dejar la herida en su lugar, perdiendo el habla para siempre. Ella apoyó y entendió su decisión, pero seguía insegura en su mente.<br/><br/>Franz Miller, presidente de Xenos, les encomendó la misión de ir a la prisión “Alegría” del Congreso. Eliminar cualquier resistencia o testigos y silenciar a Cris Tanner. Así lo hicieron.<br/><br/>Tras la misión, los Cobradores, Mitsuki y Shiro, pasaron tres días en la oscuridad metálica de la prisión, asegurándose que nadie más viniera. Franz sospechó que Axe podría enviar a alguien y ellos confiaban en el juicio de su jefe y amigo. Suficiente tiempo para que Mitsuki reflexionara acerca de Shiro.<br/><br/>Ellos se comunicaban de otras formas. Compartían un enlace Synapse cerebral para intercambiar pensamientos. Habían hecho el amor incontables veces e incluso dieron el siguiente paso hace tiempo, sincronizando sus mentes en más de una ocasión. A diario, un simple gesto les daba a entender más que un millón de frases ¿Qué cambio tenía el no poder decir en palabras lo que ellos ya sabían?<br/><br/>Los sensores de movimiento los alertaron. Una nave se acoplaba al casco lateral de la prisión, cortando la cubierta y entrando a la fuerza. Una nave de perturbante similitud a la Opera que ambos vieron estallar en Presea.<br/><br/>Shiro sintió la inseguridad en Mitsuki. Flotando como estaban, Shiro giró hasta estar frente a ella, la tomo en sus brazos y la miró un largo rato a los ojos antes de prepararse para el asalto. Fue todo lo que Mitsuki necesitó. Era tiempo de trabajar.";

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.

Código :

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:

Código :

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.

Código :

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.

Código :

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.

Código :

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.

Código :

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!

archivo.fla

 

Tweet