Como crear un preloader para nuestros archivos flash

nerovee · 30-dic-2005, 19:21

Todos los diseÃ±adores o los que estamos en este mundillo nos hemos topado con el asunto. Â¿Como hacemos para que el visitante de nuestra web, no se quede 2horas mirando una pantalla en blanco si saber si esta cargando el archivo flash? Pues colocando un preloader, una simple barrita que nos dice el porcentaje que tenemos descargado.

Bien empecemos, lo primero de todo es colocar un "preloader" (este es el nombre tÃ©cnico que recibe) en la primera escena de todo archivo swf que crees. Es decir, si tienes varias movies que cargan dentro de una mayor, estaria bien que tubieras una preloader para el SWF madre y otro para cada swf hijo.

Una vez claro esto empecemos con bÃ¡sico, la barra de carga que nos indicÃ¡ de forma visual el estado de la carga.

La barra de carga
Para la barra dibujaremos un rectangulo con el color y medidas que deseemos dentro de un movie clip que llamaremos "barra". A continuaciÃ³n nos vamos a la linea de tiempo y en el fotograma 100 creamos un fotograma clave como indica la figura1:

Ahora lo colocamos en la primera escena de nuestro documento (la primera escena debe estar completamente vacÃ#a a excepciÃ³n de todo lo que se cree en este tutorial).

Ahora nos vamos al fotograma 1 y reducimos el tamaÃ±o del relleno del rectÃ¡ngulo hasta darle un width (ancho) de 0px.

A continuaciÃ³n, y teniendo seleccionado los fotogramas del 1 al 100, creamos un Tween tipo Shape(transiciÃ³n de forma):

Con esto ya tenemos hecha la animaciÃ³n de nuestra barra.

Ahora colocad vuestro movie clip barra por ejemplo en el centro del stage (zona de trabajo).

Porcentage de carga
En todo preloader es bueno y necesario tener informado al usuario del porcentaje completado de la carga.

Esta informaciÃ³n aparacerÃ¡ en un campo de texto de tipo "Dynamic Text" al cual llamaremos porcentaje_txt y que irÃ¡ colocada a gusto del diseÃ±ador. :o

ActionScript de precarga
AquÃ# estÃ¡ el alma de nuestro preloader... sin esta pequeÃ±a porciÃ³n de cÃ³digo no serÃ#a mÃ¡s que parte de la animaciÃ³n y no tendrÃ#a ningÃºna utilidad. Lo deberemos de escribir en el primer fotograma de la primera escena de nuestro swf.

Código:


//creamos la funciÃ³n preloader
function preloader() {

//declaramos las variables
   var total, cargados, porcentaje;

//obtenemos el peso total en bytes de nuestro archivo
   total = _root.getBytesTotal();

//obtenemos los bytes cargados hasta el momento
   cargados = _root.getBytesLoaded();

//calculamos el porcentaje completado respecto del total
   porcentaje = Math.floor((cargados*100)/total);

//mostramos por pantalla el porcentaje
   porcentaje_txt.text = porcentaje + " %";

//paramos las animaciÃ³n barra para que no se reproduzca contÃ#nuamente
   barra.gotoAndStop(porcentaje);

//comprovamos  si el archivo estÃ¡ totalmente cargado
   if (cargados == total) {

//si es asÃ#, no sigas ejecutando el preloader
      clearInterval(Precarga);

//y sigue reproduciendo la movie
      play();
   }
}

//setInterval sirve para ejecutar la funciÃ³n "preloader" cada milisegundo y le damos un nombre, es decir, la asignamos a la variable Precarga para despuÃ©s poder detenerla con clearInterval
var Precarga = setInterval(preloader, 1);

//evitamos que nuestra movie avance y reproduzca todas las escenas. asÃ# le obligamos a permanecer en la escena 1 hasta que se haya cargado completamente la movie.
stop();

Bueno y eso es todo, ya podemos crear una segunda escena y seguir con nuestro proyecto. Yo recomiendo crear un documento solo con el preloader y guardarlo despuÃ©s como plantilla para futuros proyectos.

Mi segundo consejo es no abusar de animaciones y de flash, evitar utilizar imagenes muy pesadas y tal vez optar por vectorizadas.

Y el Ãºltimo consejo es, si tenemos por ejemplo un proyecto de una web con muchas secciones y mucha informaciÃ³n. Crear un swf para cada secciÃ³n, es decir: seccionar la web que por ejemplo pesa 2MB en un solo archivo (lo cual se hara muy ralentizarÃ¡ mucho la carga) y crear varios archivos de 100 o 200kb para cada secciÃ³n.