Entrada anterior: HTML Playground: Aprendiendo XHTML y CSS con ejemplos »Poner foto en propiedades del sistema »BlogsInMotion, nueva red de blogs »¿Tienes un blog? úsalo en favor de la solidaridad ... »Image Chef - Generador de imagenes »Pikipimp - Hace graciosa tus fotos »NAYIO - Busca las canciones que Tarareas »Nuevo Diseño »Looking Glass 1.0.0 Beta 1 »AV Music Morpher 3.0.45 » 

26 diciembre 2006

Creando Loading o Precargas para nuestras Web


Ajaxload permite crear barras de progreso, indicamos el tipo de animación, los colores que queremos utilizar y listo, ya podes bajar un gif animado con el resultado.

Image Hosted by ImageShack.us
Image Hosted by ImageShack.us



Como hacemos luego con este GIF un Loading Flash para nuestra web:
En el blog de Leandono`s acabo de leer un tutorial, para agregar esta imagen con Macromedia Flash, para luego obtener un SWF que pondremos en nuestra web.

Entonces se los explico:
Una vez creado el GIF en la web anterior, Luego abriremos Flash y crearemos un símbolo llamado precarga.
Entraremos al modo de edición. Nos vamos a Archivo>Importar>Importar a Escenario y escogeremos el GIF creado anteriormente. Cerramos el símbolo y vamos al escenario.

Abrimos la biblioteca y soltamos el símbolo recién creado al escenario. Si lo deseamos podemos añadir un pequeño campo de texto dinámico llamado status, en el cual mostraremos el porcentaje de carga:
Image Hosted by ImageShack.us
Abrimos el panel de Acciones y en el primer fotograma escribimos el código:

onEnterFrame = function () {
var cargado = this.getBytesLoaded();
var total = this.getBytesTotal();
var porcentaje = cargado/total;
status.text = Math.round(porcentaje*100)+"%";
if (cargado>=total && total>4) {
this.gotoAndStop(2);
delete onEnterFrame;
}
};

Presta atencion que lo que esta en rojo llevara el nombre que le pongas a tu campo de texto dinamico.
Una vez echo todo esto, lo unico que nos quedaria seria añadir el contenido en el fotograma 2.

1 Comentarios:

  • Anonymous Anónimo (12:24 p. m.)  

    Bastante bueno el loading y facil implementacion. La verdad es que nos pasaremos por aqui bastante. Un cordial saludo. Carlos
    diseño web





Guijuelo