Herramientas para la creación de animaciones en HTML5

Home / Contenidos / Audiovisual / Herramientas para la creación de animaciones en HTML5

El desarrollo web utilizando el trinomio HTML5-CCS3-JavaScript ha tomado gran relevancia con el auge de los smartphones y de las tablets. Las ventajas sobre Flash son contundentes: no depende de plugins de terceros para poder visualizarse, ofrece compatibilidad con los navegadores de dispositivos móviles y necesita menos recursos para reproducirse. Por contra, las versiones de los navegadores más antiguos presentan problemas para entender este lenguaje. Se puede consultar el listado de compatibilidades de HTML5 y CSS3 en este enlace.

Sin embargo, no resulta fácil desarrollar en HTML5, sobre todo para aquellas personas con unos conocimientos de programación limitados. Es por eso que hemos realizado una pequeña tarea de investigación, con el objetivo de analizar qué aplicaciones nos ayudan en la creación de animaciones HTML5 sin necesidad de saber programar ni de conocer líneas de código.

Los criterios para la elección han sido tres:

  1. Que ofrecieran versión de prueba para poder experimentar con ellas.
  2. WYSIWYG – Lo que ves es lo que obtienes. Es decir, que no sean indispensables conocimientos de programación para desarrollar.
  3. Facilidad de uso.

Teniendo en cuenta estos puntos hemos encontrado cuatro aplicaciones que simplifican la labor de crear animaciones (más o menos complejas) en HTML5: Tumult Hype, Sencha Animator, Edge Animate CC y Google Web Designer.

Tumult Hype 2.5

Destaca su interfaz simple, en la que toma relevancia la línea temporal y el inspector, desde donde se modifican las propiedades e interacciones de todos los elementos que se incluyen.

Definir las animaciones es realmente fácil, únicamente hay que pulsar el botón “grabar animación” y asignar a cada elemento la acción a desarrollar en cada momento, para ello se pueden incluir todos los keyframes necesarios, independientemente de los que ya se crean automáticamente. Como aspecto positivo, Hype permite definir movimientos curvos, enfocando el objeto en todo momento a la trayectoria que está realizando.

Hype utiliza escenas para separar las distintas partes de las animaciones. Es posible crear todas las que sean necesarias y establecer la forma de navegación que mejor se ajuste a nuestro proyecto.

En cada escena se pueden utilizar las líneas temporales que sean precisas, activándolas a partir de las acciones que se otorguen.  Con esta opción se puede añadir más interactividad dentro de una única escena. Por ejemplo, definiendo que al hacer sobrevuelo con el ratón sobre cada uno de los objetos se inicie una animación diferente.

Por otra parte, debajo de la línea temporal hay disponible otra línea de propiedades de cada objeto, donde se detalla en cada momento las características propias de cada elemento, como la opacidad, el tamaño o el tipo de movimiento que realiza.

Esta aplicación únicamente está disponible para Mac OS X, a un precio de 26,99€. No obstante, se puede adquirir gratuitamente una versión de prueba de 14 días.

Ventajas

  • Posibilidad de diseñar de manera flexible cada capa.
  • Simplicidad, interacciones definidas sin necesidad de escribir código.
  • Permite integración con Dropbox para sincronizar los archivos en la nube y exportar las animaciones.
  • Hype Reflect para iOS. Es una app que nos deja previsualizar simultáneamente en los dispositivos móviles de Apple las animaciones que creamos.
  • Excelente relación calidad-precio.
  • Se pueden añadir acciones para dispositivos móviles como deslizar para cambiar de escena.

Inconvenientes

  • Sólo disponible para Mac OS X
  • Para interacciones de cierta complejidad es necesario crear código JavaScript.
  • Autoformas muy limitadas (elipses y rectángulos).

 

Sencha Animator

Sencha podría establecerse como el competidor directo de Hype. El funcionamiento se basa en la mismas bases que Tumult Hype. Las interacciones se consiguen creando diferentes escenas y enlazándolas entre ellas a través de las acciones que se pueden configurar. Nuevamente, es posible crear diferentes líneas temporales dentro de una escena, lo que permite desarrollar animaciones más complejas.

Sencha_1

 

Sin embargo, Sencha Animator no dispone de una línea que refleje de manera visual los cambios de propiedades de cada objeto en los diferentes puntos de la animación. Esto resulta molesto cuando en una misma escena tenemos varios elementos que cambian sus propiedades, ya que para comprobarlas deberemos previsualizar los diferentes puntos en la línea temporal.

