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

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:

PLAIN TEXT
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:

PLAIN TEXT
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í:

PLAIN TEXT
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. }

Axiis: Framework para visualización de datos en Flex

Axiis framework, visualización de datos en formato gráfico open source.

Aprovechamos la sobremesa del domingo para enlazaros Axiis un framework opensource que siempre es bueno tener a mano, en esta ocasión nos permitirá visualizar datos en gráficos de una forma sencilla, aprovechando las cualidades de flex.

Axiis permite a los desarrolladores definir el modelo de visualización de datos a través de un etiquetado intuitivo. Podéis ver unos cuantos ejemplos de las posibilidades que os puede ofrecer, o pegarle un ojo a la documentación oficial. Si os animáis incluso meteros en el código desde GoogleCode.

También podéis poner vuestras dudas en el grupo de GoogleGroups, que parece mantener una buena y sana actividad (más allá de algun spam que se cuela).

Flash en Facebook, desarrollo de juegos casuales

Desarrollando aplicaciones flash web para Facebook con la API de Action Script 3

A raíz de un proyecto que estamos terminando en el estudio, y del que lamentablemente no os podemos comentar nada por cuestiones de privacidad, hemos experimentado el "infernal" mundo de Flash en Facebook, siempre que tengas que hacer una integración un poco curiosa entre tu aplicación y la red social.

Desde la elección de la técnica que vas a emplear para la inclusión del archivo a los mecanismos básicos para integrarlo con la herramienta (invitar amigos, tomar imágenes e información del usuario, gestionar permisos para publicar en el muro, etc.) existen una gran cantidad de aspectos a tener en cuenta. No nos hemos convertido ni mucho menos en expertos, pero tras una primera experiencia de test suave y ahora la experiencia real de una aplicación con bastante más complejidad, podemos decir que iniciarse NO es tarea fácil ni directa.

Analizando nuestro proceso, tenemos claro que el principal motivo por el que esto no es sencillo es que Adobe no ha dotado de una documentación a su API en AS3, y que el material que encuentras por la red es confuso y muy poco organizado. Si bien la wiki de facebook es de obligada lectura, aunque hable de la API en PHP principalmente, hay muchos términos, nociones y situaciones que es el único lugar en el que se recogen.

Nos hemos propuesto solucionar esto, así que poco a poco iremos publicando una serie de tutoriales sobre cómo crear una aplicación en Flash para Facebook desde cero, no solo en cuanto a la parte flash, sino servidor, integración (la parte más conflictiva cuando usas flash), llamadas a javascript propio o de Facebook, comunicación con el servidor remoto... No nos cabe ninguna duda de que será un recurso de mucha utilidad, pero te lo preguntamos a ti antes de pegarnos la currada: ¿te interesaría?

Perlas de FOTB, ByteArray por Lee Brimelow

Lee Brimelow impartió una charla dentro del Flash on the Beach pasado en el que trató el tema de ByteArray, desde la base. Es un buen recurso que no puedo dejar pasar sin postearlo por aquí para tenerlo a mano en caso de necesitarlo, y que seguro que a más de uno le viene bien para refrescar o comenzar con ello.

ByteArray, controla tus bytes para mejorar tu ActionScript

A modo de introducción, cuando hablamos de ByteArray hablamos de desarrollos en los que queremos optimizar y mejorar el trabajo con datos binarios (como por ejemplo trabajo con audio, con datos en formato binario, optimización del tráfico de datos...) y su uso se condensa en la clase ByteArray disponible desde Flash Player 9 y Air 1.0, siempre hablando evidentemente de Action Script 3.
Read more

#008 ActionScript [Q] Tips: sincronizar FPS

Controla y sincroniza FPS entre diferentes películas

En el útlimo proyecto en el que nos hemos visto embarcados, hemos sufrido muy de cerca 2 características de flash que no son especialmente agradables: no te puedes fiar de los FPS para darle velocidad a un movieclip, y no te puedes fiar de un intervalo, Timer, o como lo quieras llamar para darle velocidad a un clip.

La física ayuda, si un coche va a 40Km/h de forma constante, y avanza recto durante 1 hora, sabes que estará 40 kilómetros desde el punto de medición. Pero en flash lo normal no es actuar así, sino que en un ENTER_FRAME o en un intervalo, le vamos incrementando la posición.

El efecto resultante es que si la ejecución del ENTER_FRAME o del intervalo varía dependiendo del equipo, en cada equipo el coche irá a diferente velocidad. Hasta aquí, siempre que estemos hablando de animaciones de un solo usuario, es un efecto bastante "intrascendente" (lo entrecomillo porque hay casos en los que podría ser perfectamente trascendente), pero por ejemplo en un juego multijugador en el que en el lado del cliente se hace simulación de adversarios y precálculo, la cosa cambia y puede llevar al traste todo el trabajo. Read more

Archivos ponencias de Grant Skinner

Charlas y ponencias de Grant Skinner

