Cuando se presentó el proyecto de Sin Su Permiso la emoción fue grande… así como lo fue la preocupación, pues nunca antes se había hecho un trabajo de este tipo. La alegría de hacer algo nuevo es lo que más nos gusta de nuestro trabajo. Sin embargo había una gran tristeza en el ambiente, nuestro Gran Panda Líder estaba hospitalizado y no tenerlo con nosotros implicó un gran reto. Poco después de haber iniciado la producción, recibimos la noticia que nos había dejado. Para el equipo la noticia fue tan impactante, que prácticamente la mayoría de proyectos se pausaron durante más de una semana. La tristeza y la incertidumbre nos desmotivó a todos. Aun después de lo acontecido el equipo decidió que no se podía abandonar lo que Gustavo había emprendido, Happy Punk Panda Studios no podia venirse abajo.

Ahora todos vemos hacia atrás y es increíble el esfuerzo que el equipo hizo para poder seguir adelante. Habíamos perdido a nuestro líder, con quien habíamos aprendido a compartir un placentero trabajo en equipo y una maravillosa visión de cómo crear y proponer nuevas ideas.

Luego de una semana de estar en standby y con las cabezas mas frías, retomamos el trabajo con otro problema: no teníamos la disponibilidad de trabajar a cualquier hora en la oficina. Así fue como nos vimos en la necesidad de trabajar desde nuestras casas, haciendo la producción mas complicada de lo que ya era. Al inicio no se sabía por donde empezar. He aquí lo singular de esto, que no hay fórmulas que seguir. Con el tiempo uno desarrolla su estilo de trabajo y la experiencia de cada proyecto lo perfecciona.

La preproducción inició con una lluvia de ideas, en el que se decidió que el globo de diálogo del logo sería el elemento visual protagonista del video, se elaboró un storyboard y se empezó con las pruebas…

La animación y los modelos se hicieron en Maya y la composición en After Effects. Durante las pruebas se decidió si los globos serían con un aspecto 2D o 3D.

Se propuso un ambiente blanco con planos animados para que los globos resaltaran.

Se hicieron varias pruebas de culminación y de materiales hasta que se llegó al “look” que se quería. Después de haber logrado llegar hasta este punto se pasó al Render de las secuencias, al final fueron mas de 1200 frames que pasaron a la composición. En esta etapa se combinaron todos los layers renderizados y se hizo corrección de color.

Ahora que la introducción estaba prácticamente armada solo hacía falta el audio. Iniciamos con la búsqueda de estilos de música, y nos pareció que el género de Acid Jazz le quedaba perfecto. Lastimosamente el cliente no lo aprobó y envió otra opción.

Además del intro también se hicieron bumpers para cada sección. Éstos seguirían la misma línea que el intro, también se utilizaron los mismos elementos del entorno.

A pesar de todo lo que pasamos durante la realización se disfrutó mucho el proyecto. Era el primero de este tipo y aprendimos muchas cosas. Se corrió con los tiempos, pero quedamos satisfechos con el resultado. Y esperemos que pronto tengamos otro proyecto similar, para aplicar todo lo que aprendimos y hacerlo aun mejor.

El proyecto de el Edificio Avante quizás fue el proyecto que más nos costo en el 2009. Nos aventuramos a realizarlo usando tecnologías que jamas habíamos usado en el studio.       Nos desvelamos, tuvimos pesadillas y hasta hiper ventilamos pero al final nos encanto el resultado.

Lo primero que decidimos utilizar fue “Deep Linking”  en flash. Que queremos decir con Deep linking, pues es básicamente decirle al explorador que se vaya a una parte especifica de la película de flash utilizando la barra de dirección. Para los que no han trabajado en flash antes, hacer esto no es tan sencillo!

El problema más grande que teníamos era que flash solo utiliza una única pagina para enseñar todas las secciones del sitio. Por medio de AS3 y Javascript pudimos lograr que el explorador se comunicara con nuestra película en flash y asi lograr que al escribir un link especifico en la barra de dirección eso llevara a una sección especifica en la película.

Una vez resuelto nuestro primer problema enfrentamos un problema aun mas grande.  Sin saber como hacerlo le habíamos vendido al cliente que su edificio (aun no construido) iba a aparecer en el sitio web y los usuarios iban a poder verlo en 360 grados.

No nos referíamos a un 360 de un edificio, nos referiamos a que el modelo del edificio iba a aparecer y el usuario iba a poder visualizar en tiempo real. El único problema es que no teníamos ni idea como lo íbamos a hacer =)

