Aprende Edge Animate sin sufrimiento

La herramienta fundamental para el diseño Web de animaciones para navegadores modernos.
4.6 (5 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
242 students enrolled
$20
Take This Course
  • Lectures 42
  • Contents Video: 4 hours
    Other: 0 mins
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2015 Spanish

Course Description

Edge Animate se ha convertido rapidamente en una herramienta fundamental para el diseño Web de animaciones con HTML5, CSS3 y JavaScript, lo cual nos permite visualizarlo desde dispositivos móviles hasta computadoras de escritorio.

En este curso aprenderemos desde los conceptos básicos, los menús, los paneles, la linea de tiempo hasta métodos avanzados de programación y detección de eventos. También veremos la forma de publicar, añadir un preparador sin necesidad de programar e incrustar nuestro trabajo en nuestras páginas web.

What are the requirements?

  • Conocimientos generales sobre diseño y desarrollo web
  • Conocimientos generales en el uso de herramientas de diseño

What am I going to get from this course?

  • Realizar animaciones en HTML5 en forma profesional
  • Realizar baners para páginas Web
  • Realizar animaciones para dispositivos móviles
  • Crear animaciones con interacción con el usuario

What is the target audience?

  • Diseñadores web
  • Desarrolladores multimedia

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

06:37

Edge Animate se ha convertido rápidamente en una poderosa herramienta de animación web con salida para HTML5 y CSS3 que es compatible con todos los dispositivos móviles de todas las marcas.

Section 1: Introducción a Edge Animate
06:42

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.

06:38

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.

06:05

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.

08:54

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.

08:38

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

07:22

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.

08:24

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.

Section 2: Animaciones básicas con Edge Animate
08:32

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.

06:39

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.

04:12

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.

06:37

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.

02:51

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

03:01

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.

03:30

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

02:46

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.

Section 3: Animaciones avanzadas en Edge Animate
04:19

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

02:41

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.

06:22

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.

06:30

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

07:10

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.

06:16

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.

Section 4: El manejo de eventos e interactividad con Edge Animate
09:27

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.

08:13

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.

04:44

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..

07:34

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.

05:14

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.

04:22

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.

04:51

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

04:21

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.

06:28

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.

07:35

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

09:27

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.

07:06

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

Section 5: Publicar e integrar una animación a las páginas HTML
03:37

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.

05:49

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

04:51

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.

03:35

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.

03:57

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!

07:20

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.

Section 6: Despedida del curso
07:16

Gracias por realizar este curso. Hasta pronto.

Ejercicios del curso Edge Animate
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Francisco Javier Arce Anguiano, Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.

Ready to start learning?
Take This Course