Os iba a hablar de una de las ponencias de Grant Skinner que de la que al ver las diapositivas inmediatamente me he dicho, buen recurso para anotar en el blog... pero es que luego vas a la recopiación que este monstruo de flash tiene, y la verdad, ya puestos... ponemos todas.

Así que aqui os dejamos el enlace a directorio de presentaciones que ha ido dando Grant Skinner, y de las que seguro puedes sacar muchas cosas en claro, de la mano de alguien que tiene bastante clarito esto del Action Script.

Pero ya que me tomé las molestias de fijarme en la charla sobre Resource Managment, cabe decir que es una información valiosísima para entender con ejemplos claros y sencillos mucho de lo que hay detrás del sistema de liberación/gestión de memoria en AS3.

A degustarlo, pero no te apresures a ver si te vas a atragantar... que hay comida de sobra.

Colisiones y motores de física en Action Script

Motores de física para Action Script

En la vida de un desarrollador flash lo normal es encontrarse con algún proyecto que implica el manejo de propiedades fisicas, como colisiones, escalados, fuerzas, traslaciones, rotaciones... En muchas ocasiones los efectos son sencillos y no es demasiado complicado crear un sistema realista y funcional, pero otras esto no basta.

Somos programadores y no tenemos por qué tener un grado de conocimiento de matemáticas muy elevado (aunque para bien o para mal nuestro mundo gira totalmente entorno a la geometría y trigonometría), así que nunca viene mal tener un aliado de ese lado, en mi caso tengo la suerte de tener un hermano físico, que muchas veces me ha sacado de un apuro, por un signo incorrecto, una interpretación del problema no adecuada... pero no es plan de abusar de la familia.

Lo que os presentamos en este post es un recopilatorio de diferentes motores de física en flash, para controlar colisiones, rebotes, fuerzas. Muchas veces... no tenemos que inventar la rueda. Así que si en la lista falta alguno que conoces y que crees que es digno de mención, no lo dudes y coméntanoslo.

Box2DFlash
Este motor, portado del original creado por Erin Catto's en C++ por Colin Northway, es una potente solución que contempla multitud de situaciones, como podéis ver en los ejemplos de su web. Además del proyecto en sourceforge, podéis ver la web del motor aquí.

APE: ActionScript Physics Engine
APE (Actionscript Physics Engine) es un motor opensource de física 2D para ActionScript 3, que puede ser empleado en flash y flex. Su autor es Alec Cove. Probablemente uno de los motores más conocidos, aunque por lo que he investigado en algunos casos la gente que lo ha exprimido al máximo considera que quizás no esté tan maduro como se puede necesitar.

Aquí os dejamos un tutorial de regalo.
Y su segunda parte.

Fisix Engine
Interesantísimo motor con unos buenos tutoriales (aun sin completar) y documentación. Puedes verlo en acción en unos ejemplos muy currados y de este motor realmente hay comentarios muy positivos, aunque puede que sea un poco más complejo de "asumir su funcionamiento".

FOAM
Un motor eficiente, pero que no viene acompañado de documentación ya que su autor es de la opinión que la mejor manera de comprenderlo es a través del código fuente del mismo. La documentación está precisamente en los comentarios sobre le código, que es lo que el autor echa en cara al resto de motores existentes por la red.

Demo 01: Caída perpetua
Demo 02: Test sin gravedad

Detección de Colisiones por Grant Skinner
Grant Skinner se curró en su día una interesantísima idea para detectar colisiones basándose en la clase BitmapData. Muchas veces no necesitamos un motor completo de física para nuestro proyecto, y simplemente un buen método para la detección de colisiones. Este sistema me parece una gran solución y de muy buena precisión.

Quizás alguno piense que está en AS2 y que ya no encaja en nuestros requerimientos, pero por suerte ya hay gente que se ha tomado la molestia en portarlo a AS3, cosa que evidentemente no parecía tarea difícil. La gente del estudio belga Boulevart tiene ya su código portado a AS3. (nota del que escribe: Elad, si estabas pensando en ello, no hace falta que sigas)

Luego existe alguna solución en camino o más experimental como Glaze Engine, del que no tengo mucha información que daros, pero que está ahí con algun ejemplo.

No obstante, tengo que decir, que en contra de lo que comencé escribiendo en el post, me parece muy importante y necesario saber qué tipo de cosas puede haber por debajo de estos motores, ya que en ocasiones tenemos que trabajar con colisiones o física totalmente en estado puro (por ejemplo programando una extensión de servidor para SmartFoxServer en su "particular ActionScript"). En un entorno así, o en otros muchos que nos podemos topar, no tenemos ni clases ActionScript, ni BitmapData, ni hitTest, ni métodos de Sprite o MovieClip... y solamente tenemos matemáticas y la trigonometría básica (ángulos, rectas, intersecciones, traslaciones, rotaciones...)

