Introducción a Adobe Edge Animate: 1 - Animación

Adobe Edge Animate fue una de las principales novedades presentadas en el evento "Create the Web". Una aplicación para crear contenido animado e interactivo al mejor estilo Flash, pero en HTML5 sirviéndose de jQuery.

Con solo abrir la aplicación podemos recordar el entorno de trabajo de Flash, trabajando con un Timeline, interpolaciones, símbolos y ventana de código (en este caso Javascript).

Creando un documento nuevo podemos definir las propiedades de ando y alto del lienzo en el que vamos a trabajar.



En la ventana de "Biblioteca" podremos ir añadiendo nuestros elementos gráficos que vayamos a utilizar, seleccionando en el icono [+] o desde el menú de Archivo.



Para este artículo de ejemplo añadiré una imagen PNG del logo de Cristalab.



Al tener seleccionado un elemento sobre el lienzo, el panel de Propiedades nos muestra todas las opciones de posicionamiento y transformación aplicables.



Una caracteristica que nos permite Edge es trabajar con unidades de pixeles o por porcentajes pulsando en el interruptor de cambio de unidad.



El Timeline, muy parecido a Flash o After Effects nos muestra todos los elementos situados en el lienzo superpuestos por capas a lo largo del tiempo de la animación.



Para crear una animación simple seleccionaremos la opción "Alternar pin" y desplazaremos el cabezal azul hacia delante en el tiempo. Por ejemplo un segundo.



Modificando alguna de las propiedades del elemento se generará una animación del estado modificado al actual. En este caso modifico la rotación de 0 a 360 grados para generar una rotación completa del gráfico.



La interpolación queda visible en el timeline de manera que podremos modificarla posteriormente, alargándola o contrayéndola o añadiendo fototramas clave.



Igual que hacíamos en Flash, podemos modificar la aceleración de la animación para crear diferentes efectos.



Para generar la animación abriremos el panel de Publicación y seleccionaremos "Web".



Una vez publicado el documento los archivos generados con un documento HTML junto con varios archivos Javascript y los elementos gráficos individuales.



Si abrimos el archivo HTML veremos nuestra animación generada integramente con HTML y Javascript, lista para integrar en cualquier página.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.