En este nuevo minitutorial vamos a explicar como crear una simpática animación en HTML5 gracias a las posibilidades de Illsutrator, Photoshop y el nuevo Adobe Edge. Esta animación podremos visualizarla tanto en el navegador de PC como en nuestros dispositivos, incluyendo aquellos basados en iOS.

1. La animación consistirá en un personaje saltarín que se desplaza a través del ancho de un Banner. Comenzaremos dibujando la secuencia del personaje saltando directamente en Illustrator con tus herramientas de dibujo favoritas. Yo en este ejemplo utilicé los pinceles caligráficos y el pincel de manchas pero también podrían ser imágenes escaneadas y trazadas posteriormente. Lo importante es que cada uno de los personajes que compone la secuencia esté agrupado como un único objeto (un objeto por cuadro de secuencia) y que cada una de las imágenes de la secuencia esté en una capa distinta.

2.       A continuación seleccionamos todos los personajes de la secuencia y los alineamos verticalmente (sólo verticalmente!) para que ocupen todos la misma anchura.

Image002

3.       Una vez alineados seleccionamos el comando de menú Archivo>Exportar… y escogemos Photoshop(psd) como formato de exportación.

Image003

4.       En el cuadro de diálogo que aparece es importante que seleccionemos en el apartado “Resolución” >“Pantalla” y en el apartado “Opciones” >”Escribir capas”.

Image005

5.       Abrimos en Photoshop el fichero PSD resultante y mostramos en panel de animación mediante el comando Ventana>Animación.

Image006

6.       Es importante que la línea de tiempo esté en el modo  animación de cuadros. Si no fuera así, hacemos clic en el menú lateral de este panel y seleccionamos la opción “Convertir en animación de cuadros”.

Image008

7.       Esta parte es crítica ya que debemos hacer visible en cada fotograma únicamente la capa que nos interesa que aparezca. Haz clic en el botón de nuevo fotograma y vuelve a repetir el proceso de hacer invisibles todas las capas menos la que quieres que aparezca en el fotograma.

Image009

8.       Repite el proceso hasta tener construida toda la secuencia del salto.

Image010

9.       Antes de hacer clic en el botón play para ver cómo queda el resultado, es importante definir la duración de cada uno de los cuadros. Es normal que mientras el personaje toma impulso vaya más lento mientras que cuando salta, se eleva por los aires y cae lo haga en una secuencia más rápida. También es importante anotar estos tiempos porqué luego nos servirán para hacer cálculos a la hora de animar el personaje en Adobe Edge. En mi caso le he dado una duración de medio segundo a los dos primeros cuadros, una duración de 1 segundo al tercer cuadro y 0,1 segundos al resto que componen la secuencia del salto.Fig.9. Para asignar tiempo a un cuadro, haz clic en la parte inferior del cuadro donde indica la duración de ese cuadro, aparecerá un menú desplegable con las duraciones disponibles. Cuando hayas asignado el tiempo a cada fotograma ya puedes hacer clic en el botón de reproducir para observar una primera vista previa del resultado.

10.   El siguiente paso es exportar la secuencia como gif animado. Para ello ejecutamos el comando de menú Archivo>Guardar para web y dispositivos…

11.   En el cuadro de diálogo que aparece, escoge GIF como formato, activa la casilla transparencia y en el menú desplegable “Halo” es aconsejable escoger el mismo color de fondo que pensemos utilizar de fondo en nuestra animación de Edge para conseguir un resultado lo más suavizado posible. En opciones de repetición puedes escoger o bien “infinito” o bien el número de veces que quieras repetir el salto en la animación Edge.

Image012

12.   Ahora llega el turno de abrir Adobe Edge y crear una nueva animación a través del comando de menú File>New. En el panel de propiedades podemos fijar las dimensiones de nuestro Banner. En mi caso fijé unas dimensiones de 720 píxeles de ancho por 200 de alto. También en este panel podemos cambiar el color del escenario.

Image013

13.   Importamos el Gif animado que acabamos de crear en Photoshop mediante el comando de menún File>Import… Aparecerá nuestro personaje dando sus saltitos dentro del escenario.

Image015

14.   Como al principio el personaje no se desplaza (mientras está tomando impulso). Arrastraremos el cabezal inferior hasta  la marca de tiempo donde queremos que empiece a desplazarse, en mi caso a los dos segundos (recuerda, medio segundo de los dos primeros cuadros y 1 del tercero).

Image017

15.   Ahora toca arrastrar el cabezal superior que define el punto final de la transformación. Lo arrastraremos a la marca de tiempo que salga resultante de sumar la duración del tiempo del salto (en mi caso 0,3 segundos, 0,1+0,1+0,1) al tiempo de la primera marca adonde arrastramos el cabezal inferior.

Image018

16.   Asegúrate que el botón del “Auto-Keyframe” y “generate Smooth Transitions” están activados.

Image019

17.   A continuación desplazamos el personaje hacia la derecha en el eje horizontal el espacio que deseemos (para desplazarlo solamente en el eje horizontal es necesario que pulse la tecla mayúsculas del teclado mientras se arrastra el personaje hacia la derecha). Mientras más espacio en píxeles dejes más exagerado se mostrará el salto. Haz varias pruebas para no pasarte o el salto perdería credibilidad. Cuando hayas realizado esta operación podrás ver como en la línea de tiempo aparece una tira entre el cabezal inferior y el cabezal superior que representa el desplazamiento que acabamos de crear.

Image027

18.   El personaje ahora debe permanecer parado mientras vuelve a coger impulso. El tiempo que debe estar parado coincide con la duración de los primeros cuadros del gif animado, o sea dos segundos, así que ahora toca arrastrar el cabezal inferior otros 2 segundos a la derecha en la línea de tiempo.

Image028

19.   De nuevo toca arrastrar el cabezal superior 0,3 segundos para realizar una segunda secuencia de salto. Desplazamos de nuevo el personaje hacia la derecha en ese punto y aparecerá una nueva tira que simboliza el nuevo desplazamiento.

Image029

20.   Repetimos los pasos 17 y 18 tantas veces como saltos queremos que realice el personaje hasta que salga por la derecha de la pantalla.

Image030

21.   Otra opción es variar la opacidad del personaje al 0% tras el último salto. Para ello seleccionamos al personaje en el escenario y variamos el parámetro “Opacity” en el panel “Properties”. Asegúrate que la posición del cabezal inferior (inicio de la acción) y el cabezal superior (final de la acción) están en el lugar correcto de la línea de tiempo, esto es coincidiendo en el tiempo con el último salto.

Image031

22.   Para previsualizar el resultado no te fíes de la reproducción en el propio Edge ya que no podrás apreciar la sincronización con los cuadros del gif animado, mejor selecciona el comando de menú “File>Preview In Browser”.

23.   Si te gusta el resultado simplemente tienes que guardar los cambios en una carpeta y colgar el tu web los ficheros que Edge crea en esa carpeta a excepción del fichero .edge que no es necesario para publicar pero sí que debes guardar en tu disco por si quieres realizar modificaciones en el futuro.

Aquí puedes ver un ejemplo con el resultado.

http://www.tonilirio.com/edgelab/salto/