Dec 23, 2008

Felicitación de Navidad para IKEA

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!!!

Información del artículo

Post publicado el 23 de December de 2008 a las 16:26 por llops

Categorias: Trabajos

Etiquetas: ,

Comparte

1 trackback

9 comentarios

  • Impresionante, el producto final, la historia que cuentas sobre el desarrollo, la explicación de cada una de los retos que superar, de agradecer enormemente los enlaces a las librerías que utilizaste, en fin, un grandioso post como es habitual, :P.
    Jajaja, que risa lo de “una postal muy sencillita”.
    Saludos!!!
    P.D. el resultado final me recuerda mucho 99 bricks

  • Woow, excelente idea y resultado, la verdad que has de estar muy satisfecho con el resultado final, felicidades.

    Y gracias por compartir el proceso de realizacion.

    Saludos y felices fiestas.

  • Simplemente impresionante, muy creativo
    enhorabuena
    elad

  • De nuevo gran post, nos tienes acostumbrados a un nivel bien alto. Felicidades.

    Con mis amigos, lo de “una postal muy sencillita…” puede ser extensible a “una web muy sencillita…” que suele ir seguido de “pues nada, con un foro o un chat de esos y mensajes como Facebook…” Jajajajaja… santa paciencia!!

    A pesar de todo, Feliz Navidad a todos!!

  • Gracias por los comments!

    #1 Por cierto Luis, no conocía 99bricks, y resulta que este es el juego se había utilizado como referencia. Me ha gustado mucho :)

    Saludos!

  • kassel

    Me ha gustado muxo, he leido tu explicacion y me ha lladao la atencion el use de as3corelib pues la he visto por ahi pero todavia no conocco exactamente su uso, algun tuto sobre la misma.
    Gracias.

  • Leonardo Molina

    Hola!!

    He seguido de cerca tu blog por la información tan útil que he encontrado.
    Mis mejores deseos para este y el proyecto de Ikea queda de primera :D

    Aprovecho para preguntarte algo: Estoy usando TweenLite para unas animaciones pero parece manejarlas por defecto con un Timer.
    Sabes si se puede cambiar a un enterFrame y como hecerlo (para Flash AS3) porque no le encuentro :(

  • Gracias Leonardo.
    En cuanto a tu pregunta: de una manera directa no se puede. Mírate este hilo donde encontrarás una solución y la explicación de porqué no funciona con frames.

  • Muy buena está la información, continúa posteando más de esta.

Sigue los comentarios


Fatal error: Call to undefined function is_user_subscribed() in /home2/llops/public_html/blog/wp-content/themes/furni75/comments.php on line 106