Contenido interactivo con Javascript y Adobe Animate CC

Page 1

CreaciĂłn de contenido interactivo con Javascript y Adobe Animate CC (v. 2016) www.pert.video/p/interactividad-javascript-animate

Marlon Ceballos - @adobexpert Adobe Community Professional / Adobe CertiďŹ ed Instructor

pert pert

Learn design & code Learn design & code

www.xpert.video

CERTIFIED INSTRUCTOR Web C E R Design T I F I E DMaster I N S T R/ U C T OMaster R

Design Master / Web Master


CERTIFIED INSTRUCTOR

Design Master / Web Master

www.linkedin.com/in/marlonceballos/

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Learn

Learn

pert

design & code

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Conceptos bรกsicos

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


HTML y CSS Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


QuĂŠ es HTML

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


QuĂŠ es CSS

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


QuĂŠ es Javascript?

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Adobe Animate CC

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Qué es Adobe Animate? • NO es Adobe Edge Animate • Adobe Flash con otro nombre • Aplicación gráfica para creación de elementos dinámicos, interactivos y “rich media”.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Características de Adobe Animate • Todo el contenido se encuentra en un Stage o Scenario • Los elementos se animan usando un Timeline • Posibilidad de expandir sus capacidades mediante lenguajes script.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Usos de Adobe Animate • Animaciones • Banners • Publicidad • Juegos • Web y Publicaciones Digitales.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Tipos de documentos • HTML5 Canvas • WebGL • ActionScript • AIR.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Por qué no seguir usando AS3? • Necesidad de un plug-in en el navegador • Muchos dispositivos móviles no soportan Flash • Tipo de documento recomendado: HTML5 Canvas.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Cómo reemplazamos AS3? • JavaScript • Librerías CreateJS • Cualquier librería de JavaScript.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Archivos de Adobe Animate • .fla • .html y .js.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Cómo agregar interactividad? • Snippets • Librerías CreateJS como EaselJs • Javascript.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Conceptos fundamentales

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


DOM La estructura HTML se basa en una organizaciรณn jerรกrquica de elementos llamada DOM (Document Object Model).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Canvas • Etiqueta HTML5 que define un área de un archivo HTML para crear e interactuar con elementos gráficos. • <canvas></canvas> • Adobe Animate facilita el trabajo con canvas.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Lenguajes y librerías • Un lenguaje de programación permite diseñar procesos mediante rutinas lógicas y estructuradas • Javascript es un lenguaje de programación • Las librerías son un conjunto de rutinas prediseñadas que agilizan y facilitan el uso de un lenguaje (no inventar la rueda).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Conceptos de programaciรณn

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Lenguajes y librerías • La programación orientada a objetos (OOP) usa la comparación de objetos reales para el diseño de sus rutinas • Javascript permite usar OOP • Objetos: propiedades, métodos y eventos.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Propiedades • Tamaño • Color • Velocidad • etc.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Métodos (funciones) • Moverse • Detenerse • etc.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Eventos • Acelerar • Frenar • etc

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Variables

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Variables

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Trabajar con variables • Creación o declaración: - var nombre;

• Asignación: - nombre = “texto”; - valor = 100;

• Creación + asignación (inicialización): - var nombre = 100;

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Recomendaciones • Los nombre de variables NO deben contener: - Espacios (usa underscores) - Caracteres especiales (usa letras números, guiones y underscores)

• NO iniciar nombres con números.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Importante! • Una variable no declarada es global - nombre = 0;

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Funciones

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Reusar tareas

tareas Tarea1 Tarea3 Tarea2 Tarea5

Learn

pert

design & code

Tarea4

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Definir una Función function nomFuncion()
 {
 tarea1;
 tarea2;
 ...
 }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Definir una Función function mensajes()
 {
 alert(mensaje1);
 alert(mensaje2);
 alert(mensaje3);
 }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Llamar (ejecutar) una Función • nomFuncion(); • Ejemplo: - stop();

