Universal AJAX Live Search

Creación de un banner animado en HTML5, con Adobe Edge Animate

Para los que no habían escuchado hablar de Adobe Edge Animate, es una aplicación que se integra a la familia de Adobe desde su versión CS6 y ahora también en CC. Edge Animate nos ayuda a la creación de animaciones y contenido interactivo para web, basado en estándares como HTML5, CSS3 y Javascript,

lo que quiere decir que nuestras animaciones, infografías, banners e incluso juegos que diseñemos se podrán ver en cualquier navegador sin la necesidad de algún player o plug-in.

Edge se caracteriza por ser una herramienta muy intuitiva con una interfaz muy similar a Flash o After Effects con la que generaremos contenido sin la necesidad de ser programadores ni escribir grandes cantidades de código, y con la ventaja de que nuestras animaciones podrán ser vistas en cualquier dispositivo móvil ya sea Android, Windows Phone e incluso iPad y iPhone. Y sí, por si te lo preguntabas, Edge Animate es muy similar a Adobe Flash pero con la diferencia de que la publicación de los archivos finales será en HTML5, CSS3 y Javascript.

Para este tutorial vamos a crear una pequeña animación importando objetos y comprendiendo la forma en que se comportan nuestros elementos dentro de Edge Animate. También usaremos la herramienta de Easing para dar una aceleración o desaceleración gradual a nuestros objetos de manera que estos se muevan de una forma más natural o realista, quienes hayan trabajado con After Effects, Flash o algún programa de animación estarán familiarizados con este término.

Da click en el banner de abajo para ver el resultado que tendremos al final.



Antes de empezar vamos a descargar los archivos auxiliares desde aquí.

En estos archivos encontraremos las carpetas con los recursos que utilizaremos en el tutorial, la carpeta para guardar nuestro ejercicio así como el archivo final del mismo, para que lo compares con el que tu mismo hagas y ver si el resultado es el mismo.

1.- Abrimos nuestro programa Adobe Edge Animate (en tal caso de que aún no lo tengas instalado, puedes descargar una versión trial desde aquí) y creamos un nuevo proyecto File > New o con el atajo cmd + N. La mejor práctica es salvar tu proyecto antes que nada. Damos click en File > Save As y vamos a la carpeta que hemos descargado, en Ejercicio01 y luego dentro de SoccerBanner vamos a guardar nuestro proyecto como SoccerBanner.html 

Tutorial Adobe Edge Animate

2.- En el Panel de Propiedades cambiamos el tamaño de nuestra área de trabajo al tamaño de un banner estándar que sería en este caso 300px x 250px.

Tutorial Adobe Edge Animate

A continuación tenemos que importar las imágenes que utilizaremos en nuestro proyecto. Los formatos de archivos compatibles con Adobe Edge Animate son GIF, JPG, PNG (incluyendo imágenes con transparencia), GIF´s Animados y SVG.

3.- Para importar nuestros archivos de la manera más convencional y que de seguro ya conoces ve al menú File > Import o con su atajo de teclado cmd + I y navegamos hasta la carpeta Ejercicio01 y luego a la carpeta images, ahí podrás seleccionar las 4 imágenes que utilizaremos y dar click en Open.

Tutorial Adobe Edge Animate  

Edge al igual que varios programas de la familia de Adobe nos permite importar nuestros archivos al stage o área de trabajo de distintas maneras, y en esta ocasión lo que también podemos hacer es ir a nuestro escritorio y buscar en nuestras carpetas los archivos que queremos importar, en este caso la carpeta Ejercicio01 y luego la de images, seleccionamos toda ellas, las arrastramos y soltamos en el área de trabajo de Edge Animate.

Tutorial Adobe Edge Animate

Podemos ver en la línea de tiempo que todos nuestros objetos han sido agregados y están listos para ser animados, sin embargo y a diferencia de otros programas, el orden de estos objetos o layers no se puede cambiar desde la línea de tiempo, arrastrando y soltando como lo haríamos en After Effects por ejemplo.

Tutorial Adobe Edge Animate  

4.- Vamos a ir al Panel de Elements y arrastraremos el objeto logo-WC hacia arriba, por encima de soccer-ball. Lo soltamos y verás en tu área de trabajo que el logo quedó por encima del balón de fútbol. En panel de Elements es donde los objetos pueden ser reordenados, acomodados e incluso anidados (nested) según tus necesidades.

Tutorial Adobe Edge Animate  

5.- Seleccionamos desde el panel de Elements el logo con nombre logo-WC y en las propiedades de posición (en el panel Properties) pondremos 60px para el eje X y 10px para el eje Y, esto para que la imagen quede centrada.

6.- Seleccionaremos desde nuestro stage al balón y en las propiedades de posición pondremos 90px para el eje X y -125px para el eje Y.

7.- Una vez más seleccionamos la sombra que queda flotando y en las propiedades de posición pondremos 90px para X y 225px para Y.

Todos estos cambios a las imágenes los podemos hacer de igual manera arrastrandolas y posicionandolas manualmente sin la necesidad de hacerlo mediante el Panel de Propiedades.

8.- Vamos a asegurarnos que en la línea de tiempo la opción de Auto-Transition Mode y Auto Key Frame Mode estén desactivadas, esto dando click hasta que ambas estén de color gris.

Tutorial Adobe Edge Animate  

Seleccionamos el balón de fútbol (soccer-ball) y en la opción de Position damos click en en el rombo que está a un lado de la Y para agregar un keyframe.

Tutorial Adobe Edge Animate  