La aplicación está disponible para Windows, Mac OS X y Linux a un precio de 199$. Se puede adquirir una versión de prueba de 30 días en su página web.

Ventajas

  • Acciones predeterminadas en JavaScript.
  • Multiplataforma.

Inconvenientes

  • Falta de línea temporal de propiedades.
  • No existe menú para insertar audio.
  • No dispone de un menú para determinar el comportamiento de cada capa al cambiar la resolución del navegador.
  • Tipos de desplazamientos muy limitados.

 

Google Web Designer

Google lanzaba a finales del 2013 la beta de su software (¿será una beta perpétua?) para la creación de contenidos HTML5. Pese a su nombre, Google Web Designer (GWD), la aplicación no está enfocada al diseño de espacios webs, sino a la creación de ads o banners animados.

GWD_1

Los controles para animar los elementos que incluyamos difieren al resto de programas analizados. En este caso, GWD permite escoger entre la vista de diseño simple y la línea temporal avanzada. En el primer caso las animaciones se definen a partir de escenas, en cada una se debe ir definiendo paso a paso todos los movimientos que irá realizando cada objeto. Por lo tanto, los keyframes que marcamos en otros programas, se definen a partir de escenas en la herramienta de Google. No ocurre lo mismo en la vista avanzada, que se parece al resto de software para realizar animaciones en HTML5. En este panel sí que hay disponible una línea temporal, sin embargo hay que definir los keyframes de manera manual y no se permiten múltiples líneas.

GWD_2

 

Un punto negativo de GWD es que no se permite visualizar las animaciones de manera rápida dentro del propio programa. Es necesario realizar una previsualización desde el navegador para poder comprobar cómo funciona el proyecto que estamos realizando.

Encontramos limitaciones importantes en la definición de interacciones dentro de las animaciones HTML. Carencias tan importantes como que no hemos encontrado manera de incluir botones o acciones sin necesidad de insertar código desde cero. Únicamente divisamos algunas opciones con esta finalidad en las creación de ads.

Por lo general creemos que es un programa poco intuitivo –bajo la premisa que marcábamos de WYSIWYG– y con carencias importantes para nuestros objetivos. Seguramente los desarrolladores se sientan más cómodos utilizando esta interfaz, ya que como gran diferencia a los anteriores programas, GWD permite cambiar en todo momento de la vista de diseño a la vista de código. Es decir, mientras se crean las acciones se está elaborando el archivo HTML, que puede ser modificado dentro del propio programa.

La beta de Google Web Designer está disponible de manera gratuita para Windows y para Mac OS X en este enlace.

Ventajas

  •  Gratuito
  • Herramienta de dibujo vectorial
  • Herramientas de autor 3D, que permiten rotar objetos y otorgarles profundidad.
  • ¿Cambio de vista de diseño a vista de código?

Inconvenientes

  • No se pueden definir interacciones de manera sencilla
  • Poco intuitivo
  • Hay que previsualizar en el navegador para poder ver las animaciones.
  • Programa en fase beta.

 

Edge Animate CC

Edge Animate CC es la apuesta de Adobe para desarrollar en HTML5. Para aquellas personas acostumbradas a utilizar sus herramientas de animación en Flash, les resultará un entorno familiar y de fácil aprendizaje.

Es la opción, de todas las analizadas, más dirigida a profesionales. Se pueden crear animaciones complejas y con un alto nivel de interacción, con una curva de aprendizaje relativamente alta.

La interfaz de Edge Animate se divide en 4 partes:  La barra de propiedades, que cambia según el tipo de elemento seleccionado. La línea temporal, donde se resumen todas las animaciones que realiza cada objeto. La columna de biblioteca/elementos, donde se introducen aquellos recursos que se usarán en el proyecto. Y por último, la pantalla de acción o pantalla principal.

Animate_1

El procedimiento para ir construyendo el proyecto dista de las anteriores aplicaciones. En Edge Animate no existen las escenas, se sustituyen por los símbolos y las instancias. Los símbolos, son agrupaciones de elementos que se van a incluir en una línea de tiempo independiente. Esto permite tener múltiples líneas que se coordinen desde la principal. Dentro de cada símbolo es posible añadir más símbolos, por lo que las posibilidades son infinitas. Las instancias, son elementos únicos que salen a partir de un símbolo. Es decir, una especie de clones, que se podrán modificar independientemente, pero partiendo de una configuración establecida previamente.