• Ejemplo2: - alert(“mensaje”);

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Parámetros de una Función • corra(); <-- necesitar parámetros? opcional
 deténgase(); <-- necesita parámetros? NO • vayaHasta(); <-- dónde? parámetro requerido
 imprimaDocumentos(); <-- cuál? requerido • vayaHasta(Cra 12 No. 13-23);
 imprimaDocumentos(cot001.doc, cot002.doc);

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Propiedades • Características de un objeto: - Tamaño - Color - Velocidad - etc.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Propiedades • El panel de propiedades lista todas las propiedades del elemento seleccionado las cuales se pueden editar de forma dinámica • Nombre de instancia.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Editar propiedades • Heredadas en su mayoría de la clase DisplayObject • Sintaxis: - ruta.instancia.propiedad = valor;

• Ejemplos: - this.cuadrado.x = 100; - this.cuadrado.rotation = 45; - this.cuadrado.visible = true;

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Creaciรณn dinรกmica de instancias 1. Crear un linkage name 2. Crear un objeto a partir del linkage name: - var circulo = new lib.Circulo;

3. Agregar el objeto en el stage: - this.addChild(circulo);

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Eventos

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Eventos

Nadie escucha... Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Eventos

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Eventos

No ocurre nada...

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Manejo de Eventos

Evento

Learn

pert

design & code

Listener

www.xpert.video

Funciรณn

CERTIFIED INSTRUCTOR

Design Master / Web Master


Estructura de un manejo de evento • objeto.addEventListener(evento, función); • objeto: elemento que recibe el evento • addEventListener(): función que permite agregar el evento • evento: acción que llamará la función • función: función que se ejecuta cuanto el evento se dispara.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Manejo de un evento this.cuadro.addEventListener("click", mensaje); function mensaje(evt) {
 alert(“Soy el mensaje”);
 }

