Taller de Flash: Precargas

La clase pasada conlcuimos nuestra galería de productos con movies externas. Ahora puedes hacer galerías de imágenes y otras presentaciones utilizando y combinando las herramientas de las clases anteriores. Sin embargo, en el sitio de ejemplo de la clase pasaba las movies tardaban en cargar y no había forma de darse cuenta si los productos se estaban cargando o no y cuánto faltaba para que la finalice carga.

Para evitar marear al usuario de nuestro sitio tenemos que agregar preloaders o precargas. Hoy te voy a enseñar a hacer precargas fáciles.
La idea de una precarga es:

1. Anunciar que algo se está cargando
2. Dar una idea de cuánto falta para que se termine de cargar

El segundo punto no es absolutamente necesario, pero por una cuestión de respeto a nuestro usuario es mejor calmar su ansiedad y decirle cuánto falta. ¿Es realmente muy difícil hacerlo?

La forma que vamos a utilizar para orientarlo es a través de un porcentaje numérico o un elemento que se vaya completando a medida que se efectúa la carga. Con el tiempo y más experiencia en Flash podrás hacer cosas verdaderamente increíbles con las precargas. De momento…

¿Te acuerdas de la línea de tiempo? Bueno, la precarga va a estar siempre en el primer frame. Va a ser lo primero en cargarse y, al finalizar va a mostrar inmediatamente la movie que queremos ver.

Armado de la precarga: fase diseño

Abre el archivo FLA del primer detalle de la clase pasada, detalle1.fla (por si no lo tienes, haz clic aquí para descargar). En la línea tiempo podrás ver un solo frame con una imagen y texto. Como la precarga se muestra antes que la imagen (en el primer frame), debemos agregar un frame antes del que ya tenemos. Así nos queda el frame 1 vacío y el frame 2 con la imagen.

En el frame 1 voy a diseñar mi precarga. En este caso quiero que se vea, por un lado una línea que se vaya completando a medida que se cargue la movie y por otro lado un porcentaje que llegue a 100 en el momento también en que se termine de cargar esta película.

Por una cuestión de diseño, recuerda ubicar el diseño de la precarga en el centro de la imagen que se va a ver al cargar la movie completa.

¿Que quiero decir con esto? En este caso la imagen que quiero cargar no está en el centro de la página, sino a un costado. Por eso la precarga debe verse sobre ese costado, preferentemente en el centro, como en la imagen de arriba.

Mi diseño en el frame 1 es muy sencillo y se ve similar a la imagen de la derecha. Sólo un fondo, con un texto que dice “Cargando”. Tú puedes hacer lo que quieras…

Ahora vamos a crear una nueva capa a la que llamaremos “Precarga”. Debes ubicarla por encima de la capa “Detalle” que ya teníamos.

Línea de carga

En el primer frame de la capa “Precarga” (sólo en el primero) comenzaremos con la línea que se completa a medida que se carga la movie:

1. Crea un rectángulo pequeño, que será el comienzo de la línea en un 1%.
2. Convierte el rectángulo en gráfico y luego en movie (F8).
3. Entra en esa movie, selecciona el gráfico y mueve el centro hacia el costado izquierdo del rectángulo. Esto es para que luego podamos agrandarlo únicamente hacia la derecha.
4. Crea un nuevo fotograma clave en el frame 100.
5. Dentro del frame 100 agranda el rectángulo cuando quieras, teniendo en cuenta que así se verá cuando alcance el 100% de carga.
6. Sal de la movie (yendo a la escena original) y nombra esta movie como “linea_carga”.

No es necesario que completes exactamente estos pasos. Tampoco que hagas una “línea”, sino cualquier animación contenida en 100 frames. La idea es que el usuario de nuestro sitio no se aburra mientras se carga la pantalla… Créeme, con estas herramientas y un poco de imaginación se pueden hacer cosas sorprendentes. Sino échale un vistazo a los sitios de ejemplo que te propongo al final del artículo.

Porcentaje de carga

