[Tutorial] Cómo hacer una infografía animada con Tumult Hype 3.5

8 febrero, 2016
Publicado por: emmallensa
Categoría: infografías

Aprende gratis con nosotros a hacer esta infografía animada con Tumult Hype:

Esta es una infografía interna de Ubicuo Studio que hemos decidido convertir en tutorial. ¿Por qué? Porque creemos que la mejor manera de enseñar el potencial de Tumult Hype es que puedas experimentar tú mismo qué se puede hacer.

Además, el tutorial está detallado paso a paso con capturas de pantalla y vídeos.

Y está en español.

En este caso, la infografía es animada, no hay interacción por parte del usuario. Gracias a la animación, la información se nos presenta poco a poco y podemos entender cuáles son los pasos que hay que hacer en una estrategia de marketing de contenidos (la explicada en esta infografía).

Por último, comentar que hemos decidido exportar el archivo en formato .GIF al ser una infografía animada. Pero también hubiéramos podido exportarlo en html5 e incrustarlo en esta web. Así sería responsive 100%.

¿Qué es Tumult Hype?

Antes de empezar con el tutorial, por si aún no sabes qué es Tumult Hype, aquí va una explicación. Tumult Hype es un programa para Mac OS X que nos permite crear animaciones interactivas de una manera muy fácil, sin necesidad de saber programar. Para crear animaciones, sólo tenemos que tocar el botón “Grabar” para que empiece a grabar y a crear fotogramas clave según lo que necesitemos.

¿Interactivas?

Sí, podemos crear interactividades en de una animación. Por ejemplo, que esta no siga hasta que el usuario no intervenga, que el usuario tenga que tocar en diferentes puntos para que la información aparezca (infografías, microsites), que se presente una escena diferente dependiendo de dónde haya tocado el usuario (vídeos interactivos)… Además, podemos añadir física, es decir, añadir el efecto de gravedad a nuestras animaciones; también detectar la posición del dispositivo y que el contenido “se mueva” literalmente cuando movemos la pantalla… ¡las posibilidades son infinitas!

Todo esto sin programar.

Y en HTML5 y responsive. Adaptado a múltiples pantallas, dispositivos y sistemas operativos.

Además, Hype es un programa realmente económico.

Una vez lo compramos ya no tendremos que pagar suscripciones ni nada por el estilo, bastará con la licencia que hemos comprado. Existe la Pro y la estándar, con la estándar tenemos también más que suficiente, aunque en la Pro tenemos la función de gravedad, entre otras funciones. Si te interesa adquirir el programa, aquí tienes un enlace de la tienda de educación (nuestros alumnos tienen 40% de descuento).

Requisitos técnicos

Para poder hacer esta infografía, necesitarás tener Mac OS X 10.8 (mínimo)* con:

Tumult Hype 3.5 instalado. Es indiferente si tienes la versión estándar o la versión Pro, ya que en este tutorial usaremos solamente la versión estándar (si eres estudiante de nuestros cursos tienes un 40% de dto.). Aquí tienes la versión de prueba (haz click en “free trial”) y aquí la versión para comprar.
Un programa de edición/creación de gráficos, como puede ser Illustrator o Sketch
¡Muchas ganas de pasarlo bien!

Nota: si tienes Mac OS X inferior a 10.8, puedes usar Tumult Hype 2.5 sin problema alguno. Sólo tienes que ir a la web de descarga de Hype y buscar abajo del todo para bajar la versión 2.5.

¡Aviso!

Este tutorial es de nivel intermedio. ¿Qué quiere decir esto? Que hemos empezado por un tutorial que muestra posibilidades un poco más avanzadas del programa Tumult Hype. De todos modos, nos gusta dar cosas realmente de valor a los visitantes de nuestra web y, aunque sea de nivel intermedio, al dar información de cómo realizar la infografía paso a paso (sin saltarnos nada), podrás hacerla sin problemas.

¡Ánimo, valiente!

Tutorial de una infografía animada en Tumult Hype

1. Preparar el material