mensaje();

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Remover un evento • objeto.removeEventListener(evento, función); • this.cuadro.removeEventListener("click", mensaje);

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Manejo de un evento this.cuadro.addEventListener("click", function(evt) {alert("Soy un mensaje")});


Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Manejo de un evento (opción 2) this.cuadro.on("click", mensaje); function mensaje(evt) {
 alert(“Soy un mensaje");
 }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Manejo de un evento (opción 2) this.cuadro.on("click", function(evt) { alert(“Soy el mensaje”); });

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Mouse Events • click

• mouseover*

• mousedown

• mouseout*

• dblclick

• rollover*

• pressmove

• rollout*.

• pressup * myStage.enableMouseOver()

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Keyboard Events • keydown • keyup.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Propiedades which y keyCode • Para identificar la tecla que fue presionada en un evento, se usa una propiedad del evento llamada which la cual devuelve un código que identifica cada tecla • La propiedad keyCode es similar • www.keycode.info.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Ticker class • La clase Ticker permite gestionar intervalos de tiempo • Permite realizar tareas que se realizaban con la clase Timer de AS3 • Contiene el evento tick.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Ticker class this.addEventListener("tick", fname); function fname(evt) {
 tarea que se repite;
 }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Tener en cuenta • Eventos de Mouse y Ticker en EaselJS:
 www.createjs.com/docs/easeljs/classes/MouseEvent.html
 www.createjs.com/docs/easeljs/classes/Ticker.html • Listado de eventos en Javascript:
 www.w3schools.com/jsref/dom_obj_event.asp.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Recursos Javascript • http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide • http://developer.mozilla.org/es/docs/Web/JavaScript/Guide • http://www.w3schools.com/js/.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Fundamentos Javascript

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Condicionales

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Condicionales Permiten tomar decisiones de acuerdo a una condiciรณn.โ จ

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Condicionales Si tengo

o más

puedo comprar
 
 
 
 si no, debo seguir ahorrando.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Condicional if if (ahorro >= 50)
 {
 comprar();
 }
 else
 {
 ahorrar();
 }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Condicional case switch (expresión)
 {
 case a: tarea1; break;
 case b: tarea2; break;
 case c: tarea3; break;
 default: break;
 }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Operadores

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Operadores • Los operadores son expresiones usadas para hacer comparaciones • Normalmente se usan para evaluar un condicional.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Operadores de comparación • == es igual a • < es menor que • > es mayor que • <= es menor o igual que • >= es mayor o igual que • != es diferente que • ! no es.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Algunos operadores matemáticos • + (suma)

• -= (resta el mismo valor de la variable)

• - (resta)

• ++ (suma 1 al contenido de la variable)

• * (multiplicación) • / (división) • += (suma el mismo valor de la variable)

Learn

pert

design & code

• -- (resta 1 al contenido de la variable).

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Objeto Math

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


El objeto Math • Las propiedades y métodos de este objeto se acceden directamente • www.w3schools.com/jsref/jsref_obj_math.asp • http://developer.mozilla.org/en-US/docs/ Web/JavaScript/Guide/ Numbers_and_dates#Math_object.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Algunos métodos del objeto Math • random();

• ceil();

- Genera valores aleatorios entre 0 y 1 (sin incluirlo)

- Redondea “por encima” el valor de un número.

• round(); - Redondea el valor de un número

• floor(); - Redondea “por debajo” el valor de un número

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Loops

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Loops • Los loops son estructuras que se usan para ejecutar varias veces un bloque de código • Suelen ser usadas en conjunto con los Arrays.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Loop for for (inicializarVariable; condicional; acumulador) {
 tarea1;
 tarea2;
 tarea3; 
 }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Loop while while (condicional) {
 acumulador;
 tarea1;
 tarea2;
 tarea3; 
 }

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Arrays (falta!!!!) • http://learn.jquery.com/javascript-101/arrays/ • Es un tipo especial de variable que permite guardar más de un dato.
 • Los datos que componen un array quedan referenciados por un valor de index que inicia en 0;

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Definición de un Array • Estructura:
 var nombreArreglo:Array = new Array(); • Ejemplo:
 var alumnos:Array = new Array();

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Asignar datos a un Array • Mediante un constructor - var nombres:Array = new Array(“Luis”, “Carlos”, “Andres”);

• Sin el constructor - var nombres:Array = [“Luis”, “Carlos”, “Andres”];

• Asignación a un Array ya definido - nombres = [“Luis”, “Carlos”, “Andres”];

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Asignar datos a un Array • Mediante su índice - nombres [0] = “Luis”; - nombres [1] = “Carlos”; - nombres [2] = “Andres”;

• Si el índice ya está ocupado por un valor, éste será reemplazado

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Algunos métodos de la clase Array • push(); - Asigna un elemento al final del array y retorna la nueva longitud;

• pop(); - Remueve el último elemento del array y retorna el valor de ese elemento;

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Algunos métodos de la clase Array • unshift(); - Agrega uno o más elementos al inicio de un Array y retorna la nueva longitud.

• shift(); - Elimina el primer elemento de un array y retorna el valor de ese elemento.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Algunos métodos de la clase Array • forEach(); - Ejecuta una función en cada elemento del array;

• reverse(); - Invierte el orden de los elementos dentro del array

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Crear elementos de forma interactiva

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Temas para agregar • Creación dinámica • Ejemplo de instructores mostrar info al rollover • Otros métodos de jQuery (animation) • Hacer los ejercicios del carro con %, que funcione con responsive • Hacer un ejercicio con un slider (operadores) • Ejercicio soltar sobre un elemento y hittest • Explicar el concepto de clases

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Gracias!

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Esta presentaciรณn (y otras)

www.xper.co/presenta

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Recursos

www.delicious.com/marliton

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Varios • stopPropagation();
 Evita que sean llamados otros listeners del mismo evento en el mismo elemento • stopImmediatePropagation();
 Evita la propagación del evento actual en el "bubbling phase"

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.