Digitalizando a Batman

Concepto para el especial de la celebración del 75 aniversario de Batman en nacion.com

El 75 aniversario del Caballero de la Noche en nacion.com 

Por: Marco Hernández 

Fueron varios proyectos los que trabajé en conjunto Dan Mora, un ilustrador de gran talento que nos acompañó por algún tiempo en el departamento de infografía de GN Medios de Costa Rica. Recuerdo en particular producciones como Robocop, una infografia de Thor, incluso un especial de la Mujer Maravilla que aún no se publica. Pero para despedirse de nuestra pequeña familia de infografistas y diseñadores su sello dijo adiós a las paginas del periódico con el especial de uno de sus héroes del comic favoritos: Batman.

Desde el impreso hacia el digital

Mis labores en el área con frecuencia son las de trasladar los contenidos especiales de los medios de GN a plataformas digitales, desde que hablé con Dan sobre la forma en la que trasladaríamos la infografía hacia el sitio de La Nación sabía que esto sería grande... 

La infografía que Dan desarrolló para un doble pagina de una sección interna del periódico terminó como un póster impreso en el dorso de la portada del periódico de un sábado de mayo:

Busquen hoy, la @infografia de #Batman #baticueva en el periódico #lanacion. Excelente ilustración de Dan Mora pic.twitter.com/kvcUcM50g4
— Manuel Canales (@canalesgraphics) May 24, 2014

Poco antes Dan me compartió el archivo que se podría en la edición impresa para valorar que tanto debía modificarlo para llevarlo a una vía digital. Acá fue donde Dan causó que se me parara el pelo… Dan me entregó un archivo .eps de poco más de 45 Megabytes con todos los nodos posibles, para que se hagan una idea esta es la vista del póster en outlines antes de su versión final donde se le agregaron más nodos:

Vista Outline del póster en una versión previa a la de la publicación, (fase de doble página)

El script que me reporta los grupos antes de iniciar el proceso de "limpieza" tardó un poco en procesar la información y luego me lanzó el conteo final, el stage tenia más de diecisiete mil objetos en poco más de tres mil quinientos grupos:

Object counter .js / Adobe Illustrator

La idea era trasladar estos contenidos a formato .svg y que fuese lo menos pesado posible para el navegante, algunos de los puntos de la información se extraerían del especial para dejarlos en apartados estáticos fuera del área de interacción principal. El reto dio inicio...

Efectos visuales

Los textos del impreso se convertirían a ventanas emergentes, eso ayudó a limpiar bastante el área de trabajo, luego de examinar las áreas de trabajo e identificar los elementos que serían preparados para animación había que simplificar los nodos, Dan tiene una práctica que dificultó el trabajo, el agrega capas y blends para lograr los efectos de una superficie, lo que al final, hace un efecto visual muy agradable, pero aumenta el peso del archivo  enormemente ya que los navegadores leen cada punto para renderizarlo, sería ver algo como esto: 

Render de los nodos provenientes de illustrator.

Animación y render

El archivo nativo exportado a .svg pesaba casi 4 Megabytes luego de limpiarlo la primera vez, pero necesitaba que eso se redujera o tardaría demasiado cargando. Mientras limpiaba nodos fui extrayendo algunas piezas para iniciar las animaciones más simples como este loop de tres estaciones:

Dan y yo acordamos agregar algunos detalles más que le darían un poco más de movimiento, como las hélices del helicóptero que se mueven, Batman descendiendo de la mansión por el tubo hacia la Baticueva mientras Robin lo observa, inclusive algunos detalles ocultos por ahí a simple vista que no tienen ninguna relación con la historia de Batman como el Hombre Araña que sube por una de las columnas base de la Baticueva, la mayoría son animaciones de tres estados que se muestran una cada 0,6 - 1 segundo según sea la posición. Por ejemplo Robin tiene tres estados:

Cada una de las posiciones del Robin que espera a Batman son una serie de puntos que interpreta el navegador y que intercala para mostrar en un definido tiempo. Ilustración de Dan Mora. 

El Hombre Araña además de sus dos estados tiene un loop de translación que crea ele efecto de que sube por la columna, básicamente es una animación que lo hace subir y al terminar  inicia otra que lo hace bajar y a su término inicia nuevamente la que sube...
  

Secuencia de prueba de la animación.
ilustración: Dan Mora. Motion: Marco Hernández. 

La mayoría de las animaciones de translación y transparencia son con la tecnología SMIL y fueron creadas directamente sobre el código nativo .svg naturalmente el mayor sentido de este especial era navegar por la Baticueva, así que fue necesaria la integración de javaScript para poder mover el plano de la ilustración vectorial total:

Versión previa a la publicación impresa, la mayoría de los satélites de información se extrajeron para dar una experiencia digital más cómoda lo que permite ampliarlos en detalle como complemento de la navegación.
ilustración e infográfico: Dan Mora.

Paralelo a la construcción de la Baticueva algunos otros elementos se estaban gestando, como fue el caso de los personajes del universo de Batman, en el póster no estaban incluidos ya que se publicaron por individual en la edición impresa durante varios días consecutivos, era necesario reunirlos todos en el especial, así que los agrupé en la base a modo de slider:

Cada uno de los personajes en el especial están vinculados a las notas que los acompañaron durante los 15 días de publicaciones seguidas en la sección de Ocio de La Nación.

Mientras tanto la limpieza de la pieza principal seguía, algunas piezas estáticas se podían "fundir" en una sola masa para optimizar su contenido, no obstante debía ser un trabajo minucioso para evitar eliminar detalles de la ilustración que podría ser ampliada casi de manera infinita en el navegador. Acá algunos de los estadísticas de algunas de las piezas incluidas:

Este es un de los estudios de peso de las piezas
 incluidas en el especial antes de optimizarse.

Cuatro días después de editar el el archivo principal y agregando la animación su peso se redujo en un 95,1%, aun quedó muy pesado pero se logró que el tiempo de espera fuese más breve de lo que se podía esperar al inicio.
Ese archivo pasó de 45 Megabytes en formato estático a 2,2 Megabytes integrando animación, un arduo trabajo para lograr que los fans del murciélago disfrutaran de esta creación.

No quisiera cerrar este post sin antes dejarles un enlace para vivan la experiencia completa del mini-sitio que trabajamos durante unas semanas en la redacción de La Nación con toda la pasión de que un par de geeks puedan tener. 

Captura del mini-sitio del especial de Batman.
Diseño de interacción y desarrollo: Marco Hernández.
Ilustración y conceptos: Dan Mora.