Adobe Edge, analizada a fondo

  Hace una semana salió la versión de una nueva aplicación desarrollada por Adobe, llamada Adobe Edge. El concepto de esta aplicación es el de crear animaciones usando solamente estándares web, es decir, no usa flash como tecnología para lograr animaciones, sino CSS, HTML5 y Javascript. A continuación vamos a darle un vistazo al programa porque a pesar de que esta primera versión es muy sencilla, las herramientas y parámetros que posee hace realmente hacer un buen uso de los mismos, pudiendo lograr algo impresionante.

Interfaz

Adobe viene aplicando un estilo oscuro en su interfaz en algunas aplicaciones, la mayoría contiene todavía las opciones con ventanas emergentes y colapsadas, pero en este caso es más parecida la interfaz a un After Effects o un Premiere. A pesar de las pocas opciones que hay se adaptan muy bien a la interfaz, de hecho, si alguno ya ha trabajado con Adobe Flash les resultará muy familiar la barrita de línea de tiempo, y si acaso las capas.

Hay un escenario donde ocurre todas las animaciones, dos paneles laterales, uno para las propiedades de los elementos y la otra las capas. En general es una interfaz muy sencilla pero funciona a la perfección para poder trabajar.

Funcionamiento

Herramientas

Empecemos a ver cómo funciona la aplicación. Al ser una primera prueba verdadera de aplicación para hacer animaciones que no sea con flash tenemos que ver que no hay muchas herramientas para trabajar, es decir, a simple vista sólo disponemos de tres herramientas, la de un cuadrado, un círculo y texto, ah, y una imagen, que se logra en Archivo>Importar.

Si fijamos esto a HTML y CSS parece un poco más creíble lo que vemos, porque a pesar de que en sí se pueden hacer animaciones, éstas están de acuerdo a los límites de CSS, por lo que hacer algo como en Flash como un botón, o un Movie Clip sería algo imposible. Ahora, hay que tener en cuenta que el cuadrado es una capa DIV, y el círculo también, sólo que esta última aplica propiedades de border para darle la redondez de esta herramienta.

Línea de tiempo

Una parte fundamental de esta aplicación es la línea de tiempo, la que nos permite crear animaciones con nuestros elementos. Las cosas que aparecen ahí son un poco más complicadas que en Flash, por ejemplo, porque al manipular propiedades con CSS lo que se hace es que en una animación no se integra todos los cambios, sino que cada cambio [de posición(x,y), de tamaño(ancho, alto), color, rotación, etc] aparece independientemente.

En la línea de tiempo hay un botón de reloj que nos permite hacer animaciones más fáciles, basta mover el indicador de posición a un segundo dado y después mover o modificar nuestro objeto para que los cambios sean instantáneos. Sin embargo, también podemos deshabilitar ese botón, lo que haría que insertáramos cada animación una por una.

Cuando vemos las propiedades de los objetos veremos un pequeño diamante antes del nombre de la propiedad, activamos el diamante para poder insertar en nuestra línea de tiempo un keyframe, o fotograma clave, para poder iniciar una animación. Estos diamantes son muy útiles para cuando queremos personalizar al máximo nuestras animaciones, aunque tardas en acostumbrarte a seleccionar las propiedades que necesitas.

Parametros y capas

Como les decía, los parámetros disponibles que se integran para poder modificarlos y crear así una animación son los que están disponibles en CSS, por lo que no podemos esperar alguna herramienta extraordinaria, aunque si podríamos ver algunas mejor integradas. Eso si, no confundir porque yo también me llevé la pinta de que podría aplicar comportamientos a los elementos, para que en vez de que sólo se animara de la nada, pudiera animarse cuando el ratón hace algún movimiento, o se presiona alguna tecla; esto es pura animación.

Ahora, en cuanto al panel de capas, hay dos puntos que recalcar. El primero, que la capa te dice que elemento HTML es el que está activo; y el segundo es que no puedes modificar la capas, no las puedes ordenar, y no hay más opciones que la de bloquear y ocultar, algo que siento que se arreglará en actualizaciones, pero eso del reordenamiento si me decepcionó un poco.

Publicación

Entonces, ¿realmente es CSS? claro que si. Lo maravilloso de estas animaciones es que se basa más que nada en CSS3, pero también le ayuda un poco de Javascript, que para ser más precisos en jQuery (ahora ven porque tanto tutorial de jQuery) y aunque como les decía que las herramientas con CSS3 aún no superan por sí mismos a Flash, con jQuery si se podría lograr.

Ahora, uno pensaría que el código que se genera es como el de Dreamweaver, un poco estorboso y enorme a la vez, en esta ocasión el código que aparece en tu archivo es literalmente nada, sólo las capas que insertaste aparecen en HTML, lo demás ni existe.

Este es un ejemplo sencillo de texto que aparece, se hace grande y cambia de color, y sin embargo en nuestro cuerpo del sitio sólo vemos los archivos referenciados y una capa que sirve como escenario. Esto nos dice que todas las animaciones y formas creadas son generadas con ayuda de jQuery, CSS y Javascript, lo que hace que en realidad si modificas ya un sitio hecho no notarás cambios en tu código HTML, sólo las referencias de los archivos necesarios.

Conclusión

Esta aplicación no va a matar de un tiro a lo que Flash actualmente hace, porque aún no es posible, incluso si removiéramos lo que podemos hacer con Action Script, sin embargo es un buen comienzo para que la gente empiece a conocer más de cerca lo que es posible hacer con estándares, y lo que no. Hasta el momento Flash sigue teniendo ventaja en muchas áreas, pero como ya lo han declarado los de Adobe, la idea es que las dos trabajen juntas, no que estas animaciones sustituyan a todo flash, porque como les decía, las capacidades de ambas no son las mismas.