Comunidad de diseño web y desarrollo en internet

Tutorial del componente Loader de Flash


Uso del componente Loader

Este componente nos permite cargar archivos externos .JPG o .SWF y monitorizar su carga, así como modificar algunas propiedades de visualización. Consta de un método para iniciar la carga, y dos eventos que nos sirven para controlar si está cargandose nuestro archivo y para saber si se ha cargado del todo.

Si ya habéis utilizado antes precargadores, veréis que este es bastante sencillo de configurar. Poner un componente Loader en vuestra biblioteca y añadir este código en vuestro fotograma:

//Atacheamos el componente
attachMovie("Loader", "mi_cargador", 1);
//Propiedades
mi_cargador.contentPath = "imagen.jpg";
Si probamos esto nos tiene que ir, hay que tener "imagen.jpg" en la misma carpeta que vuestro cargador, pero tiene que ir. Obviamente, podemos mejorar muchisimo esto, puesto que ahora no hay barra de carga ni nada por el estilo. Si os habéis fijado, es posible que vuestra imagen os salga a un tamaño más reducido, esto es porque el tamaño inicial del cargador es (100, 100), con setSize podemos cargar el tamaño, pero también podemos hacer otra cosa...
mi_cargador.scaleContent = false;
De esta forma, nuestras imagenes siempre aparecen a su tamaño real, así Flash no escalará el contenido a cargar. Pero también ocurre otra cosa, la imagen se carga nada más iniciar, ¿y si yo quiero que cargue al apretar un botón? Bien, añade uno, y pon este código adicional:
mi_cargador.autoLoad = false;
//Evento del boton
boton_btn.onPress = function() {
//Atacheamos la barra e iniciamos la carga
attachMovie("barra", "barra_mc", 2);
mi_cargador.load();
};

Con autoLoad podemos controlar que no cargue nada más iniciar, para poder así usar luego el método load(), que es el que se encarga de ejecutar la carga. Si queréis para practicar podéis usar un componente Button, en vez de un botón normal y corriente.

Ahora crear un movieClip para que haga de barra de carga, y exportarlo para actionscript con el nombre de barra, el siguiente código se encargará del resto:

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

El evento progress se va preocupando el solo de cuanto lleva cargado nuestro contenido, y así nosotros solo tenemos que escalar la barra con la propiedad percentLoaded. Para los que les guste mostrar los bytes cargados y totales pueden usar bytesLoaded y bytesTotal, propiedades de sólo lectura que nos dan los tamaños en bytes.

Al final del todo con el evento complete lo único que tenemos que hacer es borrar la barra y decir que se ha cargado la imagen x satisfactoriamente.

Un buen componente para hacer galerías, jeje.

¿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