HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Los 4 mejores editores de animaciones en HTML5 y CSS3

Logotipo de HTML5Con la llegada de HTML5 y CSS3 se abre un nuevo mundo de posibilidades para las animaciones gráficas en la web. Después de pasar por el reinado durante años del recurso del GIF animado, y ahora que Flash empieza a dejarse un poco de lado (por los mismos inconvenientes que ha tenido siempre y por la fuerza comercial de Apple), llega el momento de mirar al frente y aprovechar las oportunidades que nos brindan HTML5 y CSS3.

Los nuevos estándares permiten una flexibilidad y potencia muy grandes para la creación de animaciones, además de hacerlas independientes del dispositivo en el que se está visualizando: ordenadores, móviles, iPads, tabletas…

Para solucionar la necesidad de saber programar y tener conocimientos altos de CSS y HTML, están surgiendo muchas aplicaciones para la edición de animaciones en HTML5 y CSS3. Tienen la misma pinta de siempre, la misma que los clásicos editores de películas o de animaciones, pero adaptados a las últimas tecnologías.

El problema de la compatibilidad de los navegadores

Todavía no puede decirse que todos los navegadores modernos soporten las animaciones generadas por estos editores. La mayoría de ellos utilizan técnicas, como los keyframes para establecer puntos y fotogramas clave dentro del clip, que actualmente sólo están bien soportadas por los navegadores más modernos, como Google Chrome, Opera o Safari. Firefox está avanzando mucho y pronto será plenamente compatible. Internet Explorer es otro cantar, como siempre, va por detrás del resto.

Vamos a echar un vistazo a algunas de estas herramientas.

Sencha Animator

Probablemente, Sencha Animator es el editor de animaciones en HTML5 y CSS3 más popular del momento. Lleva bastante tiempo entre nosotros, es un software maduro y muy completo disponible para Windows, Mac y Linux. Su precio es el más elevado de todos (199$ con 30 días de prueba gratuíta) y cuenta con la ventaja de estar totalmente integrado con el resto de herramientas de Sencha, una infraestructura y framework muy completo para la creación de aplicaciones HTML5.

Sencha Animator

En la página oficial ya nos destacan que el editor no sólo puede usarse para crear animaciones, sino también para crear anuncios publicitarios interactivos, juegos para el navegador… y cualquier cosa que tu creatividad sea capaz de pensar, :)

Enlaces:

Tumult Hype

En mi opinión, Tumult Hype es la mejor opción calidad-precio actualmente para crear animaciones en HTML5 y CSS3. Disponible sólo para Mac, es una herramienta muy completa a un precio asequible (39,99€) con la que no sólo pueden construirse animaciones. Tiene todas las facilidades para el usuario que no tiene ni idea de programación y muchísimos recursos para los usuarios más avanzados, todo ello en una interfaz muy lograda y fácil de usar.

Tumult Hype

En la línea de tiempo aparecen listados los diferentes elementos de la animación y todas sus propiedades, pudiendo añadir keyframes para establecer puntos clave o de cambio de las mismas en el tiempo. En la parte superior tenemos el navegador de escenas, donde definir diferentes escenarios y crear una navegación entre ellos con transiciones.

El inspector de Hype es la parte más importante, desde ahí podemos definir todas las propiedades de nuestra animación o de cada elemento, además de definir las acciones y eventos asociados: clicks, rollovers, comienzos/finales de escenas, eventos de teclado…

También en el inspector se puede marcar la opción de avisarnos en todo momento de posibles problemas de compatibilidad con cada navegador, incluyendo los móviles.

Hype permite exportar las animaciones al formato widget de iBooks Author y está integrado con Dropbox para subir automáticamente tus animaciones y probarlas/compartirlas online rápidamente.

Puedes probar una versión gratuita durante 30 días de Hype descargándola desde la web oficial.

Enlaces:

Purple Animator

Una herramienta más sencilla y también más barata (15,99€) es Purple Animator, también disponible sólo para Mac. Es un editor con las herramientas fundamentales para la creación de animaciones en HTML5 y CSS3. Aunque no permite todas las posibilidades de Hype, sí tiene las más importantes y consigue que sea una herramienta sencillísima de utilizar.

Purple Animator

Todavía tiene mucho que mejorar en la gestión de eventos y acciones en las animaciones, pero sin embargo tiene algunas características muy interesantes como la importación de ficheros PSD (Photoshop) con todas sus capas.

Las animaciones de Purple también están preparadas para exportarlas y añadirlas como widgets animados en iBooks Author utilizando un plugin gratuito.

Enlaces:

Adobe Edge

Sinceramente, tenía muchas ganas de probar la versión Preview 4 de Adobe Edge, porque todavía no han publicado una versión final de la aplicación. Sin embargo, me he encontrado con que la web de descarga no funciona desde hace un par de días y además, consiguiéndolo por otras vías, no he conseguido que funcione. Nada más arrancar el programa muestra una ventana de error de la que no se puede salir.

Adobe Edge Preview 4

Estoy seguro de que Adobe está haciendo un esfuerzo muy grande en conseguir adaptarse a las nuevas tendencias y Edge va a ser un paso importantísimo.

No puedo comentar nada más. Estará disponible para Mac y Windows.

Enlaces:

Conclusión

Ya existen varias herramientas de calidad muy alta para la creación de animaciones HTML5 y CSS3, sobre todo en el entorno Mac. Además de resultar herramientas cómodas para trabajar y que contengan todas las opciones que necesita cada tipo de usuario, es muy importante entender el estado actual de estas tecnologías web y del soporte de los diferentes navegadores. En los sitios web de cada aplicación suelen detallar esta información y las posibles incompatibilidades que pueden surgir actualmente.

El desarrollo web está viviendo una revolución con la llegada de HTML5 que, por supuesto, afecta directamente al mundo de las animaciones visuales, que tienen que adaptarse a las últimas tecnologías y tendencias. Y estas herramientas serán unos aliados perfectos para conseguirlo.

¿Has probado o conoces alguna otra aplicación para crear animaciones HTML5 y CSS3?