Este tutorial viene a una pregunta clásica, ¿Como crear un preloader en Flash?
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.
- pocentaje: Contendrá el porcentaje de carga
- barra: Dentro de el dibujaremos la barra.
- color: Contendrá el color del cual dibujaremos barra.
- 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)