A lo largo de este año hemos ido probando varios programas de edición gráfica para hacer animaciones basadas en HTML5 y CSS3. Con la llegada de estas nuevas tecnologías se abre un amplio abanico de posibilidades para estas animaciones gráficas.

No hace falta tener elevados conocimientos de HTML y CSS ni tampoco saber programar, estos programas funcionan prácticamente con línea de tiempo y keyframes, y la interfaz es muy similar a la de Flash o la de editores de video de toda la vida como Premier, Final Cut, etc De momento la compatibilidad con navegadores de las animaciones que generamos mediante estos programas está soportada por los más modernos como Chrome, Safari, Firefox, etc. De las versiones antiguas de Internet Explorer ni hablamos a la hora de poder reproducir este tipo de animaciones.

Las herramientas más potentes que actualmente se encuentran en el mercado y hemos ido probando en los últimos meses son:

Adobe Edge animate

Es una herramienta de diseño interactivo y movimiento web que permite a los diseñadores introducir contenido animado en sitios web utilizando estándares web tales como HTML5, JavaScript y CSS3. A nuestro parecer es el más completo, fácil e intuitivo para aquellos que hemos trabajado alguna vez con Flash o editores de vídeo como Premier, Final Cut, etc.

Su precio es por suscripción mensual y existen versiones para Mac  y Windows.

Google web designer

Está en fase BETA y permite la creación de contenido animado en HTML5. Lo bueno que tiene es que es gratuito. Además, se pueden ajustar los estilos CSS y permite tocar código HTML y Javascript desde una ventana del mismo programa. Para exportar la animación, genera un código limpio y en su medida bastante bien estructurado. Por el lado negativo, hay que decir aún esta en beta y tiene algunos fallos a la hora de realizar animaciones de textos.

Su precio es gratuito y existen versiones para Mac  y Windows.

Tumult Hype

Hype-Screenshot

Es una de las herramientas más potentes que existen en el mercado. Solo disponible para Mac, es el software idóneo para gente que no tiene feeling con el mundo de la programación. Dispone de muchos recursos gratuitos que podemos utilizar para no dedicar mucho tiempo a nuestras animaciones. Destacamos de este programa su inspector, una de las partes más importantes de esta herramienta, desde la cual definimos muy fácilmente las propiedades de los elementos, acciones y eventos asociados (star/stop de escenas, clic, hover, etc).

Unas de las ventajas más llamativas de Hype es el control para gestos táctiles, la posibilidad de utilizar Google Fonts y la previsualización en directo vía Hype Reflect.

Esta aplicación únicamente está disponible para Mac, y su precio es de 49.99$. Desde su web oficial puedes descargar una versión de prueba de 30 días .

Sencha Animator

screenshot

Esta es otra de las herramientas más completas que existen en el mercado y podría establecerse como el competidor directo de Hype. Es una de los más completas, y su forma de crear las animaciones es muy parecida a Adobe Edge y Hype. Desde esta herramienta, aparte de crear nuestras animaciones, podemos crear juegos, banners interactivos, etc. Lo que menos nos gusta de esta aplicación es su elevado precio y  los problemas a la hora de previsualizar cambios en las propiedades de los objetos en los diferentes puntos de la animación. Aquí tenéis una relación de clientes que trabajan con esta aplicación.

La aplicación está disponible para Windows, Mac y Linux a un precio de 199$. También ofrece una versión de prueba de 30 días descargable desde su web.

Conclusiones:

  • La mayoría de estos programas están enfocados a perfiles de diseñadores con algún tipo de conocimiento en HTML5, CSS3 o Javascript.
  • Se pueden llegar a crear animaciones más complejas con este tipo de programas, pero siempre teniendo conocimientos más amplios en JavaScript, sobre todo si queremos que nuestra animación, además de visual, sea interactiva con el usuario.
  • Todas estas aplicaciones ofrecen snippets que nos ayudan a generar nuestra animación en la que no tengamos que tocar nada de código.