Lo primero que vamos a hacer es preparar el material gráfico. En esta página os enseño cómo he preparado yo concretamente el material gráfico utilizando primero Illustrator y luego Sketch para finalmente pasarlo todo a Hype. No tienes por qué seguir mis pasos en este apartado, porque quizá utilizas otros programas o lo hacéis/haríais diferente… O porque quizá simplemente ya tienes todo el material preparado y sólo necesitas pasar a la acción e ir directo a animar!

Empezamos.

Los gráficos, si son sencillos, se pueden hacer directamente con Hype (entonces, sin darnos cuenta, estaremos “dibujando gráficos con código”… todo elemento es en realidad dibujado internamente con Javascript, aunque nosotros sólo tenemos que hacer un click en “añadir rectángulo redondeado“… ;-)), pero en este caso quería algo más ‘currado’, así que lo he hecho directamente con Illustrator (podría haber escogido cualquier otra herramienta de dibujo, ¡claro!).

La manera o método de realizar los gráficos es indiferente. Lo único que quiero que tengas claro que te puede ser de utilidad son dos cosas:

que traces los textos (por la manera en la que vamos a realizar este trabajo, te lo recomiendo para que te ahorres alguna sorpresa con las tipografías). Para hacerlo desde Illustrator sólo tienes que seleccionar el texto (puedes utilizar el atajo de teclado cmd⌘ + A para seleccionarlo todo) y, ya desde ahí, ir al menú superior Texto > Crear contornos.
que hagas la correcta agrupación de elementos, ya que hacer esto aquí y ahora me facilitará el trabajo más adelante, hará que el trabajo/proyecto sea más claro y ordenado y, a la larga, esta metodología se traducirá en un considerable ahorro de tiempo y energía a la hora de trabajar.

Si te interesa tener nuestro material gráfico (archivos en .svg y plantilla Tumult Hype) para poder seguir el tutorial, sólo tienes que dirigirte al final de esta entrada y encontrarás información sobre cómo descargarlo.

2. Agrupar los elementos

¿Cómo agrupo los elementos?

En este caso he agrupado según “objetos que se mueven conjuntamente”. Por ejemplo:

los textos laterales con las flechas que tienen debajo:

los iconos de redes sociales, todos juntos

las partes “delanteras” de las fracciones del embudo:

Ahora que lo tengo todo debidamente agrupado, puedo exportar los elementos separadamente (en mesas de trabajo, por ejemplo…)

O aprovecharme del programa Sketch, que es mi recurso favorito últimamente! <3 Para ello:

desde Illustrator, haremos Archivo > Guardar como… y cambiaremos el formato “Adobe Illustrator (ai)” por “SVG” ‘Ok‘.

Para a continuación abrir este SVG con Sketch!

3. Abrir SVG con Sketch

Al abirlo, primero te encontrarás con una agrupación de todo el material (el archivo SVG en sí). Simplemente selecciona la carpeta en el panel lateral izquierdo y desagrupa:

Al desagrupar, se habrán quedado “sueltos y libres” todas las agrupaciones que previamente hemos hecho en Illustrator. ¿Problema? Que todo son “Groups” (o “Shapes” si algo se ha quedado libre, sin agrupar), y por el nombre no se distingue ni fácil ni rápidamente qué objeto estamos seleccionando… Sé que ahora mismo os parecerá una carga y una tarea absurda… pero vamos a nombrar correctamente cada agrupación. Creedme, esto os va a resultar de gran utilidad cuando por fin estemos en Hype animado estos gráficos y me daréis la razón 😉

Al señalar un ‘Group’, veremos en seguida qué objeto es señalado y le daremos un nombre debido que sea fácilmente de identificar por nosotros. Por ejemplo, en este caso yo lo he hecho así:

px_delante (‘p’ de “parte”) a las partes que están “delante” (atrae visitas, convierte visitas…)
px_detras a las partes “traseras/internas”
y luego las etiquetas traseras las he nombrado por su nombre (blog, tu web, comunidad…) pero también por el orden en el que quiero que aparezcan en la animación, como: “txt1_buscadores“, “txt2_redessociales“…

¿Por qué he hecho esto? Especialmente lo de nombrar las etiquetas por orden de aparición: para tenerlo ya ordenado en el proyecto Hype y no tener que preocuparme ahí por pensar nada más.

