Adobe Animate CC - Avanzado: Interactividad HTML5

Page 1

Learn

pert Design and Creativity

Adobe Animate CC - Avanzado: Interactividad HTML5 (v. 2017) www.xpert.video/p/adobe-animate-cc-avanzado

Marlon Ceballos - @adobexpert


Marlon Ceballos

www.linkedin.com/in/marlonceballos/

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


pert

Aprende DiseĂąo y Creatividad

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Conceptos bĂĄsicos

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Qué es Adobe Animate? • No es Adobe Edge Animate - Desarrollo detenido desde Nov. 2015 - www.xper.co/2wa3SXx

• Adobe Flash con un nuevo nombre (Feb. 2016) • Aplicación gráfica para creación de elementos dinámicos e interactivos = “rich media”.

pert

Aprende Diseño y Creatividad

www.xpert.video


Características de Adobe Animate • Cuenta con herramientas de creación de contenido gráfico • Los elementos se animan usando un Timeline o Línea de Tiempo • Posibilidad de expandir sus capacidades mediante lenguajes de programación, scripts y/o librerías • Herramientas gráficas + código.

pert

Aprende Diseño y Creatividad

www.xpert.video


Usos de Adobe Animate • Animaciones y elementos interactivos: - Elementos publicitarios - Contenido eLearning - Juegos - Etc

• Web y Publicaciones Digitales.

pert

Aprende Diseño y Creatividad

www.xpert.video


Tipos de documentos • HTML5 Canvas • WebGL (Preview) • ActionScript • AIR.

pert

Aprende Diseño y Creatividad

www.xpert.video


Por qué no seguir usando AS3? • Necesidad de un plug-in (Flash Player) en el navegador • La mayoría de los navegadores móviles no soportan plug-ins • Los dispositivos móviles no soportan contenido en formato .swf • Tipo de documento recomendado: HTML5 Canvas.

pert

Aprende Diseño y Creatividad

www.xpert.video


Por qué seguir usando AS3? • Desarrollos específicos • Publicación en formato AIR • www.adobe.com/devnet-apps/flashshowcase/ • www.adobe.com/devnet/air/samples-mobile.html.

pert

Aprende Diseño y Creatividad

www.xpert.video


Cómo reemplazar a AS3? • JavaScript • Cualquier librería de JavaScript: - Librerías CreateJS - GSAP (GreenSock Animation Platform) - etc.

pert

Aprende Diseño y Creatividad

www.xpert.video


Documentos HTML5 Canvas HTML5 Canvas (tipo de documento recomendado): • .fla • .html • .js.

pert

Aprende Diseño y Creatividad

www.xpert.video


JavaScript y librerías

pert

Aprende Diseño y Creatividad

www.xpert.video


JavaScript • Lenguaje de programación basado la especificación ECMAScript • Orientado a objetos • Todos los navegadores actuales lo soportan • Inicialmente orientado a la web.

pert

Aprende Diseño y Creatividad

www.xpert.video


Librerías • Conjunto de rutinas prediseñadas (funciones) que agilizan y facilitan el uso de un lenguaje • Principales ventajas: - Evitan escribir código que ya existe - Evita el trabajo para asegurar la compatibilidad - Uso simple: animDisolve().

pert

Aprende Diseño y Creatividad

www.xpert.video


Librerías de JavaScript • jQuery: Animación y modificaciones DOM • GSAP (GreenSock Animation Platform): Animación • EaselJS: HTML5 Canvas.

pert

Aprende Diseño y Creatividad

www.xpert.video


CreateJS Es una suite de librerías de JavaScript: • EaselJS: HTML5 Canvas • TweenJS: Animación • SoundJS: Audio • PreloadJS: Carga de assets.

pert

Aprende Diseño y Creatividad

www.xpert.video


Por qué usar CreateJS • No reinventar la rueda • Facilita muchas tareas en Animate (navegar Frames, trabajar con MovieClips, etc) • Sintaxis similar a ActionScript 3 • Está incluida en Adobe Animate.

pert

Aprende Diseño y Creatividad

www.xpert.video


No usar JavaScript? • Las librerías JS son rutinas o tareas escritas en JS • Las librerías JS son JS • Al usar librerías JS también usamos JS "puro".

pert

Aprende Diseño y Creatividad

www.xpert.video


Fundamentos de JavaScript

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


En este curso: • Workspace personalizado • Documentos HTML5 Canvas • No ActionScript • JavaScript + CreateJS.

pert

Aprende Diseño y Creatividad

www.xpert.video


Programación orientada a objetos • JavaScript es un lenguaje orientado a objetos (OOP) • OOP usa la comparación de objetos reales para el diseño de sus rutinas • Objetos: propiedades, métodos y eventos.

