Adobe Animate CC - Máster: Animación e interactividad HTML5
4.6 (185 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
793 students enrolled

Adobe Animate CC - Máster: Animación e interactividad HTML5

Aprende todo sobre animación e interactividad con Animate: desde dibujar elementos hasta animar con código de JavaScript
4.6 (185 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
793 students enrolled
Created by Marlon Ceballos
Last updated 10/2017
Spanish
Spanish [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 21.5 hours on-demand video
  • 1 article
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Conocer la interfaz y flujo de trabajo de Adobe Animate CC
  • Dibujar y animar elementos usando diferentes técnicas de interpolación
  • Crear interactividad usando Snippets de código
  • Conceptos fundamentales de programación
  • Trabajar con imágenes, audio y video
  • Controlar animaciones y diferentes elementos visuales en Adobe Animate usando código JavaScript
  • Usar JavaScript y las librerías CreateJS para crear diferentes tipos de elementos interactivos en Adobe Animate
Requirements
  • Adobe Animate versión CC o posterior (para prácticas)
  • Dominio del sistema operativo Mac o Windows
Description

Hola! Soy Marlon Ceballos, Adobe Community Professional y consultor de aplicaciones Adobe con más de 20 años de experiencia pedagógica. Te doy la bienvenida al curso “Adobe Animate CC - Máster: Animación e interactividad HTML5”. Animate es como Adobe ha renombrado a Flash y es la aplicación para la creación de contenido dinámico e interactivo en formato HTML5 como animaciones, banners, contenido eLearning, etc, los cuales podrás usar en sitios web y/o publicaciones digitales.

Al finalizar este curso estarás en capacidad de crear y publicar contenidos dinámicos e interactivos empezando por el proceso de dibujo y/o importación de elementos, pasando por el proceso de animación usando técnicas de interpolación hasta agregar interactividad usando código de JavaScript el cual serás capaz de planear y escribir.

Se trata de un curso bastante extenso compuesto por 194 lecciones organizadas en 31 secciones las cuales suman 22 horas de contenido. Si eres un usuario que ya conoce este programa no necesitas ver todos los temas ni seguir un orden específico, por el contrario, puedes ver la descripción de cada sección y lección y decidir qué temas ver.

La metodología usada está basada en ejemplos prácticos por lo cual éste curso incluye los archivos de ejemplo para que puedas descargarlos y practicar cada uno de los ejercicios mostrados.

Regístrate ya en este curso y aprende a usar Adobe Animate llevando tus procesos creativos a otro nivel mediante el uso de animación e interactividad combinado con el uso de código JavaScript.

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.

Importante: Si ya has comprado mi curso básico o avanzado de Animate no necesitas comprar este curso pues está conformado por el contenido de esos 2 cursos.

Who this course is for:
  • Diseñadores
  • Creativos
  • Animadores
  • Creadores de contenido eLearning
  • Programadores que quieran conocer cómo aplicar JavaScript en Adobe Animate
  • Cualquier persona que desee aprender a crear contenido dinámico e interactivo para publicar en sitios web y/o publicaciones digitales
Course content
Expand all 193 lectures 21:29:22
+ Introducción
2 lectures 03:43

Bienvenida y breve descripción del curso.

Preview 03:34

En esta lección se encuentran los archivos usados en los videos los cuales puedes descargar para practicar.

Archivos de ejemplo para descarga
00:09
+ Conocer los conceptos básicos de Adobe Animate
6 lectures 13:32

Adobe Animate (antes Adobe Flash) es la aplicación para la creación de contenido dinámico e interactivo.

Preview 01:36

Usando Adobe Animate podemos crear animaciones e interactividad como elementos publicitarios, contenido eLearning y juegos, entre otros. Animate permite crear diferentes tipos de documentos entre los cuales encontramos documentos HTML5 Canvas.

Preview 03:10

Los documentos publicados en formato SWF necesitan el uso de un plug-in para ser reproducidos lo cual hace que no sean compatibles con dispositivos móviles.

Por qué no usar ActionScript 3
01:29

Ya que no es recomendable usar el lenguaje AS3 usaremos como alternativa el lenguaje Javascript para agregar interactividad a los documentos en Adobe Animate.

Preview 03:28

Dependiendo de la complejidad del documento que vamos a crear podríamos necesitar o no escribir código Javascript.

Necesito programar para usar Animate?
02:22

En este video conoceremos los archivos generados en el momento de la publicación de archivos de tipo HTML5 Canvas.

Archivos HTML5 Canvas
01:27
+ Conocer el área de trabajo y navegar documentos
13 lectures 01:23:01

Cuando abrimos Adobe Animate nos encontramos con la pantalla de bienvenida donde encontramos múltiples recursos.

Preview 08:51

En este video aprenderemos a crear diferentes tipos de documentos de Adobe Animate y a guardarlos.

Crear y guardar documentos de Adobe Animate
08:38

La interfaz de Animate está organizada en paneles que permiten realizar diferentes tipos de tareas.

Conocer la interfaz general de Adobe Animate
04:04

El Escenario o es el área donde ubicamos los elementos que van a aparecer en la publicación final. El Area de trabajo o Stage es la parte que rodea el Escenario y donde ubicamos elementos de forma temporal.

Conocer el Escenario y el Area de trabajo
04:20

En el Panel Biblioteca o Library almacenamos los elementos que importamos de forma externa así como los símbolos.

Conocer el Panel Biblioteca
04:53

El Panel Bibliotecas Creative Cloud o CC Libraries permite almacenar y gestionar elementos gráficos que pueden ser accedidos desde cualquier documento de Animate y de otras aplicaciones.

Conocer el Panel Bibliotecas Creative Cloud
10:42

En el panel línea de tiempo o Timeline creamos y gestionamos las animaciones mientras que en el panel Capas o Layers organizamos elementos para animarlos de forma independiente.

Conocer la Línea de tiempo y Capas
04:44

El Panel de herramientas o Tools panel agrupa las diferentes herramientas con las que cuenta Adobe Animate.

Conocer el Panel de herramientas
04:26

El Panel Propiedades o Properties permite identificar y modificar las propiedades de los elementos elementos seleccionados.

Conocer el Panel Propiedades
09:16

Podemos personalizar la posición y funcionalidad de los diferentes paneles que hacen parte de la interfaz de Adobe Animate.

Trabajar con paneles
06:20

Los Espacios de trabajo o Workspaces permiten guardar y reutilizar la personalización de los paneles en Adobe Animate.

Trabajar con los Espacios de trabajo
07:17

Es posible cambiar el tipo de documento original de un archivo de Adobe Animate, especialmente si se trata de un documento sencillo.

Convertir entre tipos de documentos
03:45

Las tareas de Zoom y desplazamiento en documentos son tareas sencillas pero importantes ya que facilitan el trabajo general en Adobe Animate.

Usar el Zoom y desplazamiento en documentos
05:45
+ Importar assets
10 lectures 01:20:51

En este video conoceremos los formatos de importación soportados en los documentos HTML5 Canvas.

Conocer los formatos de importación soportados
02:08

En este video conoceremos el proceso de importación de imágenes en documentos HTML5 Canvas.

Importar imágenes
07:19

Después de importar imágenes en un documento de Adobe Animate configuramos el proceso de optimización buscando un balance entre el peso y la calidad de las mismas.

Optimizar imágenes
11:38

Los archivos nativos de Photoshop tienen extensión .psd y al importarlos en Animate podemos elegir múltiples opciones como las capas a importar.

Importar archivos de Photoshop
16:13

Los archivos nativos de Illustrator tienen extensión .ai y al importarlos en Animate podemos elegir múltiples opciones como las capas a importar.

Preview 07:44

Después de importar archivos en un documento de Adobe Animate es posible hacer ediciones a las mismas usando otras aplicaciones.

Editar archivos importados
08:21

Podemos importar elementos en documentos de Adobe Animate simplemente copiando y pegando.

Copiar y pegar
03:39

Un gif animado es una colección de imágenes agrupadas en un archivo las cuales se muestran de forma progresiva. Este tipo de archivos pueden importarse en documentos de Adobe Animate.

Importar un gif animado
09:36

Algunas aplicaciones, como las aplicaciones de trabajo con video, permiten exportar clips o secciones de video como secuencia de imágenes. Este tipo de archivos pueden importarse en documentos de Adobe Animate.

Importar secuencia de imágenes
03:52

El comando Trace bitmap permite convertir imágenes a vectores.

Vectorizar imágenes con Trace bitmap
10:21
+ Realizar trabajo básico con elementos
7 lectures 46:26

En este video aprenderemos a usar las herramientas Selección y Subselección.

Usar las herramientas Selección y Subselección
06:32

En este video conoceremos el uso de otras herramientas de selección como las herramientas Lasso y Polígono y a usar otras técnicas de selección usando las herramientas Selección y Subselección.

Usar otras herramientas y otras técnicas de selección
06:01

Dependiendo del tipo de elemento con el cual estemos trabajando debemos usar técnicas que permitan seleccionar ya sea el contorno, el relleno o ambas características de dichos elementos.

Preview 04:12

El panel Alinear o Align permite alinear y distribuir elementos basados en la selección o basados en el Escenario o Stage.

Alinear y distribuir elementos
10:07

Podemos agrupar elementos para que Adobe Animate los maneje como si fueran un solo elemento.

Trabajar con grupos
05:26

El orden de apilamiento es el orden en el cual se organizan los elementos que vamos creando en los documentos de Adobe Animate. Podemos cambiar ese orden de apilamiento así como bloquear y desbloquear los elementos.

Modificar el orden de apilamiento y bloquear elementos
04:27

Las Capas o Layers permiten organizar elementos creados en documentos de Adobe Animate.

Organizar elementos en capas
09:41
+ Crear dibujos básicos en Animate
7 lectures 51:37

En Adobe Animate podemos crear dos tipos diferentes de elementos: Objetos combinados o Merge Objects y Objetos de dibujo y Drawing Objects.

Preview 09:09

Después de crear un elemento en un documento de Adobe Animate podemos cambiar su tipo.

Convertir entre tipos de dibujo
03:33

Podemos crear elementos geométricos básicos usando las herramientas rectángulo, óvalo y polígono.

Usar las herramientas geométricas básicas
07:59

Las herramientas primitivas son más flexibles especialmente por que permiten modificar propiedades de los elementos después de haberlos dibujado.

Usar las herramientas primitivas
06:40

La herramienta Lápiz o Pencil tool permite dibujar de forma libre.

Usar la herramienta Lápiz
03:49

En Adobe Animate tenemos disponibles dos herramientas de pincel: Herramienta de Pincel o Brush Tool y la herramienta Pincel de Pintura o Paint Brush Tool.

Usar las herramientas de pincel
14:29

La herramienta borrador o Eraser tool permite eliminar elementos o secciones de los mismos.

Usar la herramienta borrador
05:58
+ Dibujar con la herramienta Pluma
5 lectures 35:29

Las formas básicas pueden ser modificadas modificando nodos, líneas de control y puntos de control.

Preview 13:09

A partir de la creación de nodos o anclas podemos crear segmentos rectos.

Dibujar segmentos rectos
03:02

Los segmentos curvos requieren el manejo de líneas de control y puntos de control.

Dibujar segmentos curvos
07:37

En este video aprenderemos a dibujar formas que combinen segmentos curvos y segmentos rectos.

Combinar curvas con rectas
04:50

Realizaremos un corto ejemplo práctico de dibujo usando una plantilla.

Dibujar sobre una plantilla
06:51
+ Transformar elementos
4 lectures 28:21

Mediante la herramienta de selección nosotros podemos editar la forma de los elementos de dibujo en Adobe Animate.

Realizar transformaciones básicas de forma
03:27

La Herramienta de transformación libre o Free Transform tool permite realizar diferentes tipos de transformaciones a los elementos en Adobe Animate.

Usar la herramienta de transformación libre
08:37

Bajo el submenú Transformar o Transform agrupa varios comandos de transformación disponibles en Adobe Animate.

Usar los comandos del submenú Transformar
08:39

El panel Transformar o Transform permite realizar transformaciones a los elementos en Adobe Animate.

Usar el panel Transformar
07:38
+ Usar el color en Adobe Animate
9 lectures 01:03:05

Existen diferentes modelos de color con los cuales podemos trabajar desde varios paneles como el panel de Color.

Preview 12:43

En este video aprenderemos a editar los colores de relleno y/o contorno en los elementos de nuestro documento.

Editar colores de relleno y/o contorno
05:44

Cuando debemos usar varias veces un color una forma de trabajo eficiente es crear muestras de color o Swatches.

Crear muestras de color
04:09

Las Muestras etiquetadas o Tagged swatches son Muestras de color que generan un vínculo con los elementos en donde se apliquen dichas muestras.

Trabajar con Muestras etiquetadas
04:28

Es posible compartir muestras de color entre diferentes documentos de Adobe Animate e incluso con Adobe Photoshop.

Compartir muestras de color
03:23

Adobe cuenta con un servicio web llamado Color donde podemos crear Temas de color o Color Themes los cuales son grupos de colores que podemos guardar para ser accedidos desde cualquier aplicación como Adobe Animate.

Trabajar con Temas de color
10:17

En este video aprenderemos a crear, aplicar y modificar esfumados o Gradients.

Trabajar con esfumados
09:55

En Adobe Animate podemos rellenar elementos con imágenes usando la función Rellenar objetos con imágenes o Bitmap Fill.

Rellenar objetos con imágenes
03:27

La herramienta gotero o Eyedropper nos permite copiar características de color de relleno o contorno de los elementos en Adobe Animate.

Uso el Gotero en Adobe Animate
08:59
+ Trabajar con la Línea de tiempo y con las capas
6 lectures 52:48

En este video conoceremos las propiedades de las Capas o Layers y los diferentes tipos de Capas.

Conocer los tipos de Capas
14:45

La Línea de tiempo o Timeline está seccionada por Fotogramas o Frames que están numerados.

Preview 01:24

En este video crearemos una animación sencilla de tipo cuadro a cuadro o Frame to Frame.

Trabajar con animación cuadro a cuadro
11:05

Podemos realizar diferentes tipos de tareas en los Fotogramas o Frames tales como mover, borrar, copiar, invertir orden, etc.

Trabajar con Fotogramas
10:23

En este video aprenderemos a controlar la Línea de Tiempo o Timeline mediante diversos comandos y opciones.

Controlar la Línea de Tiempo
10:01

Las Etiquetas o Labels son nombres o marcas que podemos agregar a cualquier Fotograma lo cual permite que posteriormente accedamos a esos Fotogramas mediante esas Etiquetas.

Trabajar con Etiquetas en Adobe Animate
05:10