Adobe Animate CC - Avanzado: Interactividad HTML5

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")});â&#x20AC;¨

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