pert

Aprende Diseño y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


Métodos (Funciones) • Mover • Detener • etc.

pert

Aprende Diseño y Creatividad

www.xpert.video


Eventos • Acelerar • Frenar • etc

pert

Aprende Diseño y Creatividad

www.xpert.video


Eventos - Funciones Generalmente los eventos activan una función: • Acelerar -> Mover • Frenar -> Detener.

pert

Aprende Diseño y Creatividad

www.xpert.video


Clases • "Moldes" a partir de los cuales podemos crear objetos mediante instanciamiento • Tienen Propiedades, Métodos (Funciones) y Eventos • Ejemplos clases EaselJS: - Graphics - MovieClip - Text.

pert

Aprende Diseño y Creatividad

www.xpert.video


Evaluar código • Necesitaremos evaluar el código en el navegador • alert(): Función de JavaScript • console.log(): Función de los debuggers o depuradores.

pert

Aprende Diseño y Creatividad

www.xpert.video


Consola Chrome: • View > Developer > JavaScript Console • Cmd/Ctrl + Opt/Alt + J.

pert

Aprende Diseño y Creatividad

www.xpert.video


Variables

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Variables

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


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;

pert

Aprende Diseño y Creatividad

www.xpert.video


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

• NO iniciar nombres con números • Los nombres de variables son "case sensitive" • NO usar palabras clave o reservadas como nombres de variables.

pert

Aprende Diseño y Creatividad

www.xpert.video


Propiedades

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


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

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

pert

Aprende Diseño y Creatividad

www.xpert.video


Listado de propiedades www.createjs.com/docs/easeljs/classes/DisplayObject.html

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Funciones

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Reusar tareas

tareas Tarea1 Tarea3 Tarea2 Tarea5

pert

Aprende DiseĂąo y Creatividad

Tarea4

www.xpert.video


Funciones built-in • Son funciones que ya están creadas • Pueden ser usadas haciendo un "llamado" • Ejemplos: - play(); - stop(); - gotoAndStop(); - gotoAndPlay(); - alert();.

pert

Aprende Diseño y Creatividad

www.xpert.video


Funciones built-in www.createjs.com/docs/easeljs/classes/MovieClip.html

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


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

• Ejemplo2: - alert("mensaje");

pert

Aprende Diseño y Creatividad

www.xpert.video


Parámetros de una Función • corra(); <-- necesitar parámetros? opcional
 detengase(); <-- 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);

pert

Aprende Diseño y Creatividad

www.xpert.video


Eventos

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Eventos

Nadie escucha...

Event

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Eventos

Event

pert

Aprende DiseĂąo y Creatividad

Listener www.xpert.video


Eventos

No ocurre nada...

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Manejo de Eventos

Evento

pert

Aprende DiseĂąo y Creatividad

Listener

www.xpert.video

FunciĂłn


Estructura de un manejo de evento ruta.objeto.addEventListener(evento, función); • ruta: ubicación del elemento que recibe el evento • 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.

pert

Aprende Diseño y Creatividad

www.xpert.video


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

mensaje();

pert

Aprende Diseño y Creatividad

www.xpert.video


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


pert

Aprende DiseĂąo y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


Remover un evento • ruta.objeto.removeEventListener(evento, función);

• this.cuadro.removeEventListener("click", mensaje);

pert

Aprende Diseño y Creatividad

www.xpert.video


Algunos tipos de Eventos JS • Mouse Events • Keyboard Events • Form Events • Document Loading • Browser Events • www.w3schools.com/jsref/dom_obj_event.asp.

pert

Aprende Diseño y Creatividad

www.xpert.video


Mouse Events - JS • onclick

• onmouseout

• ondblclick

• onmouseup.

• onmousedown • onmouseenter • onmouseleave • onmousemove • onmouseover

pert

Aprende Diseño y Creatividad

www.xpert.video


Mouse Events - EaselJS • click

• mouseover*

• mousedown

• mouseout*

• dblclick

• rollover*

• pressmove

• rollout*.

• pressup

* myStage.enableMouseOver();

pert

Aprende Diseño y Creatividad

www.xpert.video


Keyboard Events - JS • keydown • keypress • keyup.

pert

Aprende Diseño y Creatividad

www.xpert.video


Propiedad code • Para identificar la tecla que fue presionada en un evento, se usa una propiedad del evento llamada code o key. Code devuelve un código (ej KeyA) y key devuelve la tecla (ej. a). • Las propiedades which y keyCode son similares pero obsoletas en JS • https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.

pert

