Distintas maneras de crear un preloader. [As3] Parte 2

Ahora es cuando los cargadores se van poniendo más entretenidos. Te recomiendo leer por lo menos la primera parte del post anterior (La ecuación y como obtener los bytes).
Lo que haremos sera una animación que constara de 100 frames (Puedes ser más o menos), y ira avanzando a medida que se valla cargando la película.
Lo que primero que demos hacer para comenzar sera crear un MovieClip con la instancia de pre_mc y dentro de ella crear una animación de 100 frames o como quieras..
En el primer frame de nuestra animación escribamos.

stop();

Fuera de la animación, ya en el escenario principal, en el primer frame escribimos.

stop();
var Nframes:Number=100;
var porcentaje:Number;
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onPRO);
function onPRO(e:ProgressEvent){
porcentaje=Math.round((e.bytesLoaded/e.bytesTotal)*Nframes)
pre_mc.gotoAndStop(porcentaje);
if(e.bytesLoaded==e.bytesTotal){
gotoAndStop(2);
}
}

Como vez en el código lo que hacemos no es en realidad sacar el porcentaje. Algo parecido, pero no lo es.
Lo que hacemos es dividir los Bytes Cargados por los Totales, esto siempre nos dará un numero entre 0 y 1. (0.1, 0.2, etc..) de manera que al multiplicarlo por el numero de frames que queramos nos dará una especie de porcentaje, pero no por cien, si no que por el numero de frames.
Lo importante es que en la variable Nframes des el numero de frames que tiene tu animación.
Otra cosa que no se nos puede olvidar es ocupar:

Math.round();

¿Por que?, pues por que esta función sirve para redondear el numero, imagínate que nos da un numero como 45.4 ¿Existe acaso el frame 45.4? NO, entonces debemos redondear el numero para que nos de números enteros.

Es importante que la animación no sea demasiado pesada, pues esta también se carga.
Por lo cual si es muy pesada, podría ser “invisible” por un momento.

Hasta la próxima.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
Autor: JaLeRu

Post Relacionados:

8 Respuestas to “Distintas maneras de crear un preloader. [As3] Parte 2”

  1. K.T. says:

    O.K., entiendo los dos cargadores por separado, pero què pasa cuando tienes un movie clip y tambièn quieres que aparezca el porcentaje??

  2. JaLeRu says:

    this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onPRO);

    Vez donde dice “This”, pues usa el nombre de tu movieclip o loader.

  3. K.T. says:

    Sigo dando lata, mi película es bastante grande y el cargador no se muestra hasta que está por el 45%, cómo podría arreglar esto?

  4. JaLeRu says:

    … Básicamente eso pasa por que el cargador también es una imagen que debe cargarse. Entonces, esta no aparece hasta estar cargada. Por eso la animación o imagen que ocupes de cargador debe ser muy liviana.

  5. xrccb says:

    Logré insertar el preloader en una web que estoy haciendo, pero que hay cuando tengo un swf externo y quiero que salga el preloader antes?

  6. Marcos says:

    Me parece EXCELENTE este tutorial… el único problema que le he encontrado es que si el flash ya se ha cargado (o sea, ya hemos entrado a la página antes) y decidimos reingresar en otro momento, el clip se queda constantemente en el frame 1 y no pasa al 2…. ?¿ sabrán por qué será…???

  7. Duckgarou says:

    Sip, es porque no hay un evento que detecte que ya ha cargado la película, entonces al volverse a cargar con el refresh del browser, se queda atorada la peli en el frame 1. A mi también me pasó, pero lo solucioné cambiando un poco el código

    En vez de poner el stop al inicio del código, lo incluí en la cláusula del if, cambiándola por una del tipo if else, entonces el código quedaría:

    var Nframes:Number=100;
    var porcentaje:Number;
    this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onPRO);
    function onPRO(e:ProgressEvent){
    porcentaje=Math.round((e.bytesLoaded/e.bytesTotal)*Nframes)
    pre_mc.gotoAndStop(porcentaje);
    if(e.bytesLoaded==e.bytesTotal){
    play();
    }else{
    stop();
    }

    Espero te sirva :P

    Saludooos!! =D

  8. 3me says:

    Bueno, soy completamente nuevo en el asunto.
    Estuve tratando de hacer el dichoso preloader con AS3 Y flash CS5. El codigo es el siguiente:

    stop();
    var Nframes:Number = 100;
    var porcentaje:Number;
    var texto:TextField = new TextField ;

    addChild(texto);
    this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, car);
    function car(e:ProgressEvent){
    porcentaje=(e.bytesLoaded/e.bytesTotal)*Nframes;
    texto.scaleX = 40;
    texto.scaleY = 40;
    texto.x = stage.stageWidth / 2 – texto.width / 8;
    texto.y = stage.stageHeight / 2 – texto.height / 11;

    texto.text = String(Math.round(porcentaje)+”%”);
    pre_mc.gotoAndStop(porcentaje);
    if (e.bytesLoaded == e.bytesTotal)
    {
    gotoAndStop(2);
    }
    }

    Aqui(pre_mc) es una animación, lo que trato de conseguir es solo ver el numero del porcentaje en un tamaño bastante grande con una animación de fondo.

    De modo que quisiera que alguien me diga por que no funciona, ademas quisiera saber como cambiarle de fuente, de tamaño, de color y dejarlo totalmente centrado en la ventana.

    Bueno gracias, espero respuestas (pueden mandarmelo al correo si no es mucha molestia: mmesvil@hotmail.com).

Deja un comentario


JaLeRu Blog vive gracias a WordPress
Entradas RSS y Comentarios RSS.