#012 ActionScript [Q] Tips: precargas AS3 en Internet Explorer

5 de December, 2009. Escrito por [Q]boss en AS3, Flash, Flex, [Q] Tips

Imagino que unos cuantos de vosotros habéis topado previamente con el bug que se da en Internet Explorer cuando hacemos una precarga empleando los eventos Event.COMPLETE y ProgressEvent.PROGRESS de AS3. El bug en cuestión aparece cuando tenemos una película cacheada y volvemos a ella, para reproducirlo solamente tenéis que cargar la película y una vez cargada, pulsar F5 en vuestro navegador IE, o Ctrl + F5. Cabe destacar que esto solo ocurre con la película principal, y no las que se cargan internamente en ella.

Veréis como la precarga se queda en pantalla por los siglos de los siglos, y es que no se disparan correctamente los eventos antes citados. La solución más simple para el problema, es controlar este hecho, y qué mejor manera que viendo antes de preparar los eventos, si resulta que ya tenemos cargada por completo la película.

Imaginemos que tenemos la siguiente estructura clásica para el preloader:

Actionscript:
  1. function cargando(ev:ProgressEvent):void
  2. {
  3.     var porcentaje:Number = Math.floor( (ev.bytesLoaded*100)/ev.bytesTotal );
  4.         trace ('cargado... '+porcentaje);
  5. }
  6.  
  7. function cargaCompleta(ev:Event):void
  8. {
  9.       trace('Listo!');
  10. }
  11.  
  12. this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, cargando);
  13. this.loaderInfo.addEventListener(Event.COMPLETE, cargaCompleta);

Muchos optan por evitar el problema haciendo un preloader convencional con un Event.ENTER_FRAME, no obstante no es necesario, y aquí os dejamos el Tip de este viernes que nos permite la limpieza y eficiencia de la aproximación por eventos en vez de un enterFrame, sin tener que asumir el malfuncionamiento en Internet Explorer 6 y 7.

Si simplemente tenemos en cuenta comprobar inicialmente si la película está cargada por completo, algo tan sencillo como esto:

Actionscript:
  1. if (this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal == 1)
  2. {
  3.      trace('ya está cargado por completo');
  4. }

Por tanto nos quedaría algo así:

Actionscript:
  1. function cargando(ev:ProgressEvent):void
  2. {
  3.     var porcentaje:Number = Math.floor( (ev.bytesLoaded*100)/ev.bytesTotal );
  4.         trace ('cargado... '+porcentaje);
  5. }
  6.  
  7. function cargaCompleta(ev:Event):void
  8. {
  9.       trace('Listo!');
  10. }
  11.  
  12. if (this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal == 1)
  13. {
  14. // ya está cargado
  15. cargaCompleta(null);
  16. }
  17. else
  18. {
  19. this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, cargando);
  20. this.loaderInfo.addEventListener(Event.COMPLETE, cargaCompleta);
  21. }

Comments