De nuevo en el primer frame de la capa “Precarga” vamos a generar el texto de porcentaje que aumenta de numeración a medida que se carga la movie, hasta llegar a 100%:

1. Crea un campo de texto en el lugar donde quieras que se muestre el porcentaje.
2. Selecciona el campo de texto y en la barra de propiedades, conviértelo en Dynamic Text. Esto nos permite que cambie de acuerdo al código ActionScript que agreguemos después.
3. Nombra a este campo de texto como “porcentaje_texto”.

Para varias la tipografía, el color y el tamaño, basta con seleccionar el cuadro y darle las especificaciones correspondientes.

Código ActionScript para que todo funcione

Es el momento de meternos con el código. Para eso vamos a crear una nueva capa donde únicamente introduciremos código. Por eso la llamaremos… sí: “Código”

La única forma de que todo funcione es que a través de ActionScript, con el siguiente código:

function cargando() {
var total, cargados, porcentaje;
total=_root.getBytesTotal();
cargados=_root.getBytesLoaded();
porcentaje=Math.floor((cargados*100)/total);
porcentaje_texto.text=porcentaje+"%";
linea_carga.gotoAndStop(porcentaje);
if(cargados==total){
clearInterval(hiloPrecarga);
play();
}
}
var hiloPrecarga=setInterval(cargando,1);
stop();

Quizás tengas que arreglar el indentado o escribirlo nuevamente a mano, pero es exactamente esto lo que debes copiar en el frame 1 de la capa Código.

Ahora voy a explicarlo:

function cargando()
Declaro una nueva función: “precarga”, que va a ejecutarse hasta que se termine de cargar la movie.

var total, cargados, porcentaje;
Declaro las variables que voy a manejar: la cantidad total de bytes de la movie, los cargados hasta el momento y el porcentaje de bytes cargados al momento.

total=_root.getBytesTotal();
A nuestra variable “total” le asignamos el valor total de bytes que tiene la movie.

cargados=_root.getBytesLoaded();
A la variable “cargados” le asignamos el valor total de los bytes de la película que fueron cargados hasta el momento.

porcentaje=Math.floor((cargados*100)/total);
Ahora hacemos una regla de tres simple para asignarle a la “variable” porcentaje el valor que debería tener.

porcentaje_texto.text=porcentaje+"%";
Le decimos que el porcentaje me lo muestre en el campo dinámico de texto “porcentaje_texto”.

linea_carga.gotoAndStop(porcentaje);
Esto es para relacionar la línea que habíamos hecho con el número de porcentaje al momento. Así reproduce la movie “linea_carga” hasta el número de frame igual al número de porcentaje cargado.

if(cargados==total){
Si la cantidad de bytes cargados es igual a la cantidad total de bytes de la película…

clearInterval(hiloPrecarga);
…dejar de ejecutar la función Precarga…

play();
…e iniciar la movie (o sea, ir al frame 2)

var hiloPrecarga=setInterval(cargando,1);
La función setInterval le dice a la función “cargando” que se ejecute cada 1 milisegundo. De esta manera se muestra información actualizada.

stop();
Evita que la movie se inicie.

Otra cosa que debes tener en cuenta es que debes incluir un stop(); en el segundo frame, de lo contrario se reproduciría la función constantemente.

Ahora lo único que falta es pegar el primer frame de cada capa y pegarlos en todas las movies, para que todas tengan su precarga…

Haz clic aquí para ver la movie detalle1.SWF con la precarga

Haz clic para descargar el archivo original comprimido detalle1.FLA (100 kb)

Te aseguro que con este tutorial se pueden hacer precargas súmamente interesantes, sólo necesitas usar la imaginación. Para que te inspires, te dejo algunos sitios con precargas para destacar:

1. 2. 3.

4. 5. 6.

1. ESCRIBÀ
2. Orange
3. Microsoft Office : mac 2008
4. DESUDESU
5. Food of the Food
6. Dave Werner’s Portfolio 2006
   

Bueno, eso es todo amigos… ¡Hasta la próxima!