Comunidad de diseño web y desarrollo en internet online

Tutorial del componente ProgressBar de Flash

Para este ejemplo necesitais coger una imagen que pese bastantes kbs y así poder ver como se carga, yo en mi ejemplo le pondré el nombre de imagen.jpg, luego cada uno que le ponga el nombre que más le guste, jeje.

Bueno, para variar, necesitaremos que nuestro componente este en la biblioteca, para así atachearlo:

//Atacheamos el componente
attachMovie("ProgressBar", "mi_barracarga", 1);
Ahora, crearemos un movieclip para cargar la imagen. Este movieclip será lo que cargará nuestro ProgressBar, monitorizando el peso, y comprobando a cada momento cuanto se ha cargado.
//Contenido a cargar
createEmptyMovieClip("imagen_mc", 2);
imagen_mc.loadMovie("imagen.jpg");
Lo que nuestro ProgressBar cargará será "imagen_mc", ya que este componente lo que hace es comprobar el tamaño que ocupa un objeto en cuestión, y comprobar cuanto le falta para que esté totalmente cargado. Por ejemplo, también podriamos usar este componente para cargar un sonido.
var sonido:Sound = new Sound();
sonido.loadSound("yeah.wav", true);
O un archivo XML...
var datos:XML = new XML();
datos.load("temperatura.xml");
En definitiva, que podemos cargar lo que le asociemos a la propiedad source de este componente:
//Propiedades
mi_barracarga.direction = "left";
mi_barracarga.conversion = 1024;
mi_barracarga.label = "Cargando %1kb de %2kb";
mi_barracarga.labelPlacement = "top";
mi_barracarga.mode = "polled";
mi_barracarga.source = imagen_mc;

De esta forma, ya tenemos asociado a nuestro componente que es lo que debe cargar. En este ejemplo, le hemos dicho que cargue el contenido en modo "polled". Hay tres modos de cargar las cosas:

  • Event: Event utiliza los métodos del componente Loader para comprobar el progreso y si se ha completado la carga.
  • Polled: Polled utiliza getBytesLoaded y getBytesTotal, para comprobar el progreso y si se ha completado, es el modo más utilizado.
  • Manual: En este caso, le tenemos que dar nosotros un valor minimo y otro maximo, realizando la carga nosotros manualmente (mediante bucles for, por ejemplo). Este es el modo menos utilizado.

Con "direction" le decimos para que dirección queremos que creza la barra, siendo "right" el valor predeterminado. "Conversion" lo utilizaremos para hacer una división de los bytes, en este caso asignamos 1024, y el resultado en vez de verse en bytes, se verá en kilobytes.

La propiedad "label" es un tanto distinta, ya que consta de tres valores asignables dentro de un string.

  • %1: Nos escribirá el número de bytes cargados. A este valor se le aplica la propiedad "conversion".
  • %2: Nos escribirá el número de bytes totales. A este valor se le aplica la propiedad "conversion".
  • %3: Nos escribirá el porcentaje cargado.
  • %%: Nos escribirá el carácter "%".

Con la propiedad "labelPlacement" colocamos la etiqueta que nos muestra los datos en la posición que queramos, siendo "bottom" la posición por defecto.

Ahora falta hacer los eventos para cuando esta cargando, y para cuando ha completado la carga.

//Listener para cuando esta cargando la imagen
alCargar = new Object();
alCargar.progress = function(evento) {
mi_barracarga.setProgress(getBytesLoaded, getBytesTotal);
};
//Listener para cuando acaba de cargar la imagen
alAcabar = new Object();
alAcabar.complete = function(evento) {
removeMovieClip(mi_barracarga);
};
//Eventos
mi_barracarga.addEventListener("progress", alCargar);
mi_barracarga.addEventListener("complete", alAcabar);

En el evento progress usamos el método setProgress() combinado con getBytesLoaded y getBytesTotal, porque estamos usando el modo Polled. Cuando se invoca el evento complete, lo que hacemos es borrar nuestro comoponente y listos.

Con este componente podremos cargar cualquier cosa de una manera rápida y sencilla.

¿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