Adobe Edge herramienta de animación web con HTML5, CSS3 y JavaScript

Adobe ha empezado a hacer lo necesario para darle un empujón serio a HTML5, o quizás lo que ven ellos como el posible bote salvavidas en caso de que Flash deje de ser la herramienta de elección de sus ordas de desarrolladores Flash dada la fiebre de HTML5 que llegó de forma epidémica después de las proféticas palabras de Steve Jobs cuando no quizo dar soporte a Flash en dispositivos iOS.

Gran cantidad de los animadores Flash no son ‘coders’, Adobe entiende esto y ha creado una versión preliminar de una herramienta llamada Adobe Edge la cual permite diseñar movimiento e interacción web utilizando estándares web como HTML5, JavaScript y CSS3.

Adobe Edge aún es parte de Adobe Labs, de momento el software es gratuito, pero debes registrarte en Adobe.com para poder realizar la descarga, la cual está disponible únicamente para Windows (65.5 MB) y Mac (51.5 MB).

Hasta los momentos Adobe sólo se ha comprometido en llevar Adobe Edge a una primera version 1.0, no hay compromiso más allá de esa versión.

Esto nos hace pensar que quizás este producto pudiera ser un arma de doble filo por parte de la compañía. Adobe sabe el potencial de una herramienta con las capacidades de Flash pero con HTML5/CSS3/JavaScript como el producto resultante, y al ellos sacar una herramienta que compite con su propio producto, el poder de su marca puede ser intimidante para la posible competencia que debe estar trabajando en productos similares desde hace tiempo, el más notable es el proyecto Maqetta.

Decimos que puede ser un arma de doble filo porque Adobe podría no terminar de pulir este producto o hacerlo tan poderoso como pudiera para mantener su ecosistema Flash intacto. A la vez, si ven que la herramienta enciende la llama de una fuerte comunidad de desarrolladores ellos mismos verán que tienen que competir con todo en contra de su propia tecnología Flash.

Sin embargo esta posible estrategia de lanzar una herramienta sin compromisos puede que no le llegue muy lejos si herramientas como Maqetta ganan popularidad entre desarrolladores. Maqetta fue creada por IBM y luego donada a una organización Open Source. Si no me equivoco algo similar sucedió con IBM Visual Age el cual fue luego remplazado por el todo poderoso Eclipse (mi herramienta preferida para desarrollo en Java Desktop, Android, Python y C++).

La herramienta de momento es super límitada, todo lo que puedes hacer ahora es animar y transformar (rotación, tamaño, traslación y skew) rectángulos, imágenes o texto (nada de crear objetos vectoriales como en Flash), pero para personas que vienen del mundo Flash y manejan con facilidad los conceptos del timeline y keyframes, animar rectángulos y texto en esta herramienta será preferible que aprender CSS3 y JavaScript (si no lo saben). Además todo aquello que no puede hacer ahora lo puedes terminar a mano porque la salida es realmente mejor de lo que pensaba.

¿Y Cómo lo hace?

Cuando guardas tu proyecto el resultado es un archivo HTML y una carpeta de includes, la cual incluye las librerías de jQuery que son GPL y no sé si veremos en el futuro algún conflicto de licencias dado que podrían estar utilizándolas dentro del software.

La salida también incluye archivos .css, con definiciones compatibles con todos los browsers populares (Internet Explorer, Firefox, Chrome, Safari, Opera), y JavaScript con la lógica definida en el proyecto, dándole un identificador (#) a cada elemento en el timeline. Estos identificadores son accesibles para cualquier otro programador que sí sepa HTML5/CSS3/JavaScript lo cual veo que va a causar 2 cosas:

  • En el futuro cercano, si esta herramienta empieza a suplantar a Flash, el equipo de diseñadores gráficos y animadores deberá trabajar en conjunto con los desarrolladores web para asegurar de que se mantengan reglas consistentes en cuanto a nomenclaturas y layouts.
  • Los desarrolladores web ahora podrán tener acceso programático a los elementos animados dentro de las páginas creando nuevas posibilidades no existentes (o difíciles de hacer en todo caso) con Flash

La salida también incluye librerías de JavaScript creadas por Adobe para lo que parece ser toda la lógica del timeline, keyframes, etc, con un peso total de 66KB.

Espero que le echen una probada a Adobe Edge, sobre todo si son profesionales que trabajan día a día con Flash, quisiera ver cuáles son sus opiniones al respecto.
Si logran hacer algo interesante no duden en escribirme, podemos actualizar este post para mostrar lo que han hecho al resto de los lectores.

Impacto

Cada vez que una herramienta hace las cosas más faciles para la mayoría hay un impacto que se siente pocos meses después. Si la versión 1.0 llega a traer una herramienta para convertir proyectos Flash a projectos Edge el impacto sería tremendo, le mantendremos el ojo puesto a Adobe Edge, ya veremos qué sucede con esto, los usuarios de dispositivos iOS se verán bastante beneficiados con estos acontecimientos dado que más y más contenido interactivo se hará disponible con HTML5.