Aprende Diseño y Creatividad

www.xpert.video


Ticker class • La clase Ticker (EaselJS) permite gestionar intervalos de tiempo • Similar a la clase Timer de AS3 • Contiene el evento tick • La propiedad interval define la frecuencia del evento en ms • La propiedad framerate define la frecuencia del evento en fps.

pert

Aprende Diseño y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicio Reloj • Practicaremos: - Manejo de eventos (mouse y tick)

• Aprenderemos: - Uso de la propiedad interval (clase Ticker) - Uso de la propiedad regY.

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicio control TV • Practicaremos: - Manejo de eventos

• Aprenderemos: - Uso del método setTimeout().

pert

Aprende Diseño y Creatividad

www.xpert.video


Referencias Eventos • 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.

pert

Aprende Diseño y Creatividad

www.xpert.video


Operadores

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Operadores • Son expresiones usadas para hacer comparaciones u operaciones matemáticas • También se usan para evaluar condicionales.

pert

Aprende Diseño y Creatividad

www.xpert.video


Operadores matemáticos • = (asignación) • + (suma) • - (resta) • * (multiplicación) • / (división) • += (suma el mismo valor de la variable)

pert

Aprende Diseño y Creatividad

• -= (resta el mismo valor de la variable) • ++ (suma 1 al contenido de la variable) • -- (resta 1 al contenido de la variable).

www.xpert.video


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.

pert

Aprende Diseño y Creatividad

www.xpert.video


Agrupamiento • 1 + 3 * 5 = 16 ? • Operator precedence: https://developer.mozilla.org/en/docs/Web/ JavaScript/Reference/Operators/Operator_Precedence • (1 + 3) * 5 = 20.

pert

Aprende Diseño y Creatividad

www.xpert.video


Condicionales

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Condicionales • Estructuras que permiten tomar decisiones de acuerdo a una condición • Permiten ejecutar código de una forma más "inteligente".

pert

Aprende Diseño y Creatividad

www.xpert.video


Condicional if Si tengo

o más

puedo comprar
 
 
 
 si no, debo seguir ahorrando.

pert

Aprende Diseño y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


Loops

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Loops • Son estructuras que se usan para ejecutar varias veces un bloque de código • Suelen ser usadas cuando trabajamos con Arrays.

pert

Aprende Diseño y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


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

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicios Encendido/Apagado • Practicaremos: - Cambiar el ícono del cursor - Condicional if - Controlar la línea de tiempo - Cambiar de posición elementos

• Aprenderemos: - Usar valores booleanos - Uso del método stopImmediatePropagation() y la propiedad currentFrame.

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicios Carro • Practicaremos: - Condicional case o switch case - Parámetros de funciones - Mover y rotar elementos

• Aprenderemos: - Usar la propiedad key - Controlar los límites del stage o escenario.

pert

Aprende Diseño y Creatividad

www.xpert.video


Objeto Math

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


El objeto Math • Las propiedades y métodos de este objeto se acceden directamente (Static) • www.w3schools.com/jsref/jsref_obj_math.asp • http://developer.mozilla.org/en-US/docs/ Web/JavaScript/Reference/Global_Objects/ Math.

pert

Aprende Diseño y Creatividad

www.xpert.video


Algunos métodos del objeto Math • random(); - Genera valores aleatorios entre 0 y 1 (sin incluirlo)

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

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

• ceil(); - Redondea “por encima” el valor de un número.

pert

Aprende Diseño y Creatividad

www.xpert.video


Arrays

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Arrays • Las variables pueden contener un solo dato a la vez • Los Arrays son variables especiales que permiten guardar más de un dato.

pert

Aprende Diseño y Creatividad

www.xpert.video


Arrays Los datos de un Array están referenciados por un valor de index: • Parqueaderos[0] • Parqueaderos[1] • Parqueaderos[2] • Parqueaderos[3].

pert

Aprende Diseño y Creatividad

PARQUEADEROS

www.xpert.video

Carlos

Luis

Enrique

Juan

0

1

2

3


Definir un Array • var nomvar = [item1, item2, item3, …];

• var nombres = ["Luis", "Carlos", "Andres"]; • Puede contener diferentes tipos de valores.

pert

Aprende Diseño y Creatividad

www.xpert.video


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 • La propiedad length retorna la longitud del Array.

pert

Aprende Diseño y Creatividad

www.xpert.video


Algunos métodos del objeto 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;

pert

Aprende Diseño y Creatividad

www.xpert.video


Algunos métodos del objeto 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.

pert

Aprende Diseño y Creatividad

www.xpert.video


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

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

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicio Frutas • Practicaremos: - Manejo de eventos - Definir arrays y agregarles elementos

