Diseñando para Android (e iPhone): templates en Fireworks

Plantillas para diseño de interfaces en Android para Adobe Fireworks

Me encanta ver tanto movimiento alrededor de la comunidad diseñil para móvil en el que Fireworks sale a relucir, y me encanta porque es la prueba constante de que este programa tan a la sombra de Photoshop está viendo poco a poco la luz… los diseñadores empiezan a entender las diferencias claras entre el trabajo y necesidades de diseñar para web, retocar imágenes, diseñar para papel y múltiples combinaciones de ellas.

Y en todo ésto una cosa está clara, Fireworks es un programa que hace muy bien lo que hace, y como herramienta para diseñar interfaces, es muy ágil, cómodo y cuenta con recursos suficientes para ahorrarnos bastante trabajo.

Como muestra, un botón, estas plantillas para Android con las que podremos acelerar nuestros bocetos para esta plataforma, como ya hemos visto en alguna ocasión para iPhone.

Y aquí un recordatorio de todo lo que este programa te puede ofrecer.

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

Por una vida más digna: nuevo horario

[Q] interactiva, nuevo horario
Imagen por Rui Caldeira

Pues tras analizar la capacidad de sufrimiento y de desgaste que tenemos en el estudio, y comprobar las consecuencias anímicas y mentales que esto suele conllevar... hemos decidido realizar un pequeño ajuste en nuestro horario laboral, para tener un poco más de vida más allá de la oficina.

A partir de ya mismo implantamos los viernes contínuos, o lo que es lo mismo, jornada de 8 a 15h para estirar un poco más el fin de semana y que al menos podamos tener el merecido descanso tras la intensa semana. No nos cabe duda que va a repercutir positivamente en nuestro rendimiento durante el resto de días, y que nos aliviará ligeramente a largo plazo.

No es mucho, pero es algo, y es que vamos teniendo una edad y hay que empezar a cuidarse... así que ya sabéis si os váis a pasar por aquí a tomar algo, o a ofrecernos trabajo, que no sea el viernes por la tarde, o seguramente os encontraréis a Soledad.

Por supuesto, y para tranquilidad de mentes inquietas, esto no implicará que no estemos pendientes de nuestras obligaciones los viernes ;)

Dale caña a tu Fireworks con extension manager!

A estas alturas muchos sabéis que soy de los que usa Fireworks en vez de Photoshop para el diseño web...y para muchas otras cosas en general. El caso es que pese a que lo considero realmente un muy buen programa (sí, se cuelga mucho, lo sé.), echaba de menos algunas cositas que sí que tengo en Photoshop y me hacían la vida más fácil. Una de ellas es el copy merged (copiar combinado creo que es la versión española). Lo echo MUCHO de menos en archivos con gran densidad de capas y elementos.

Total, que he desempolvado un viejo link que me pasó Rude para arreglar esto. Así de paso os descubro a John Dunning [en] y su MEGA colección de extensiones para Fireworks [en].

Si no lo conociáis y usáis este programa, echad un vistazo a la cantidad de buenos recursos que tiene ahí dentro y que estoy seguro os harán mejorar vuestros quehaceres con el programa. Yo ya tengo mi Copy Merged [en] en Fireworks, además de muchas otras cosas más como SelectPoints [en] y la imprescindible Smart Knife [en]. Parece que los Reyes Magos han llegado antes de lo previsto :D

Y de paso recordad que en Fireworks Developer Center [en] siempre hay mucha miga interesante.

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.

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?