A nosotros nos ha ayudado bastante éste artículo sobre colisiones publicado en cristalab, y sobre todo el código fuente que hay detrás de él, que es puro cálculo matemático y no emplea más propiedades que las posiciones, ángulos y fuerzas de los elementos que intervienen. Si miráis el código veréis lo sencillo que puede ser el trabajo con formas circulares para afrontar los diferentes tipos de colisiones, y el consejo mejor que os puedo dar es trabajar con ángulo y velocidad, en vez de velocidades indeoendientes para el eje X e Y.

Lo dicho, sería genial conocer vuestra experiencia con alguno de estos motores, o descubrimientos de motores alternativo, esperamos tus comentarios!

#003 ActionScript [Q]Tips: Corrección punto flotante

Cuando tenemos que trabajar con números reales (double, float, punto flotante, o como los queramos llamar) y no solamente eso, sino que tenemos que mostrarlos por pantalla, muchas veces nos llevamos sorpresas poco divertidas, como que donde era 2 aparece 1.99, o donde era 2.98 aparece 2.96, etc.

Casos muy normales para esto son el trabajo con números que representan cantidades monetarias... (no existe 1,999 € de cara a un usuario final) o el trabajo con sistemas métricos como podría ser el longitud (metros, centímetros, etc.)

Aquí os dejamos una útil función que permite "reajustar" el problema del punto flotante que os indicamos, y que a nosotros ya nos ha sido útil unas cuantas veces:

PLAIN TEXT
Actionscript:
  1. /**
  2. * @author marcos
  3. * @since 13/09/2008
  4. *
  5. * Función que corrige el punto flotante en el número decimales indicado.
  6. *
  7. * @param num: numero que se quiere corregiro
  8. * @param decimales: cantidad de decimales para la corrección resultante
  9. *
  10. */
  11. function correccionErrorPuntoFlotante(num:Number, decimales:Number):Number
  12. {
  13.        var correccion:Number = Math.pow(10, decimales);
  14.        return Math.round(correccion* num) / correccion;
  15. }

Por ejemplo con esta función el valor de corrección de 1.99799 a 3 decimales sería: 1.998

Hasta el próximo tip de veranito!

AdobeEnVivo, grabación de eSeminars disponibles

[Q] interactiva ha participado en el Adobe En Vivo Online, organizado por GarageFlash, con el eSeminar: Juegos en Flash Lite

Pues AdobeEnVivo online ya ha finalizado, y la gente de GarageFlash no ha tardado mucho en publicar los enlaces a todas las grabaciones de Adobe Acrobat Connect, es decir video de lujo de las conferencias, con audio, posibilidad de moverte por la charla a tu antojo, etc.

Desde [Q] colaboramos en el evento mediante la charla que impartió Marcos González titulada "Juegos en Flash Lite", y que hemos de decir que tuvo una magnífica respuesta por parte de los hasta más de 70 asistentes que hubo en determinados momentos de la misma. Esta colaboración se hizo a través del Grupo de Usuarios de Móviles y Dispositivos de Adobe España, Blocketpc, junto con otra charla impartida por Raúl Jiménez.

El evento se cierra como un rotundo éxito (al menos desde nuestro punto de vista) ya que ha contado con una participación espectacular, ya no solo en asistencia, sino en cantidad y calidad de ponentes y de la variedad de países que se han unido al evento, siendo claramente un referente en coordinación y participación de diferentes Grupos de Usuarios de Adobe de forma conjunta ya no solo en nuestra lengua, sino como ejemplo para toda la comunidad. Nuestra enhorabuena desde aqui al Grupo de Usuarios de Perú GarageFlash por la iniciativa.

Os recordamos que este evento también se lleva a cabo en "real", y que el año anterior también contó con un importantísimo programa de talleres y conferencias. Esperamos poder estar allí personalmente en alguna de las futuras ediciones, que seguro serán igual o mejores a la anterior.

Flex para desarrolladores en paro

Flex Builder 3 Gratis para Desarrolladores en paro

Curiosa iniciativa que por lo que se ve no es nueva por parte de Adobe. Han diespuesto hasta 15.000 licencias de Adobe Flex Builder 3 para todos aquellos desarrolladores en paro que quieran aprender a manejar el programa, o mejorar el uso que hacen de él. La condición que se impone es que no se creen productos comerciales con la herramienta, sino que solamente se empleen para uso personal.

Teniendo en cuenta que una licencia de Flex Builder está en unos 210 €, creo que es totalmente aceptable que cuando te salga un curro pages la licencia. Imagino que es una buena manera de hacerse promoción en tiempos de crisis y quedar bien, pero lo resultante es que hay unos cuantos desarrolladores que podrán usar una versión legal de Flex Builder 3 sin tener que poner ni un euro (dolar, equis...)

Lo que siempre me ha llamado la atención de Flex es el esfuerzo importante que me da la sensación que hace Adobe por este producto, siempre tengo la impresión que se han volcado sobremanera en él y que no cabe duda que empujan para su promoción y expansión con todas sus fuerzas. Pero bueno a la gente que estamos a este lado de la plataforma, no nos viene mal.