Aprende Edge Animate sin sufrimiento

Edge Animation es un software sencillo de animación, que utiliza HTML5, CSS3 y JavaScript para realizar animaciones que se pueden observar en cualquier dispositivo móvil y los dispositivos modernos.

Por medio de Edge Animate podremos hacer animaciones de forma muy sencilla por medio de líneas de tiempo, capas o layes, lo cual facilita mucho el uso de HTML5 y CSS3.

Una forma muy común de trabajar en la web, es realizar las imágenes en paquetes especializados, y animar en otros, Edge Animate nos permite importar todos los formatos de la Web y también en el formato SVG de vectores.

Aunque Edge Animate no es propiamente un paquete de diseño, nos permite crear formas geométricas con las limitaciones y bondades que tiene HTML5 y CSS3.

Otra de las formas básicas que podemos hacer en Edge Animate son las elipses y círculos.

Una herramienta fundamental para el diseño es el manejo de guías y reglas. Aunque en Edge Animate no llegan a la sofisticación de otras herramientas de diseño especializadas, nos permitirán armar de manera profesional nuestras animaciones.

El texto es una parte fundamental en el diseño de cualquier aplicación interactiva. En Edge Animate manejaremos el texto con gran facilidad y podremos importar fuentes web sin mayor problema.

Una forma muy sencilla y poderosa de animación será el uso de PIN. Aunque al inicio resulta un poco particular, con su uso veremos las ventajas de esta herramienta.

Una forma de simplificar las animaciones complejas, será el poder agrupar los elementos gráficos. Edge Animate nos permitirá hacerlo de forma muy sencilla y lógica.

El control del tiempo es fundamental en cualquier animación. En este video veremos las herramientas con las que contamos en Edge Animate para acortar o alargar el tiempo de las animaciones.

Con Edge Animate no será muy sencillo mostrar y ocultar los objetos en el escenario, sincronizándolos en la línea de tiempo con las demás animaciones.

Con Edge Animate será muy sencillo sustituir nuestras imágenes sin necesidad de volver hacer las animaciones.

Otra herramienta muy poderosa será copiar una animación y pegarla en otro objeto, lo cual nos permitirá mantener la consistencia en nuestro trabajo y ser más eficientes.

Cada una de las animaciones podremos modificarlas al inicio, al final o en ambas partres, por medio de la aceleración o atenuación.

En este video veremos cómo podemos modificar el tiempo total de una animación en forma proporcional en toda la línea de tiempo, ya sea reducir o aumentar los tiempos de manera fácil y flexible.

Podremos hacer animaciones anidadas en símbolos en Edge Animate, lo cual nos permitirá realizar animaciones complejas, incluso juegos y aplicaciones más complicadas.

A diferencia de otros paquetes de animación, como Flash, las líneas de tiempo en Edge Animate no se repiten en forma automática. En este video veremos cómo hacer un loop para realizar una animación continua.

Una vez que tenemos un símbolo o una animación animada, por lo general hay que hacer que esta se mueva en la línea de tiempo, permitiéndonos hacer animaciones mucho más elaboradas de forma sencilla y ordenada.

Por medio de la herramienta Clip podremos hacer efectos tipo máscara animada en cualquiera de nuestros objetos.

Otro recurso con el que contaremos en Edge Animate es animar las sombras de los objetos, ya sea una sombra interna o externa. En este video veremos cómo hacerlo.

Por medio de los comandos "playback" podremos controlar la línea de tiempo de un símbolo desde la línea de tiempo del escenario de manera ordenada y sin sorpresas.

La base de la interactividad de la aplicación con el usuario será el manejo de eventos, ya sean del ratón o del teclado. En este video veremos los principios de su manejo con Edge Animate.

Parte fundamental de cualquier proceso interactivo serán los botones. Aunque Edge Animate no los tiene como tal, a diferencia de otros paquetes de animación como Flash, los podremos simular en forma sencilla.

Una forma ordenada de manejar la línea de tiempo, con respecto al manejo de los eventos, será el uso de etiquetas. En este video veremos cómo crear, modificar y eliminarlas..

Una forma clásica de interacción, es manejar las líneas de tiempo de un símbolo por medio de otros elementos, por lo general botones, lo cual dispara nuestras posibilidades de animación en Edge Animate.

Por medio de la etiqueta <iframe> podremos integrar servicios como el de los mapas de Google, la cual nos dará mucha vista a nuestros desarrollos en Edge Animate.

Por medio de la etiqueta de HTL <iframe> podremos integrar videos de youtube, o de cualquier otro servicio similar, en nustras animaciones de Edge Animate.

Un comando que nos será de mucha utilidad es el de "remove", pues podemos vaciar el contenido de un elemento sin eliminarlo.

Otro de los recursos que tenemos para la interactividad con el usuario, será saltar a un link solicitado por medio de un evento. En este video veremos cómo hacerlo con Edge Animate.

Por medio del método html() (propio de jQuery) podemos añadir etiquetas HTML a un texto en tiempo de ejecución, según detectemos un evento del usuario.

Por medio de Edge Animate podemos detectar fácilmente los eventos del teclado, lo que permitirá hacer muy interactiva nuestra animación.

En Edge Animate podemos manejar variables locales y globales, con lo que podremos hacer programas complejos, ya que tenemos también estructuras condicionales, propios de JavaScript.

También tendremos ciclos, con lo que podremos hacer programas robustos basados en JavaScript.

Ya que tenemos nuestra animación terminada, estamos listos para publicarlo y luego insertarlo en la página web. Aquí veremos los archivos que son generados en dicho proceso.

En este video veremos las opciones para publicar nuestras animaciones en Edge Animate.

Como usted sabe, los desarrollos web tienen el eterno problema de IE 6-8 (Internet Explorer 6, 7 y 8). Edge Animate nos permitirá mostrar una pantalla alterna en caso de que nuestro navegador no soporte HTML5+CSS3.

Otra herramienta que nos ayudará prever que nuestra obra de arte no se vea en un navegador antiguo, Edge Animate nos permitirá sacar una "fotografía" o "póster", con lo cual podremos documentar en caso de navegadores antiguos, en especial IE6-8.

En este video veremos cómo anexar precargadores ya creados para nosotros, los cuales serán anexados a nuestras animaciones sin necesidad de programación. ¡Fácil!

Ya que tenemos nuestra animación, su preparador, su página para navegadores antiguos, estamos listos para incrustar nuestro proyecto en las páginas web. En este video veremos cómo hacerlo.

Gracias por realizar este curso. Hasta pronto.