Macromedia Flash MX

¿Como funciona un precargador?

Fuente: Foros del Web

Muchos hemos hecho un precargador, pero ¿realmente sabemos como es que funciona? Yo hasta hace poco lo descubrí, o lo razoné si le quieren llamar así. Pongo este tutorial para no quedarnos en el copy > paste y entender un poco más allá. Se necesita un conocimiento más o menos básico del Flash y algunos conceptos también básicos, este es para la versión MX.

Antes de todo, es importante saber para que demonios nos sirve una precarga en una película flash, si, esas que se va llenando una barrita y nos va diciendo un porcentaje, bueno.

Cuando creamos una animación en flash, estamos creando un archivo con extensión .swf; el caso es que cuando entramos a un sitio ese archivo tendrá que viajar por la red hasta nuestra máquina, y si tenemos una conexión con módem, nuestra compu anda corta de memoria, hay mucho tráfico en la web, y si a eso le sumamos que nuestro archivo pesa 100 kb pues tardará en cargarse. Aquí es donde empieza el problema pues la gente que creó el Flash, lo hizo tan ágil que al archivo swf no le importará si ya termino de transferirse para empezar su ejecución, entonces podemos tener un archivo de 100 kb del cual solo se han bajado 30 kb's y ya reproduciéndose, lo que pasará al llegar al fotograma 30 será que se detendrá hasta que se haya cargado más archivo, entonces esto nos da como resultado una reproducción lenta y entrecortada.

Otro problema que podemos tener es que tenemos un menú con diferentes fotogramas, y en cada botón le damos una orden, en este caso ir al fotograma x, donde x puede ser cualquier número, entonces si dentro de la carga no se ha bajado, digamos, el fotograma 50 y un botón tiene la orden de ir a ese fotograma, al darle clic nos llevará al último frame cargado, aunque no sea el 50.

Entonces, esa es la función de un precargador, se detiene al principio de la película y no la deja arrancar hasta que se haya terminado de cargar. Mientras tanto nos va mostrando algunas monerías como el porcentaje de carga o imágenes, o cualquier cosa que se nos ocurra.

Bueno, ahora vamos a ver como hacer un precargador.

Lo primero es preparar el escenario; en la línea de tiempo, hay que insertar dos fotogramas al inicio de la película; y en el tercer fotograma le ponemos como etiqueta "inicio" pues ahí es donde realmente iniciará nuestra animación.

Ahora, en el segundo fotograma ponemos este código:

Código:

gotoAndPlay (_currentframe -1)

La propiedad _currentframe nos sirve para referirnos al fotograma en el cual estamos posicionados, en este caso es el 2 y le podemos restar o sumar números para decirle a Flash que queremos ir a X fotograma, en este caso al 1 (2-1=1).

Esto nos sirve para que cada vez que pasemos por el segundo frame nos regrese al primero, y en ese primer frame es donde entra el chiste del precargador.

En el primer frame pondremos este código:

Código:

porcentaje = (_framesloaded/_totalframes)*100;
bytes = _root.getBytesLoaded() add " Bytes cargados de " add _root.getBytesTotal() add " Bytes totales";
cargados = int(porcentaje) add " % Cargado";
if (porcentaje>=100) {
gotoAndPlay ("inicio");
} else {
_root.barra._xscale = porcentaje;
play ();
}

Ahora se los explicaré de manera detallada, puede parecer complejo a simple vista, pero es más sencillo de lo que imaginan.

Código:

porcentaje = (_framesloaded/_totalframes)*100

En esta linea declaramos una variable, la cual se llama porcentaje, y lo que hace es una ecuación sencillita, divide los frames cargados entre los totales (_framesloaded entres _totalframes; ambas propiedades que flash toma automaticamente de nuestro archivo) y el resultado de esa división lo multiplica por cien (100) y con esto saca el porcentaje de la película cargada. Nos traerá como resultado una cantidad con decimales.

Código:

bytes = _root.getBytesLoaded() add " cargados de " add _root.getBytesTotal();

Aqui tenemos otra variable, en este caso se llama bytes, y nos servirá para decirnos cuantos Bytes de nuestra película se han cargado (el peso del archivo). La propiedad getBytesLoaded() nos trae los Bytes cargados y la propiedad getBytesTotal() los bytes totales (el peso de la película) y lo que hace es crear una cadena de caracteres por medio de una concatenación que es ni más ni menos que juntarlo todo:

Código:

_root.getBytesLoaded() add " Bytes cargados de " add _root.getBytesTotal() add " Bytes totales"

Si nos damos cuenta entre cada una de las propiedades tenemos un add que es el signo que nos juntará las cadenas de texto en una sola. En medio tenemos entre comillado un " cargados de " ¿se imaginan que hará esto? Suponiendo que ya se termino de cargar una película de 100 kbs, nuestra variable bytes quedará:

1000 Bytes cargados de 1000 Bytes totales

Una variable más.

Código:

cargados = int(porcentaje) add " % Cargado";

En esta variable mostramos el porcentaje cargado, recuerden que ya lo calculamos con la primera variable pero no se lo hemos mostrado al usuario, para ello es necesario crear un campo de texto que lo almacene, en la barra de herramientas seleccionamos la de texto y arrastramos en el escenario para dibujar el campo. Luego en la ventana de propiedades en donde dice texto estático/static text seleccionamos la opción de texto dinámico/dinamic text; luego se activara en ese mismo panel de propiedades un campo que dice var, ahi escribimos "cargados" (sin comillas).

Lo que hace la variable "cargados" es pasar el valor de porcentaje (el que les había dicho que era un número decimal) a enteros con la acción int (porcentaje) y le concatena una cadena que dice "% Cargado"

Con lo que en el campo de texto que acabamos de dibujar irá apareciendo un número que estará variando del 0 al 100 conforme se vaya cargando la película.

Y la última parte del código:

Código:

if (porcentaje>=100) {
gotoAndPlay ("inicio");
} else {
_root.barra._xscale = porcentaje;
play ();
}

La traducción de if es algo así como "sí", pero no el si de afirmación sino un condicional, es decir, sí pasa esto, sí pasa lo otro, entonces, aqui lo que le decimos a flash es:

si (porcentaje es mayor o igual a 100) {(entonces)
gotoAndPlay ("inicio") (ve a "inicio" y empieza la función baby)
} de otro modo { (si porcentaje NO es mayor o igual a 100)
_root.barra._xscale = porcentaje (esto lo expliacare mas adelante)
play(); (ve al segundo frame, y por ende regresate para aquí hasta que porcentaje sea mayor o igual a 100)
}

Esa es la esencia del precargador.

Podemos también crear una barra que se vaya llenando conforme se vaya cargando la película, para ello es necesario crear una movie clip; dibujamos un rectángulo en la escena principal, lo seleccionamos, presionamos F8.

Seleccionamos Movie Clip y le ponemos un nombre, el que sea.

Luego, ya que lo creamos, lo seleccionamos y en el panel de propiedades, en el campo de nombre de instancia le ponemos un nombre, en este caso barra.

Código:

_root.barra._xscale = porcentaje

Aqui lo que decimos es que la propiedad escala del eje X (_xscale) del objeto "barra" sea igual a porcentaje (nuestra primera variable).

Como dije arriba, lo que hará este precargador es estarse moviendo entre los fotogramas 1 y 2 hasta que se cumpla la condición de que porcentaje sea 100 o mayor, y las variables se actualizarán cada vez que pase por el frame 1, y eso es todo. Hemos finalizado nuestro precargador.