Comunidad de diseño web y desarrollo en internet

Tutorial del componente ScrollPane de Flash

Antes hemos podido trabajar con Loader, un componente similar a este en muchos aspectos, pero al cual hay que añadirle barras de scroll para poder movernos a través de la imagen, además, con ScrollPane también podemos cargar MovieClips dentro de él y poder visualizarlos con barras de desplazamiento.

Para este ejercicio necesitaremos en nuestra biblioteca el componente ScrollPane, un MovieClip que sea una barra hacer las cargas (exportalo para actionscript con el nombre "barra") y un botón que este en la escena con el nombre "boton_btn". Una vez tengas esto, puedes añadir este código:

//Atacheamos el componente
attachMovie("ScrollPane", "mi_panel", 1);
attachMovie("barra", "barra_mc", 2);
//Propiedades
mi_panel.vScrollPolicy = "on";
mi_panel.hScrollPolicy = "on";
mi_panel.vPageScrollSize = 20;
mi_panel.vLineScrollSize = 1;
mi_panel.hPageScrollSize = 20;
mi_panel.hLineScrollSize = 1;
//Lo que vamos a cargar
mi_panel.contentPath = "imagen.jpg";
//Refrescar la imagen
boton_btn.onPress = function() {
attachMovie("barra", "barra_mc", 2);
mi_panel.refreshPane();
};

Como siempre atacheamos nada más empezar nuestros componentes y luego le ponemos las propiedades. Todas las propiedades están duplicadas para v y h, que son vertical y horizontal. En esta tabla se explica brevemente todas las propiedades de este componente:

Estilo

Descripción/Uso

vScrollPolicy

Puede ser "on", "off" o "auto", y su función es activar, desactivar o que se active según sea necesario, la barra de desplazamiento vertical.

hScrollPolicy

Puede ser "on", "off" o "auto", y su función es activar, desactivar o que se active según sea necesario, la barra de desplazamiento horizontal.

vPageScrollSize

Número de píxeles que se moverá la barra de desplazamiento vertical al clicar en la pista de desplazamiento (track).

hPageScrollSize

Número de píxeles que se moverá la barra de desplazamiento horizontal al clicar en la pista de desplazamiento (track).

vLineScrollSize

Número de píxeles que se moverá la barra de desplazamiento vertical al clicar en las flechas.

hLineScrollSize

Número de píxeles que se moverá la barra de desplazamiento horizontal al clicar en las flechas.

vPosition

Posición en píxeles de la barra de desplazamiento vertical.

hPosition

Posición en píxeles de la barra de desplazamiento vertical.

Una vez hemos puesto todas nuestras propiedades, podemos usar contentPath para asignar mediante esta propiedad, qué vamos a cargar. Más abajo tenemos el código del botón que hay en nuestra escena, el cual lo que hace es recargar la imagen gracias al método refreshPane().

Pero, es obvio que falta algo, nuestra barra de carga no se mueve, porque aún no la hemos programado, veamos que pasa si añadimos este código:

//Listener para comprobar la carga
mientrasCarga = new Object();
mientrasCarga.progress = function(evento) {
porcentaje = (mi_panel.getBytesLoaded()/mi_panel.getBytesTotal())*100;
barra_mc._xscale = porcentaje;
trace(mi_panel.getBytesLoaded()+" bytes cargados de "+mi_panel.getBytesTotal());
};
//Listener para comprobar si ha cargado del todo
alCargar = new Object();
alCargar.complete = function(evento) {
removeMovieClip(barra_mc);
trace("Has cargado la imagen "+mi_panel.contentPath);
};
//Eventos
mi_panel.addEventListener("progress", mientrasCarga);
mi_panel.addEventListener("complete", alCargar);

Ahora sí, nuestra barra de carga va aumentando gracias al evento progress. Daros cuenta de que la forma de cargar en este componente es muy diferente a como lo hacíamos en el componente Loader, por ejemplo, getBytesLoaded() y getBytesTotal son métodos, y en el componente Loader eran propiedades. Esto debe ser fundamentalmente porque en este componente podemos cargar MovieClips y en Loader no, acarreando esto, una programación del componente distinta.

Aún nos queda otro evento por ver que es scroll, el cual nos permite saber cuando se está interactuando con las barras de desplazamiento. Añadamos este código a los listeners y a los eventos:

//Listener para cuando se usa el scroll
alMover = new Object();
alMover.scroll = function(evento) {
trace("v:"+mi_panel.vPosition+" h:"+mi_panel.hPosition);
};
//Eventos
mi_panel.addEventListener("scroll", alMover);
Así para acabar, con este evento podremos saber siempre, en qué posición de la imagen esta nuestro usuario.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate