Comparativa de 4 herramientas de animación HTML5: Edge, Hype, Google Web Designer y Animate

El cambio de Flash a HTML5 para agencias y marcas ha sido duro, para superarlo ya explicamos el caso de Binaria en este post y también el proceso de duelo que habíamos vivido previamente.

Lo que pensábamos que sucedería de forma gradual se materializó en una campaña íntegra en HTML5 que nos llegó de golpe: nuevas especificaciones técnicas, limitaciones de peso, número y tipo de archivos permitidos por los soportes, adaptación de los trabajos a las plantillas HTML5 de los adservers, formatos responsive…

Así fue como en menos de 2 semanas el equipo técnico de Binaria analizó hasta 5 soluciones para la animación avanzada HTML5 de banners estándar y rich media. ¿Y por qué no compartir nuestras conclusiones?

Las herramientas de animación HTML5 que os presentamos a continuación son aquellas que consideramos que resuelven mejor nuestras necesidades como agencia y que mejor se adaptan a nuestro workflow y a los diferentes perfiles del equipo:

Adobe Edge Animate, Hype de Tumult, Google Web Designer y Adobe Animate, el último intento de Adobe para recuperar la herramienta de Flash, eso sí, ahora con capacidad para exportar a HTML5 Canvas o WebGL.

En qué consiste la comparativa

Para realizar nuestra comparativa hemos decidido producir la misma pieza (un roba 300x250px) a través de las cuatro soluciones propuestas, insertando al final de cada análisis el resultado final para su valoración y un archivo descargable con el proyecto y los recursos utilizados.

Qué aspectos vamos a medir

  • User Experience de la Aplicación
  • Herramientas de animación HTML5 avanzada
  • Uso de estándares HTML y CSS
  • Carga de librerías externas js
  • Legibilidad y manipulación del código resultante
  • Peso total del material entregable

Y en el análisis de cada herramienta hemos incluido:

  • Qué destacamos de la herramienta
  • Banner desarrollado + proyecto descargable

Para la producción de la pieza partiremos de un storyboard creado con Sketch, exportaremos todos los assets necesarios en formato png o jpg y pasaremos todas las imágenes por el compresor TinyPNG, un servicio web capaz de reducir drásticamente el peso de nuestros archivos.

Para este caso concreto vamos a priorizar el peso de la pieza por lo que hemos decidido exportar los textos como imagen y no añadirlas como webfont al proyecto.

En la medida de lo posible priorizaremos el uso de elementos HTML y propiedades CSS tales como formas básicas con colores sólidos o degradados, con bordes, sombras, opacidades… en lugar de hacer uso de imágenes.

Adobe Edge Animate

Adobe lanzó esta herramienta en 2011, un año después de que Steve Jobs arremetiera contra Flash y meses antes de que el propio Adobe dejase de dar soporte Flash en dispositivos móviles.

User Experience de la aplicación

En general el workflow con esta aplicación es muy bueno, se nota la experiencia de Adobe en herramientas con línea de tiempo. La experiencia de usuario en las operaciones con la línea de tiempo, modificación de propiedades, tanto a través del panel de propiedades como en el área de trabajo, es buena.

Tiene, sin embargo, algunos detalles que dan la sensación de herramienta inacabada, como por ejemplo la imposibilidad de reordenar las capas desde la línea de tiempo (sí desde la pestaña “Elementos”) o la gestión de los assets externos.

Herramientas de animación HTML5 avanzada

Dejando de lado las propiedades básicas animables, es con diferencia la herramienta que permite una mayor cantidad de modificaciones y animaciones en los elementos: punto de anclaje, posición y escala del background, filtros avanzados (no todos los navegadores los soportan)…

Con una gran cantidad de presets, se echa en falta poder personalizar las curvas de aceleración.

Uso de estándares HTML y CSS

Por desgracia el código resultante no está basado en animaciones CSS3 y el DOM se construye dinámicamente a través de la llamada a archivos js externos, lo cual impide posibles modificaciones a través del código.

El material resultante de la publicación de la pieza está compuesto por un documento HTML, una carpeta con los assets utilizados (imágenes, vídeo, audio) y varios archivos js.

Carga de librerías externas js

Edge Animate ofrece la posibilidad de alojar la librería JavaScript base, necesaria para el funcionamiento de las piezas (edge.6.0.0.min.js), en su CDN. Esto reducirá considerablemente el peso total de la pieza. Sin embargo es importante tener en cuenta que esas librerías siguen siendo necesarias y, aunque no estén dentro de nuestra carpeta de publicación, una vez la pieza esté online hará una petición a los servidores de Adobe para descargar dicha librería.

Hay que tener en cuenta que si las creatividades se sirven vía un adserver externo (como DFP o Sizmek) puede que no admita dependencias externas, y por tanto haya que incluir en la exportación dicho fichero.

Actualmente el peso de esta librería es de 104 KB.

Legibilidad y manipulación del código resultante

El HTML generado por la aplicación es básico. La estructura completa de la pieza se construirá en tiempo de ejecución, por tanto no tendremos acceso a los elementos de la pieza a través de su código.

La API de desarrollo está bien documentada, nos permitirá añadir interactividad a la pieza y controlar, por ejemplo, su reproducción haciendo uso de sus funciones.

Peso total del material entregable

Como ya hemos comentado, el peso de la pieza dependerá de si hacemos uso del CDN de Adobe o alojamos nosotros la librería de edge.

  • Versión con librería alojada en Adobe: 101 KB
  • Versión con librería alojada en la carpeta js: 212 KB

Pros y contras de la herramienta

Nos gusta: Es la herramienta más profesional y con más posibilidades de todas las que hemos analizado hasta el momento. Por ahora Edge es la herramienta más completa y la que más se ajusta a nuestras necesidades.
No nos gusta: Desde noviembre del 2015 Adobe ha dejado de desarrollarla. Quizás debido a su estrategia de recuperar Flash (ahora llamado Animate).

Adobe no ofrece la posibilidad de comprar esta aplicación por separado por lo que deberemos tener una suscripción al paquete completo de Creative Cloud EUR 69,99. Disponible para Mac y Windows.

 Tumult Hype

Tumult Hype es una herramienta desarrollada exclusivamente para animación HTML5. Dos de sus fundadores son veteranos de Apple, suponemos que por eso es una app solo para Mac y sin intención de hacer la versión para Windows en el futuro.

User Experience de la aplicación

Hype nos gusta, su interface es amigable y las personas familiarizadas con este tipo de aplicaciones nos encontramos cómodos rápidamente. Es intuitiva y ágil. Como el resto de aplicaciones tiene particularidades que debemos asimilar, pero se alcanza rápidamente una buena velocidad de producción.

Herramientas de animación HTML5 avanzada

Es muy completa. Dispone incluso de herramientas que no hemos visto en otras aplicaciones, como un apartado para propiedades físicas (gravedad, colisiones, etc).

La aplicación está bien documentada. En su web tenemos vídeo-tutoriales que nos ayudarán a familiarizarnos con la herramienta.

Uso de estándares HTML y CSS

Hype construye la estructura del HTML y todas las animaciones en tiempo de ejecución a través de su propia librería js, no tendremos acceso a los elementos de la pieza a través de su código.

Tiene una API bien documentada para el desarrollo de piezas con programación avanzada.

Carga de librerías externas js

El proyecto, una vez publicado en su versión optimizada, consta de un archivo HTML, una carpeta con los assets utilizados y un archivo js.

Los settings de publicación nos dan la opción de indicar una URL para la librería js, con ello podremos hacer referencia a ella en lugar de generarla para cada proyecto.

Legibilidad y manipulación del código resultante

Sus animaciones no son CSS3 y la estructura del HTML se genera en tiempo de ejecución.

Podremos hacer uso de su API para interactuar con la pieza.

Peso total del material entregable

Para la prueba realizada hemos obtenido un peso total de 150 KB sin hacer uso de la opción de alojar la librería js en una URL.

  • Versión con librería alojada en URL externa : 111 KB
  • Versión con librería alojada en la carpeta del proyecto (sin dependencias externas): 166 KB

Qué destacamos de la herramienta

Nos gusta: su entorno es amigable y su curva de aprendizaje es mínima. Tiene características avanzadas que permiten un desarrollo profesional.
No nos gusta: El precio de su versión profesional y la modalidad de pago, que nos obligará a comprar la app con cada nueva versión de esta.

Se comercializa en dos versiones: standard (49,99 USD) y profesional (99,99 USD) y sólo está disponible para Mac. Nosotros hemos usado la versión profesional para el análisis.

 Google Web Designer

Google lanzó Google Web Designer en 2013 seguramente para tener bajo control el contenido (y el código) que ya se empezaba a subir a su plataforma DoubleClick Rich Media. Esta herramienta es gratuita y disponible para Mac, Windows y Linux.

User Experience de la aplicación

Por extraño que parezca, Google Web Designer es, de todas las herramientas de animación HTML5 que hemos usado para esta comparativa, la menos intuitiva y más incómoda de usar. Trabajar con GWD puede causar bastante frustración por la torpeza con la que se realizan tareas básicas con la línea de tiempo y su falta de lógica.

Herramientas de animación HTML5 avanzada

GWD cuenta con dos modos de animación:

  • El modo rápido, más pensado para realizar animaciones sencillas de un modo básico.
  • El modo avanzado, nos dará acceso total a todas las características de la aplicación, animación con keyframes… el entorno al que estamos acostumbrados.

Aún así, el modo avanzado no permite algunas operaciones que sí permiten las otras herramientas analizadas.

Uso de estándares HTML y CSS

El punto fuerte, sin duda, de GWD es que el código resultante es estándar CSS3 y usa canvas para las formas generadas en la aplicación (rectángulos, óvalos, líneas y herramienta de dibujo).

Carga de librerías externas js

Hace uso de varios archivos js bastante ligeros. No necesita una librería js muy pesada gracias al uso de CSS3 para las animaciones sobre la línea de tiempo. Incluye la posibilidad de combinar todos los archivos externos en el HTML.

Legibilidad y manipulación del código resultante

El hecho de que todas las animaciones sean CSS3 nos permite cierto control sobre ellas a través del código resultante. El código JavaScript y las funciones de su librería son también bastante estándar.

Peso total del material entregable

GWD trae una cuantas opciones de publicación bastante útiles, como la posibilidad de comprimir reducirá sustancialmente el peso del proyecto y combinarlos nos permitirá incluir todos los css y js generados en el mismo HTML.

El peso total del proyecto publicado con GWD es de 150 KB con las opciones de combinar y comprimir archivos activadas, y siempre sin dependencias externas.

Qué destacamos de la herramienta

Nos gusta: Es gratuita, usa CSS3 para las animaciones y su código es estándar.
No nos gusta: A nivel de usabilidad GWD aún está lejos de alcanzar el nivel de las otras soluciones.

Durante un tiempo, cuando el desarrollo banners en HTML5 era incipiente, GWD fué la herramienta utilizada en Binaria. Conseguimos hacer cosas bastante atractivas pero dedicando un esfuerzo a veces incomprensible para una herramienta de este tipo.

 Adobe Animate

Adobe Animate CC es el último en llegar pero dicen que quién ríe último… de momento ya ha conseguido que dejen de desarrollar Adobe Edge coincidiendo con su lanzamiento.

User Experience de la Aplicación

Hablar de la UX de Animate es hablar de la UX de Flash. Con 19 años de historia a sus espaldas, Animate tiene un interface depurada y optimizada para desarrollar animaciones avanzadas de manera ágil y efectiva.

Herramientas de animación HTML5 avanzada

Cuenta con herramientas que no encontraremos en otras soluciones: animación de formas, efectos avanzados, modos de fusión…

Animate, al igual que Flash, cuenta con dos modos de animación: la interpolación clásica, tan usada por los usuarios de flash, y la interpolación introducida en las últimas versiones de flash con un control más detallado sobre las curvas de animación.

Para el análisis hemos usado hemos usado la interpolación de forma con control sobre las curvas de animación.

Uso de estándares HTML y CSS

Animate no usa CSS3 para la animación de los elementos, usa canvas y JavaScript para convertir el proyecto a un formato compatible con los navegadores. En el HTML resultante sólo encontraremos un elemento contenedor donde a través de JavaScript se cargará su contenido en tiempo de ejecución.

Algo que nos gusta mucho de Animate es que combina todos los recursos de imagen en un solo sprite, lo cual reducirá significativamente las peticiones al servidor y por tanto la carga de la pieza será más rápida.

Teniendo en cuenta la herencia de la aplicación no es de extrañar que aún tenga soporte para ActionScript 3. Aunque también es cierto que han añadido soporte para JavaScript, desconocemos con qué alcance.

Carga de librerías externas js

Genera un archivo js para cada proyecto pero además debemos contar con la librería de Animate que podemos alojar localmente para cada pieza o bien hacer uso de la alojada en el CDN de Adobe, el peso de esta librería actualmente es de 191 KB por lo que es una decisión importante que deberemos tomar.

Legibilidad y manipulación del código resultante

El código resultante difícilmente lo podremos modificar más allá de los settings básicos como color de fondo o dimensiones.

Peso total del material entregable

  • Versión con librería alojada en Adobe: 152 KB
  • Versión con librería alojada en la carpeta js (sin dependencias externas): 343 KB

Qué destacamos de la herramienta

Animate es Flash, ni más ni menos. En nuestra opinión Adobe ha usado sus cartas para conservar a tantos desarrolladores/animadores de Flash que han virado al desarrollo web. No hemos tenido aún la oportunidad de trabajar más profundamente con la herramienta y sus nuevas características, pero a primera vista parece la solución más potente si queremos hacer trabajos con gráficos vectoriales, sin embargo no nos parece la solución más adecuada para animaciones básicas e interactividad.

Nos gusta: La conocemos, estamos acostumbrados a trabajar con ella. Es completa y el paso de los años y las diferentes versiones la han convertido en una solución sólida y fiable.
No nos gusta: La herencia de Flash, como que aún siga teniendo soporte para ActionScript. El peso final se puede disparar en función de la complejidad de las animaciones.

Adobe no ofrece la posibilidad de comprar esta aplicación por separado por lo que deberemos tener una suscripción al paquete completo de Creative Cloud EUR 69,99. Disponible para Mac y Windows.

Resumen y conclusión

El estudio que realizamos en Binaria para decidir qué solución debíamos adoptar nos sirvió, también, para reflexionar sobre el momento actual y la evolución de las herramientas de animación HTML5 de este tipo. A diferencia que en la era hegemónica de Flash, actualmente disponemos de un sinfín de soluciones para realizar el mismo tipo de tarea, unas más completas, otras menos, unas gratuitas, otras de pago, herramientas de escritorio o en la nube…

Posiblemente al inicio de este proceso cometimos el error de buscar un único sustituto a nuestro querido y rentable Flash. El constante movimiento de todas estas soluciones, las diferentes exigencias impuestas tanto por el emisor como el receptor, la mejora progresiva que imprimimos en todos nuestros trabajos nos han enseñado que no existe una única solución a la que podamos migrar. La búsqueda de nuevas soluciones, más rápidas, más completas, más eficientes y su profundo conocimiento ha de ser parte de nuestra rutina de trabajo.

¿Quieres saber más?

Escríbenos

Otros artículos que pueden interesarte:

Tu web en la pole position 🏁 con técnicas de desarrollo moderno

En este artículo te queremos contar como, actualmente, es posible construir cualquier clase de sitio web con técnicas punteras de desarro [...]

Leer más

Binaria.com: un site desarrollado con Gatsby y que va como un tiro 🚀

Últimamente has notado algo diferente cuando visitas las webs de alguno de tus competidores, son rápidas, muy rápidas. Además alguno de e [...]

Leer más