ScrollRect, o cómo hacer una máscara sin máscaras

Publicado por Iván Gajate el 9 de marzo de 2009 en AS2, AS3, Flash, Lab, Tutoriales

Hay una propiedad de todos los objetos de visualización en Flash que se llama scrollRect y es su rectángulo de visualización, la zona que Flash nos enseña de ese objeto. Normalmente el rectángulo de visualización es de iguales dimensiones que el objeto, es decir, si yo tengo una imagen de 400×400, su rectángulo de visualización es de 400×400 empezando en la esquina superior izquierda de la imagen.

scroll-rect-img-1

 

Pero puedo hacer que el scrollRect de esa imagen sea un rectángulo de 200×200 alineado en el (150, 80) por ejemplo. Con ello conseguiría que sólo se viera una porción de la imagen, quedando el resto no visible: estoy haciendo una máscara sin necesidad de crear un clip que haga de máscara de capa.

scroll-rect-img-2

Pero lo interesante es que cuando se cambia la posición del scrollRect, éste siempre está alineado en el 0,0 de nuestro objeto, de tal manera que lo que vería sería una ventana de 200×200 con mi imagen desplazada (scroll) 150 pixels en horizontal y 80 en vertical. Vería moverse la foto dentro de una ventana inmóvil.

scroll-rect-img-4

Es el mismo concepto que utiliza Google Maps, nosotros vemos el mundo a través de una ventana de dimensiones fijas. Cuando pulsamos y arrastramos, parece que estamos moviendo el mapa, pero en realidad estamos desplazando la ventana a través de la cual vemos el mapa. Estamos cambiando el punto de vista de la cámara, pero como la visualización de las imágenes de esa cámara son fijas, nos da la sensación que es el contenido el que se mueve, aunque en realidad no es así.

Todo esto nos puede servir por ejemplo para hacer un scroll horizontal sobre un texto muy largo, sin tener que moverlo en realidad, moviendo su scrollRect.

Esto aumenta increíblemente el rendimiento, pues flash no tiene que mover un texto de grandes dimensiones (el texto en realidad no se mueve), sino mostrar una pequeña porción de él, y esto se nota y mucho.

Si tengo una gran tira de texto, y hago su scrollRect de 300 pixels por ejemplo esto es lo que vería:

 scroll-rect-1

Si hubiera enmascarado el texto, tendría que moverlo hacia la izquierda manteniendo fija la máscara, así:

scroll-rect-2

Pero si lo que muevo es su scrollRect hacia la derecha, obtendría el mismo resultado sin tener que mover el texto:

scroll-rect-3

Aunque yo no vería la "mascara" desplazada claro, la vería en el mismo sitio, como una ventana estática.

Haciendo unas pruebas de rendimiento, usando máscaras he podido mover un texto con unos 500 nombres antes de que se notase una ralentización en mi película, y usando scrollRect he movido 3.000 nombres sin problemas!! La mejoría es brutal.

Sólo hay que tener en cuenta que si quiero ver el contenido moverse hacia la derecha, tengo que mover su scrollRect hacia la izquierda, y lo mismo con la vertical.

El código del scrollRect es así:

// creo un rectangulo de 300x200 desde el (0, 0)
var rectangulo:Rectangle = new Rectangle(0, 0, 300, 200);

// Se lo aplico al scrollRect del campo de texto
campoNombres_txt.scrollRect = rectangulo;

Y una aplicación podría ser esta:

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

Descargar ejemplo

 

16 comentarios para “ScrollRect, o cómo hacer una máscara sin máscaras”

  1. Exactamente esto es lo que necesito!

  2. Si, es lo bueno, la propiedad scrollRect es una propiedad del clip o del campo de texto, así que si lo mueves o lo rotas, se rota la mascara.

  3. Diego Quintero dice:

    Hermano, una pregunta, el scrollRect funciona tambien rotandolo? es decir si roto el scrol rect, parecera que roto el contenido con mascara?