Precargas SWF y JPG en Flash con MovieClipLoader
Introducción
En el proceso de desarrollo en Flash, muchas veces nos topamos con la necesidad de cargar de manera externa distintos tipos de archivos, como JPG, SWF o MP3, entre otros; cuando este proceso se hace desde la web es necesario avisarle al usuario de alguna manera que estan en proceso de descarga y, si es posible, mostrarle una "precarga" que indique que porcentaje del archivo ha cargado
Este tutorial cubrira las tecnicas de precargas externas funcionales en Flash MX 2004 por medio de la nueva clase
MovieClipLoader.
Para hacer este tutorial es NECESARIO que haya completado el tutorial basico de
Precargas en Flash MXClase MovieClipLoader
Como mencione al inicio del tutorial, la clase MovieClipLoader esla encargada de gestionar las precargas externas, dandonos un modelo de eventos que nos avisa cuando la precarga empieza, termina, si hubo un error, etc, tambien puede actualizar datos (Como animaciones de precarga) en el proceso de precarga.
Cuando hacemos precargas externas de JPGs o SWFs normalmente cargamos a estos dentro de un Movie Clip.
Para que un MovieClipLoader pueda administrar el proceso de carga de un MovieClip, debemos enlazarlos entre ellos, como veremos mas adelante.
A continuación una grafica del funcionamiento de MovieClipLoader
Sumario de metodos de MovieClipLoader
Para entender mucho mejor, vamos a hacer un ejemplo sencillo de carga de un archivo SWF.
Ejemplo: Cargando externamente un SWF
Para nuestro ejemplo, vamos a crear una pelicula que llamaremos "Pelicula.fla", esta debera pesar como minimo 100Kb para que podamos ver el efecto de precarga, para lograrlo lo mejor es insertar imagenes o sonidos en la pelicula, asi aumentara de peso sin mucho esfuerzo; esta pelicula debera ser de 300x200 pixeles (No se olviden de exportar la pelicula a SWF).
Ahora, crearemos la pelicula
madre de 350x300 pixeles; que cargara externamente nuestro archivo "Pelicula.swf" .
Lo primero que crearemos es la animación de precarga, que en el mas normal de los casos, sera una barrita que se va llenando; para esto, construiremos una animación de 100 frames de la misma manera que se hace en el tutorial de
precargas estandar, tendra 100 frames porque en cada momento de la precarga, el frame ira de acuerdo al porcentaje; asi, si el porcentaje es del 95%, nuestra animación de precarga estara en el frame 95; similar a esta grafica:
Vista de la linea de tiempo del movie clip de la animación de precarga
Ahora, lo importante aqui es que esta animación aparezca cada vez que quiero precargar; no todo el tiempo, asi que no la vamos a instanciar en el escenario sino la vamos a "Vincular para ActionScript", para esto, primero, si tenemos a la barrita en el escenario, la eliminamos, luego, abrimos la libreria con CTRL+L , buscamos nuestro movie clip de la animación y le damos click derecho sobre el para que aparezca el menu contextual, en el menu contextual elejimos la opción "Linkage"; debemos llenar los datos de ese cuadro de dialogo como aparece en la siguiente imagen:
Apariencia del cuadro de "Linkage" de nuestra barra de carga
Con esto ya podremos "attachar" la pelicula a nuestro escenario de manera dinamica con ActionScript.
Tambien crearemos un movie clip, cuyo contenido sea simplemente un cuadrado de 300x200 pixeles (Dentro de este movie clip cargaremos la pelicula externa); solo una condicióne es importante y es que el punto de registro quede en la esquina superior derecha; para esto, al seleccionar nuestro cuadrado y convertirlo a movie clip, haremos lo siguiente:
Ubicación del punto de registro al convertir a movie clip el cuadrado de 300x200 pixeles
A este ultimo movie clip creado le pondremos de nombre de instancia
caja_mc.
Solo nos falta colocar un boton en el escenario, a este boton pongale de nombre de instancia
cargar_btn
De modo que nuestra pelicula madre debe ser algo similar a esto
Apariencia del escenario
El codigo
Listeners
La clase MovieClipLoader dispara eventos cada vez que ocurre algo, en funciona, asi, por ejemplo, nosotros podemos decirle que ejecute una función cuando la precarga inicie, otra cuando termine y que se mantenga ejecutando una función cada vez que el porcentaje de carga vaya avanzando; pero para poder unificar todas esas funciones, tenemos que meterlas todas dentro de un objeto (Una variable de tipo
Object) y luego asignar este objeto como el manejador de eventos de
MovieClipLoader, a esto se le llaman
Listeners.
En el primer keyFrame . . .
Que empieze la diversión!!; en el primer (Y unico, en este caso) KeyFrame de nuestra pelicula madre, colocaremos este codigo; lean los comentarios del codigo, que es donde esta la explicación del funcionamiento;
//DECLARACIÓN DE VARIABLES
var precargador_mcl:MovieClipLoader = new MovieClipLoader();
var listener:Object = new Object();
//Esto escondera el menu del click derecho
Stage.showMenu = false;
//CREADOR DEL LISTENER
//Las funciones de los MovieClips son tres esenciales;
/* onLoadStart (Ejecutada cuando inicia la precarga)
onLoadProgress (Ejecutada cada vez que avanza la descarga)
onLoadComplete (Ejecutada cuando la precarga termina)
*/
//Función onLoadStart, asignada al objeto Listener que luego agregaremos a
//nuestro MovieClipLoader El parametro "target_mc" es una referencia al
//MovieClip de destino
listener.onLoadStart = function(target_mc) {
trace("Iniciando");
//Colocamos la barra de precarga en el escenario con el nombre "barra_mc"
_root.attachMovie("barra", "barra_mc", _root.getNextHighestDepth());
//Ubicamos la barra en la mitad del escenario
_root.barra_mc._y = Stage.height/2;
_root.barra_mc._x = Stage.width/2;
//Y nuestra barra esta lista para moverse en el evento onLoadProgress
};
//Función onLoadProgress, es la función clave, tiene tres parametros
//target_mc, quees igual que el anterior, loadedBytes, que nos dice la
//cantidad de bytes cargados y totalBytes que nos dice la cantidad total
//de bytes de la pelicula en proceso de descarga
listener.onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
trace("En progreso");
//Declaramos la variable de calculo de porcentaje
var porcentaje:Number;
//Calculamos el porcentaje con las variables que le llegan por parametro a la función
porcentaje = Math.round((loadedBytes*100)/totalBytes);
//Vamos al frame del porcentaje en nuestra barra de carga
_root.barra_mc.gotoAndStop(porcentaje);
//Ahora escondemos el objeto de la precarga y lo frenamos
target_mc._visible = false;
target_mc.stop();
};
//Función onLoadComplete
listener.onLoadComplete = function(target_mc) {
trace("ya");
//Como ya cargo completo, entonces quitamos la barra
_root.barra_mc.removeMovieClip();
//Y mostramos el objeto
target_mc._visible = true;
target_mc.play();
};
//ASIGNACIÓN DEL LISTENER AL MOVIECLIPLOADER
//Ahora, todas las funciones que declaramos seran asignadas a
//nuestro MovieClipLoader "precargador_mcl"
precargador_mcl.addListener(listener);
//CODIGO DEL BOTON
//Esta variable nos servira para saltarnos el cache y asi siempre
//ver el efecto de precarga, quitala o dejala en blanco si no
//lo deseas
var nochache:String;
//En el evento onRelease del boton . . .
cargar_btn.onRelease = function() {
nocache = "?nocaching="+random(65000);
//Aqui le decimos a nuestro MovieClipLoader que cargue el archivo
//"pelicula.swf" y que lo muestre en "carga_mc" :D
precargador_mcl.loadClip("Pelicula.swf"+nocache, caja_mc);
};
Una recomendación; no lo prueben en local desde su computador, haganlo desde un servidor web.
Errores
No todo es color de rosa; existe un error con la clase
MovieClipLoader descubierto por ... mi ..., el cual
documenté en mi weblog.
Este error solo ocurre cuando en vez de SWFs cargamos JPGs; asi que no hay que preocuparse a menos que esten haciendo una galeria de fotos.
Conclusiones
MovieClipLoader es una sencilla y poderosa clase de ActionScript 2.0 que nos permite control sobre todas las variables de una precarga externa haciendolas mas faciles y "logicas" al implementar; solo falta que ustedes prueben con su propio codigo, y ya saben, cualquier duda puede dirigirse al ejemplo descargable en .FLA o si no a nuestros foros; siempre listos a ayudarles
Freddie® Cristalab
webmaster@cristalab.com
Información adicional
Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
Tutoriales relacionados
