LocalConnection+ FlashGet

Durante el desarrollo de uno de los últimos proyectos en el estudio en colaboración con Netereo, hemos asistido a uno de esos errores inexplicables que te hacen pensar antes de dormir y a veces parecen ser cosa de los duendecillos que creemos hay dentro de nuestro ordenador.

Os explico, para sólo dejar abrir un juego realizado en flash simultáneamente en el ordenador, utilizábamos LocalConnection, de tal forma que el juego al iniciarse intentaba conectarse a una determinada conexión, si no podía conectarse era porque no existía con lo que dejábamos abrir el juego y creábamos la conexión para si se intentaba abrir otro juego si se pudiera conectar, por lo tanto dando mensaje de error por 2 juegos simultáneos.

Pues bien, el cliente nos comentaba que abría el juego, lo cerraba, intentaba volver a entrar y le  saltaba el mensaje, sin tener dos juegos simultáneos ya que el primero lo había cerrado por  completo. A Nosotros en nuestros ordenadores con idéntica versión de navegadores no nos ocurría, con lo que ya estaba el lío armao.

Después de muchas vueltas y búsquedas tanto por nuestra parte como por la parte de Netereo, le pedimos un video al cliente para saber que hacia exactamente, empezamos a comparar características del los equipos (sistema operativo, player de flash, firewall, antivirus….) y fue entonces cuando nos surgió la  idea feliz, quizás tuviera algún programa acelerador de descargas que bloqueara la conexión creada en  flash no liberándola al cerrar el navegador, siendo efectivamente lo que ocurría.

El programa acelerador de descargas, en concreto el FlashGet bloquea permanentemente la conexión creada con LocalConnection de tal forma que dicha conexión no se libera al cerrar el navegador.

Quizás esta información no os sirve de nada pero si algún día os pasa algo extraño con localconnection espero que esta información os sea útil y os ahorre unas cuantas horas :)

Flash

A raíz de este post que el Sr. Sotoca me hizo llegar, había escrito una mega-entrada para el blog tratando de puntualizar y corregir la multitud de incorrecciones o verdades a medias que se pueden leer en la entrada publicada por Enrique Dans en su blog. Pero luego lo he pensado mejor, y la verdad es que no merece ni la pena explicar algo que es tan evidente, así que lo he borrado y me quedo con una pequeña reflexión.

Todas las tecnologías y plataformas tienen fallos y puntos débiles (flash no está exenta, pero tampoco lo que se supone que son sus alternativas), pero si la web ha evolucionado como lo ha hecho y está en el punto en el que está, es entre otras cosas gracias a las capacidades de flash. Desde el punto de vista de una empresa desarrolladora de contenidos que no esté cegada en una tecnología, el hecho de que no existiera la posibilidad que aporta flash, sería un problema importante a la hora de afrontar según qué tipo de proyecto.

Y finalmente, es totalmente deshonesto hablar de flash en la web solamente como video, ni que fuera un simple player… quien vea así la plataforma está claro que ya está equivocado antes de comenzar.

Que un dispositivo que quiera venderse como una experiencia web completa similar a la del escritorio, no soporte esta tecnología, para mi es suficiente problema para no convencerme, porque existen muchísimos contenidos de mi interés que quedarán fuera de mi alcance. Así que quien no quiera flash en sus dispositivos, que no trate de engañar a la gente, y a todos aquellos que están aun escocidos de ver flash con tan buena salud, mala suerte, pero es muy triste emplear iPhone e iPad para sacar un debate que desde el inicio está muerto.

Linkitos interesantes:

HitTest de un MovieClip en un contenedor escalado

A raíz de un proyecto que estoy desarrollando en [Q] me he encontrado con un problema que a priori puede parecer común pero que por lo menos a mi me ha traído por la calle de la amargura la tarde y parte de la noche de este sábado.

El caso es que al reescalar unos MovieClips en los que en la programación un hitTest hacía referencia a ellos, se volvía loco no detectando bien el choque. Pues bien, después de muchas peleas encontré la solución que era tan sencilla como utilizar localToGlobal

PLAIN TEXT
Actionscript:
  1. posx = (clip._x + clip.sensible_mc._x);
  2. posy = (clip._y + clip.sensible_mc._y);
  3.  
  4. var point:Object = {x:posx, y:posy};
  5. _referencia.localToGlobal(point);
  6.  
  7. if(sensible_mc.hitTest(point.x,point.y,true))
  8. {
  9. trace("Choque");
  10. }
  11. else
  12. {
  13. trace("No Choque");
  14. }

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.

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

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?

#009 ActionScript [Q] Tips: controla tu foco en AS3

Ya sábado y sin poner el tip correspondiente... una semana complicada creedme...

En AS2 disponíamos de la clase Selection con sus métodos getFocus y setFocus que nos permitían controlar el cambio de Foco o elegir a quién queríamos dárselo, en AS3 se simplifica el proceso con la propiedad focus de stage (aplicable sobre cualquier InteractiveObject), y por otro lado tenemos la clase FocusManager para todos los componentes que implementan la IFocusManagerComponent.

Si lo que queremos es simplemente respetar un orden, podemos trabajar sobre los tabIndex de los elementos en pantalla (sean elementos normales o componentes, y que se mantiene desde AS2), de tal manera que empezando en 1 y dando sucesivos valores, tengamos el orden deseado. Con esto controlamos la transición de uno a otro mediante tabulador.

Para los que huyen del código, otra manera de darles el orden de tabulación es con el desconocido panel Accesibilidad de Flash que se encuentra en Window > Other Panels > Accesibility, donde cuando selecionamos un elemento podemos asignarle un tabIndex manualmente. El resultado es el mismo que el trabajo por código con tabIndex.

Flash, Control de Foco en AS3

Para preparar el foco en el elemento que desamos inicialmente (por ejemplo el primer campo del formulario) simplemente tenemos que hacer:

PLAIN TEXT
Actionscript:
  1. stage.focus = nombreElemento;

Simple, ¿no?, bastante mejor que en AS2.

Si trabajaramos sobre componentes, sin duda sería mucho más interesante emplear el mencionado FocusManager ya que nos permite tener un control mucho más detallado sobre los focos, relativos incluso al componente que lo emplea, eventos derivados del foco, conocimiento sobre el siguiente elemento a tomar el foco desde la perspectiva del componente actual, etc.

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

Next Page →