Todo lo que necesitamos para construir este sencillo preloader, es dibujar una barra, convertirla en clip de pelí cula. En la imagen inferior se muestra la lí nea de tiempo del ejemplo.
barra_mc._xscale = 0;
this.onEnterFrame = function() {
carga = Math.floor((getBytesLoaded()/getBytesTotal())*100);
barra_mc._xscale = carga;
porcentaje.text = carga;
porcentaje._x = barra_mc._x+barra_mc._width;
if (carga == 100) {
gotoAndPlay("_inicio");
delete this.onEnterFrame;
}
};
Veamos como funciona el código:
En primer lugar cambiamos la propiedad _xscale del clip de pelí cula barra_mc de manera que al iniciarse la precarga, este tiene un valor igual a 0
barra_mc._xscale = 0;
Declaramos una variable que recoge el resultado de calcular los bytes cargados
carga = Math.round((getBytesLoaded()/getBytesTotal())*100);
Una vez se concluye la precarga, enviamos el cabezal al fotograma siguiente para que la pelí cula se reproduzca.
if (carga == 100) {
gotoAndPlay("_inicio");
delete this.onEnterFrame;
}
A continuación modificamos el tamaño del clip de pelí cula barra_m que tomará su valor de la variable carga. Es importante hacer este paso tras la comprobación, para evitar que se muestre la barra de porcentaje en posteriores ejecuciones (la pelí cula está en caché, por tanto no se debe precargar).
barra_mc._xscale = carga; porcentaje.text = carga; porcentaje._x = barra_mc._x+barra_mc._width;
Puedes descargar el ejemplo en formato .fla haciendo clic aqui (3422 hits)
Nota
Cualquier consulta sobre este tutorial o .fla debe realizarse en el foro.
Octubre 18th, 2004 at 5:28 pm
Hola Toni. Estoy empezando con flash y he visto algunos preloader que no me terminan de convencer. El tuyo parece bastante sencillo pero no se como hacer para que el MC quede como en la figura superior. ¿Me podrí as explicar?
Muchas gracias
Octubre 20th, 2004 at 9:42 am
Luis, estarí a encantado de ayudarte, pero no entiendo muy bien a que te refieres. Te invito a participar en nuestro foro para que expliques el problema.
saludos.
Foro:
http://www.after-hours.org/foro/
Noviembre 14th, 2004 at 2:48 am
Felicitaciones por esta ayuda para los que incursionamos en Flash, lo que no entieno es porque tenemos 2 capas la capa porcentaje y barra? no valdrí a solo con 1 sola capa para el control de todo?
Ademas no me queda claro como se hace, falta la explicación de en donde ejecutamos el codigo.
Noviembre 14th, 2004 at 8:52 am
Hola Santiago,
la razón de usar varias capas, no es otra que la de mantener un documento más ordenado, si lo prefieres, puedes usar una sola capa para todo. El código, va en la capa ‘as’, puedes descargar el archivo de ejemplo desde el tutorial.
saludos.
Noviembre 19th, 2004 at 3:54 am
Hola Toni soy un nuevo usuario de flash y he visto cosas interesantes en tu web pero quisiera que me ayudaras o pusieras en tu web algun ejemplo del componente progressbar que al terminar de llenarse se desaparesca y carge todo lo restante en la aplicacion ya lo he trabajado pero solo me muestra la carga de un archivo en mi caso quiero que me expliques para un web entera
Noviembre 19th, 2004 at 2:00 pm
Yoslan,
hay unos 6 tutoriales sobre preloaers en el blog, buscr preloader y verás. Una vez te los hayas visto, si tienes dudas, puedes usar el foro.
saludos!
Enero 12th, 2005 at 10:10 am
if (carga == 100) {
gotoAndPlay("_inicio"); >>> sustituir por esta gotoAndPlay("Scene 2″, 1);
delete this.onEnterFrame;
}
hola toni no abra alguna forma de sustituir esta parte que muestro arriba
mira baje el preloader que tienes ahi
y inserte otra escena que es la escena 2 que es donde ice mi animacion que accion le devo de poner al preloader.
porque no entendi muy bien
Enero 12th, 2005 at 10:45 am
Si has puesto el preloader en la escena 1 y la animación en la escena 2:
if (carga == 100) {
delete this.onEnterFrame;
nextScene()
}
Recuerda modificar el orden de las escenas.
saludos.
Enero 12th, 2005 at 11:38 am
ultimamente estoy “pejigero", ya sé que es un post antiguo y que desde octubre ya hemos aprendido mucho juntos, asà que hago una observación:
deberÃamos poner un “else” al if, si no, siempre va a mostrar la barra de porcentaje.
vamos
if (carga == 100) {
gotoAndPlay("_inicio");
delete this.onEnterFrame;
}else{
barra_mc._xscale = carga;
porcentaje.text = carga;
porcentaje._x = barra_mc._x+barra_mc._width;
};
SÃ, aunque tengamos el gotoAndPlay, Flash ejecuta TODAS las instrucciones hasta el final
Por otra parte, prefiero Math.floor a Math.round a la hora de calcular el porcentaje de carga, se podrÃa dar el caso extraño en que el redondeo sea a favor y no se haya cargado la pelÃcula
Por último, no nos fiemos mucho de los preloaders en las escenas. Aunque nosotros cambiemos el orden de las escenas, Flash NO lo hacÃa -sà a la hora de mostrarlo, pero no a la hora de cargarlos- Al menos era asà en Flash 5, desconozco si se arregló alguna vez el “bug”
Enero 12th, 2005 at 12:10 pm
A mi entender, delete this.onEnterFrame evita que todas las acciones dentro del evento se ejecuten nuevamente.
Lo del Math.floot, comparto tu opinión, un fallo. (corregido)
No hace falta poner un else, ya que pongo el fotograma 2 un fotograma en blanco.
Lo de las escena, no sé, nunca uso (al menos hace años
)
Si te apetece, abre el fla y cambias el código por esto:
barra_mc._xscale = 0;
this.onEnterFrame = function() {
if (control !== undefined) {
trace("pues tenias razón");
}
carga = Math.floor((getBytesLoaded()/getBytesTotal())*100);
barra_mc._xscale = carga;
porcentaje.text = carga;
porcentaje._x = barra_mc._x+barra_mc._width;
if (carga == 100) {
gotoAndPlay("_inicio");
delete this.onEnterFrame;
control = 1;
}
};
Si fuera como tu dices, la cadena deberÃa mostrarse al final de la precarga,
Creo que si te miras el fla, comprobarás lo que te digo, y si me equivoco, encantado de que me corrijas, como tu dices desde Octubre… y lo que nos queda.
Saludos!
Febrero 17th, 2005 at 8:41 pm
Bueno excelente todo lo que dicen pero yo tengo un problema, en una primera escena tengo el preloader tal cual esta el codigo que Uds tienen, y en otra escena tengo una foto, cuando pruebo la pelicula funciona correctamente … pero el problema llega cuando pongo textos, fotos, graficos y todo eso, la barra de progreso no se muestra hasta recien cuando llega al 70 u 80 % mas o menos, y luego carga todo, entonces mientras esta cargando hasta llegar al 80 % no se ve la barra de progreso ni nada. Por favor ayudenme con esto. Gracias.
Febrero 18th, 2005 at 12:25 am
y todo eso ….
Razones por la que puede ocurrir lo que dices:
Fuentes embebidas.
Componentes.
Sonido.
clips de pelicula vinculados (por ejemplo para hacer attachMovie()
Si no es nada de esto, consulta en el foro.
OJO! El preloader del ejemplo, no usa escenas.
saludos
Abril 1st, 2005 at 9:24 am
tengo mi movie con Fuentes embebidas.
Componentes.
Sonido.
clips de pelicula vinculados (para hacer attachMovie()
como se realiza un cargador cuand tienes este tipo de archivos Tony
espero tu respuesta… y he aprendido algo bueno gracias a tu foro….
Abril 2nd, 2005 at 11:38 pm
He probado el preload y funciona perfectamente. Pero tengo una pequeña duda en cuanto al código.
Yo siempre he hecho los preload con:
if(…..)
else {}
No comprendo porqué no hace falta el “else".
Ya sé que funciona, pero te voy a explicar lo que yo creo que deberÃa pasar (que ya se que no pasa y que soy un zoquete)
La lÃnea de tiempo continuarÃa corriendo, y llegarÃa rápidamente al fotograma 2, con lo cual comenazarÃa a visualizarse la peli (fotografÃa), sin dar tiempo a que la barra llegue al 100%. No comprendo porque no comienza a visualizarse en “streaming” la pelÃcula, antes de cargar si no se le pone un “else {gotoAndPlay(1)".
Es decir, si carga==100, vé a “inicio".
Pero deberÃa llegar a “inicio” antes de que carga fuera =100, por simple desarrollo de la lÃnea de tiempo, ya que no hay nada que la detenga (ni un “stop", ni un “gotoAndplay(hacia atrás)".
Supongo que será un error de concepto de AS, y por eso me da rabia (ya que creÃa dominar los preload).
Te agradecerÃa mucho que me lo explicases.
Gracias mil.