Decidimos utilizar un motor en 3D para flash llamado PaperVision3D donde nos permitia insertar el modelo del edificio en low poly y adentro de flash animarlo. En teoría todo tenia que funcionar. Ahora a la hora de armar el proyecto no fue tan fácil como muchos lo hacían ver.

Después de haber revisado casi toda la documentacion a la mano empezamos con las pruebas, al inicio nos encontramos con muchos problemas, pero luego fuimos descubriendo poco a poco que los archivos se deben preparar para que funcionen de una manera correcta con este motor. El modelo del edificio tuvo que ser modificado para que se visualizara mejor. Las texturas eran al inicio un problema, demasiadas planas, no habían luces ni sombras. Para solucionar ese problema se “hornearon” las texturas en ingles Texture Baking, lo que significa es que se hace un render y la información del material junto a sus luces, brillos y sombras son grabadas almacenadas.

Viewport - Maya

Render

Ya que las texturas serian cargadas por el explorador, estas tenían que ser optimizadas, hacerlas menos pesadas sin tener que sacrificar tantos detalles.Trabajar con PaperVision3D por primera vez fue un gran reto para el equipo, pero la experiencia es invaluable y nos dejo con ganas de seguir experimentando con el.

Además del modelo en tiempo real y el deep linking del edificioavante.com el portal también utiliza google maps (en flash) y carga galerías completamente dinamicas.

Google maps API en Flash

El proyecto le gusto al cliente y nosotros quedamos sumamente contentos ya que habíamos logrado realizar algo que no teníamos ni idea como hacer. Nos sentimos super orgullosos en haber desarrollado el primer proyecto en papervision3D en el salvador, una tecnología que todavía esta en pañales  pero que poco a poco iremos viendo más en el mundo flash.

Visita el sitio en edificioavante.com

Después de un año muy difícil donde perdimos  al Panda Mayor, Gustavo Gutierrez, Happy Punk Panda relanza su blog. Si bien es difícil seguir adelante sin tavo, todo el equipo de Happy Punk Panda creemos que la única forma de agradecerle a Gustavo por todo lo que nos enseño es seguir con el sueño del Panda Habitat.

Como Happy Punk Panda les damos las infinitas gracias a todos los clientes, amigos, compañeros y hermanos por seguir creyendo en nosotros. De verdad esperamos poner la imagen de tavo en lo mas alto.

Si bien nuestro ultimo post fue en Julio 2009 sobre TIGO, desde entonces hemos trabajado junto otras marcas y clientes increíbles. Solo que  hemos estado tan ocupados que ni nos a quedado oportunidad de documentar todos nuestros trabajos. La idea de volver a lanzar el blog es para poder documentar todo lo que hemos trabajado y estamos trabajando actualmente. Son tantos los proyectos de estos últimos 7 meses que ni nos acordamos de todo lo que hemos hecho.  Haremos lo mejor posible para documentar la mayoría.

Gracias por seguir leyendo nuestro blog.

Cuando una menos se lo espera conoce a un lector

o que pequeño es el mundo…

Una entra a una reunión de trabajo en donde se va a hablar con un proveedor de un proyecto con un cliente. Una entra a la reunión con la laptop agarrada como libro y empieza con todo el cuento ese del concepto, la idea, los colores, las aspiraciones, el grupo objetivo, el mismo cuento que ocupa con el cliente. (Por cierto, me di cuenta de que mucho muevo las manos para hablar. Si me las quitaran me quedaría muda).
Y el proveedor, que en realidad son dos bichos bien jovencitos -que me dijeron los nombres, pero ya no me acuerdo, porque mi memoria a corto plazo no funciona, porque la de largo plazo ocupa todo el espacio disponible- se las saben de todas todas en internet. Y del tema de la campaña “aspiracional” pasamos a hablar de youtube y facebook y blogs y twitter… Y resulta que, como ya saben, yo en eso del twitter soy nula y la Mariam -ejecutiva de cuentas que colecciona nubes y no le gusta usar tacones ni maquillaje- y yo les pedimos que nos expliquen cuál es el chiste de esa cosa. Y bueno, nos dan toda una cátedra acerca del twitter y de sus “utilidades” en publicidad… Y cuando llego a entender el asunto digo “Ah, es como un blog, pero en chiquito…” Y me dice que sí, algo así.

Entonces, de narcisa, sí, de narcisa; empiezo a hablar de que yo tengo un blog y que uno a veces escribe cosas personales, bien personales, y como el medio es bien impersonal no sabe quién lo esta leyendo, y que a veces me da cosa por eso…

