Comunidad de diseño web y desarrollo en internet online

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 MX

Clase 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
[email protected]

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate