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 cargadoEste 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
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
Apariencia del cuadro de "Linkage" de nuestra barra de carga
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
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); };
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 ayudarlesFreddie® 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.
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?
Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate