Por Howard Pinsky
¡Hola a todos! Soy Howard Pinsky, promotor experto en XD de Adobe. Hoy echaremos un vistazo a la adición de animaciones de video y Lottie para tus prototipos y, así, sacarles el máximo partido. Empecemos.
Estamos en Adobe XD con una plataforma de juegos que estuve diseñando. Para dar vida a esta experiencia, vamos a agregar algunas animaciones de video y Lottie. En la pantalla Inicio, cuento con una gran imagen destacada en la parte superior, pero parece bastante estática. Agregar videos a un proyecto de XD es muy similar a las fotografías. Se pueden arrastrar directamente al lienzo o a una forma en blanco para enmascararse. Una vez agregado y seleccionado, verás opciones de reproducción de video en el Inspector de propiedades. Aquí, no solo podrás controlar cuándo se reproduce el video (en este caso, automáticamente al iniciar la previsualización), también podrás hacer clic en el icono de la izquierda para que se muestre un HUD con más controles, incluida la posibilidad de establecer una miniatura personalizada, borrar y previsualizar el video, activar o desactivar el audio, recortar (lo veremos en un momento) y reproducir en bucle.
Ahora que agregamos un video y decidimos cuándo se reproduce, al iniciar la previsualización podremos verlo en funcionamiento. Con solo esa adición, nuestro prototipo cobrará una nueva vida. Antes de que veamos la adición de animaciones de Lottie, cambiemos a otro estado de este componente destacado. Aquí tengo otro video que se reproduce automáticamente. Pero, como puedes ver en la previsualización, el avión tarda unos segundos en entrar en el plano. Cuando echamos un vistazo rápido al HUD hace un momento, mencioné que había una manera de recortar tus videos. Si entras en este modo, podrás definir los puntos inicial y final arrastrando los controles. En este caso, quiero que la reproducción se inicie justo antes de que comience la acción. Cuando todo esté configurado, la marca de verificación aplicará esos cambios. Ten en cuenta que el recorte no es destructivo en absoluto, por lo que siempre podrás volver al HUD para ajustar o deshacer las ediciones.
Al volver al estado predeterminado, iniciaré la previsualización una vez más. Ahora, al hacer clic en el segundo estado, el video se reproduce automáticamente desde el nuevo punto inicial. También agregué un tercer video. Si vuelvo al primero, hay una vista expandida que revela más información. Incluso notarás que los videos que se encuentran entre estados de Animación automática se reproducen continuamente sin interrupción.
Muy bien, echemos un vistazo a Lottie. En la pantalla Comunidad, configuré un componente que se muestra al pasar el mouse por encima. Dentro de este, preparé un boceto en un área adicional y me encantaría usarlo para crear un selector de emojis animados. Editemos el componente principal para que podamos agregar contenido. Pasando al grupo apilado, duplicaré rápidamente la capa existente varias veces y, a continuación, cambiaré a Finder, donde tengo animaciones adorables de Lottie de varios emojis creados por Anna Movin en ui8.net. Al igual que con los videos, los archivos de Lottie se pueden arrastrar directamente a una capa existente, al lienzo o enmascarados en formas para definir su tamaño. Cuando se seleccionan las capas, la reproducción se puede configurar a la derecha. Para todo esto, queremos que se reproduzcan automáticamente. Una cosa que cabe destacar aquí es que, a diferencia de los videos, el icono a la izquierda sirve estrictamente para controlar los bucles, que es lo que buscamos para estas interacciones. Perfecto.
Si volvemos al estado predeterminado de este componente, podremos previsualizar la pantalla Comunidad. Pasa el mouse por encima del mensaje y después pásalo sobre el icono del emoji para mostrar nuestras animaciones de Lottie y verlas en funcionamiento.
Antes de mostrarte el prototipo completo, veamos rápidamente el desencadenador Fin de reproducción, que puede ayudar mucho a automatizar algunas de tus interacciones de video y archivos de Lottie. Antes, te mostré brevemente el estado expandido del componente destacado. Dentro de esta sección, existe un botón que dirige a un estado de descarga. Aquí, incluí una animación de Lottie que comienza inmediatamente luego de la transición. Pero puede que te preguntes lo siguiente: ¿qué sucede cuando se completa la animación?
Si cambias al modo Prototipo, verás que hay un desencadenador de tiempo adjunto, pero podemos agregar una segunda interacción haciendo clic en el botón del signo más azul. Esto nos permitirá seleccionar el desencadenador Fin de reproducción en el Inspector de propiedades, que le indicará a XD que realice la transición una vez finalizado el video o la animación de Lottie. Para esta interacción, será suficiente una transición sencilla que maneje al estado Reproducir. Este desencadenador también funciona en todas las mesas de trabajo. En el estado de carga del mismo componente, agregué otra animación de Lottie. Además del desencadenador de tiempo, hay un desencadenador Fin de reproducción que lleva a la pantalla Juego. Por supuesto, esto no significa mucho sin verlo en funcionamiento. Volviendo al estado predeterminado, iniciaré la previsualización, ampliaré esta vista y, después, iniciaré la interacción Descargar. Gracias al desencadenador Fin de reproducción, el componente pasa automáticamente al estado Reproducir, en el que ahora puedo hacer clic para iniciar la animación de carga. Cuando esto termine, se producirá la transición a la mesa de trabajo.
Estos ejemplos son solo la punta del iceberg de lo que se puede hacer con videos y archivos de Lottie. Cubriré muchos casos de uso adicionales en futuros tutoriales. Pero antes de terminar, echemos un vistazo a la experiencia al completo. Disfrútala.
Dales a tus prototipos una vida completamente nueva con gráficos en movimiento. En este tutorial, aprenderás a diseñar una plataforma de juegos con animaciones de video y Lottie. Arrastra los archivos de video y Lottie directamente al lienzo de diseño o a una forma en blanco como máscara. Ajusta las opciones de reproducción de video en el Inspector de propiedades. Agrega una miniatura, borra y previsualiza videos, habilita el audio, recorta clips de video y reproduce en bucle. Conecta las interacciones con las transiciones de Animación automática y reproduce videos sin interrupciones. Realiza interacciones con el desencadenador Fin de reproducción para realizar una transición automáticamente a otro estado cuando termine de reproducirse una animación de Lottie.
