Crear Pre-Loader

Ver el tema anterior Ver el tema siguiente Ir abajo

Crear Pre-Loader

Mensaje por camry- el Sb Ago 16, 2008 9:03 pm

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. Surprised

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.

Cdigo:

//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.
avatar
camry-
Tallerista
Tallerista

Cantidad de envos : 39
Fecha de inscripcin : 16/08/2008

Ver perfil de usuario

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.