Primera revisión a la nueva apuesta de Adobe. Edge Preview 1 tiene todas las opciones de ganar la batalla de la animacion en la Web, al permitir la creación de clips, banners, ads o animaciones con código HTML5,  JavaScript y CSS3.

Esta nueva y brillante herramienta se ve como el futuro caballo de carreras de Adobe. Aún está en una etapa preliminar y carece de muchas opciones, sin embargo es tan sencillo utilizarlo, que pude realizar esta animación, en sólo 15 minutos.

Adobe Edge Preview 1 apunta a el uso de una interfaz similar a la de Flash para la creación de animaciones que son luego, generadas en HTML5 , junto con JavaScript y CSS3. Siguiendo la ruta de los estándares. Esta aplicación permite que tus animaciones no necesiten ningún tipo de plugín o extensión para poder ser reproducidas, por lo que estarán disponible tanto en computadores regulares (desktop, notebook, netbook), Tablets (Ipad, Ipad2, Galaxy Tab) y dispositivos móviles.

Ésta versión de prueba (que dura 150 días) aún posee muy pocas opciones, pero como lo vi, tiene un enorme potencial. Aparte de que las animaciones y organización de los elementos se hacen en capas o layers como Flash, no es necesario ser un maestro en ActionScript como para lograr movimientos y efectos.

1.- Este panel tiene las opciones del elemento que se selecciona. Si no se ha marcado nada, muestra las opciones del canvas de dibujo o lienzo base.
2.- Este es el área de trabajo. Acá se dibuja el “lienzo base” y los elementos que se utilizarán en la animación.
3.- En este panel es posible ver la organización por capas de los elementos que se agregan a la animación.
4.- Esta es la línea de tiempo, en donde se pueden modificar las opciones de los elementos (CSS3) y colocar los keyframes que dirigen la animación.
Flecha Verde: Los tipos de elementos que se pueden crear – rectángulo, rectángulo con bordes curvos, textos y el selector. Para agregar imágenes, hay que importarlas desde el menú superior.
Flecha Amarilla: Es posible modificar el órden de los paneles, pero al menos en mi caso, Windows 7 se manea un poco aunque no se pega asi que lo dejé “default”.
Flecha Cian: Menú del programa.

En esta imagen se pueden ver los elementos que utilicé para la animación superior. Capas, eventos, línea de tiempo, etc.

Una vez guardado, el documento generado es un archivo nombre-proyecto.html y genera el código fuente que vemos arriba.  Llamadas a la librería jQuery, y Edge 0.1.1. Además de su respectivo archivo javascript de configuración y su archivo de estilos CSS3.

Cabe destacar que por el momento no es posible a través del programa hacer enlaces, conectar con DB o páginas dinámicas, porque el codigo generado es en su gran mayoria manejado en javascript, pero en los foros de la naciente comunidad de Adobe Edge, se tomó en consideración la generación de más código HTML para realizar estas cosas.

Si tienes conocimientos en javascript, puedes hacer esas cosas utilizando los ID de los elementos.

Los archivos generados en la carpeta son los que aparecen en la imagen superior. (dos.html es un respaldo de emergencia )

Aún no me compro una webcam como para hacer videoreviews, pero pueden seguir los enlaces a continuación, para más información.
Para mi ejemplo, utilicé un script de el sitio HTML5 Blog para hacer que la animación tuviera loop, dado que desde el programa no es posible aún.

Descargar Ejemplo

Fuente:
Adobe Edge Preview
Video guía para principiantes, Adoble Labs