14 Responses to “#012 ActionScript [Q] Tips: precargas AS3 en Internet Explorer”

  1. harold on December 5th, 2009 10:00 pm

    Desde un casi completo desconocimiento…

    if (this.loaderInfo.bytesLoaded/this.loaderInfo.bytesTotal == 1)

    ¿no es lo mismo que:

    if (this.loaderInfo.bytesLoaded == this.loaderInfo.bytesTotal)

    y ahorramos una operación?

    E independientemente de eso, se agradece mucho este tipo de posts ;)

  2. [Q]boss on December 6th, 2009 12:00 pm

    No es lo mismo, que ocurre si ambos valen 0? el resultado no sería 1, para que sepas que está cargada los totales y los cargados han de ser iguales, y distintos de 0, y una buena manera de mirar eso es igualándolo a 1 :)

    Me alegro ver que estos post le sirven a la gente :)

    Saludos!

  3. Jota on December 10th, 2009 9:20 pm

    Yo tengo una pregunta sobre las precargas en AS3.. y es qué “cargan” exactamente? los frames de la línea de tiempo o el tamaño de la película .swf?
    Porque tengo una película con 2 frames (uso una clase externa) y el tamaño es 1.8Mb pero no me entra en la funcion (cargando) en este caso.

    Soy un n00b de flash y sobretodo de AS3 así que puede que la pregunta sea una gran memez xd

  4. [Q]boss on December 11th, 2009 9:04 am

    Hola Jota,

    Pues en AS3 y en AS2 y en todos los flash hasta la fecha, lo que se precarga es el peso de la película distribuido en frames. Es decir por defecto las películas flash van cargando frame a frame su contenido, y según lo cargan, lo muestran. Es por eso que se pone un stop siempre que se hace un precarga, ya que sino, en cuanto cargase el primer frame, avanzaría al siguiente y el efecto no sería el deseado.

  5. Jota on December 11th, 2009 11:09 am

    Buenas [Q]Boss,
    ¿Entonces los objetos de la biblioteca, si no se utilizan en la línea de tiempo, no se precargarán?

    Gracias por tu información que siempre es valiosa.
    Saludos

  6. [Q]boss on December 11th, 2009 11:25 am

    Los objetos que están en la librería, si no son exportados para ActionScript, ni siquiera se incluyen en el fichero SWF resultante.

    Un ejemplo, si tienes 4 imágenes de 1MB cada una, pero ni las usas en el escenario, ni están dentro de movieclips exportadas desde la biblioteca para AS, no serán incluidas en el SWF, y por tanto no se precargarán.

    Lo mismo ocurre con sonidos, y en general cualquier elemento de la biblioteca. Si en la biblioteca das al menu contextual (esquina superior derecha) y pulsas la opción seleccionar elementos sin usar, podrás ver los elementos que no se incluirán al exportar el SWF.

    Si se exporta para AS, y se marca la casilla de incluir en el primer fotograma, entonces su peso irá a dicho fotograma, y por tanto el preloader no funcionará demasiado bien, si el primer fotograma tiene el 70% del peso de la película, entonces el prelaoder aparecerá con un valor del 70% (acuérdate que se muestra cuando está cargado el frame por completo). Esto ocurre en muchas webs, que los preloader comienzan en un 40% o 60%… y es por este hecho normalmente.

    La solución para esto es no marcar la casilla exportar para el primer frame, y crear un frame intermedio entre el primero y donde está la película, y ahi colocar todos los elementos exportados para AS. De esta manera el peso va al frame intermedio, que si se puede precargar desde sl primer frame.

    Saludos!

  7. Jota on December 11th, 2009 5:15 pm

    Era justamente lo que has comentado, tenía todo exportado al primer frame. Me queda mucho por aprender jeje

    Gracias por todo, ahora sé un poquitín más.

    Un saludo

  8. al on December 29th, 2009 4:30 pm

    Gracias man, tenía todo en el 1er frame, ahora ya anda, sólo m keda x solucionar el problema del preloader en el IE, probaré tu consejo.

    Felices fiestas.

  9. Pablo on May 19th, 2010 12:47 pm

    ¿y si no quiero cargar los bytes totales de todo el swf, y quiero mostrar el porcentaje de un movieclip concreto, en un fotograma concreto, al llegar a dicho fotograma?
    gracias!

  10. [Q]boss on May 19th, 2010 3:08 pm

    Las precargas controlan la carga del contenido de un MovieClip (o objeto contenedor), en el caso dela precarga principal, toda la película, pero no hay manera de diferenciar cada elemento que contiene en su interior.

    Si en un clip cargas un SWF que tiene varias cosas dentro, no puedes ir controlando si ya ha cargado un clip u otro clip.

    Con los frames si puedes, mediante la propiedad framesLoaded y totalFrames, o si cargas un SWF dentro de algun elemento de tu película.

  11. Pablo on May 19th, 2010 4:36 pm

    entonces es imposible hacer lo que yo quiero..
    que salga un preload al darle a un boton que carga un movieclip con una galeria que carga fotos con un .xml?

  12. Pablo on May 19th, 2010 4:59 pm

    var toLoad:Number = loaderInfo.bytesTotal;
    var loaded:Number = loaderInfo.bytesLoaded ;
    var total:Number = loaded/toLoad;

    lo que quiero hacer es esta funcion pero con la carga de los bytes de un movieclip (qeu es la galeria de fotos)

  13. [Q]boss on May 19th, 2010 5:25 pm

    Pablo el problema es que los clips no se cargan, los clips se toman de la biblioteca y aparecen de forma inmediata. Lo que se carga son SWF externos, o XML externos, o imágenes externas… todas esas cosas las puedes precargar con la clase correspondiente, pero no un clip.

    Saludos,

    Marcos

  14. Coder on July 1st, 2010 11:54 pm

    le estaba sufriendo con este problema, gracias por el tip ;)

    Saludos.

Leave a Reply