jul 6, 2009

Enviado por en AS, Flash

Preloader en Flash

Pues en esta entrada se explicará como hacer un preloader muy sencillo, con motivo de entender las siguientes funciones de Action Script.

  • Calculos matematicos
  • Obtener información del archivo
  • Moverse entre fotogramas mediante etiquetas
  • Escalar un objeto

Ahora bien, comenzemos!

Lo primero que tenemos que hacer es nuestra barra de progreso, y mostrar la cantidad de kilobytes cargados y por cargar.

Aqui se muestra el diagrama:


1

Como puedne ver son 3 Textos dinamicos, con diferentes nombres de variables, 3 textos normales y 1 rectángulo de color transformado a un movieclip

Ahora bien, el formato de la pelicula es el siguiente

3

Donde los primeros dos fotogramas son de nuestro preloader, el primero contiene el action script necesitado para poner la cantidad de bytes cargados, y el segundo en regresar al principio en caso de no haber cargado al 100%
En el 4to fotograma llamado inicio, es donde inicia la pelicula, y por eso tiene la etiqueta inicio, para que el preloader corra desde hay después de haber cargado

Ahora bien el Action Script del primer fotograma

BytesTotales = Math.round(getBytesTotal() / 1024);
BytesCargados = Math.round(getBytesLoaded() / 1024);
porcentajeHecho = Math.round((BytesCargados / BytesTotales) * 100);
if (_root._framesloaded >= _root._totalframes)
{
	gotoAndPlay("inicio");
}

Aqui establece 3 Variables BytesTotales Cargados y porcentaje Hecho.

Se establecen como variables aparte, pues al final se dividen entre 1024 las primeras 2 variables para dar a lugar a kilobytes en vez de Bytes, y en la 3era variable se especifica el porcentaje hecho para posteriormente hacer crecer la barra de progreso, y mostrar el porcentaje en el texto dinámico

En la parte resaltada del codigo, se establece que ahcer una vez cargado, en este caso puse ir al fotograma etiquetado como inicio.

Ahora, falta el ActionScript del MovieClip

onClipEvent (enterFrame) {
	_xscale = _root.porcentajeHecho;
}

Básicamente lo que hace esto es escalar la imagen de acuerdo al porcentaje cargado.

Finalmente, dejo el source y el ejemplo

    Posts Relacionados

    1. Ya FecR, si quieres un autografo solo pideselo… pero deja de hostigar al pobre muchacho..

      jajaja :D

      Usando Firefox 3.5 Firefox 3.5 en Windows Vista Windows Vista
      • get on the line :P

        Remodele el sistema de comentarios, ahora si funciona el de responder, sube de posicion

        Usando Google Chrome 3.0.191.3 Google Chrome 3.0.191.3 en Windows XP Windows XP
    2. Buen tuto,aunque muchos lo prefieren animar a mano (no veo razon).

      Un saludo ^^

      Usando Google Chrome 2.0.172.37 Google Chrome 2.0.172.37 en Windows XP Windows XP

    Dejar una respuesta

    Debes ser Alojarse para enviar un comentario.