Adobe Animate CC - Avanzado: Crear Interactividad HTML5.
0.0 (0 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.
15 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Adobe Animate CC - Avanzado: Crear Interactividad HTML5. to your Wishlist.

Add to Wishlist

Adobe Animate CC - Avanzado: Crear Interactividad HTML5.

Aprende a crear contenidos interactivos HTML5 con Adobe Animate CC (Antes Adobe Flash) usando JavaScript y CreateJS.
0.0 (0 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.
15 students enrolled
Created by Marlon Ceballos
Last updated 9/2017
Spanish
Current price: $10 Original price: $130 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8.5 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Conceptos fundamentales de programación
  • Conceptos de variables, funciones, eventos, condicionales, etc
  • 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
View Curriculum
Requirements
  • Conocimientos básicos de Adobe Animate CC o versiones anteriores (Adobe Flash)
  • Tener instalado el software Adobe Animate CC o posterior para prácticas
Description

Bienvenidos al curso "Adobe Animate CC - Avanzado: Interactividad HTML5". Este curso te permitirá ir más allá de las simples animaciones aprendiendo a usar el lenguaje JavaScript y las librerías del paquete CreateJS para crear elementos interactivos en formato HTML5 como banners y juegos los cuales podrás usar en sitios web y/o publicaciones digitales.

Si no tienes experiencia usando ningún lenguaje de programación no te preocupes, este curso está pensado de forma especial para creativos y diseñadores así que abarcaremos desde los conceptos más básicos y fundamentales para que al final puedas crear tus propios scripts que le darán vida a tus archivos de Adobe Animate.

El curso inicia explicando conceptos básicos como los usos de Animate así como los diferentes tipos de documentos que se pueden crear con esta aplicación. También explicaremos la diferencia entre documentos de tipo ActionScript y documentos de tipo HTML5 Canvas. Posteriormente explicaremos el concepto de Javascript y librerías para continuar con los fundamentos de programación en general. Trabajaremos con variables y funciones para posteriormente iniciar en el mundo de la interactividad trabajando con eventos, condicionales y arreglos, entre otros conceptos. Finalmente aprenderemos a crear instancias de símbolos de forma dinámica y a trabajar con video, audio, imágenes y texto.

El 98% del curso es práctico e incluye 11 ejercicios especialmente diseñados para permitirte entender claramente los resultados geniales que obtendrás al combinar las herramientas gráficas de Adobe Animate con el código de Javascript. Por supuesto podrás practicar cada uno de los ejercicios mostrados usando los archivos de ejemplos que tendrás disponibles para descarga.

Regístrate ya en este curso y aprende a usar Javascript en Adobe Animate para crear elementos interactivos increíbles que generen mas engagement en tus usuarios y clientes.

Aún no conoces Animate? Entonces mira mi curso "Adobe Animate CC - Fundamentos" que puedes encontrar en mi perfil.

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.

Who is the target audience?
  • 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 interactivo HTML5 para publicar en sitios web y/o publicaciones digitales
Students Who Viewed This Course Also Viewed
Curriculum For This Course
80 Lectures
08:15:20
+
Introducción
2 Lectures 02:11

Bienvenida y breve descripción del curso.

Preview 02:07

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

Archivos de ejemplo para descarga
00:04
+
Conceptos básicos de Adobe Animate
5 Lectures 09:30

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

Qué es Adobe Animate
01:23

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.

Usos de Adobe Animate y tipos de documentos
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 02:01

Archivos HTML5 Canvas
01:27
+
JavaScript y Librerías
4 Lectures 05:52

JavaScript es un lenguaje de programación basado en ECMAScript con un amplio soporte en diferentes navegadores web tanto de computadores de escritorio como dispositivos móviles.

Preview 01:30

Las librerías son un conjunto de rutinas prediseñadas las cuales pueden ser reutilizadas evitando de esa manera que nosotros tengamos que escribir ese código.

Librerías
01:50

CreateJS es un conjunto de librerías de Javascript compuesta por: EaselJS, TweenJS, SoundJS y PreloadJS. Estas librerías tienen una sintaxis similar a ActionScript 3.

Preview 01:42

Una confusión común es creer que cuando usamos librerías de JavaScript no necesitamos escribir código de JavaScript. Nosotros no utilizamos solamente código que hace parte de las librerías si no que también escribimos JavaScript puro. 

No usar JavaScript
00:50
+
Fundamentos de JavaScript
11 Lectures 43:39

En este video explicamos aspectos de este curso como el hecho de que no vamos a trabajar con JavaScript si no con Javascript y librerías del paquete CreateJS.

Preview 01:04

JavaScript es un lenguaje de programación orientado a objetos. Los lenguajes orientados a objetos usan la comparación de objetos reales en sus rutinas.

Propiedades, métodos, eventos y clases
02:22

Una de las tareas más importante cuando escribimos código es la evaluación de ese código. Cuando trabajamos con Adobe Animate esa evaluación la realizamos en el navegador.

Evaluar código
02:13

Las variables son espacios de memoria donde vamos a guardar información que puede ser reutilizada.

Variables
04:32

En este video aprenderemos a trabajar de forma práctica con variables.

Trabajar con variables
06:29

Es común que necesitemos describir lo que hace el código que estamos escribiendo, para ese proceso utilizamos comentarios.

Comentarios
03:01

Vamos a utilizar una función que envíe información a la consola del navegador dentro de la cual podremos revisar los posibles errores que tenga nuestro código.

Preview 03:46

Cuando utilizamos cadenas de caracteres o Strings debemos encerrar esos caracteres en comillas para indicar que no se trata del nombre de una variable u otra estructura.

Valores String
01:47

La concatenación es un proceso que se realiza para unir varios elementos, ya sea Strings, valores de variables, etc.

Concatenación
01:11

Las propiedades son características de un objeto. En Adobe Animate podemos modificar esas propiedades usando el panel Properties o Propiedades o mediante el uso de código.

Propiedades
05:28

En este video aprenderemos a modificar propiedades de elementos de forma práctica usando código de JavaScript.

Modificar propiedades
11:46
+
Funciones
6 Lectures 34:13

Las funciones build-in son funciones que hacen parte del lenguaje y las cuales podemos usar mediante un llamado.

Funciones build-in
02:30

En este video aprenderemos a a usar diferentes funciones build-in para controlar el Timeline o la Línea de Tiempo.

Uso de funciones build-in
05:58

En este video conoceremos la sintaxis de definición de funciones en Adobe Animate.

Definición de funciones
02:19

En este video aprenderemos a crear o definir funciones de forma práctica así como hacer su llamado.

Creación de funciones
09:41

Los parámetros de una función permiten que dicha función sea mas flexible permitiendo hacer llamados con valores diferentes.

Uso de parámetros
08:27

En ocasiones necesitamos que una función devuelva o retorne un valor, esto se logra con la declaración o sentencia Return.

Preview 05:18
+
Eventos
14 Lectures 01:24:56

Los eventos son a lo que un objeto es capaz de reaccionar. En Adobe Animate nosotros realizamos el manejo de un evento para enlazar eventos a funciones.

Preview 04:38

El manejo de un evento es un proceso mediante el cual asignamos agregamos un listener el cual llamará una función.

Manejo de Eventos
04:21

Aunque en este curso trabajaremos con una misma sintaxis de manejo de eventos, existen varias sintaxis diferentes para realizar ese proceso.

Otras sintaxis
02:09

Así como podemos agregar eventos también podemos removerlos, entre otros motivos, para no desperdiciar memoria.

Remover Eventos
04:04

Existen diferentes tipos de eventos como Mouse Events, Keyboard Events, Browser Events, etc.

Tipos de Eventos
01:52

En este video vamos a trabajar de forma práctica con los eventos de tipo Mouse, específicamente con el evento mouseover.

Eventos de Mouse - Parte 1
05:45

En este video continuamos con el ejercicio práctico anterior trabajando con otros eventos de tipo Mouse como mouseout y click.

Events de tipo Mouse - Parte 2
07:02

Existen tres eventos de teclado: keydown, keypress y keyup. En este video trabajaremos de forma práctica con el evento keydown el cual se activa cuando se presiona una tecla del teclado.

Eventos de Teclado
08:37

La clase Ticker de CreateJS contiene el evento ticker el cual se activa de forma repetitiva en una frecuencia específica. Este evento es similar el evento Timer de ActionScript 3.

Evento ticker
07:03

En este ejercicio práctico controlaremos la rotación de una manecilla de reloj mediante botones.

Ejercicio 01: Reloj - Paso 1
12:59

En este video finalizaremos el ejercicio del reloj agregando manejo de eventos a los botones pausar y detener.

Ejercicio 01: Finalización Reloj - Paso 2
05:14

En este ejercicio práctico controlaremos la animación dentro de un televisor mediante los botones de un control remoto. En esta primera parte explicamos el ejercicio y analizamos la estructura del archivo de inicio.

Ejercicio 02: Control TV - Paso 1
06:57

Cuando inicia nuestra animación se ejecuta la línea de tiempo de los MovieClips antes que el código, por ese motivo usaremos la función setTimeout de JavaScript para poder controlar dicha línea de tiempo.

Preview 04:39

En este video finalizamos el ejercicio del televisor usando principalmente manejo de eventos.

Ejercicio 02: Control TV - Paso 3
09:36
+
Operadores, condicionales y loops
13 Lectures 01:20:54

Los operadores son expresiones usadas para hacer comparaciones u operaciones matemáticas.

Operadores
03:03

Los condicionales son estructuras que nos permiten ejecutar código de forma inteligente. El primer condicional que vamos a conocer es if.

Condicional if
01:44

En este video trabajaremos de forma práctica con un condicional if que evalúe la cantidad ahorrada almacenada en una variable.

Preview 03:14

En este video usaremos else if para usar realizar múltiples evaluaciones dentro del condicional if.

If Ahorro y Cupo
03:56

Aunque el condicional if permite realizar múltiples evaluaciones usando else if, el condicional case o switch case nos permite hacer lo mismo pero con una estructura más compacta.

Condicional Case
01:46

En este video trabajaremos de forma práctica con un condicional case que evalúe la cantidad ahorrada almacenada en una variable.

Case Ahorro
04:23

En este video evaluaremos rangos de valores usando el condicional case.

Case rangos
08:31

Los Loops o Estructuras de repetición son estructuras que se usan para ejecutar varias veces un bloque de código.

Loops o Estructuras de repetición
01:55

En este video trabajaremos de forma práctica con los loops o estructuras de repetición For y While.

For y While
05:57

En este ejercicio práctico controlaremos un toma o switch haciendo click sobre el mismo.

Ejercicio 01: Encendido/Apagado - Versión 1
14:23

En este ejercicio práctico realizaremos a modo de práctica una versión diferente del ejercicio del toma o switch.

Ejercicio 02: Encendido/Apagado - Versión 2
06:54

En este ejercicio práctico controlaremos el desplazamiento de un carro sobre el stage o el escenario.

Ejercicio 03: Carro - Paso 1
16:48

En esta segunda parte del ejercicio del carro vamos a controlar el desplazamiento en los límites del stage o el escenario.

Ejercicio 03: Carro - Paso 2
08:20
+
Operaciones Matemáticas
2 Lectures 09:41

El objeto Math contiene una serie de métodos que facilitan la realización de operaciones matemáticas.

Objeto Math
02:17

En este video trabajaremos de forma práctica con algunas de los métodos del objeto Math.

Métodos Math
07:24
+
Arrays
3 Lectures 26:59

Los Arrays o Arreglos son un tipo especial de variable que puede contener varios valores.

Arrays
03:59

En este video trabajaremos de forma práctica con las propiedades y metidos más comunes del objeto Array.

Trabajo con Arrays
09:29

En este ejercicio práctico usaremos un Array para almacenar y mostrar los nombres de las frutas cuando hagamos click sobre ellas.

Ejercicio: Frutas
13:31
+
Instancias dinámicas y Display List
8 Lectures 01:21:26

Así como podemos crear instancias de forma visual (por ejemplo arrastrando y soltando), también podemos crear instancias dinámicas usando código de JavaScript.

Preview 04:03

En este video aprenderemos a crear instancias dinámicas de forma práctica.

Crear instancias dinámicas
08:27

El Display List es una estructura jerárquica que se genera a partir de los elementos creamos o importamos en nuestro documento de Adobe Animate.

Display List
04:08

En este video entenderemos algunas de las características que hacen parte de nuestros documentos de Adobe Animate. También vamos a usar algunas propiedades y métodos que nos permiten trabajar con el Display List.

Entender el Display List
15:42

En este ejercicio práctico crearemos un efecto dinámico de lluvia a partir de una animación de una gota que hace parte de un Movie Clip.

Ejercicio 01: Lluvia
21:56

En este ejercicio práctico crearemos una grilla de cuadros a partir de múltiples instancias de un Movie Clip.

Ejercicio 02: Grilla - Paso 1
10:58

En esta segunda parte del ejercicio de la grilla manejaremos varios eventos para rotar y cambiar la opacidad de los cuadros así como para rotar el contenedor.

Ejercicio 02: Grilla - Paso 2
08:52

En esta segunda parte del ejercicio de la grilla manejaremos varios eventos para eliminar cuadros independientes y para eliminar todo el contenido del contenedor.

Ejercicio 02: Grilla - Paso 3
07:20
3 More Sections
About the Instructor
Marlon Ceballos
4.4 Average rating
1,861 Reviews
24,874 Students
23 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.