4. Exportar elementos

La verdad es que hay muy buena comunicación entre el programa Sketch y Hype y, si quisiera, con hacer copy&paste de cada elemento tendría suficiente para poder “llevármelos” hasta allí. ¿El problema? Que al hacer esto se me copiaría el elemento como un png… y a mi me interesa tener los elementos en SVG (para no preocuparme por el tamaño del elemento, y así re-aprovecharlos para hacer más tarde un diseño responsive con el mismo elemento (esta parte se explica más adelante del tutorial).

Entonces lo que haré será primero:

Seleccionar todo (cmd ⌘ + A)
Seleccionar “Make Exportable” (en la esquina inferior derecha del todo del programa)

Ahora hemos separado todo elemento y convertido en susceptible de ser rápida y fácilmente exportado.

En esa misma zona donde estaba el “Make Exportable”, si continuamos con todo señalado (cmd ⌘ + A), tendremos la opción de cambiar el “PNG” por “SVG”:

Ahora ya podremos hacer click en el botón “Export Layers” para que se nos exporten todos los objetos en SVG (recuerda que seguimos con todos los elementos seleccionados… (cmd ⌘ + A) 😉

El resultado es que en la carpeta que haya seleccionado en Finder, tendré todos los elementos exportados y debidamente separados y nombrados! ¡Qué maravilloso es empezar a trabajar ya así! ;-))

Importar material gráfico en Tumult Hype

Ahora que ya hemos exportado todo el material que necesitamos para hacer la infografía animada, podemos ya proceder a importar todos los gráficos para empezar a hacer la infografía.

¡Ya podemos pasar a Hype! Creamos un proyecto nuevo y escogemos el tamaño de escena que queramos. En mi caso es una escena cuadrada de 1200x1200px (un poco grande si queréis colocarlo en una web… 😉 pero perfecto para hacer un vídeo cuadrado, que era mi intención cuando creé el embudo). La suerte que tenemos es que al estar tratando con elementos vectoriales en SVG, no importa el tamaño de documento… porque podemos escalar nuestros gráficos al tamaño que queramos que se adaptarán sin ningún problema (lo digo por si por ejemplo habéis hecho los gráficos mucho más pequeños en Illustrator/Sketch y luego queréis pasarlos a un documento más grande en Hype…

Recordad que tenéis una serie de tamaños predefinidos en el Inspector de Escena que seguramente os ayuden a encontrar rápidamente qué es lo que más se ajusta a lo que necesitáis.

También es cierto que podéis escoger un tamaño de escena y luego cambiarlo en cuanto queráis. ¡¡Que nadie se estrese por estas “tonterías” antes de empezar!! 😉

Ahora que tenemos nuestros elementos separados y bien nombrados en el Finder… lo que haremos será importar dichos elementos a un proyecto.

¿Cual es la mejor manera de importar elementos al proyecto?

Importando elementos Hype

Como ya os he explicado, existen diversas maneras de importar elementos a un proyecto Hype:

Desde el menú superior:Elementos > Imagen…
Desde el Finder: arrastrar y “soltar” en la escena.
Importar elementos a laBiblioteca de Recursos

1. Desde el menú superior: Elementos > Imagen…

Lo ‘chulo’ de esto es que podéis seleccionar varias imágenes a la vez (todas, ¡por ejemplo!)

Lo ‘malo’ de esto es que nos dejará todos los elementos confusamente dispuestos en laescena/mesa de trabajo…

¡No nos interesa demasiado tenerlo así!

2. Desde el Finder: arrastrar y “soltar” en la escena.

La verdad es que el resultado de esta acción es prácticamente igual que el anterior… ¡no nos interesa este desorden!

3. Importar elementos a la Biblioteca de Recursos.

En este caso es lo que mejor nos conviene hacer. Primero importaremos los elementos a la biblioteca y luego ya, desde ahí, podremos agregarlos a la escena 😉

Si no sabes o no ves la Biblioteca de Recursos, sólo tienes que desocultarla tocando el botón “Recursos” en la zona derecha del menú superior.

Ahora ya podemos agregar uno por uno los elementos a la escena…

¿Pero cómo? ¿¿al 'tun tun'??

😉

En mi caso lo que hecho para saber dónde tengo que colocar cada elemento es hacer una captura de pantalla al embudo completamente acabado que tengo enIllustrator/Sketch y agregarla a la escena. De momento no le cambio el tamaño: la dejo tal cual se me agrega.

UNA COSA IMPORTANTE! Cuando hagas la captura de pantalla, antes ve a Illustratory en el menú superior haz Ver > Tamaño real (o ⌘1), así te asegurarás de que la captura de pantalla que después incluyas en el proyecto Hype tendrá un tamaño que coincidirá también con los elementos importados 😉

Eso sí, una vez la tengo colocada haré dos cositas con esta captura:

cambiar la saturación a 0,15 (Efectos de filtro en Inspector de Elemento). En mi caso me ayuda hacer esto para diferenciar entre o que es “la captura” y lo que es el elemento real…

2. bloquear la imagen en escena. Esto lo hago sencillamente haciendo click en el candado, en el elemento, en la línea de tiempo del control temporal:

¡Ahora esta captura que está aquí quieta me servirá de guía para poder ir colocando mis elementos justo donde necesito! Y, como tengo tantos elementos, me resulta más cómodo tener el panel de Control temporal a la izquierda en lugar de abajo, así que lo re-colocaré tal y como muestro en el vídeo (esta opción sólo está disponible para la versión Pro de Hype; con la versión Standards no se pueden cambiar de sitio los paneles).

Después de esto, ya podemos eliminar u ocultar nuestra captura de pantalla de referencia… y agrandar/escalar/colocar nuestros elementos según nos convenga!

¡Ya podemos empezar a animar! ¡Yuhuuuu!

Animando escenas en Tumult Hype

Este proyecto se compone de dos escenas. En la primera escena, las animaciones van del embudo más grande (atrae visitas) al más pequeño (deléitales). En la segunda escena, los elementos vuelven a aparecer compactados desde arriba y se van colocando hasta coincidir con el principio de la escena primera.

p1 - bajando iconos de redes sociales

Primero queremos que los iconos de redes sociales bajen “desde arriba” y se coloquen dentro de la primera parte del embudo.

Esto es lo más sencillo del mundo con Hype. En este caso, utilizaremos la Herramienta grabar.

Seleccionamos el elemento y comprobaremos que estamos al principio del todo de la línea de tiempo; es decir, al minuto 00:00.00

Ahora accionaremos el botón “grabar”

A partir de este momento (y hasta que dejemos de grabar), cualquier movimiento que hagamos de los elementos quedará “grabado” y se colocarán allí donde esté en ese momento el control temporal… Así que, como ahora estamos en el 00:00.00, vamos a hacer que cuando está en este espacio “temporal”, se encuentre en aquelespacio “físico” (vamos, que lo colocaremos en la escena ahí donde queremos que empiece la animación a actuar ;-))

Fijaros cómo al mover el elemento “hacia arriba” (lo hago, por cierto, mientras presiono shift ⇧ …), se me han creado ya automáticamente los fotogramas clave de movimiento vertical y horizontal.

Ahora vamos a mover el control temporal hasta un segundo (porque queremos que esta animación dure un segundo), y moveremos la línea vertical hasta que se nos coloque en el punto 00:01.00 (también podríamos ir directamente a los números y escribir manualmente el 00:01.00).

Luego, como seguimos con el botón de grabar accionado, vamos a mover nuestro elemento ir allí donde queramos que finalice la animación.

Ahora ya podemos deseleccionar el botón de grabar. ¡Nuestra primera mini-animación ya está hecha!

Podéis ver el proceso también aquí en vídeo:

p1 - etiquetas detrás

Ahora vamos a hacer que las “etiquetas” que hay detrás de la primera parte del embudo se escondan detrás de esta. En esta primera parte he hecho que las 3 etiquetas se muevan a la vez:

¡Tenemos que empezar por una!

Esta vez queremos que la animación empiece en el 00:01.14 y acabe en el 00:02.15*

nota: en realidad esto es orientativo… podéis empezar más pronto o más tarde, o hacer que la animación dure más o dure menos: a vuestro gusto… Y también podéis empezar la animación en un momento y, una vez hecha, cambiarla otro momento arrastrando los fotogramas clave en la línea del tiempo!

Siguiendo con lo que acabamos de hacer con los iconos de redes sociales… lo primero que se nos ocurrirá es ir al momento 00:01:14 y accionar el botón de grabar, ¿no?

Está bien, pero ¡OJO!…. Si nos fuésemos ahora al 00:02:15 a mover la etiqueta, ¿qué pasaría? Efectivamente, que la animación la haría desde el momento 00:00:00… ¡Oh, faill!

Si no le indicamos lo contrario (con un fotograma clave, por ejemplo), por defecto siempre empezará nuestras animaciones desde el momento 00:00:00. Podríamos hacer un fotograma clave en el 00:01.14 (lo haremos en otras ocasiones) pero,… ¡Vaya palo! Y más ahora que vamos a indicarle varias propiedades a la vez (movimiento, rotación, opacidad…): nos conviene que la maravillosa función de grabar nos automatice esto y nos ahorre este tiempo.

A los principiantes siempre se nos ocurre lo siguiente: hacer la animación como acabo de indicar y, después, cambiar el inicio de la animación (los primeros fotogramas clave) del 00:00.00 al 00:01.14. ¿Verdad? ¡Oh! Esto no es necesario… Porque para eso tenemos esta súper útil herramienta: ¡EL CAPO!

¿Qué es el CAPO en Tumult Hype?

El capo es una herramienta que se activa cuando estamos en modo grabar y que sirve para determinar el comienzo de la grabación, de manera que en este caso sólo tendría que

colocar el capo en el momento 00:01.14 (ver gif a continuación)
mover la línea de tiempo al 00:02:15
- y modificar el elemento/propiedades de elemento desde ahí

¡Y esto es lo que vamos a hacer exactamente!

Colocamos el capo en el 00:01.14
nuestra línea de tiempo en el 00:02:15

y, desde ahí, movemos nuestra etiqueta para que quede justo escondida detrás de la primera parte del embudo. Además de moverla, iremos al Inspector de Medidas (icono compás en el panel lateral derecho) y cambiaremos el ángulo de rotación a 36º

Así que ya tenemos dos “propiedades” agregadas a esta primera etiqueta: la del movimiento (entre el primer fotograma y el segundo se mueve horizontalmente) y también de rotación.

Para evitarme problemas de que se me pueda “colar” alguna etiqueta por ahí a la hora de mover los objetos más adelante, lo que yo hago es que, en el momento en el que dejo de “utilizar” mis objetos, los oculto (es decir, cambio su opacidad hacia 0%). Así que ahora me voy “hacia el final” de esta animación (al 00:02.11, por ejemplo; lo hago a ojo) y, esta vez sí, agrego un fotograma clave de opacidad

luego me iré al final de mi animación (00:01.15) y agregaré otro fotograma clave de opacidad. Ahora lo estoy haciendo sin grabar, ¿si? Tan sólo para que veáis la diferencia: que lo podemos hacer de ambas maneras! Entonces, desde este segundo fotograma clave, me iré al Inspector de Elemento y cambiaré la opacidad de 100% a 0%. Esto es lo que “ocurre realmente” (pongo provisionalmente en ocultar la parte del embudo para que lo podáis ver mejor):

Genial, ¿verdad? A continuación vamos a ver un vídeo donde hago desde cero lo que acabo de explicar además de las dos etiquetas siguientes. PERO voy a replicar en este vídeo un pequeño “error de principiante” que es muy común a la hora de girar un elemento del revés… Suele pasar que giremos demasiado rápido la ruedecita* y en lugar de poner, por ejemplo, -30º, indiquemos sin querer 300º (con lo cual el programa entendería que, literalmente, quieres que gire 300º y te haría una brutal e inesperada “vuelta” a tus elementos… ;D) en el vídeo lo replico.

*Una cosa que os puede resultar de interés conocer es: si mientras giramos la ruedecita de rotar tenemos también presionada la tecla shift, se nos cambiará cada 45º; a veces es tremendamente de utilidad utilizar esta “precisión” de los 45º!