En esta oportunidad hablaremos de un precargador hecho en Flash, lo explicaremos detalladamente para que lo entiendan. La idea de un precargador es informarle al usuario el porcentaje actual que se esta descargando nuestro flash. Esto es muy útil para que el usuario conozca que nuestra página se esta descargando.
El primer paso es crear en el primer frame de nuestro proyecto flash 3 objetos:
- Un MovieClip llamado bgloader que contendrá un pequeño cuadrado que indicará el 100% de la carga.
- Un MovieClip llamado loader que sera la barra que nos muestre el avance de la carga.
- Un campo de Texto dinámico llamado txtloader para mostrar el texto del porcentaje de descarga.
En los siguientes frames podemos colocar todos los elementos que deseamos, estos formarán parte de nuestra película que deseamos precargar. En nuestro ejemplo hemos colocado una imagen en el segundo frame. Entonces lo que deseamos hacer es que se muestre una barra de progreso mientras se esta descargando el archivo y una vez completada la descarga recién mostramos el contenido de nuestra película.
Lo primero que hacemos es detener la película en el primer frame. Luego tenemos que ir verificando a cada instante el porcentaje de carga que se tiene actualmente, ¿pero como verificamos a cada instante?, para ello utilizamos la función onEnterFrame la cual se ejecuta repetidas veces para un determinado MovieClip. En nuestro caso utilizaremos el MovieClip llamado loader para verificar el estado de la descarga.
[as]
stop();
loader.onEnterFrame = function() {
// funciones para verificar la carga
}
[/as]
Hasta este punto ya podemos verificar a cada momento el estado de la carga. Entonces es hora de utilizar las propiedades getBytesTotal que nos devuelve el total de Bytes de la película que estamos descargando y getBytesLoaded que nos devuelve la cantidad de Bytes descargados hasta el momento. Entonces con una regla de tres simple podemos calcular el el porcentaje de descarga.
[as]
stop();
loader.onEnterFrame = function() {
var vtotal:Number = _root.getBytesTotal();
var vcarga:Number = _root.getBytesLoaded();
var vporce:Number = Math.round(vcarga*100/vtotal);
}
[/as]
Luego para finalizar, escribimos el porcentaje calculado en nuestro campo de texto y además escalamos el MovieClip llamado loader en el porcentaje recién calculado, esto utilizando la propiedad _xscale. Adicionalmente verificamos que si el total de bytes cargados es mayor o igual al total de bytes de la película entonces nuestra película ya estaría completamente descargada por lo tanto eliminamos el onEnterframe y reproducimos nuestra película, en nuestro caso vamos al frame 2 donde se encuentra la imagen que deseamos mostrar.
[as]
stop();
loader.onEnterFrame = function() {
var vtotal:Number = _root.getBytesTotal();
var vcarga:Number = _root.getBytesLoaded();
var vporce:Number = Math.round(vcarga*100/vtotal);
txtloader.text = vporce + «%»;
loader._xscale = vporce;
if (vcarga >= vtotal) {
delete this.onEnterFrame;
gotoAndStop(2);
}
}
[/as]
El resultado de nuestro precargador lo puedes ver a continuación.
Finalmente dejo los archivos fuente de este ejemplo para descargar para que lo pruebes y hagas tus propias modificaciones.
Comentarios Total 17 comentarios
Publicado: 11/01/2007 9:07 pm
muy wena tu explicacion, lo que pasa es que baje el archivo pero, no se podia ver nada, debido a que el .fla esta vacio…..
podrias arreglar eso, para ver realmente lo que hiciste, soy relativamente nuevo en flash, te lo pido encarecidamente. De antemano muchas gracias
Publicado: 11/01/2007 11:57 pm
Hola, hubo un problema y coloque mal el archivo, ya subsane este problema y ya puedes descargar el archivo correcto. Gracias por tu comentario.
Publicado: 23/01/2007 4:21 pm
me gusta quiero colocarlo en blog, como se instala ?? lo descargue como un plugin normal y no se funciona al menos que no funcione en 2.1.0 los demas plugin se adaptaron bien
Publicado: 23/01/2007 9:44 pm
A que plugin te refieres???, este es un precargador de flash
Publicado: 24/01/2007 2:54 am
Hola Buend dia
me gustaria aprender ha hacer precaragdo pero con imagenes, podrias ayudarme?
saludos
Publicado: 24/01/2007 10:38 am
Hola le hice una modificación al código para que la barra cuando crece con el _xscale sea más fluido, el código es el siguiente
stop();
loader._xscale = 0;
function tweenBall(easeType, per) {
var begin = loader._xscale;
var finish = per;
var duration = 25;
var obj = loader;
ballTween = new mx.transitions.Tween(obj, «_xscale», easeType, begin, finish, duration);
}
loader.onEnterFrame = function() {
var vtotal:Number = _root.getBytesTotal();
var vcarga:Number = _root.getBytesLoaded();
var vporce:Number = Math.round(vcarga*100/vtotal);
txtloader.text = vporce+»%»;
tweenBall(mx.transitions.easing.None.easeNone, vporce);
//loader._xscale = vporce;
if (vcarga>=vtotal) {
delete this.onEnterFrame;
gotoAndStop(2);
}
};
espero les guste
Publicado: 13/03/2007 12:06 am
Hola la explicacion no logre entender,ademas alli veo que tienes una capa con codigo as, que va alli??? Baje el ejemplo,pero cuando quiero abrir el preload.fla
me sale formato de archivo inesperado, que esta sucediendo??? ayuda por favor gracias de antemano.
Publicado: 13/03/2007 12:31 am
Hola William, el código AS va en el primer frame de tu película flash, antes de que coloques nada, de esta forma carga al inicio el precargador que luego verificará la carga del resto de la película.
Respecto a los archivos de ejemplo, los había creado en Flash 8, ahora lo he modificado y guardado para que sea compatible con Flash MX 2004. Seguramente ahora si lo podrás abrir.
Publicado: 05/06/2007 9:02 pm
he usado tu codigo pero el loader aparece en 85 porciento ya no se por que pasa miras http://www.exporockperu.com no se hacer como cargue al principio y que se vea todo:
stop();
loader.onEnterFrame = function() {
var vtotal:Number = _root.getBytesTotal();
var vcarga:Number = _root.getBytesLoaded();
var vporce:Number = Math.round(vcarga*100/vtotal);
txtloader.text = vporce + «%»;
loader._xscale = vporce;
if (vcarga >= vtotal) {
delete this.onEnterFrame;
nextScene();
}
}
Publicado: 03/12/2007 10:56 pm
me gusto el preloader pero kisiera intentarlo con una imagen mas grande
Publicado: 21/12/2007 4:12 pm
Excelente ejemplo, lo pude implementar rápidamente.
Gracias!
Publicado: 04/03/2008 7:31 am
hola, no pude hacer lo del texto, me podrias explicar como hacerlo, soy novata pero me parecio muy buena la forma como diste las instrucciones.
Gracias
Publicado: 22/07/2008 8:53 pm
Hola, muy bueno el blog.
he bajado el precargador y lo he encontrado muy bueno, lo estoy utilizando pero tengo un pequeño inconveniente…
Hay alguna manera que no muestre cuando ya haya cargado?? me explico mejor…
Tengo una pagina en donde muestro contenidos en distintos TABS (pestañas), en uno de ellos tengo un flash, (en el tab principal), cuando entro a la web empieza la precarga y luego sale la animacion, hasta ahi todo bien, pero si por ejemplo paso a otros tabs para ver otro contenido y despues vuelvo a la pestaña donde tengo la animacion, me aparecela barra de precarga en 100% por una pequeña fraccion de tiempo y luego aparece la animacion.
Hay alguna forma de evitar eso y que simplemente aparesca la animacion en caso de que ya haya estado cargada??
Eso es todo, te felicito por el blog, he encontrado mucho material util.
Saludos y espero respuesta.
Bye
Publicado: 20/08/2008 5:39 pm
Disculpa, no puedo bajar el archivo, esta bueno el tema pero parece q hay un problema ocn el enlace…
Publicado: 20/08/2008 8:44 pm
Hola Luis, efectivamente a imagen que enlazaba al archivo de descarga no estaba disponible, asi que ya corregi ese punto. El url para la descarga es:
http://www.box.net/public/x7hgnbbl21
Publicado: 14/08/2009 4:07 pm
En algunos swf el cargador se inicia en un número alto, como 60 u 80%. ¿Alguien sabe porqué pasa esto y cómo corregirlo?
Publicado: 12/01/2011 8:37 am
Buenas dias, estuve probando el ejemplo sobre una animacion que tengo y me salta el siguiente error, se ve que es algo de la version (yo utilizo ac3)
Warning: 1090: Problema de migración: En ActionScript 3.0, Flash Player no activa automáticamente onEnterFrame en tiempo de ejecución. Primero debe registrar este controlador para el evento mediante addEventListener (‘enterFrame’, callback_handler).
Warning: 1058: Problema de migración: la propiedad _xscale ya no se admite. Utilice la propiedad DisplayObject.scaleX en su lugar..
me sale error en esas dos sintaxis, se que es algo de la version pero no se como seria el equivalente en ac3
Mil gracias