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! â&#x20AC;˘ 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")});â&#x20AC;¨
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 â&#x20AC;˘ Los operadores son expresiones usadas para hacer comparaciones â&#x20AC;˘ 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