Hace unos días Adobe decidió dar el primer paso hacia un camino diferente al que nos tiene acostumbrados. La tecnología Flash cada vez se ve más reemplazada por las animaciones en HTML5 y CSS3 así que la empresa, aún sin dejar de lado ni pretender sustituir a Flash, ha decidido aventurarse y comprobar si puede llevarse también, este suculento pedazo del pastel.

Todos sabemos que las animaciones, por sencillas que sean, llevan un trabajo que puede complicarse enormemente. Herramientas como Adobe Edge (como veremos, clon de Adobe Flash para animación HTML5/CSS3) hacen que sea muy sencillo crear transformaciones, links animados, presentaciones multimedia… o lo que se nos antoje con muy pocos o prácticamente ningún conocimiento de animación ni diseño.

No pretendo enseñaros como se maneja la herramienta Adobe Edge (que todavía se encuentra en fase de pruebas y desarrollo) ya que es muy extensa y puede llegar a ser muy compleja si queremos exprimirla al máximo, pero sí mostraros sus bondades y defectos para que os animéis, por lo menos, a crear vuestra primera animación en HTML5/CSS3 y os deis cuenta que, para el 90% de los efectos que se pueden encontrar en los portales que visitáis, no hace falta Flash.

El entorno:

Lo primero que nos encontramos al instalar la versión disponible actualmente en la web de Adobe para descarga y lanzarla es una ventana que nos indica el tiempo restante de licencia gratuita por “Pre-Release”. Es de esperar que Adobe Edge se incluya en alguna revisión de la suite creativa de Adobe (Adobe Creative Suite) por lo que sería de pago y ésta sólo es una prueba para mostrarnos las bondades y les ayudemos a desarrollarlo haciendo de betatesters.

Aún así aceptamos y veremos un interfaz sencillo, en tonos oscuros y dividido en 4 secciones principales en las que podremos ver una pantalla de bienvenida donde nos invita a crear un documento nuevo, abrir un archivo o mostrar los siguientes. También tenemos algo de “publicidad” y, lo que nos interesa, la barra del timeline (como en el Adobe Flash), la sección de elementos en el diseño (como en el Adobe Flash) y la sección de propiedades del elemento seleccioneado (como… eso!, en el Adobe Flash).

Y es que básicamente, Adobe Edge es una revisión de Adobe Flash a la que le faltan una inmensa cantidad de opciones y elementos pero, el concepto, es exactamente el mismo. Si estás acostumbrado a ver Flash, no tendrás problema con Edge ya que todo te sonará.

Un nuevo documento:

Comenzaremos a diseñar algo para ver cómo se comporta ésta nueva creación de Adobe. Utilizamos el botón de “Create New” y se nos presenta el mismo área de trabajo, pero ahora sí, con un pequeño recuadro blanco para que comencemos por algún sitio.

Ahora ya tenemos acceso al resto de paletas como el timeline, elementos y propiedades. Además, justo encima del área de propiedades disponemos de los botones para ir añadiendo elementos al diseño. Los cuatro elementos nativos que podemos añadir son rectángulos, rectángulos con borde redondeado y texto. Al principio pueden parecer pocos, pero si lo pensamos en detenimiento, son más que suficientes teniendo en cuenta que podemos importar imágenes (PNG, JPG y GIF) o archivos de curvas (SVG).

En el recuadro de propiedades iremos modificando las características de cada elemento, por ejemplo, la posición o el color. Por ahora sólo tenemos un recuadro en blanco por lo que, poco podemos hacer.

Añadiendo componentes:

Bueno, pues sí, tenéis razón, se parece mucho a Adobe Flash.

En la lista de elementos de la derecha podemos ver ahora alguna pieza más de la composición. Los elementos que ahí se muestran lo hacen en forma de árbol partiendo del elemento base, la hoja principal. Por supuesto que se pueden tener varias pero, como comentaba al principio, no me extenderé en la explicación de su uso, sólo unas pinceladas.

En la paleta de elementos los objetos se muestran por el orden que tienen, así, los primeros son los que están más al fondo y los últimos son los superficiales. Además se puede ver, a la derecha de cada elemento, qué tipo es así, por ejemplo, los que tengo en el lienzo ahora mismo son todos capas (“div”). Por defecto, Adobe Edge engloba cada elemento en una capa para luego trabajar solamente con ellas y moverlas, redimensionarlas, solaparlas…

En el timeline podemos ver los efectos que les vamos cambiando en cada capa o elemento y así sabremos, en todo momento, qué propiedad cambia de cada objeto y cuándo. Por ejemplo, el elemento Text1, cambia de color varias veces y así lo podemos ver en su línea del tiempo al igual que se puede distinguir que no se mueve más a partir de los 1.2 segundos.

Previsualizando y exportando

Una vez nuestra presentación o diseño toma forma, podemos previsualizar cómo queda en el navegador que tengamos por defecto en nuestro sistema. Automáticamente Adobe Edge creará una exportación temporal y nos mostrará, en mi caso Firefox, con la animación que hemos creado moviéndose en pantalla.

Y como ya hemos terminado, podemos exportar nuestro diseño. Eso sí, como es un archivo HTML5 /CSS3/Javascript, sólo nos ofrecerá la opción HTML.

También hay que comentar que tendremos tres archivos en nuestro sistema para subir a nuestro servidor FTP o importar en nuestro diseño. Un archivo HTML que es el encargado de llamar a los demás y crear la zona de visualización, un archivos CSS que se encarga de colocar los elementos en pantalla y algunas transformaciones y un archivo JavaScript que será el responsable de las animaciones más complejas.

Todo ésto hay que subirlo a nuestro servidor además de las imágenes que importásemos para realizar el diseño. Normalmente Adobe Edge crea una carpeta llamada “images” en la que se encuentran dichos elementos, siempre y cuando los utilizásemos. Si sólo hemos utilizado cuadrados, texto y círculos no tendremos la carpeta de imagenes.

Conclusiones

No sé si ya lo habréis probado al llegar a éste punto pero, si no, os animo a hacerlo. Es sencillo, intuitivo, no extremadamente potente y se consiguen unos resultados fabulosos para tener una bonita animación para nuestra web.

De todas formas, y después de probarlo durante unas horas, os puedo decir que no me extrañaría verlo formar parte de Adobe Flash en un futuro o, incluso, un cambio de nombre para ambas aplicaciones (¿”Adobe Web Animation”?) en el que podamos decidir en qué tecnología exportar un diseño.

Aunque, repito, seguro que todavía tendremos mejoras muy suculentas para éste “invento” de Adobe, Adobe Edge, estoy seguro que veremos una crecimiento exponencial de las animaciones HTML5 gracias a desarrollos como éste.