COMO CREAR UN PRELOADER (CARGADOR) EN FLASH CS3

El objetivo de este tutorial es dar a conocer las herramientas y funciones que proporciona flash
para crear una barra de carga que indicar el progreso de carga de una imagen, msica, pgina web
o de una descarga mediante el ACTION SCRIPT 2.0
Para este preloader necesitaremos un smbolo que tendr el efecto de una barra en proceso de
carga, y 3 cajas de texto dinmico para mostrar los Bytes totales, los Bytes cargados y el
porcentaje o progreso de la carga.
Los pasos son sencillos y la codificacin no es extensa... Entonces, Manos a la obra!!!
1. Abrir Flash y escoger Action Script 2.0
2. Ctrl + J para determinar las propiedades del documento
3. Colocar como velocidad de fotogramas 12 fps y dimensiones de 400 px y 200 px











4. Una vez en el rea de trabajo pulsamos Ctrl + F8 para crear un nuevo smbolo. Este ser
un clip de pelcula, de nombre le pondremos progresobarra y clic en Aceptar.

5. En el lienzo actual dibujamos un rectngulo sin borde de 300 px de ancho por 30 px de
alto y lo ubican en las coordenadas (X=0) & (Y=0). Escoge el color de relleno a tu gusto.
NOTA: Debes crear 2 Capas. En una
capa dibujaras el rectngulo sin
borde y en la otra dibujaras el
borde del rectngulo. Para que te
quede bien, digita las mismas
propiedades en ambos. Los
nombres de las capas son al gusto.

6. Luego de dibujar el rectngulo y el borde en su respectiva capa. Vas a la capa del
rectngulo e insertas un fotograma clave en el instante 100 de la cabeza lectora
(fotograma 100).

7. Luego vuelves al primer fotograma y le cambias el ancho del rectngulo a 3 px.

8. Seleccionas todos los fotogramas de la capa del rectngulo, da clic derecho y crea una
interpolacin de forma. Va a quedarte algo as:
9. Ya tenemos listo nuetra barra. Ahora regresamos al escenario y la capa actual la
renombramos con progresbar.

10. Arrastramos al escenario el smbolo que acabamos de crear y lo ubicamos en el centro de
la escena.

11. A continuacin creamos otra capa con el nombre contenido. En esta se va a alojar el
archivo a cargar, en este caso usaremos una imagen.

12. Insertamos un fotograma clave en el
instante numero 2 de la cabeza lectora y
pulsamos la combinacin Ctrl + R. La
imagen puede ser de tu eleccin pero
debe tener las medidas de la escena
(400px de ancho x 200px de alto) para que
encaje exactamente en la pelcula.

Nota: Recuerda que el primer fotograma
debe quedar vacio.



13. Luego creamos otra capa con el nombre textodinamico

14. Aqu dibujaremos una caja de texto dinmica un poco grande para que se vean los
nmeros de bytes totales. Agregamos al nombre de instancia bytes_total y en la seccin
var digitamos b_t en referencia a bytes totales de la animacin.
Como pueden observar,
la barra de carga esta
en el centro del
escenario (Paso 10). Las
cajas de texto pueden ir
en cualquier parte pero
de preferencia las
ubicaremos debajo de
la barra para mejor
visualizacin. Las
propiedades de tipo de
fuente y color del texto
son de libre eleccin.


15. Luego debers dibujar otra caja de texto dinmica (en la misma capa) con Nombre de
instancia bytes_loaded y en la propiedad var digitar b_c en referencia a los bytes
cargados. Puedes ubicarla a lado de la caja anterior

16. Debemos dibujar una ltima caja de texto, quizs la ms importante porque esta nos
indicara el porcentaje de carga. El Nombre de instancia ser porcentaje y la propiedad
var tendr como valor p. Despues de dibujar las 3 cajas de texto, tendras algo as:



Ya nos falta muy poco. Solo debemos agregar el cdigo de Action Script y unos pequeos
detalles mas... Entonces, prosigamos...

17. Insertaremos otra capa ms llamada cdigo. Aqu es donde crearemos la magia del
Action Script y obtendremos nuestro preloader.

18. En el primer fotograma clave de la capa presionamos F9 y nos aparece las Acciones del
fotograma.

19. Por ultimo... digitaremos el siguiente cdigo:


stop();
function preloader(){
a_cargar = getBytesTotal();
cargados = getBytesLoaded();
percent = (cargados*100)/a_cargar;
porcent = Math.round(percent);
p = porcent+"%"
b_t = a_cargar+" bytes";
b_c = cargados+" bytes";
_root.progresobarra.gotoAndStop(porcent);
if(cargados==a_cargar){
play();
clearInterval(exe);
}
}
var exe = setInterval(preloader,1);

NOTA:
a_cargar, cargados, percent y
porcent son variables definidas
solo en el cdigo.
b_t, b_c y p son las variables
de las cajas de texto dinmicas
bytes_total, bytes_cargados y
porcentaje respectivamente.
Math.round es una funcin que
redondea un nmero decimal a
entero.
getBytesTotal() Funcin que
devuelve el valor total de la pelcula
en bytes.
getBytesLoaded() Funcin que
devuelve el valor cargado de la
pelcula en bytes.
Un ltimo detalle:
En esta capa deben existir 2
fotogramas claves. En el
primero digitamos la
codificacin.
En el segundo fotograma
clave, lo seleccionamos y
pulsamos F9. A
continuacin agregamos la
siguiente lnea de cdigo:
stop();
Si no hubiramos agregado
esta lnea, la pelcula
hubiera hecho que la barra
llegue a 100%, pase al
siguiente fotograma y
vuelva de nuevo a cargar la
barra.

Listo!!! Has creado un preloader con Action Script 2.0

P.D.: Para ver el resultado debes presionar Ctrl+Intro para probar la pelcula, y luego nuevamente
presionas Ctrl+Intro para que funcione nuestro preloader.
Con esta accin terminamos nuestro tutorial con xito. Aqu dejo unas capturas del preloader: