#17 Flash [Q] Tips: Trabajo con webservices en Flash Professional CS4 + ActionScript 3

Recientemente me ha tocado lidiar con un proyecto que basaba la toma de datos de un servidor remoto en el uso de comunicación mediante webservices. Cualquier que haya tenido que hacer algo similar con Flash CS4 o ActionScript 3 dentro de este IDE, se habrá dado cuenta que hemos perdido algo al respecto, más que nada los componentes que nos permitían sobrellevarlo de una manera bastante abstracta.

Si tratamos de tirar de AS3 puro y duro desde el IDE de flash, tampoco encontraremos la manera directa de comunicarnos con webservices… qué pasa, nos han dejado sin esta funcionalidad? Pues sí, pero al menos han dejado un regalo de consolación para que podamos apañárnoslas. Se trata de usar parte de las clases incluidas en el SDK de Flex, en nuestro proyecto Flash, y de esta manera importarlas y poder por tanto contar con clases como: WebService. Read more

Comunicación en aplicaciones modulares en AIR: parentSandboxBridge y childSandboxBridge

Comunicación en aplicaciones modulares en AIR, parentSandboxBridge y childSandboxBridge

En web es muy habitual que un SWF principal cargue SWFs externos desde un servidor, ya sea el mismo (donde no tendremos ningún problema) u otro diferente (donde aprece ya el interesante mundo de los sandbox de seguridad de flash). Si esto lo llevamos a una aplicación AIR, nos topamos con un extra que es el sandbox de la propia aplicación.

Una de las grandes caracterísiticas de flash es la capacidad de cargar películas que a su vez pueden funcionar como aplicaciones. Esta situación, además de común, nos permite estructurar las aplicaciones de forma modular y lograr una independencia interesante entre la base instalada, los contenidos y los datos que estos manejan. Extender aplicaciones al vuelo, o actualizarlas es una de las grandes virtudes que tendría este sistema.
Read more

#016 AS3 [Q] Tips: ActionScript 3 para la Plataforma Flash

ActionScript 3 Reference for the Adobe Flash Platform

Un recurso imprescindible para todos los que nos movemos por varios frentes dentro de la plataforma flash, que es el centro neurálgico de la documentación sobre AS3 aplicado a todos los entornos y programas donde lo podemos emplear.

ActionScript 3.0 Reference for the Adobe Flash Platform

#015 [Q] Tips: Timers responsables

La verdad que vamos hasta arriba de trabajo, pero cada viernes que pasa que no cumplo con el objetivo que me he marcado, me duele, asi que aprovecho cosas que salen en el día a día para tratar de trasladarlas al blog.

En Flash, muy lamentablemente (y no os quiero contar en Flash Lite) no podemos llamar explícitamente al “garbage collector”, sino que lo que hacemos es tratar de marcar los elementos a borrar de memoria dejandolos libres de referencias (bien con un delete, con un null, etc.) De esta manera, si logramos que no queden referencias sobre los objetos que hemos marcado para el borrado, lograremos que cuando el GC haga su tarea, sean liberados de memoria.

Un punto especialmente delicado en este proceso de borrado de referencias son los listeners, ya que son procesos en los que es facil que nos olvidemos eliminarlos, aunque seamos muy metódicos en nuestro código. Pues hoy os quiero hablar de un desliz que es bastante común cometer, y que también es bastante sencillo de solucionar: los listeners sobre TimerEvent de un Timer.
Read more

Iniciándose en Flash Lite

No es que esto sea un recurso, nuevo, pero tras un tiempo sin entrar a revisar la Wiki de Forum Nokia sobre Flash Lite he visto que el volumen de información que hay (gracias a la aportación de un montón de desarrolladores, que siguen demostrando que la salud de la comunidad Flash es enorme, incluso hablando del hijo pequeño de la familia) y me ha parecido que se merecía su huequecito en el blog.

Para cualquier que quiera comenzar a desarrollar aplicaciones para Flash Lite (ya sea 2.x, 3.x o 4 que está en camino) un recurso indispensable, es Forum Nokia. Por un lado por sus recursos y los usuarios que lo mantienen muy activo, y por otro lado, porque por mucho iPhone, Android, etc. que salga, a día de hoy el gigante por excelencia en terminales móviles sigue siendo Nokia.

Evidentemente no se pueden dejar de lado recursos oficiales como los que os dejamos a continuación:

Esto son solo algunas referencias, por suerte hay bastante información, tutoriales, ejemplos y código por ahi suelto que viene de perlas. Y ahora que ya tenemos encima el Flash Player 10.1 para dispositivos, con soporte para AS3, toca ponerse las pilas, reciclarse y disfrutar de flash en dispositivos con unas capacidades que sin duda nos dejarán hacer aplicaciones mucho más interesantes!

Librería AS3 para el procesamiento de imágenes

Action Script 3 image processing library

Pues me animo a volver a escribir para acercaros en esta ocasión una librería en AS3 para el trabajo con imágenes, en este caso unas clases que nos permitirán trabajar con más de 50 filtros que pueden arrojar resultados tan interesantes como los que nos muestra el autor:

Para aprender a usarla nada mejor que los ficheros para descargar y la documentación bien a mano.

