Precarga en ActionScript 3 - 3,633 visitas
En este apunte voy a tratar diversas maneras para precargar una película Flash en ActionScript 3, desde la más sencilla a una que podamos extender y reutilizar en todos nuestros proyectos. A día de hoy, si eres uno de mis lectores habituales seguramente no te interese lo más mínimo 
. Si has llegado aquí buscando lo que el título indica, ¡adelante!
Yo usaré para este apunte la versión CS4 de Adobe Flash, pero puedes emplear también la versión CS3. Todos los documentos y archivos que creemos tendrán que tener como versión del lenguaje, obviamente, AS3. Para este apunte necesitaremos tres archivos .fla, todos ellos con la misma estructura. Los tres tendrán dos fotogramas clave: en el segundo colocaremos una imagen para poder simular la precarga más un comando stop(); que detenga la película al final, y en el primero colocaremos las acciones que correspondan a cada uno de los tres casos. Puedes descargar ahora los archivos que he utilizado en el apunte:
Descargar precarga_as3.zip
(2,24 MiB)
Recuerda que para probar la película como si se estuviera descargando, tienes que pulsar Ctrl + Intro dos veces, o bien ir a Control -> Probar película y después Ver -> Simular descarga. En Ver -> Configuración de descarga se puede ajustar la velocidad.
Primero vamos a hacer una pequeña introducción para comprender el sistema de carga de archivos de ActionScript 3.
Introducción. Sistema de carga de archivos en AS3; objeto LoaderInfo
Tal y como podemos leer en la documentación de Adobe Flash sobre la clase LoaderInfo, esta proporciona información sobre un archivo SWF cargado o un archivo de imagen cargado (JPEG, GIF o PNG), como por ejemplo los bytes cargados y por cargar o la URL del archivo, y distribuye una serie de eventos específicos relacionados con la carga y descarga de archivos. Atendamos ahora al diagrama extraído de la misma página:
Si prescindimos de los objetos Loader, que no nos interesan para este apunte, observamos que podemos acceder a la información de la carga de la instancia de la clase principal del archivo SWF mediante su propiedad loaderInfo (que, mucha atención, no pertenece a Stage). En cuanto a los eventos de esta clase, nos interesan especialmente dos:
- El evento progress, que se distribuirá durante la carga del archivo.
- El evento complete, que se distribuirá cuando la carga del archivo haya finalizado.
Además, emplearemos las dos propiedades especiales del evento ProgressEvent: bytesLoaded y bytesTotal, que creo que no necesitan explicación.
Así pues, la sintaxis que seguiremos será la siguiente:
1 2 3 4 5 6 7 8 | loaderInfo.addEventListener(evento.TIPO, funcionPersonalizada); function funcionPersonalizada(e:evento):void { // ... // e.bytesLoaded son los bytes cargados // e.bytesTotal son los bytes totales } |
Y dicho esto, vamos a empezar con nuestro primer ejemplo.
1. Precarga básica en la línea de tiempo
Esta es la manera más rápida y más directa de precargar una película: escribiendo unas pocas líneas de código en la línea de tiempo. Si lo que quieres es una aplicación puntual y no te interesa complicarte la vida, este es tu método. Comienza por crear un documento vacío y guárdalo con el nombre precarga_timeline.fla. Lleva al fotograma 2 alguna imagen que pese bastante (un tamaño cercano a 1 MiB será suficiente, tampoco te pases), y acuérdate de poner un stop();. Ahora escribe en el fotograma 1, como hemos convenido, el siguiente código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | // Importamos los paquetes necesarios import flash.events.ProgressEvent; import flash.events.Event; import flash.text.TextField; // Declaramos las variables var cargado:Number; var total:Number; var porcentaje:Number; // Detener la película al empezar stop(); // Creamos un nuevo campo de texto var tf:TextField = new TextField(); tf.text = "0% Cargado"; tf.x = (stage.stageWidth / 2) - (tf.width / 2); // Centrado horizontal tf.y = (stage.stageHeight / 2) - (tf.height / 2); // Centrado vertical addChild(tf); // Y lo añadimos al escenario // Función para el comportamiento durante la carga function onLoadProgress(e:ProgressEvent):void { cargado = e.bytesLoaded; total = e.bytesTotal; porcentaje = Math.round((cargado / total) * 100); tf.text = porcentaje + "% Cargado"; } // Función para el comportamiento al finalizar la carga function onLoadComplete(e:Event):void { // Eliminamos los listener loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onLoadProgress); loaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete); // Eliminamos el campo de texto removeChild(tf); // Que dé comienzo la película play(); } // Se agregan los listener para las funciones loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress); loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete); |
Los comentarios hablan por sí solos: estas líneas detendrán la película y mostrarán un cuadro de texto en el centro del escenario con el porcentaje cargado hasta el momento de la película. Fácil, ¿no?
Ver ejemplo de Precarga básica en la línea de tiempo
Como dije, esto es un ejemplo muy sencillo que te sacará de apuros cuando estés a punto de perder el avión y necesites añadir una precarga rápidamente, pero personalmente no me gusta nada porque me condena al copy & paste para siempre. De modo que vamos a ver otra manera:
2. Precarga básica con la clase de documento
Ahora, como buenos programadores en ActionScript 3, vamos a usar una clase para nuestro propósito, y la vamos a asignar a nuestro documento para que haga de clase para la instancia del archivo SWF principal. Crea otro documento con el nombre de precarga_dclass.fla (con la misma imagen en el segundo fotograma y su sentencia stop();) y un nuevo archivo ActionScript con el nombre de PrecargaBasica.as y colócalos en el mismo directorio. Al ser una clase de documento, ha de extender de la clase MovieClip de Flash:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | package { // Importamos los paquetes necesarios import flash.display.MovieClip; // Declaramos la clase public class PrecargaBasica extends MovieClip { function PrecargaBasica() { // Función constructora; se ejecutará al iniciarse la película } } } |
Ahora, básicamente tendremos que añadir el código que hemos escrito para el primer ejemplo, con algunas modificaciones. Así queda la clase al final:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | package { // Importamos los paquetes necesarios import flash.display.MovieClip; import flash.events.ProgressEvent; import flash.events.Event; import flash.text.TextField; // Declaramos la clase public class PrecargaBasica extends MovieClip { // Declaramos las variables private var cargado:Number; private var total:Number; private var porcentaje:int; private var tf:TextField; function PrecargaBasica() { // Detener la película al empezar stop(); // Creamos un nuevo campo de texto tf = new TextField(); tf.text = "0% Cargado"; tf.x = (stage.stageWidth / 2) - (tf.width / 2); // Centrado horizontal tf.y = (stage.stageHeight / 2) - (tf.height / 2); // Centrado vertical addChild(tf); // Y lo añadimos al escenario // Se agregan los listener para las funciones loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress); loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete); } // Función para el comportamiento durante la carga private function onLoadProgress(e:ProgressEvent):void { cargado = e.bytesLoaded; total = e.bytesTotal; porcentaje = (cargado / total) * 100; tf.text = porcentaje + "% Cargado"; } // Función para el comportamiento al finalizar la carga private function onLoadComplete(e:Event):void { // Eliminamos los listener loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onLoadProgress); loaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete); // Eliminamos el campo de texto removeChild(tf); // Que dé comienzo la película play(); } } } |
Y esto es todo; tiene la misma funcionalidad que el primer ejemplo. Como veis, esto nos da más posibilidades: simplemente tengo que tener la clase accesible para poder reutilizarla en mis proyectos, asignándoles a cada uno esta clase de documento.
Ver ejemplo de Precarga básica con la clase de documento
No obstante, y aunque esto contentará a la mayoría, yo todavía tengo algunas pegas:
- ¿Qué pasa si no me interesa que salga un cuadro de texto, sino, por ejemplo, una barra? Tendré que reescribir la clase cada vez que la quiera usar. Yo no llamaría a eso “reutilizar”.
- ¿Qué pasa si yo ya quería usar una clase de documento? Tendré que meter el comportamiento de mi película dentro de la clase PrecargaBasica. Un poco raro, ¿no?
Por estas razones, y esta es mi aportación personal para aquellos a quienes les surjan las mismas dudas, vamos a definir un tercer método con el que hacer una clase de precarga reutilizable de verdad (¿acaso no se inventaron las clases para eso?), aprovechando los métodos de herencia de la programación orientada a objetos.
3. Precarga personalizada con una clase extensible
Vamos a repasar los objetivos que queremos lograr a la hora de desarrollar nuestra clase:
- Independencia de la clase de documento
- Mínima cantidad de código para activar la precarga
- Clase ampliable
Crea otro documento con la misma estructura que los anteriores y llámalo precarga_custom.fla. Copia ahora la clase que hemos desarrollado en el ejemplo 2 en una carpeta llamada precarga, dentro de otra llamada clases, y cámbiale el nombre a PrecargaSuper.fla. Las primeras líneas tienen que quedar ahora así:
1 2 3 4 5 6 7 8 9 10 11 | package clases.precarga { // Importamos los paquetes necesarios import flash.display.MovieClip; import flash.events.ProgressEvent; import flash.events.Event; import flash.text.TextField; // Declaramos la clase public class PrecargaSuper extends MovieClip { |
No obstante, si ahora mismo creamos una instancia de PrecargaSuper, bien desde la línea de tiempo o desde la nueva clase de documento, para imitar el comportamiento que hemos diseñado en los dos ejemplos anteriores:
1 2 3 | import clases.precarga.PrecargaSuper; var precarga:PrecargaSuper = new PrecargaSuper(); |
Vemos que no ocurre nada especial; la película se detiene, sí, pero no aparece ningún cuadro de texto. Esto es así porque todas las propiedades y métodos estaban referidos a this (que se omitía) al ser la clase del documento, pero esto ya no sirve si no es así. De modo que tenemos dos opciones: o añadir la instancia de PrecargaSuper al escenario, o pasarle el escenario como parámetro al constructor. Creo que habéis adivinado que esta última me gusta mucho:
1 2 3 | import clases.precarga.PrecargaSuper; var precarga:PrecargaSuper = new PrecargaSuper(this); |
Y ahora haremos algunas modificaciones a la clase. En primer lugar, ya no hace falta que extienda de MovieClip, ya que no la vamos a añadir al escenario; en segundo, habrá que especificar un parámetro del tipo DisplayObjectContainer en la función constructora; y en tercero, habrá que referir todas las propiedades y métodos a la propiedad root de ese parámetro. Además, para cumplir el tercero de nuestros objetivos (hacer que la clase sea ampliable), vamos a hacer un par de modificaciones más en PrecargaSuper: vamos a quitar todo el comportamiento complementario y vamos a hacerla extensible, cambiando los private por protected. Después de lo dicho este debería ser el aspecto de la clase:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | package clases.precarga { // Importamos los paquetes necesarios import flash.display.MovieClip; import flash.events.ProgressEvent; import flash.events.Event; // Declaramos la clase public class PrecargaSuper { // Declaramos las variables protected var target:MovieClip; protected var cargado:Number; protected var total:Number; protected var porcentaje:int; function PrecargaSuper(_target:*) { // Se asigna a la propiedad target de la instancia la referida en la // función constructora target = _target.root; // Detener la película al empezar target.stop(); // Se agregan los listener para las funciones target.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onLoadProgress); target.loaderInfo.addEventListener(Event.COMPLETE, onLoadComplete); } // Función para el comportamiento durante la carga protected function onLoadProgress(e:ProgressEvent):void { cargado = e.bytesLoaded; total = e.bytesTotal; porcentaje = (cargado / total) * 100; } // Función para el comportamiento al finalizar la carga protected function onLoadComplete(e:Event):void { // Eliminamos los listener target.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onLoadProgress); target.loaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete); // Que dé comienzo la película target.play(); } } } |
Ahora la clase PrecargaSuper se limita a parar la película al principio, asignar valores a las variables cargado, total y porcentaje y reanudar la reproducción cuando finaliza la carga. Y ahora es cuando viene lo interesante: vamos a hacer una clase llamada Precarga que extienda de PrecargaSuper y que añada el ya famoso cuadro de texto, empleando la palabra clave override para sustituir los métodos de la clase padre y super para invocarlos:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | package clases.precarga { // Importamos los paquetes necesarios import flash.display.MovieClip; import flash.events.ProgressEvent; import flash.events.Event; import flash.text.TextField; // Declaramos la clase public final class Precarga extends PrecargaSuper { // Declaramos las variables var tf:TextField; function Precarga(_target:*) { super(_target); // Creamos un nuevo campo de texto tf = new TextField(); tf.text = "0% Cargado"; tf.x = (target.stage.stageWidth / 2) - (tf.width / 2); // Centrado horizontal tf.y = (target.stage.stageHeight / 2) - (tf.height / 2); // Centrado vertical target.addChild(tf); // Y lo añadimos al escenario } // Función para el comportamiento durante la carga override protected function onLoadProgress(e:ProgressEvent):void { super.onLoadProgress(e); tf.text = porcentaje + "% Cargado"; } // Función para el comportamiento al finalizar la carga override protected function onLoadComplete(e:Event):void { // Eliminamos el campo de texto target.removeChild(tf); super.onLoadComplete(e); } } } |
Y después de cambiar tres palabras en nuestra película:
1 2 3 | import clases.precarga.*; var precarga:Precarga = new Precarga(this); |
…ya hemos llegado al final de nuestro ejemplo: tenemos una clase, PrecargaSuper, con el comportamiento básico de la carga y que realmente podremos extender en cada uno de nuestros proyectos; y una clase Precarga, que implementa ese comportamiento básico y además añade funciones nuevas: en este caso mostrar un cuadro de texto, pero puede ser una barra, el típico círculo… Depende de tu creatividad 
, tan sólo tienes que seguir el modelo que hemos escrito usando super.funcionPadre(parámetros); en cada uno de los métodos.
Ver ejemplo de Precarga personalizada con una clase extensible
Y hasta aquí hemos llegado con nuestros ejemplos de cómo hacer una precarga con ActionScript 3. Espero que te sean muy útiles; siéntete libre de descargar ahora los archivos que yo he utilizado y de adaptarlos a tu gusto y no dudes en poner tus comentarios y sugerencias.
Descargar precarga_as3.zip
(2,24 MiB)
Así mismo, no olvides suscribirte a mi blog por correo o a mi feed RSS si quieres estar al día sobre las novedades en JLC Productions. ¡Muchísimas gracias!
Actualización: Archivos .fla actualizados para poder ser abiertos con Flash CS3
Actualización 2: Error corregido que impedía usar una clase de documento con PrecargaSuper (gracias a AndyX®)
Actualización 3: En este apunte se trata el problema de la precarga que empieza a medias
Actualización 4: Corregido error en el ejemplo básico gracias a Pedro Antonio
3 valoraciones - ¡Vota!
¿Te ha gustado esta entrada?
¡Suscríbete al Feed RSS o, si lo prefieres, suscríbete por correo para leer más como esta! También puedes valorar esta entrada más arriba, dejar tu comentario personal o enviar un trackback. ¡Muchas gracias!
Hola!
Muy bueno!
Es justo lo que estaba buscando.
Pero tengo un pequeño problemita. Y es que si yo creo un FLA nuevo y le agrego EXACTAMENTE las mismas cosas que tiene el FLA que baje de aqui, no anda. Se que importa bien las clases, pero me tirar un error en la linea “targer=_target.root;”, diciendo que estoy intentando convertir un displayObject a displayObjectContainer, y también tira error en el “stop()” y el “play()”.
Sabría contestarme por qué pasa eso?
Desde ya, muchas gracias; me fue muy útil.
Saludos.
Migue.
¡Hola Migue (o Andy
), muchísimas gracias por comentar! Me alegro mucho de que mi precarga te haya resultado de utilidad (que por cierto, vamos a dejarnos de formalidades: aquí de tú a tú). Vamos con tu problema:
Si estoy en lo cierto, seguiste el último ejemplo (el de precarga personalizada) empleando, además, una clase de documento para el .fla (corrígeme si me equivoco). De esta forma, al pasar el this, en lugar de pasar la línea de tiempo principal (DisplayObjectContainer) le pasas el SWF principal (MovieClip), y ahí es donde se produce el error. Efectivamente, el compilador lanza tres errores:
PrecargaSuper.as, Línea 48 * 1118: Conversión implícita de un valor con tipo estático flash.display:DisplayObject a un tipo flash.display:DisplayObjectContainer posiblemente no relacionado. * target = _target.root;PrecargaSuper.as, Línea 51 * 1061: Llamada a un método stop posiblemente no definido mediante una referencia con tipo estático flash.display:DisplayObjectContainer. * target.stop();PrecargaSuper.as, Línea 74 * 1061: Llamada a un método play posiblemente no definido mediante una referencia con tipo estático flash.display:DisplayObjectContainer. * target.play();Tanto si esta es tu situación como si no, efectivamente hay un error en el código, fruto del despiste o de la falta de previsión, ya que, aun en mi propio empeño por hacer la clase utilizable, no contemplé la posibilidad de usar una clase de documento. Es necesario hacer algunas correcciones en la clase PrecargaSuper y en Precarga, referentes al tipo de datos de la variable
target. Las primeras líneas de ambas clases quedarían así:Creo que eso es todo; espero no haber fastidiado nada por haber querido arreglar esto. Procedo inmediatamente a actualizar los archivos y el código.
Otra vez muchísimas gracias por la precisión, ha sido de vital importancia. ¡No olvides valorar la entrada!
¡Un saludo!
Hola Juan:
Por empezar, tengo que felicitarte, tienes una muy buena vista para estas cosas!!!!!!!
En realidad, no use una clase de documento. En el .FLA le puse el código este:
import clases.precarga.*;
var precarga:Precarga = new Precarga(this);
Que es el mismo que tu pusiste.
El error no estaba en lo que le pasaba, si no en lo que recibia la clase.
Ya corregi todo, y ahora va todo bien.
Muchas gracias por todo. La verdad que me has sido de mucha utilidad.
Estoy haciendo una remake de un juego para subir a http://www.newgrounds.com, y me piden que le ponga una precarga.
Por ahora, ya tengo las dos cosas que más se me complicaban: La precarga y el sistema para las partidas salvadas. Por lo demás, ya solo queda planificación de las clases.
No voy a olvidar ponerte en los CREDITOS. Me hiciste un gran favor.
MUCHAS GRACIAS.
Estoy para lo que necesites.
Un abrazo.
Migue.
Ah, por cierto…
Estuve viendo tus proyectos, y me parecen geniales. Si necesitas ayuda en algunos, me encantaría ayudar.
Hace tiempo que quiero juntar personas y dedicarme a la creación de videojuegos.
Yo estudio Diseño y Programación de Simuladores de Realidad Virtual, y este año empezamos a hacer videojuegos en C++ y en 3D. Pero me encantaría también seguir con esto de los juegos en flash para subir a las paginas y hacerme conocer. Espero algún día poder formar alguna empresa, o StartUp para comenzar… por lo pronto, me voy a leer tu tutorial de paginas web, jajaja.
Un saludo, y nuevamente, gracias por todo.
Migue.
Bueno Migue, aunque no acabo de entender cómo poniendo todo igual que yo te saltaba un error
, te agradezco de nuevo los halagos y que me incluyas en los créditos de tu juego. Muchas gracias también por el ofrecimiento de ayudarme, pero la verdad es que supone un desafío mucho mayor para mí enfrentarme en soledad a los problemas 
Espero verte más por aquí, para que leas más futuros apuntes sobre AS3, y no dudes en avisarme cuando cuelgues tu juego.
¡Un saludo!
OK, yo te aviso!
Te entiendo en cuanto a lo de enfrentar en soledad los problemas. Yo soy así incluso en mi vida. Pero en esto de los juegos, me dijeron que me tengo que acostumbrar a trabajar en grupo. Si es por mí, haría todo solo, jajaja. Quién más entiende mi códigos?!?!?! Jajajajajaj.
Una pregunta: Tienes por ahí algún tutorial de acerca de esa instrucción que usaste (super)? Lo vi en otras paginas, pero nunca supe su funcionamiento e implementación.
Un abrazo!
Migue.
Ahh, y en cuanto a lo de los errores, si quieres subo los archivos y te fijas. Son iguales, al menos que el hecho de que los haya revisado a las 04:30 AM haya influido en algo
Un abrazo.
Migue.
Hable con mi profesor de programación, y me dijo que con tu código original, si saco la opción de “Modo Estricto”, todo “debería” arreglarse. Bueno, solo te quería compartir otro dato.
Un abrazo.
Migue.
Aaaaaaaaaaah modo estricto… Ahora lo entiendo todo, por alguna razón lo desactivé para mi película ¬¬
Lo de la instrucción
superlo aprendí de un manual buenísimo que el mismo Adobe ® te brinda en esta página:http://help.adobe.com/…/flash_as3_programming.pdf
Es el capítulo 5, la parte de “Herencia”, o, si lo prefieres:
http://help.adobe.com/…/WS5b3ccc516d4fbf351e63e3d118a9b90204-7fcd.htm
Ya escribiré yo sobre ello un día de estos
¡Saludos!
Te agradezco mucho, ya me baje el manual.
De nuevo, muchas gracias.
Un abrazo.
Migue.
AndyX®
AndyX©
AndyX™
Ah, de todas maneras, no tenés que preocuparte, porque la corrección que hiciste al principio estaba bien, es como un código más generico. Además, a mi me salían los mismo errores, pero seguramente, era por lo del modo estricto. La cosa es que aún activado el modo estricto, cuando puse el código que vos habías modificado, anduvo. Así que a muchos les va a servir.
Me despido!
Un abrazo.
Suerte, y que estés bien.
Migue.
AndyX®
AndyX©
AndyX™
Hola, he probado el ejemplo sencillo “Precarga básica en la línea de tiempo” con el fichero que me he descargado y funciona bien, pero a la hora de hacerlo yo en otro fichero .fla AS3.0, igual, con dos frames, el código en el primer frame y en el segundo una imagen gande de 1.7MB y su correspondiente stop();, no me funciona, tengo 6 errores del compilador, del tipo “1120: Acceso a una propiedad porcentaje, cargado o total no definida.”, es decir, tengo un error en cada sitio de código que hace referencia a porcentaje, a cargado y a total.
No se la razón ni la solución a esto, ya que es como el tuyo pero con otra imágen.
Hola Pedro Antonio!
Muchas gracias por descargar el ejemplo. Efectivamente hay un error en el código que no detecté en el momento de escribir el apunte debido a que, como se puede leer en comentarios anteriores, no tenía activado el modo estricto. El error que obtienes quiere decir que las variables han de ser declaradas antes de poder ser usadas; para solucionar este problema, el código debería quedar así:
Otra vez, muchas gracias por tu comentario; ahora mismo voy a corregir el apunte.
Saludos!