Movemos el Playhead (amarillo) o indicador de la posición actual en la línea de tiempo hasta 0:01, que corresponde a 1 segundo y una vez más volvemos a insertar un keyframe dando click en Y (en position del panel Properties).  Movemos el balón hasta que esté por encima de la sombra que sería 90px en X y 113px en Y. Si arrastramos el playhead del 0 al segundo 1 nos daremos cuenta que el balón salta y cambia de posición pero no vemos que tenga movimiento entre los dos puntos. Por otro lado si vemos el keyframe de la posición 0:01 notarás que no es un keyframe blanco, más bien“está hueco”, esto significa que ambos keyframes tienen diferentes valores. En este caso se les puede agregar una transición para que el valor cambie gradualmente de uno a otro y así tener el efecto de animación o movimiento.

Tutorial Adobe Edge Animate

9.- Vamos a seleccionar ambos keyframes, y desde el menú Timeline o con el botón derecho sobre alguno de los keyframes, seleccionaremos la opción Create Transition.

Tutorial Adobe Edge Animate  

Damos click en la barra espaciadora para ver la animación.

Una vez que corremos la animación notamos que el movimiento no es nada natural, y dista un poco de cómo sería el rebote de un balón en la vida real. Vamos a cambiar esto con la opción Easing.

10.- Damos click en el último keyframe de la línea de tiempo (0:01) y presionamos la opción de Easing, que es el rectángulo que se encuentra arriba de nuestra línea de tiempo.

Tutorial Adobe Edge Animate  

Damos click en Ease Out y luego en Bounce.

Presiona la barra espaciadora para reproducir tu animación y verás como el balón rebota al llegar al césped, siendo el movimiento más natural y fluido. Ahora animaremos el logotipo, que, a diferencia del balón, ya está en su posición final.

11.- Selecciona el logotipo (logo-WC). Mueve el playhead de la línea de tiempo al segundo 0, puedes hacer esto ya sea arrastrando manualmente hasta la posición 00:00:000, dando click en el botón Rewind en la esquina superior izquierda de la línea de tiempo, o presionando la tecla Home de tu teclado.

12.- Damos click derecho (ctrl + click en Mac) en el logo, esto abrirá un menú desplegable del cual seleccionaremos Add Keyframe > Left.

Tutorial Adobe Edge Animate  

13.- Movemos el Playhead de la línea de tiempo al segundo 1 (0:01), damos click en el rombo justo al lado de Left para insertar un keyframe (en la línea del tiempo debajo de logo-WC) y cambiamos el valor de Left  a -180.

Tutorial Adobe Edge Animate

Una vez más vamos a seleccionar ambos keyframes y damos click en el Menú Timeline > Create Transition.

Vemos que la animación está lista, ¡pero momento!, ¡se mueve en sentido contrario y el logo en vez de entrar sale de la escena!. Así es, vamos a hacer entonces unos ajustes para cambiar esto.

14.- En la línea verde que se ha creado entre los dos keyframes de logo-WC (que comúnmente se le llama “strip”) daremos click e iremos al menú Timeline > Invert Transitions.

Tutorial Adobe Edge Animate  

Los valores para los keyframes Left han cambiado en la línea de tiempo y si reproduces tu animación verás que ahora el logotipo corre en posición correcta quedándose en el centro de nuestro banner.

15.- En el panel Properties cambia la opción de visible en Overflow a hidden.

16.- Por último seleccionaremos la línea que se ha creado entre los dos keyframes de logo-WC y damos click en la opción de Easing para cambiar un poco su animación. Seleccionaremos la opción Easy Out > Elastic.

17.- Movemos el Playhead en la línea de tiempo a la posición 00:00:500 y seleccionando la línea amarilla (o strip) que se forma entre los dos keyframes del logo-WC la arrastramos hasta que el primer keyframe quede alineado con el Playhead (segundo 00:00:500).

Tutorial Adobe Edge Animate  

18.- Por último vamos a ir al segundo 0 y seleccionaremos nuestra sombra que se quedó olvidada en el pasto. En el panel Properties > Transform damos click en el rombo de ScaleX y Scale Y para agregar un keyframe y ponemos el valor de 0 en ambos. Nos movemos en la línea de tiempo hasta el primer punto en que el balón toque el pasto que es aproximadamente en 00:00.364 y cambiamos el valor de ScaleX y Scale Y a 100. Seleccionamos el Ease y damos click en Linear.

Corre tu animación de nuevo y verás como quedó terminada con un movimiento más fluido y natural.

Prueba tu animación en un explorador

Siendo esta una aplicación para contenido Web esperaríamos poder probar nuestros proyectos y/o animaciones en un navegador web, y lo haremos de la siguiente manera:

Vamos al menú File > Preview In Browser. Para aquellos que estén familiarizados con Adobe Dreamweaver oFlash el comando para probar nuestro proyecto es el mismo cmd + Return en Mac o Ctrl + Enter en Pc. Una vez hecho esto se abrirá el navegador que tengamos configurado por default y reproducirá nuestro banner.

Adobe Edge Animate únicamente nos permite probar los proyectos en el navegador que tenemos configurado como default, por lo que si queremos abrirlo en otro distinto tendremos que salvar el proyecto y abrir el HTML generado en el browser que quieras. Para probar este ejercicio abre el archivo SoccerBanner.html en el explorador de tu preferencia.

Hasta aquí terminamos un tutorial básico y muy simple de como crear una animación en pocos pasos en HTML5 por medio de Edge Animate.

Déjanos tus dudas o comentarios, o si quieres puedes DESCARGAR EL CURSO COMPLETO PARA iPad o en su versión para Kindle para conocer la interfaz, hacer animaciones que sigan trayectorias de un path, utilizar google web fonts, integrar contenido externo (como youtube o google maps, etc), así como añadir elementos interactivos mediante triggers y acciones para dar una mejor experiencia al usuario.

Creación de un banner animado en HTML5, con Adobe Edge Animate