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);
//Contenido a cargar
createEmptyMovieClip("imagen_mc", 2);
imagen_mc.loadMovie("imagen.jpg");
var sonido:Sound = new Sound();
sonido.loadSound("yeah.wav", true);
var datos:XML = new XML();
datos.load("temperatura.xml");
//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.
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?
Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate