Este tutorial mostrara la forma de hacer por medio de ActionScript
una animación de precarga funcional, mostrando porcentaje de carga, barra de
avance de carga y calculo de otros datos útiles como cantidad de bytes cargados
y cantidad completa de bytes que componen la película.
Requerimientos
· Conocimientos previos de programación
· Manejo básico de Flash MX o MX 2004
· Como nota adicional, este tutorial fue hecho con "Macromedia Flash MX 2004
Professional" y en ese formato se incluyen los ejemplos y demás archivos.
· Por ultimo, seria bueno que subieras a tu hosting en Internet (Si no tienes, hay muchos
lugares donde puedes abrirlo gratuitamente) el ejemplo para probarlo descargando realmente
de la web
Programando la precarga...
Actualmente existen muchos componentes que hacen automáticamente
una animación de precarga de este estilo, pero que adicionalmente solo exigen
como conocimiento previo saber arrastrar y soltar el componente en el escenario;
sin embargo, cuando nosotros queremos tener el control de la animación de la
precarga, o cuando queremos cambiar la típica "barra de carga" por
un reloj, un velocímetro o lo que nos imaginemos, vamos a querer el control
de nuestro código.
Por otro lado, el uso de un componente de precarga conlleva mas peso a la película que si
la optimizáramos nosotros mismos, ya que la idea es que la precarga sea lo primero que
cargue y que lo haga rápido, podemos optimizar cuanto queramos nuestro propio código.
Creando la animación
En este caso vamos a crear una animación de barra de precarga dentro de un movie clip que
dure exactamente 100 frames, así cada frame será puesto en pantalla de acuerdo al
porcentaje de carga, en nuestro caso nos ha quedado así:
He creado entonces una animación dentro de un movie clip
cuyo largo serán 100 frames; en mi caso es una barrita que se va llenando hasta
llegar a 100, como el ejemplo tradicional
La pongo dentro de un movie clip para dejar lo mas despejada la línea de tiempo
principal, además, así será mas fácil controlar sus cambios; para terminar le pongo a
ese movie clip el nombre barra_mc.
Porcentaje de carga y detalles
Es de presumir que también queremos presentarle al usuario el porcentaje de carga de
nuestra película, para esto, en la línea de tiempo principal creamos un campo de texto
de tipo "Dynamic Text", con la fuente que ustedes elijan para presentar
el porcentaje de carga.
Es importante que sea "Dynamic Text" ya que ese tipo de campo de texto
nos permite cambiar su contenido por medio de ActionScript, por otro lado se hace
innecesario usar un "Input Text", ya que estos están destinados a
permitirle al usuario introducir datos; "Static Text" no permite la
manipulación de su contenido por código.
Ahora solo falta ponerle un nombre a nuestro Campo de Texto, lo llamaremos porcentaje_txt,
este nombre lo colocan en la barra de propiedades seleccionando el campo de texto, en un
área que dice <Instance Name>.
Nota: Mucha gente, en tiempos de Flash MX 2004,
aun usa la propiedad de los campos de texto "var",
la cual esta oficialmente desechada porque no ofrece la versatilidad que ofrece
el nombre de instancia.
Para el caso de estos tutoriales, siempre se usara el nombre de instancia sobre cualquier
opción "desechada oficialmente por Macromedia".
En estos momentos, la apariencia de la película será esta:
ActionScript de precarga
Por ultimo, lo mas importante será el ActionScript que realice la precarga de la
animación, este debe ir en un KeyFrame, recomiendo crear un nuevo layer vacío, nombrarle
ActionScript y ahí colocar este código, eso hará nuestras películas mas ordenadas y
fáciles de depurar y reutilizar en el futuro.
/* Declaro la función de precarga "cargando",
esta función se ejecutara
todo el tiempo hasta que haya cargado totalmente la película */
function cargando() {
// Declaración de variables
var total, cargados, porcentaje;
// A la variable "total" se le asigna el tamaño de la película en
bytes
total = _root.getBytesTotal();
// A la variable "cargados" se le asignan el total de bytes hasta
el
//momento descargados de la web
cargados = _root.getBytesLoaded();
//Por medio de una regla de tres obtiene el porcentaje cargado y redondea el
valor con la función
//"Math.floor"
porcentaje = Math.floor((cargados*100)/total);
//Asigna al campo de texto porcentaje_txt el porcentaje cargado
porcentaje_txt.text = porcentaje + " %";
//Mueve la barra de carga al frame correspondiente al porcentaje
barra_mc.gotoAndStop(porcentaje);
//Si la cantidad de bytes cargados es igual a la cantidad total de bytes
if (cargados == total) {
//Hacer que se deje de ejecutar esta función
clearInterval(hiloPrecarga);
//Iniciar la película
play();
}
}
// setInterval nos servirá para que la función "cargando" se ejecute
cada 1 milisegundo
// Así, nuestra función revisara constantemente la cantidad de bytes descargados
// y solo iniciara la película hasta que la descarga termine
// la variable "hiloPrecarga" nos servirá para saber que esta corriendo
nuestra función
// y frenar su ejecución cada milisegundo por medio de "clearInterval"
var hiloPrecarga = setInterval(cargando, 1);
//Evita que inicie la película
stop();
Implementación
Ahora simplemente debemos copiar el Keyframe uno (Ambos layers)
en las películas que hagamos; solo tenemos que insertarlos tal cual en el primer
KeyFrame de cada película y el precargador funcionara, también podríamos insertarlo,
para mayor orden en una escena aparte que sea la primera. solamente recuerden
conservar los nombres e instancias tanto del movie clip como del campo de texto
Conclusión
Cuando queremos tener el control total sobre nuestras animaciones
de precarga o simplemente queremos reusar este código para cosas mas avanzadas
(como precargas de JPGs dinámicas por ejemplo) siempre es mejor programar nuestro
propio código fuente, de manera que sea mas sencillo luego cambiar cosas como
la animación de precarga o sus estilos.
