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:

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);

¿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