Animación e Interactividad HTML5 con Adobe Edge Animate CC
4.6 (44 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.
378 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Animación e Interactividad HTML5 con Adobe Edge Animate CC to your Wishlist.

Add to Wishlist

Animación e Interactividad HTML5 con Adobe Edge Animate CC

Aprende a crear contenido dinámico e interactivo en HTML5 de forma fácil para usar en web o publicaciones digitales
4.6 (44 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.
378 students enrolled
Created by Marlon Ceballos
Last updated 9/2014
Spanish
Learn Fest Sale
Current price: $10 Original price: $40 Discount: 75% off
10 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Crear animaciones en HTML5
  • Crear interactividad sin programar en HTML5
  • Agregar el contenido creado con Edge Animate en sitios web o publicaciones digitales
  • Crear contenido dinámico e interactivo que sea "responsive"
  • Insertar código jQuery para maximizar las características interactivas de Edge Animate
  • Publicar tus animaciones para ser usadas en Dreamweaver, Muse, InDesign, iBooks, entre otras aplicaciones
View Curriculum
Requirements
  • Dominio del computador (mac o pc)
  • Adobe Edge Animate instalado en tu computador para realizar las prácticas. Puedes descargar gratuitamente Edge Animate 1.5 registrándote en http://creative.adobe.com
Description

En éste curso aprenderás a crear contenido dinámico e interactivo en HTML5 sin necesidad de programar o escribiendo muy poco código de forma fácil. Edge Animate es una herramienta muy intuitiva con una interfaz similar a Flash o After Effects con la cual podrás generar contenido basado en estándares (HTML5, CSS3 y JS) el cual puede ser visto en cualquier dispositivo de escritorio o móvil.

El curso inicia cubriendo desde los aspectos más básicos de la aplicación pasando por 4 talleres prácticos y finalizando con aspectos como responsive design y publicación a diferentes formatos.

En todos los talleres he incluído el uso de snippets de código y las escritura manual del mismo (muy fácil) para que tengas una idea clara de la capacidades de Edge Animate cuando combinas sus herramientas gráficas con el código.

Aunque te recomiendo ver el curso en orden, también puedes ver directamente los talleres prácticos y revisar en los primeros capítulos los conceptos de los cuales tengas dudas. Las secciones que lo requieren tienen archivos para descarga con los cuales podrás replicar los ejercicios y talleres de este curso.

A éste curso le estaré agregando permanentemente todas las novedades agregadas por Adobe para mantenerlo actualizado a las últimas capacidades y características de Edge Animate.

Si deseas contratar éste u otro curso para un grupo empresarial o universidad de forma presencial u online puedes contactarme desde el sitio web de Xpert o por mensaje privado desde mi perfil de Udemy.

Última actualización: Junio de 2014 (Edge Animate CC 4.0)

Who is the target audience?
  • Diseñadores gráficos
  • Diseñadores web
  • Diseñadores multimedia
  • Cualquier persona que desee aprender a crear contenido dinámico e interactivo compatible con todos los dispositivos que soporten HTML5
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 62 Lectures Collapse All 62 Lectures 06:21:44
+
Conceptos básicos
5 Lectures 23:46
En éste video explicamos qué es Edge Animate
Preview 03:44

En éste video explicamos cómo obtener e instalar Edge Animate en versión de prueba o realizando la compra
Cómo obtener Adobe Edge Animate?
05:04

En éste video mostraremos ejemplos de animaciones realizadas con Animate
Ejemplos de animaciones realizadas con Animate
04:03

En este video mostramos y explicamos los archivos que conforman una composición de Edge Animate
Anatomía de un archivo de Animate
05:13

En este video explicamos que los elementos que creamos en Animate son basados en HTML y CSS
Animate es HTML y CSS
05:42
+
Interfaz de Animate
3 Lectures 17:19
En éste video mostramos las diferentes áreas de la pantalla de bienvenida de Animate.
Preview 04:34

En éste video mostraremos y describiremos brevemente los diferentes paneles que hacen parte de la interfaz de Animate
Interfaz general
03:31

En éste video mostramos cómo configurar el espacio de trabajo y guardarlo y cómo configurar atajos de teclado
Espacios de trabajo y personalización de atajos de teclado
09:14
+
Creación de contenido en Animate
8 Lectures 53:00
En éste video mostramos el proceso de crear un nuevo archivo de Animate
Crear un nuevo archivo
05:30

En éste video mostramos el uso de las herramientas de dibujo que encontramos en Animate
Preview 11:14

En éste video mostramos cómo realizar transformaciones a los elementos que tenemos en Animate
Transformación de objetos
06:03

En éste video mostramos cómo crear y formatear texto dentro de Animate
Creación de texto
05:44

En éste video mostramos cómo usar en Animate fuentes web de la librería TypeKit
Trabajar con Web Fonts: TypeKit
10:19

En éste video mostramos cómo usar en Animate fuentes web de las librerías de Edge Web Fonts y Google Fonts
Web Fonts: Edge Web Fonts y Google Fonts
04:39

En este video mostramos cómo podemos usar de forma fácil las fuentes web de la librería TypeKit en Edge Animate CC
Trabajar con Web Fonts: TypeKit (la forma fácil)
02:06

En éste video mostramos el proceso de importación y gestión de contenido externo en varios formatos
Importar y gestionar contenido externo
07:25
+
Colores y filtros
3 Lectures 21:27
En este video mostramos cómo cambiar el color de relleno y de contorno de los elementos dentro de Edge Animate
Aplicar colores a los rellenos y contornos
07:40

En este video mostramos cómo aplicar colores esfumados a los elementos que tenemos en Edge Animate
Aplicar esfumados o degradados
07:17

En  este video mostramos cómo aplicar sombras y filtros a los elementos en Edge Animate y hablamos de la compatibilidad con los navegadores
Aplicar sombras y filtros
06:30
+
Animación
9 Lectures 50:18
En éste video mostramos cómo realizar animaciones y transiciones manuales en Animate
Animación manual
08:42

En este video mostramos cómo realizar animaciones con las funciones de generación automática de fotogramas clave y transiciones
Preview 04:39

En éste video mostramos cómo usar la función Toggle Pin para agilizar el proceso de animación
Uso de la función Toogle Pin para animar
05:38

En éste video mostramos cómo agregar efectos de aceleración y/o desaceleración (easing) a las animaciones
Agregar efectos de aceleración
07:04

En éste video mostramos cómo copiar y pegar animaciones para ser reutilizadas
Copiar y pegar animaciones en Animate
04:18

En éste video mostramos cómo generar un loop para que una animación se repita indefinidamente
Crear un loop de animación
03:04

En éste video mostramos cómo cambiar la duración y ubicación de una animación para hacer ajustes y ediciones a la misma
Cambiar la duración o ubicación de una animación
03:38

En este video mostramos cómo crear animaciones con rutas de movimiento en Edge Animate CC
Crear animaciones con rutas de movimiento
06:30

En éste video mostramos como animar elementos de una página HTML ya creada
Animar elementos de una página HTML
06:45
+
Trabajo con símbolos en Animate
4 Lectures 17:22
En éste video mostramos el proceso de crear símbolos
Preview 07:42

En éste video mostramos cómo crear animaciones dentro de los símbolos
Crear animaciones dentro de los símbolos
04:16

En éste video mostramos como controlar la animación de la línea de tiempo de un símbolo
Controlar la animación de un símbolo
02:33

En éste video mostramos la forma como podemos compartir símbolos entre diferentes documentos
Compartir símbolos entre documentos
02:51
+
Acciones e interactividad
4 Lectures 29:27
En este video mostramos cómo usar Activadores o Triggers para controlar la línea de tiempo y generar interactividad básica
Agregar acciones en la línea de tiempo con activadores
09:34

En este video mostramos cómo agregar acciones a los objetos y cómo controlar la línea de tiempo principal mediante éstos objetos
Controlar la línea de tiempo con acciones en botones
05:18

En este video mostramos cómo controlar la línea de tiempo de un símbolo desde la línea de tiempo principal mediante botones.
Controlar la línea de tiempo de un símbolo
07:44

En este video mostramos cómo trabajar con las etiquetas o Labels y con el panel de Código el cual permite gestionar todo el código de la animación.
Trabajar con etiquetas y el panel Código
06:51
+
Talleres
9 Lectures 01:29:10
En este video creamos la estructura de un quiz sencillo
Quiz básico (escructura)
10:14

En este video agregamos las acciones para dar la funcionalidad a quiz
Preview 05:52

En este video generamos la animación de los elementos que hacen parte del slideshow básico
Slideshow básico (animación)
07:04

En este video agregamos las acciones para dar funcionalidad a los botones del slideshow básico
Slideshow básico (configurar botones)
07:50

En este video realizamos los ajustes iniciales para realizar un slideshow con carga externa de imágenes
Slideshow con carga externa (ajustes iniciales)
06:20

En este video creamos las acciones para realizar la carga externa de imágenes en el slideshow
Slideshow con carga externa (configurar la carga de imágenes)
14:03

En este video realizamos los ajustes iniciales de un reproductor de videos YouTube
Reproductor de vídeos YouTube (ajustes iniciales)
17:18

En este video creamos las acciones para realizar la carga de imágenes externa en el reproductor de video
Reproductor de videos YouTube (configurar las cargas)
14:34

En este video mostramos cómo podemos usar eventos Swipe para dispositivos touch en Edge Animate CC
Uso de eventos Swipe
05:55
+
Animaciones Responsive
3 Lectures 18:45
En este video mostramos cómo hacer responsive el Escenario de la animación
Hacer responsive el Escenario
04:49

En este video mostramos diferentes formas para hacer responsive los objetos individuales dentro del Escenario
Hacer responsive los objetos individuales
09:27

En este video mostramos cómo usar los ajustes preestablecidos para hacer responsive los elementos del Escenario
Usar ajustes preestablecidos
04:29
+
Compatibilidad con navegadores antiguos
3 Lectures 10:38
En este video mostramos cómo agregar una imagen de Poster que se visualiza en publicaciones digitales
Agregar imagen de Poster
03:20

En este video mostramos cómo crear Escenarios de nivel inferior para que los navegadores sin soporte a HTML5 vean un contenido alterno
Escenario de nivel inferior
03:13

En este video mostramos cómo crear precargas en las animaciones
Precargas
04:05
4 More Sections
About the Instructor
Marlon Ceballos
4.4 Average rating
1,415 Reviews
21,224 Students
21 Courses
Adobe Community Professional y Adobe Certified Instructor

Consultor en tecnologías y aplicaciones Adobe para multimedia, web y publicaciones digitales con más de 20 años de experiencia asesorando empresas latinoamericanas que van desde diarios e imprentas hasta agencias interactivas.

Adobe Community Professional, Adobe Certified Expert y Adobe Certified Instructor en las últimas versiones de Photoshop, Lightroom Illustrator, InDesign, Acrobat, Flash, Dreamweaver y Muse. Posee las certificaciones especializadas ACE - Design Master y ACE - Web Master. Ha desarrollado y grabado cursos para Lynda y Udemy.

Actualmente es director de Xpert[dot]co, un centro de capacitación online sobre tecnologías gráficas y de Xpert[dot]video, una biblioteca de contenidos de aprendizaje.