Aprende Edge Animate sin sufrimiento
4.7 (7 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.
296 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende Edge Animate sin sufrimiento to your Wishlist.

Add to Wishlist

Aprende Edge Animate sin sufrimiento

La herramienta fundamental para el diseño Web de animaciones para navegadores modernos.
4.7 (7 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.
296 students enrolled
Last updated 4/2015
Spanish
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • Conocimientos generales sobre diseño y desarrollo web
  • Conocimientos generales en el uso de herramientas de diseño
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.

Who is the target audience?
  • Diseñadores web
  • Desarrolladores multimedia
Students Who Viewed This Course Also Viewed
Curriculum For This Course
42 Lectures
04:06:36
+
Bienvenido al curso de Edge Animate
1 Lecture 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.

Preview 06:37
+
Introducción a Edge Animate
7 Lectures 52:43

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.

Preview 06:42

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.

Realizar una animación básica con Edge Animate
06:38

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.

Importar imágenes y archivos vectoriales a Edge Animate
06:05

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.

Crear formas geométricas: los rectángulos
08:54

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

Crear formas geométricas: las elipses
08:38

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 manejo de guías y reglas en Edge Animate
07:22

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.

El manejo de texto en Edge Animate
08:24
+
Animaciones básicas con Edge Animate
8 Lectures 38:08

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.

El manejo del PIN para hacer animaciones
08:32

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.

Agrupar los objetos para la animación
06:39

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.

Modificar el tiempo de una animación
04:12

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.

Mostrar y ocultar objetos con la propiedad Display
06:37

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

Remplazar imágenes de una animación
02:51

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.

Copiar una animación y pegarla en otro objeto
03:01

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

Atenuar y acelerar una animación con Edge Animate
03:30

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.

Modificar el tiempo total de todas las animaciones
02:46
+
Animaciones avanzadas en Edge Animate
6 Lectures 33:18

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

Crear símbolos para animaciones anidadas
04:19

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.

Crear un loop en una animación en Edge Animate
02:41

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.

Animar símbolos con Edge Animate
06:22

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

Animaciones con la herramienta Clip
06:30

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.

Animar sombras con Edge Animate
07:10

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.

Los comandos playback
06:16
+
El manejo de eventos e interactividad con Edge Animate
12 Lectures 01:19:22

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.

El manejo de eventos en Edge Animate
09:27

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.

Simulación de botones en Edge Animate
08:13

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

El manejo de etiquetas en la linea de tiempo
04:44

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.

Controlar los símbolos desde otros objetos
07:34

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.

Integrar un mapa de Google en la animación
05:14

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.

Integrar un video de youtube en Edge Animate
04:22

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

Remover el contenido de un objeto en Edge Animate
04:51

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.

Llamar a un link desde Edge Animate
04:21

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.

Añadir texto HTML en tiempo de ejecución con Edge Animate
06:28

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

Manejar los eventos del teclado con Edge Animate
07:35

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.

El uso de variables
09:27

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

Manejo de ciclos con Edge Animate
07:06
+
Publicar e integrar una animación a las páginas HTML
6 Lectures 29:09

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.

Publicar una animación de Edge Animate
03:37

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

Opciones para hacer una publicación en Edge
05:49

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.

Crear un escenario para navegadores "antiguos"
04:51

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.

Crear un poster de la animación
03:35

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!

Crear un precargador para una animación en Edge
03:57

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.

Integrar una animación de Edge Animate a una página HTML
07:20
+
Despedida del curso
2 Lectures 07:17

Gracias por realizar este curso. Hasta pronto.

Hasta pronto
07:16

Ejercicios del curso Edge Animate
00:01
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
979 Reviews
12,996 Students
36 Courses
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.