Como crear un preloader para nuestros archivos flash

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.

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.

CODE, HTML o PHP Insertado:

[COLOR="Gray"][I]
//creamos la función preloader[/I][/COLOR]
function preloader() {
[COLOR="Gray"][I]
//declaramos las variables[/I][/COLOR]
   var total, cargados, porcentaje;

[COLOR="Gray"][I]//obtenemos el peso total en bytes de nuestro archivo[/I][/COLOR]
   total = _root.getBytesTotal();

[COLOR="Gray"][I]//obtenemos los bytes cargados hasta el momento[/I][/COLOR]
   cargados = _root.getBytesLoaded();

[COLOR="Gray"][I]//calculamos el porcentaje completado respecto del total[/I][/COLOR]
   porcentaje = Math.floor((cargados*100)/total);
[COLOR="Gray"][I]
//mostramos por pantalla el porcentaje[/I][/COLOR]
   porcentaje_txt.text = porcentaje + " %";

[COLOR="Gray"][I]//paramos las animación barra para que no se reproduzca contí­nuamente[/I][/COLOR]
   barra.gotoAndStop(porcentaje);

[COLOR="Gray"][I]//comprovamos  si el archivo está totalmente cargado[/I][/COLOR]
   if (cargados == total) {

[COLOR="Gray"][I]//si es así­, no sigas ejecutando el preloader[/I][/COLOR]
      clearInterval(Precarga);

[I][COLOR="Gray"]//y sigue reproduciendo la movie[/COLOR][/I]
      play();
   }
}

[I][COLOR="Gray"]//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[/COLOR][/I]
var Precarga = setInterval(preloader, 1);

[COLOR="Gray"][I]//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.[/I][/COLOR]
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.