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