La interactividad que se puede elaborar en este programa de Adobe es muy variada, pudiendo incluirse gestos táctiles e interacciones complejas. Éste punto nos supone una dificultad a la hora de analizar el programa. Si bien es cierto que para incluir eventos-acciones hay que escribir código, el propio programa proporciona una gran variedad de snippets predefinidos. Por lo tanto, siendo fieles a nuestro propósito inicial no encajaría en nuestras expectativas. Sin embargo, las grandes posibilidades y el fácil planteamiento para programar acciones hacen que sea una de las mejores opciones analizadas.

De la misma manera que en GWD, en Edge Animate se puede cambiar entre la vista de diseño y la vista de código en todo momento.

Para poder utilizar este software es necesaria la suscripción a los servicios en la nube de Adobe. Los planes de precio varían según la cantidad de programas a adquirir, variando de los 18,44€/mes por disponer de Adobe Edge Animate a los 61,49€/mes por toda la suite de la compañía. La prueba de 30 días está disponible en este enlace.

Ventajas

  • ¿Snippets predefinidos para otorgar interactividad a los elementos?.
  • Permite animaciones complejas.
  • Opciones para crear contenido adaptable.
  • La creación de símbolos e instancias.
  • Keyframes automáticos
  • Línea temporal con las propiedades de cada elemento
  • Gran cantidad de tutoriales como los de este usuario de Youtube.

Desventajas

  • ¿Snippets predefinidos para otorgar interactividad a los elementos?.
  • Previsualización únicamente con Google Chrome
  • Necesidad de utilizar código para establecer interacciones.

 

Conclusiones

Entonces… ¿cuál elegir? Dependerá de las características del proyecto que estés pensando llevar a cabo. Para animaciones sencillas Tumult Hype es una gran opción a un buen precio. En caso de no disponer de Mac OS X, Sencha Animator cumple con el mismo concepto, aunque a un precio superior. Ambos programas son los que más se ajustan al concepto WYSIWYG.

Para animaciones más complejas, Edge Animate es una gran apuesta, pese a que require la introducción de código para definir eventos-acciones y conocimientos más avanzados que las dos anteriores aplicaciones.

Google Web Design puede ser de utilidad para realizar banners sencillos sin demasiadas interacciones, pero no se ajusta a los criterios de simplicidad que buscábamos en este análisis. No obstante, es un software de reciente creación, con grandes potencialidades, que puede llegar a convertirse en un referente.

“El código da vida a las ideas. ¡Poder escribir código es fundamental! Pero saber programar bien es completamente innecesario”

Pete Denman, diseñador de Intel Labs.

Pese a que es posible crear animaciones con un buen nivel de interactividad con este tipo de programas, sigue siendo necesario conocer JavaScript para interacciones más complejas o para aprovechar las potencialidades que nos ofrece el hardware de los dispositivos móviles (giroscopio, acelerómetros…).

No obstante, aunque escribir código pueda parecer una tarea tediosa o inteligible para los profanos en el mundo de la programación, este tipo de aplicaciones ofrecen snippets que simplifica en gran medida la tarea. Y… todos conocemos a algún amigo programador al que acudir cuando no sabemos cómo avanzar, estamos convencidos de que Pete Denman lo tiene.

 

Se muestran 3 comentarios

  • juancarlos.sanchez@factorsim.com'
    Juan Carlos Sánchez

    ¡Muchas gracias Mario!

    No sabía que iban a lanzar la versión 3.0 Professional próximamente. Es una buena noticia, sobre todo a la hora de crear animaciones responsive, que por lo que se intuye en el vídeo de promoción mejorará bastante.

    La verdad es que para crear animaciones no demasiado complejas, todavía no he encontrado una herramienta mejor.

    Saludos!

  • mario@circuloux.com'
    Mario

    Muy buen artículo, Juan Carlos. Yo escribí una mención muy general sobre Hype, que por ciento ya viene la versión 3.0. Voy a mencionarte en mi post para que vengan a leer este review que me parece muy relevante. ¡Saludos!

pingbacks / trackbacks

Dejar un comentario

PUBLICAR COMENTARIO Volver arriba


3 + 9 =

Contáctanos

Puedes enviarnos un mensaje si tienes quejas o quieres felicitarnos, o para contarnos algo, te responderemos :D