• Aprenderemos: - Borrar todos los elementos de un array - Propiedad name.

pert

Aprende Diseño y Creatividad

www.xpert.video


Instancias dinĂĄmicas

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Símbolos e instancias • Contenedores especiales • Se almacenan en el panel Library • Instancias (drag & drop) • Instancias dinámicas (JavaScript).

pert

Aprende Diseño y Creatividad

www.xpert.video


Creación dinámica de instancias 1. Crear un linkage name (panel Library) 2. Crear un objeto e instanciar a partir del linkage name: - var circulo = new lib.Circulo();

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

pert

Aprende Diseño y Creatividad

www.xpert.video


Display List

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Display List • Estructura jerárquica de elementos • Parent -> Child. Parent Child/Parent

Childs [0]

pert

Aprende Diseño y Creatividad

www.xpert.video

[1]

[2]


Container Class www.createjs.com/docs/easeljs/classes/Container.html

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


addChild() • stage.addChild(objeto) • this.addChild(objeto) • container.addChild(objeto).

stage this

container

pert

Aprende Diseño y Creatividad

www.xpert.video


numChildren • stage.numChildren: retorna 4 • this.numChildren: retorna 4 • container.numChildren: retorna 2.

stage this

container

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicio Lluvia • Practicaremos: - Manejo de eventos - Uso del método addChild(); - Uso del método setTimeout() - Uso de métodos del objeto Math - Uso del método removeChildAt()

• Aprenderemos: - Crear contenedores.

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicio Grilla • Practicaremos: - Manejo de eventos - Manejo de la estructura For

• Aprenderemos: - Uso de funciones anónimas - Uso de métodos y propiedades para trabajar con el Display List.

pert

Aprende Diseño y Creatividad

www.xpert.video


Audio y video

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


PreloadJS • Buena práctica: Verificar que un elemento esté cargado • La librería PreloadJS contiene propiedades, métodos y eventos que permiten administrar la carga de assets externos • Incluida en Adobe Animate CC (al igual que otras librerías CreateJS) • www.createjs.com/docs/preloadjs/modules/PreloadJS.html.

pert

Aprende Diseño y Creatividad

www.xpert.video


PreloadJS • LoadQueue: clase que administra la carga de uno o varios archivos • Algunos eventos: - complete: se dispara cuando se completa la carga del archivo o archivos - error: se dispara cuando hay errores en un archivo - fileload: se dispara cuando la carga de un archivo ha finalizado.

pert

Aprende Diseño y Creatividad

www.xpert.video


Trabajo con audio

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


SoundJS • La librería SoundJS contiene propiedades, métodos y eventos que permiten administrar la reproducción de audio • Incluida en Adobe Animate CC (al igual que otras librerías CreateJS) • www.createjs.com/docs/soundjs/modules/SoundJS.html.

pert

Aprende Diseño y Creatividad

www.xpert.video


VideoLoader • VideoLoader: clase de PreloadJS para carga de videos • www.createjs.com/docs/preloadjs/classes/VideoLoader.html

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicio Control Video • Practicaremos: - Manejo de eventos - Uso del método VideoLoader() - Uso de métodos play() y pause()

• Aprenderemos: - Modificar el volumen de un video - Uso de la propiedad currentTime.

pert

Aprende Diseño y Creatividad

www.xpert.video


Texto

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Tipos de texto

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Clase Text www.createjs.com/docs/easeljs/classes/Text.html

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


Propiedades mas usadas • color: atributo CSS (ej. "#F00") o valor de propiedad canvas fillStyle • font: atributo CSS (ej. "bold 36px Arial") • lineHeight: espacio entre líneas • lineWidth: ancho de la caja de texto • text: texto a mostrar • textAlign: alineación horizontal (ej. "left", "right", "center").

pert

Aprende Diseño y Creatividad

www.xpert.video


Imágenes

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicio Frutas Practicaremos: • Manejo de eventos • Definir arrays y agregarles elementos • Borrar todos los elementos de un array • Propiedad name • Agregar texto a un caja de texto.

pert

Aprende Diseño y Creatividad

www.xpert.video


Ejercicios Galería Imágenes • Practicaremos: - Manejo de eventos - Uso del condicional if - Precarga de imágenes - Asignación de contenido a una caja de texto

• Aprenderemos: - Uso de la propiedad numChildren - Uso del método setChidIndex.

pert

Aprende Diseño y Creatividad

www.xpert.video


Gracias!

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


www.xper.co/presenta

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


www.delicious.com/marliton

pert

Aprende DiseĂąo y Creatividad

www.xpert.video


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.