Y aquí viene la parte interesante: uno de los “proveedores” me dice que él lee mi blog -¡Narcisismo en su máximo esplendor!-, que Miguel lo invitó y le pregunto cómo te llamas, Gustavo, Gustavo qué, Gutierrez, y me acuerdo del post de El Triste y la Ximena nosequé, ash y es raro pero chivo darse cuenta que el blog de verdad “existe” y que cuando uno menos se lo espera se encuentra a un lector…

Se acaba la reunión y le digo a Gustavo que tengo que escribir de ese encuentro en el blog.

Visita: http://unraroduo.blogspot.com/

Front End Tigo El Salvador

Un sitio web no es solamente una interfaz gráfica ni un diseño bonito. Un sitio web es contenido, y gracias a ese enfoque de web 2.0, aplicaciones y en fin un sitio pensado en la experiencia del usuario final, Tigo cambio sitio, podríamos decir que en una semana.

Corriendo con el proyecto de Pepsi Light, sin aire acondicionado, con aproximadamente 7 personas en el studio emprendimos la cruzada de
1. Entender el funcionamiento del CMS,
2. Verificar los contenidos casi de uno por uno
3. Pues salir adelante con el proyecto que siempre era “para mañana”.

Con el CMS desarrollado por Avatar y la coordinación con el equipo de Tigo El Salvador,  paciencia y organización lo logramos! actualizar el sitio con el nuevo contenido y pues seguimos con el mantenimiento del sitio.

Manejar contenido no resulta para nada una tarea fácil, sin embargo si resulta divertido al final, cuando luego de estar a cargo del contenido te das cuenta que conoces el sitio web mejor que la palma de la mano de uno mismo, en fin, el sitio funciona, el contenido está completo, Tigo quedó satisfecho y nosotros, dormimos las horas de sueño que nos hacían falta  ñ_ñ

.DA

Realizar un proyecto como este requiere de mucha gente y talento artístico. Lo que define muchas veces la calidad del resultado final es el delicado balance entre presupuesto y tiempo.

Daremos un vistazo por todo el proceso de producción, algunos problemas que tuvimos y como se resolvieron.

Todo comienza con un Guión, generalmente es hecho por la Agencia de Publicidad, luego, con eso se prepara el Storyboard, con lo cual se visualiza cada una de las tomas, se especifican movimientos de camara y se representa de mejor manera la acción.

Una Hoja de Storyboard

El storyboard original consistía en 21 tomas, en el aparecía un aproximado de 15 duentes, un Decorado exterior con nieve y la casita que representaba la fabrica de juguetes asi como tambien un decorado del  interior donde esta la fabrija de juguetes. Al final se eliminó la escena del exterior quedando detallado el trabajo con los siguientes elementos a considerar:

• 10 Tomas
• 2 Decorados (fabrica de juguetes y ascensor)
• 3 Duentes principales que se duplicarían para llegar a un promedio de 15
• Props como Arbol de Navidad, regalos, barandas, tubos, lamparas, adornos, carrito, etc.

Con lo anterior en cuenta, hay que diseñar el look que tendrían estos elementos, asi como tambien la linea conceptual de colores, estilización de personajes, etc. Esta etapa se le llama Concept Art.

Realizado por Key Frame Studio. El cliente se decidió por el tipo C

La siguiente fase es el modelado en 3D, tomando como referencia los artes seleccionados. Se modelo el duende Gordo y la Duende niña. El duende Flaco se saco de modificar la geometría del duende Gordo. Los demás duendes fueron duplicados y cambiados de color para crear las multitudes. El Decorado de la fabrica y sus props fue realizado por Key Frame Studio, nosotros modelamos la parte de el Ascensor.

Proceso de Modelado del Duende Gordo

Se muestra el Decorado junto con los personajes, tanto en maya como en vista previa sin texturas

Luego pasamos al texturizado de la ropa. Para ahorrar tiempo, no se  pinto mapa UV de la cara, solo de la Ropa.

Mapa UV de Duende Gordo pintado en Photoshop.

Duente Gordo y Duende Flaco en pruebas de Textura y Render.

Ahora el personaje esta listo para el Rigg. Este consiste en crear un sistema de huesos y controladores que nos ayudan a mover el personaje. Se crearon controladores también para las expresiones faciales.

Duende Gordo con los controladores para mover el personaje, tanto para el cuerpo como la cara

