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.7 (41 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.
338 students enrolled
$40
Take This Course
  • Lectures 62
  • Contents Video: 6.5 hours
  • 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 2/2013 Spanish

Course 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)

What are the 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

What am I going to get from this course?

  • 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

What 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

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

Section 1: Conceptos básicos
03:44
En éste video explicamos qué es Edge Animate
05:04
En éste video explicamos cómo obtener e instalar Edge Animate en versión de prueba o realizando la compra
04:03
En éste video mostraremos ejemplos de animaciones realizadas con Animate
05:13
En este video mostramos y explicamos los archivos que conforman una composición de Edge Animate
05:42
En este video explicamos que los elementos que creamos en Animate son basados en HTML y CSS
Section 2: Interfaz de Animate
04:34
En éste video mostramos las diferentes áreas de la pantalla de bienvenida de Animate.
03:31
En éste video mostraremos y describiremos brevemente los diferentes paneles que hacen parte de la interfaz de Animate
09:14
En éste video mostramos cómo configurar el espacio de trabajo y guardarlo y cómo configurar atajos de teclado
Section 3: Creación de contenido en Animate
05:30
En éste video mostramos el proceso de crear un nuevo archivo de Animate
11:14
En éste video mostramos el uso de las herramientas de dibujo que encontramos en Animate
06:03
En éste video mostramos cómo realizar transformaciones a los elementos que tenemos en Animate
05:44
En éste video mostramos cómo crear y formatear texto dentro de Animate
10:19
En éste video mostramos cómo usar en Animate fuentes web de la librería TypeKit
04:39
En éste video mostramos cómo usar en Animate fuentes web de las librerías de Edge Web Fonts y Google Fonts
02:06
En este video mostramos cómo podemos usar de forma fácil las fuentes web de la librería TypeKit en Edge Animate CC
07:25
En éste video mostramos el proceso de importación y gestión de contenido externo en varios formatos
Section 4: Colores y filtros
07:40
En este video mostramos cómo cambiar el color de relleno y de contorno de los elementos dentro de Edge Animate
07:17
En este video mostramos cómo aplicar colores esfumados a los elementos que tenemos en Edge Animate
06:30
En  este video mostramos cómo aplicar sombras y filtros a los elementos en Edge Animate y hablamos de la compatibilidad con los navegadores
Section 5: Animación
08:42
En éste video mostramos cómo realizar animaciones y transiciones manuales en Animate
04:39
En este video mostramos cómo realizar animaciones con las funciones de generación automática de fotogramas clave y transiciones
05:38
En éste video mostramos cómo usar la función Toggle Pin para agilizar el proceso de animación
07:04
En éste video mostramos cómo agregar efectos de aceleración y/o desaceleración (easing) a las animaciones
04:18
En éste video mostramos cómo copiar y pegar animaciones para ser reutilizadas
03:04
En éste video mostramos cómo generar un loop para que una animación se repita indefinidamente
03:38
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
06:30
En este video mostramos cómo crear animaciones con rutas de movimiento en Edge Animate CC
06:45
En éste video mostramos como animar elementos de una página HTML ya creada
Section 6: Trabajo con símbolos en Animate
07:42
En éste video mostramos el proceso de crear símbolos
04:16
En éste video mostramos cómo crear animaciones dentro de los símbolos
02:33
En éste video mostramos como controlar la animación de la línea de tiempo de un símbolo
02:51
En éste video mostramos la forma como podemos compartir símbolos entre diferentes documentos
Section 7: Acciones e interactividad
09:34
En este video mostramos cómo usar Activadores o Triggers para controlar la línea de tiempo y generar interactividad básica
05:18
En este video mostramos cómo agregar acciones a los objetos y cómo controlar la línea de tiempo principal mediante éstos objetos
07:44
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.
06:51
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.
Section 8: Talleres
10:14
En este video creamos la estructura de un quiz sencillo
05:52
En este video agregamos las acciones para dar la funcionalidad a quiz
07:04
En este video generamos la animación de los elementos que hacen parte del slideshow básico
07:50
En este video agregamos las acciones para dar funcionalidad a los botones del slideshow básico
06:20
En este video realizamos los ajustes iniciales para realizar un slideshow con carga externa de imágenes
14:03
En este video creamos las acciones para realizar la carga externa de imágenes en el slideshow
17:18
En este video realizamos los ajustes iniciales de un reproductor de videos YouTube
14:34
En este video creamos las acciones para realizar la carga de imágenes externa en el reproductor de video
05:55
En este video mostramos cómo podemos usar eventos Swipe para dispositivos touch en Edge Animate CC
Section 9: Animaciones Responsive
04:49
En este video mostramos cómo hacer responsive el Escenario de la animación
09:27
En este video mostramos diferentes formas para hacer responsive los objetos individuales dentro del Escenario
04:29
En este video mostramos cómo usar los ajustes preestablecidos para hacer responsive los elementos del Escenario
Section 10: Compatibilidad con navegadores antiguos
03:20
En este video mostramos cómo agregar una imagen de Poster que se visualiza en publicaciones digitales
03:13
En este video mostramos cómo crear Escenarios de nivel inferior para que los navegadores sin soporte a HTML5 vean un contenido alterno
04:05
En este video mostramos cómo crear precargas en las animaciones
Section 11: Publicar y usar las animaciones
10:23
En éste video mostramos cómo exportar una animación a web y cómo usarla en Dreamweaver
05:52
En este video mostramos cómo publicar a OAM para Muse, Dreamweaver CS6 e InDesign
03:20
En este video mostramos cómo publicar las animaciones para iBooks Author de Apple
Section 12: Novedades Enero de 2014 (Edge Animate CC 3.0)
07:35

En este video aprenderás a usar y controlar audio en Edge Animate

05:28

En este video aprenderás a controlar audio mediante acciones predefinidas las cuales permitirán hacerlo interactivo

02:50

En este video aprenderás a cargar y usar librerías externas de JavaScript o jQuery.

01:52

En este video aprenderás a centrar y escalar de forma responsive animaciones de Edge Animate dentro de una página web

Section 13: Novedades Junio de 2014 (Edge Animate CC 4.0)
07:10

En este video aprenderás cómo usar y controlar video HTML5 nativo

03:12

En este video aprenderás a importar sprite sheets u hojas de sprites

02:01

En este video aprenderás a usar archivos SVG simplemente copiando y pegando elementos vectoriales desde Illustrator

Section 14: Despedida
00:49
Despedida del curso

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Marlon Ceballos, 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.

Ready to start learning?
Take This Course