llops blog

Este ha sido el penúltimo trabajillo en el que he estado embarcado: la felicitación de Navidad para IKEA.

Para ser sinceros, este tipo de acciones tienen bastantes números de acabar en un bodrio por tres motivos:

1. el cliente quiere todos los topicazos navideños: las luces, el árbol, el Papa Noel, mensajes de amor y buen rollo, etc etc
2. el cliente quiere su producto bien grande o en todos lados, eso sí, en versión navideña (como si la aspiradora decorada con guirnaldas fuera lo más natural del mundo)
3. el cliente quiere que se viralice, para que todos tus familiares y amigos puedan ver la aspiradora con guirnaldas y poner así nuestro granito de spam en internet

Y nosotros, como buenos samaritanos, hemos cumplido escrupulosamente con todos los puntos, pero de una forma un poquito más original y divertida (a lo mejor también es un bodrio y me estoy engañando…)

Esta felicitación es un juego consistente en una especie de tetris, donde las piezas son muebles de IKEA que tienes que ir colocando para intentar montar algo parecido a un árbol de navidad, oséase, un Arbustus Navideñus.

Una vez que lo tienes montado, puedes enviarlo en forma de postal a quien desees, con el aliciente que por cada persona a quien se lo envías, IKEA dona 0’10€ a UNICEF y Save the Children.

Sobre el desarrollo

A pesar de su aparente sencillez, el proyecto tiene varios puntos que son interesantes comentar:

Animaciones
Como siempre, TweenLite para todo. Al final queda un modelo mucho más sencillo, limpio y parametrizable que con línea de tiempo.

El juego
Está hecho con Box2DFlash y se ha encargado de producirlo Jordi de Badabing. Por “cuestiones de producto”, al final hubo que meter los muebles en una especie de contenedor, y aunque el nivel de las colisiones es más “soso” (por ser siempre objetos rectangulares), sigue siendo bastante divertido. Si tienes que hacer cualquier cosa con física, échale un ojo a este motor que es una pasada.

La postal
Para codificar el bitmapData del árbol en un JPG, se ha utilizado la clase JPGEncoder del as3corelib de Adobe, una librería de clases que contiene distintas utilidades para AS3. Este es otro recurso que llegado el caso salva muchas muchas horas de trabajo (o directamente, salva el trabajo)

El envío de la postal
Desde la aplicación se envía al servidor los siguientes datos:

• el jpg del arbustus
• el nick del usuario
• el email del usuario
• de 1 a 10 emails de los receptores
• un mensaje de texto opcional

La clase URLLoader te permite enviar datos de 3 maneras: como texto, como variables y como binario, pero no tiene una forma sencilla de hacer un envío multipart, al estilo de la clase FileReference (al menos yo no he visto nada). Así que para la ocasión, mi compañero Ernex encontró la siguiente librería: as3httpclientlib, que entre muchas otras cosas permite el mencionado multipart. La gran “pega” es que simula una petición POST pero realmente lo hace mediante sockets, y el swf lo tenemos en el servidor de IKEA y el backend en un subdominio de HerraizSoto, con lo que ahí empezó el show de la seguridad del sandbox. Para no hacer muy largo el cuento, cada vez que el socket intenta conectar con el servidor necesita cargar una política de seguridad del estilo crossdomain, con la diferencia que no puede estar fija, sino que la tiene que cargar en cada petición. Así que Ernesto acabó utilizando un script en Ruby que escucha el puerto del socket y “escupe” al vuelo dicha política para cada petición del server de IKEA.

Explicado así quizá no parezca muy complicado, pero el que se ha encontrado con problemas entre dominios, políticas de seguridad, sandbox, etc etc. ya sabe de que hablo ;)

Distintos dominios
Como comentaba, el swf y el backend estan se encuentran en sitios diferentes. Para las estadísticas se ha utilizado un crossdomain.xml típico, y para el socket la técnica que ya he mencionado. En general, siempre que me toca hacer una aplicación flash entre diferentes dominios lloro y pataleo un rato (no puedo evitarlo).

Wmode
Y como sorpresa final, una vez entregada la pieza al cliente, éste activa el wmode de la película para que un menú en javascript de la botonera de IKEA quede por encima. A partir de ahí empieza a pasar de todo: el juego se ralentiza, cambia la combinación de carácteres (incluyendo la @), se rompen algunos png’s (esta es nueva, nunca lo había visto) y alguna cosa rara más. No pude evitar acordarme de este post de Zárate :)
Por suerte para nosotros, tras documentar todo lo que estaba pasando, el cliente accedió a desactivarlo (aún quedando el menú de la web por debajo del flash!). De todas formas, muy pocos clientes son tan comprensivos.
El wmode sigue siendo un cáncer para Flash, pero hasta que no tienes que pelearte con él no suele importar mucho. ¿Y luego? Pues a sufrir…

Y hasta aquí lo más destacado del desarrollo. Ojo cuando te venga el cuentas o el creativo y te digan que han pensado “una postal muy sencillita…”

Y ya que has aguantado todo el tirón, echa el resto y juega una partidita, a ver qué te parece, y ya de paso lo reenvías, que es por una buena causa ;)

Postal de Navidad para IKEA

Happy Xmas!!!