Teniendo la “marioneta virtual” animamos cada uno de los personajes en cada toma. Key Frame Studio nos dio la escena con las cámaras animadas por toma para luego nosotros poner los personajes según el storyboard.

Toma 2 Playbast Multiplaza Navidad 2008 from Gustavo Gutiérrez on Vimeo.

Toma 3 Playbast Multiplaza Navidad 2008 from Gustavo Gutiérrez on Vimeo.

Toma 6 Playbast Multiplaza Navidad 2008 from Gustavo Gutiérrez on Vimeo.

Al final renderizamos todo en diferentes Layers. Asi logramos reducir mucho los tiempos de render. Al final se tardaba 3 Minutos por frame aproximadamente.

Primero EL el Oclusion Layers que define las sombras, luego el render con software para el color plano y para terminar la composición de los dos layers y la correción de colores

En este proyecto ese era nuestro trabajo, pero falta la etapa de Montaje (edición) donde todas las escenas se unen junto con la Banda Sonora para tener el resultado final.

Aquí publicamos un demo en baja calidad del spot. Más adelante publicaremos la versión final.

]]> http://blog.happypunkpanda.com/?feed=rss2&p=31 0 http://blog.happypunkpanda.com/?p=27 http://blog.happypunkpanda.com/?p=27#comments Fri, 13 Feb 2009 17:18:55 +0000 Gito Gito http://blog.happypunkpanda.com/?p=27

Recientemente Rediseñamos una aplicación Interactiva para Hoteles Decameron El Salvador. Ellos necesitaban una herramienta promocional para distribuirse en USB. Necesitaban comunicar la sensación  de estar en los hoteles, es por eso que se le diseño una aplicación con videos de fondo para generar el ambiente del mar, todo esto acompañado con un sonido de olas que puede ser desactivado por el usuario.
La Aplicación fué diseñada en Adobe Flash,  programada con Action Script 2.0, todos los textos, videos e imagenes de la galería son llamados desde XML, asi el cliente puede actualizar el contenido cuando lo desee.

Originalmente esta aplicación fué diseñada para distribuirse por USB, pero al final tambien fué subido a su web.

Puede verlo Aqui: http://www.decameron.com.sv/

La lista la sacamos tomando en cuenta los artistas mas sonados en iTunes y Last.fm. No son necesariamente las mejores canciones, pero son las que nuestro subconsciente nos hizo poner más.

1. Respiro – Javiera & Los Imposibles
2. Mediocre – Ximena Sariñana
3. Te Voy a Dormir – San Pascualito Rey
4. Cada Que – Belanova
5. Dulce Obsesión – Satin Dolls
6. Otra Vez – Chetes
7. Asi fue – Playa Limbo
8. Cuento – Ximena Sariñana
9. Diferente – Gotan Project
10. You love me to the death – Hooverphonic
11. The Night Starts Here – Stars
12. Vía Lactea – Zoé
13. Cherub rock – The Smashing Pumpkins
14. Painted By Numbers – The Sounds
15. Tus Ojos – Belanova
16. Tu Cariño Se Me Va – Los Tres
17. Mourning Air – Portishead
18. El rock es mi forma de ser – Alina Gandini
19. En los Días Cuerdos – Aroah
20. El mismo lugar – Bauer

Un saludo a todos nuestros clientes, amigos, vecinos, enemigos, competencia, conocidos, familia, iternautas, etc.

A toda la mara un sincero saludo y gracias por compartir este año con nosotros ñ_ñ

Los juegos de Blizzard definitivamente dejan impacto en la forma de hacer videojuegos. Tras la nueva expansión de WoW The Wrath o The Lych King, con un theatrical trailer mas que real, me dio la curiosidad de saber sólo un poco mas de este juego.

No estabamos de ilegales, estabamos de prueba. Luego de que queremos videojuegos y hacer videojuegos, Panda Habitat se introdució al Mundo de Warcraft.

¿El resultado? Jugar como adictos (bueno, quizá yo) por 10 días. Un MMORPG ilimitao y muy bueno. Demasiado Bueno!. Ahi estamos a la entrada de un dungeon al que nos llevó Chalo, AKA Coldthorn, nivel 70. Se nota la diferencia entre nuestros pobres y miserables characters. Esperemos el Panda pueda pagar y así seguimos jugando! xD

Si te interesa o te gustaría adentrarte a WoW, aqui tenes el link para Trials Accounts, que te dan 10 días de juego gratis online, con features bloqueadas pero siempre vale la pena.