De todas formas una buena explicación, aunque en inglés, la encontráis en la página original donde se detalla la librería.

#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. }

#011 ActionScript [Q] Tips: controla tus eventos

Todos los que tenemos más fresco AS2 (en mi caso por Flash Lite) tenemos que esforzarnos para mantener los eventos controlados en AS3. En AS2 cuando eliminabas un elemento del escenario, o de un clip, dejaba de responder a los eventos a los que estaba suscrito, y en AS3 esto no es así. Una buena manera de poder llevar un control del estilo de AS2 (que cuando borremos un elemento de la DisplayList deje de escuchar eventos, y de que los recupere cuando deseamos es encerrar estas llamadas, las de addEventListener y removeEventListener en dos métodos y suscribir éstos a los eventos ADDED y REMOVED).

Algo así:

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import flash.events.Event;
  4.     import flash.display.Sprite;
  5.  
  6.     public class QTip11 extends Sprite
  7.     {
  8.         public function QTip11 ()
  9.         {
  10.             addEventListener(Event.ADDED, crearListeners);
  11.             removeEventListener(Event.REMOVED, eliminarListeners);
  12.         }
  13.        
  14.         private function crearListeners(ev:Event):void
  15.         {
  16.             // Aqui creamos nuestros listeners
  17.             addEventListener(Event.ENTER_FRAME, saludar);
  18.         }
  19.  
  20.         private function eliminarListeners(ev:Event):void
  21.         {
  22.             // Aqui eliminamos nuestros listeners
  23.             removeEventListener(Event.ENTER_FRAME, saludar);
  24.         }
  25.        
  26.         private function saludar(ev:Event):void
  27.         {
  28.             trace('hola!'); 
  29.         }
  30.     }
  31. }

De esta manera cuando hacemos un addChild del elemento se crea el listener, y simplemente con hacer un removeChild, se limpiaría.

Personalmente no lo uso porque no le veo que sea aplicable en unos cuantos casos, y además tengo muy grabado un método dispose que es donde voy poniendo mis removeEventListener según los creo en todos los sitios que me de la gana, y en cualquier tipo de clase, no solo en las que pueden formar parte de la DisplayList (es cuestión de hacer el hábito), pero es una manera curiosa de recordar el pasado en AS2.

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).

#010 ActionScript [Q] Tips: recorte irregular de bitmaps con suavizado

Este tip es en realidad una presentación del método copyChannel de la clase BitmapData, pero al menos lo presentamos con una utilidad práctica. Imagina que te piden recortar dinámicamente unas zonas de una imagen pero con formas complejas, e incluso con suavizado en el corte...

Se nos puede ocurrir nada más plantearlo si la forma es regular, emplear una fórmula para saber si un punto se encuentra dentro o fuera (y quedarnos solamente con los interiores), pero y si la forma no es regular? y si el corte no ha de ser brusco, sino con un equivalente al "feather" de photoshop?

La técnica es fácil si la forma es conocida, creamos una imagen con la plantilla de corte en un programa gráfico, por ejemplo fireworks, con el suavizado que deseamos. De esa plantilla solamente nos importa la forma y transparencia, con lo que puede tener perfectamente un color sólido en los pixels que son opacos al 100%. Esta plantilla supongamos que tiene un área de 100 x 100 px (todas las imágenes son rectangulares a nivel de pixel, pero en su interior tiene la forma deseada con las transparencias deseadas).

Esa imagen en PNG nos va a servir como patrón de transparencia para el corte mediante la clase BitmapData. Imaginemos que tenemos una imagen como BitmapData en la variable origen y queremos sacar ese patrón centrado en la posición (200,200) pues bien (en mi caso la imagen de la biblioteca que actúa como plantilla mide 100x100 y tiene forma de estrella con suavizado, vinculada para AS como "starTemplate"):

PLAIN TEXT
Actionscript:
  1. import flash.display.Bitmap;
  2. import flash.display.BitmapData;
  3. import flash.display.BitmapDataChannel;
  4. import flash.geom.Point;
  5. import flash.geom.Rectangle;
  6.  
  7. var origen:BitmapData;
  8. var origen_bm:Bitmap;
  9. var copia:BitmapData;
  10. var copia_bm:Bitmap;
  11.  
  12. var rect:Rectangle = new Rectangle(0, 0, 100, 100);
  13. var pt:Point = new Point(0, 0);
  14.  
  15. origen = new starTemplate(0,0)
  16. copia = new BitmapData(100, 100, true, 0xFFFFCC00);
  17. copia.copyChannel(origen, rect, pt, BitmapDataChannel.ALPHA, BitmapDataChannel.ALPHA);
  18.  
  19. origen_bm = new Bitmap(origen)
  20. copia_bm = new Bitmap(copia);
  21.  
  22. origen_bm.x = 0;
  23. origen_bm.y = 0;
  24.  
  25. copia_bm.x = 200;
  26. copia_bm.y = 200;
  27.  
  28. addChild(origen_bm);
  29. addChild(copia_bm);

El resultado es una copia extraída de la imagen original con el mismo patrón que la plantilla que hemos usado.

Next Page →