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.

Preloader es el cargador de una pagina web. El que normalmente indica el porcentaje de la carga o la cantidad de bites cargados.

Hacer un loader, ya muchos saben por que se puede leer en muchas partes, pero lo que normalmente uno busca es hacer algo personalizado y aquí enseñare como lograrlo con distintas maneras que se me ocurrieron.

Lo primero que debemos saber antes de crear cualquier Prilouder xD son las funciones para obtener el peso de la película (en Bites) y lo que hemos cargado (en Bites) y luego debemos saber la ecuación para sacar el porcentaje de carga. Recordemos que estamos trabajando en As3.

Para obtener el peso total en bites de una pelicula se usa.

loaderInfo.bytesTotal

y para ver los bytes cargados se usa

loaderInfo.bytesLoaded

La ecuacion que se ocupa para sacar el porcentaje es:
(Valor/Total)*100 = Porcentaje de Valor respecto a Total
Osea que en codigo.

(loaderInfo.bytesLoaded/loaderInfo.bytesTotal)*100

Sacando el porcentaje se nos pueden ocurrir muchas cosas tomando como base los numero del 0 al 100.

Preloader Clasico

El preloader clásico lo haré solo con código.

stop();
var porcentaje:Number;
var texto:TextField=new TextField;
var barra:Sprite=new Sprite();
var color:int=0x000000;
barra.x=stage.stageWidth/2-50;
barra.y=stage.stageHeight/2-10;
addChild(barra)
addChild(texto);
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, car);
function car(e:ProgressEvent){
porcentaje=(e.bytesLoaded/e.bytesTotal)*100
barra.graphics.clear();
barra.graphics.beginFill(color);
barra.graphics.drawRect(0,0,porcentaje,20);
texto.x=barra.x+barra.width;
texto.y=barra.y;

texto.text=String(Math.round(porcentaje))+"%"
if(e.bytesLoaded==e.bytesTotal){

play();

}
}

El cargador como ven es simple, consta de un Sprite (Una figura)y un TextField (Campo de texto)
lo primero que se hace es crear las variables.

1. pocentaje: Contendrá el porcentaje de carga
2. barra: Dentro de el dibujaremos la barra.
3. color: Contendrá el color del cual dibujaremos barra.
4. texto: Es el Campo de texto que mostrará el porcentaje.

Luego dimos algunas propiedades, como una posición centrada para la barra y agregar los elementos al escenario.

Continuado encontramos un Listener y la función que se encarga de que cada cierto intervalo ver la carga, procesando los datos. Le asigna el porcentaje a la variable porcentaje. Luego con el porcentaje dibujamos la barra y escribimos en texto el porcentaje.

En fin, es el clásico cargador, aburrido.

Ahora algunas técnicas para personalizar ese cargador.
Si quisiéramos que la barra crezca más que 100 debemos agregar un pequeño calculo.
porcentaje*(tamaño/100)
Por ejemplo, si queremos que nuestra barra al estar cargado el 100% mida solo 40px usamos.

barra.graphics.drawRect(0,0,porcentaje*(40/100),20);

Ahora, si quisieramos que nuestra barra no cresiera hacia un lado sino que para los dos.
Podemos usar esto.

barra.graphics.drawRect(-(porcentaje*(40/100)/2),0,porcentaje*(40/100),20);

¿Por que? Pues por que el primer valor de la función drawRect es para mover a el Sprite de su posición respectiva osea si su posición era 100 y en ese valor colocamos 10, su posición cambiara a 110. Entonces ahora le restamos la mitad de su tamaño (el tamaño es porcentaje*(40/100) en este caso).

Si meten mano al código pueden enchularlo más aun.
Este es el primero que posteo, pronto subo otros más entretenidos.

Para poder ver como se vería un cargador debemos hacer lo siguiente:
Poner el código en el primer frame, en el segundo frame importemos algo así como una imagen o algo con peso, pero no demasiado. Luego apretamos CTRL+Enter y una vez que se cargue la película lo volvemos a apretar, con esto veremos como se vería nuestro cargador. (Si no se ve, existen dos opciones, que el código tenga un error, o lo que hay desde el 2º frame en adelante no es lo suficientemente pesado como para alcanzarse a ver la carga)

(Mañana, o pasado mañana subo el segundo)