Total ProtoPie: aprende a crear prototipos avanzados sin código

1. Introducción Protopie total: Hola allá y bienvenido a los pros totales y mi nombre es Darren bed y soy una diseñadora con más de 30 años de experiencia en la industria del diseño. Waves se ha pasado en el espacio digital donde he estado diseñando experiencias web y experiencias desde dispositivos móviles. Y estar presentándote a mis diseños de interacción favoritos o prettify. Entonces vamos a estar aprendiendo perfil desde cero. No necesitas abrir este suelo antes de no necesitar ningún conocimiento previo. Y lo vamos a estar llevando paso a paso el aprendizaje o los fundamentos y nivelándote hasta un nivel de experiencia donde te vas a sentir seguro para poder utilizar esta herramienta en tu trabajo en tus proyectos en la industria real. Y vas a conseguir el beneficio de que yo haya usado es total durante los últimos tres años realmente en la industria en proyectos reales y en la construcción de aplicaciones reales. Entonces vamos a estar usando una aplicación falsa. Las plantas de carbón descansan como nuestra forma de explorar las diferentes pintas de resolución de problemas y técnicas que vamos a hacer, vamos a usar. Y he elegido esta aplicación porque es una buena mezcla de usar patrones de diseño móvil estándar así como muchos patrones de diseño personalizados y animaciones también. Entonces vamos a divertirnos mucho construyendo algunas de estas características. Empezará. Hemos aprendido a nadar gráficos geniales de otras herramientas de la industria compatibles, como Fichman, sketch y Adobe XD. Vamos a aprender a crear animaciones tanto estándar como personalizadas. Vamos a crear un flujo de inicio de sesión real, junto con el manejo de errores, creará una función de favor que guardará dinámicamente contenido basado en la elección del usuario. Usando lógica condicional, explorará la navegación y creará un ATS había sido que bajo a su vez utiliza un componente reutilizable que se puede utilizar en cualquier proyecto. Construirá una aplicación de foto real usando capacidades de protoplasts para integrarse con el hardware del dispositivo, como la cámara de tu teléfono. Ve a explorar características complejas como variables y qué profesionales en PyCon, minutos completos, instrucciones discretas, que son fáciles de aprender y ofrecen potencia avanzada, pero sin la necesidad de conocimientos avanzados, te sorprenderás en lo fácil que es sentir características realmente avanzadas luego tomarán nuestra aplicación y harán algunos componentes reutilizables, convirtiéndolos en una biblioteca de componentes que se puede utilizar en múltiples proyectos. Por último, tendremos un look abordado por la nube y cómo puedes probar y compartir tus prototipos para usar pruebas de usabilidad o para compartir con los interesados. Y cómo puedes usar las recetas de interacción para comunicar fácilmente tu live in, trabajar en el diseño de interacción con los desarrolladores sin la necesidad de crear aburridos, largos. Y nos vamos a reir. Estoy aprendiendo sonda Heights otra vez. Realmente creo que el único diseño de interacción, así que en el mercado en este momento, eso realmente vale la pena invertir su tiempo. Especialmente si no quieres aprender a codificar o si encuentras codificar una proposición aterradora. La altura de la sonda es una herramienta que se ha construido para que los diseñadores exploren esas ideas de diseño desde el principio, hasta el final. Entonces si eso es algo que te interesa aprender, entonces recoge este curso y te veré en clase. 2. Instalación Protopie: Hola ahí. Por lo que antes de empezar, necesitaremos instalar el software de protoplasts si no lo tienes ya. Entonces si ese es el caso, sólo dirígete al prototipo. Esta es la página web de protoplanetas aquí. Y este toque en el triunfo del enlace libre. Serás redirigido a esta página donde solo necesitarás poner tu correo electrónico y luego registrarte y obtendrás el archivo instalador. Y es sólo un átomo normal. Por lo que se instala de la manera normal tanto para Mac como para Windows. Así que asegúrate de hacer eso antes de pasar al siguiente video. La otra cosa que quiero llamar su atención es los activos phi también adjuntados a este video es un archivo zip para todos los activos. Si solo hacemos doble clic en eso y solo echamos un vistazo dentro de aquí. Por lo que sólo hay unos pocos activos. Por lo que tienes archivos Adobe XD. Si estás siguiendo junto con Adobe XD, también tenemos sigma, y tenemos los archivos de sketch. No usamos activos de cada video, pero hay algunas de las conferencias que sí requerimos activos para si quieres seguir. Otra cosa que he incluido es la afición es un Google Fonts libre de usar. Pero tenía sólo por conveniencia, lo he puesto en la carpeta de activos también. Y luego finalmente, tenemos otra carpeta de Activos dentro de la carpeta de activos. Y dentro de aquí, algunos pre exporta gráficos HD que estamos utilizando en la evaluación de videos. Por lo que deberías poder encontrar todo lo que necesitas aquí y debes estar listo para irte. De acuerdo, entonces eso es todo para este video. Así que esperamos verte en el primer video y empezar a meterte en prettify. Nos vemos ahí. 3. 3 un tour rápido de Protopie Studio: De acuerdo, así que empecemos echando un vistazo al estudio de alta sonda. Cuando lances estudio, te van a presentar en la ventana de inicio. Entonces vamos a crear un nuevo archivo. De acuerdo, entonces ahora tenemos un nuevo archivo sin título. Entonces en el sensor, verás el ARPU donde crearás tu prototipo. Y justo arriba aquí está el menú de presets del dispositivo. Por lo que aquí es donde puedes elegir el tamaño de tu prototipo. Y aquí hay una serie de presets para iOS, Android y escritorio. Y también tenemos la capacidad de crear un tamaño personalizado también. A la izquierda aquí está nuestro panel Capas. Entonces cuando importamos gráficos desde nuestra aplicación de ataque de gráficos, o creamos objetos de forma nativa, pueden repararlos aquí. A la izquierda aquí, queremos sacar paneles. Entonces este primero es el patrón de escenas. Y luego justo debajo, tenemos el panel Componentes. Simplemente bajando hasta el fondo aquí. Tenemos los paneles de variables. Entonces aquí es donde crearemos nuestras variables las cuales utilizamos para ciertas características lógicas dentro del Pr pi. Y justo a la izquierda aquí verás que tenemos acceso a nuestra cuenta pro pi y también a algunos ajustes de aplicaciones de estudio. A la derecha aquí tenemos nuestros controles de zoom para que puedas acercar y alejar de nuestra Apple. Y hacia la derecha aquí, tenemos la capacidad de nuestro marco de dispositivo en un apagado. Ahora bien, no todos los presets tienen marcos, pero algunos de los mayores sí, como el iPhone. Y podemos bajar y echar un vistazo, digamos, al Galaxy S ten, que también tiene un marco de dispositivo. De acuerdo, muévelo hacia la derecha. Tenemos como panel de Desencadenadores. Entonces aquí es donde vas a crear todas tus interacciones. Y junto a eso, tenemos el panel Propiedades. Por lo que este panel será contextual dependiendo de lo que tengas seleccionado en su momento. Actualmente, tenemos el mismo seleccionado para poder ver las profecías de nuestra escena. Y justo arriba en el panel Propiedades Tenemos una vista previa, un área de vista previa de imagen. Y justo por encima de eso, estas fuentes te parecen bastante familiares. Herramientas de alineación que tenemos. Por lo que podemos alinear objetos en el bucle. En esta esquina aquí tenemos unas flechas izquierda y derecha. Entonces esta es una navegación de historia. Entonces a medida que avanzamos de parece a semilla o dentro de objetos o componentes, podemos navegar hacia adelante y hacia atrás a lo largo de la historia desde donde hemos estado. Atacar bastante útil. De acuerdo, subiendo a la cima. Entonces tenemos un montón de botones y menús en la parte superior aquí. Entonces del lado izquierdo aquí, tenemos impulso. Por lo que aquí es donde podemos importar nuestros gráficos desde el boceto de Adobe XD Fichman. Tenemos un botón de imagen el cual nos permite importar imágenes de nuestro sistema de archivos. Tenemos un menú de medios el cual nos permite importar otros tipos de medios como el video booleano. El menú de formas aquí, nos da algunos objetos primitivos básicos que podemos dibujar directamente dentro de un pro suministrando estructuras, rectángulos y círculos. Y el menú de impuestos nos permite añadir también algunas necesidades objetos de VIH. Por lo que tenemos un objeto de etiqueta de texto, y también tenemos un objeto de campo de texto de entrada. Junto a eso, tenemos el menú de contenedores. Por lo que puedes pensar en los contenedores para ser sinónimo de grupos en tu aplicación gráfica. Entonces tenemos un contenedor básico, pero también tienes estos otros contenedores especializados. Tenemos scroll contienen Out que nos permite hacer vistas desplazables. Y tenemos un contenedor de paginación que nos permite hacer vistas de paginación. Y finalmente aquí en el lado derecho tenemos botón Component. Por lo que podemos hacer clic en eso para crear nuevos componentes. Ok, entonces moviéndose hacia el lado derecho. Por lo que este grupo de botones tiene todo que ver con verle una vista previa de nuestros prototipos. Entonces tenemos el botón de vista previa para que solo traiga nuestras ventanas de vista previa al frente. Por lo que la ventana de vista previa siempre será activista una ventana separada, pero va a estar sentada detrás de nuestro archivo todo a través. sólo podamos llevar eso al frente de mi apatía oculta. Junto a eso, tenemos el menú del dispositivo. Entonces aquí es donde conectamos dispositivos reales al estudio. Para que podamos enviar un prototipo a un iPhone o a un teléfono Android o a una tableta. Y para ello, utilizamos el botón Ejecutar. Entonces a diferencia de la vista previa, donde la actualización automática anterior, conforme construimos nuestro prototipo, necesitamos enviar manualmente nuestro prototipo a un dispositivo con el botón Ejecutar. Por último, en esta esquina superior derecha, tenemos nubes para poder subir nuestros prototipos a la Nube. Y Cloud tiene todo un montón de características que estarán entrando en láser. Cosas como la capacidad de compartir nuestra Prosite con los demás. Y por supuesto llamado control de versiones dentro de la nube y un montón de otras cosas se verán más adelante. Y para subir tu prototipo a la nube, usas el botón Subir aquí. De acuerdo, así que eso completa nuestro rápido recorrido por la interfaz del precipicio Studio. Entonces como esperemos ver en es bastante familiar para otras herramientas gráficas que probablemente uses. Ciertamente herramientas como boceto de espesor en el día que XD. Y vamos a empezar mucho más familiarizados con nosotros a medida que trabajamos en el curso. Entonces esa es una envoltura para la herramienta rápida. Nos vemos en el siguiente video. 4. Organizar tus archivos: las mejores prácticas: Antes de entrar en las características específicas de entrada, creo que vale la pena tomarse un momento para hablar algunas mejores prácticas cuando estamos estructurando, importar nuestros archivos durante los gráficos es una mentalidad muy diferente. Interacciones locas. Con el tiempo, aprenderás cómo intercambia carpeta de gráficos mojo en el volante. Pero si eres nuevo en el prototipado o el diseño de interacción, probablemente necesites hacer algo de limpieza de archivos antes de importar. Entonces aquí están mis top set para cosas que te harán la vida más fácil. Punta número uno, nombra tus capas. Si quieres mantenerte cuerdo mientras prototipo en esto es una necesidad. Todos hemos estado aquí con este tipo de estructura de nombres sobre cuando estamos dentro de proto pi, vamos a estar usando los nombres y objetos como referencia para agregar interacciones. Por lo que queremos asegurarnos de que todos nuestros objetos permitan que los gráficos dentro de nuestro archivo tengan nombres lógicos para que podamos encontrarlos cuando necesitemos agregarles interacción. Punta número dos, evita grupos anidados innecesarios. Entonces como puedes ver aquí, tenemos estos, estos grupos que efectivamente son grupos vacíos que van a agregar mucha más complejidad a nuestro archivo. Y nos va a hacer más difícil encontrar cosas. Entonces esto es este tipo de cosas que queremos evitar. Qué es eliminar cualquiera de los grupos anidados innecesarios. Consejo número tres, grupo relacionado UI juntos. Entonces cuando estás diseñando para la interacción, el movimiento, vas a querer agrupar las cosas lógicamente juntas. Entonces como ejemplo, si voy a esta pantalla aquí, y se puede ver que tengo esto, este tipo de cuadrícula de imágenes. Y si miramos hacia abajo en el panel de capas, podemos ver que todas mis imágenes están agrupadas en este grupo podría enfriar flujo de fotos. Y lo he hecho porque este grupo de stream de fotos va a ser una vista desplazable y voy a querer que todo se desplace juntos. Así que piensa en tu diseño y piensa en qué bits están relacionados juntos, qué apuestas se van a mover un poco juntas, y luego asegúrate de agrupar esos juntos desde ok, set final. Reordenar sus capas a la jerarquía coincide con la interfaz de usuario. Entonces, ¿de qué estoy hablando ahí? Entonces eso va a pasar a esta pantalla de inicio de sesión. Entonces puedes ver aquí tengo estos objetos que tipo de oscuros de arriba a abajo. Y si miramos hacia arriba en el panel de capas, se puede ver que eso en realidad exactamente en el mismo orden. Entonces si paso el ratón sobre estos objetos y si mantienes los ojos en las capas, puedes ver que todos están en el mismo orden. Entonces, cuando estás animando, cuando estás en una interacción, esto tiene mucho más sentido para tu cerebro que la forma en que los programas gráficos normalmente lo hacen. Entonces como ejemplo, podemos ver aquí, tengo este marco con estas dos imágenes, pila y pila también. Si entonces duplique, ¿cuáles son estas imágenes? Se puede ver que en realidad lo suma arriba. El imagen ha indicado y no abajo. Y eso tiene sentido total cuando estoy dentro de programas gráficos probablemente van a querer mover este objeto hará encuestas objetos rasgos de distancia. Por lo que tenerlo en la parte superior lo hace accesible. Se agregó esfuerzo debajo. Tendría que seleccionar en el panel de capas o mover algo fuera del camino. Pero cuando estamos en una interacción dentro de una herramienta como proto pi. Esto en realidad lo hace mucho más difícil para nosotros porque está en el orden inverso de la forma en que se veía en la pantalla. Y ese tipo de líos con nuestros cerebros un poco. De acuerdo, así que esos son mis mejores consejos para hing impulso, organizar tu archivo para impulso antes de entrar en pi a pi. Por lo que a continuación, vamos a estar tomando estas primeras pantallas e importándolas de sigma a pi. Entonces nos vemos en el siguiente video. 5. Importación de Figma: Por lo que el primer paso de carga nuestro prototipo es mejorar nuestros diseños de actos. A través de este curso, vamos a estar construyendo una nueva app fresca llamada piedad descanso. No sé tú, pero me encantaron las tartas. Por lo que tener una app donde pueda mirar fotos de piezo día a suena como cielo. Antes de importar nuestras plantas para nosotros diseñadores sin embargo, me gustaría correr por algunos de los matices cuando lo importa sigma en spread apart. De lo primero que quiero hablar de sus componentes, cuando Greg y pones un impulso en prettify, viene como un grupo editable. Pero hay algunas restricciones a cómo se puede importar ese grupo ya que hay algunos inconveniente. Entonces una de las insuficiencias es que si le agregas un relleno al contenedor, al contenedor Fieger, eso no se va a llevar a través del importador al pino intérprete. Otra cosa que no se soporta desde los componentes son las esquinas redondeadas. Entonces hay suficientes cosas alrededor de los componentes que son, que son negativos dice lamentablemente en este momento, lo que significa que normalmente sí rompo mi componente, componentes separados en sigma, lo traigo en spread aparte. ¿ De acuerdo? El segundo es que si contrataste una capa en sigma que va a suprimirla de ser importada al prototipo. Entonces esa es en realidad bastante buena manera si quieres tener capas que no quieres importar, solo puedes ocultarlas dentro de un mapa de bits. Las capas de texto son cabezas de impulso en procesador Pi como capas listas para texto. Y lo que eso significa es que no van a entrar instantáneamente como texto editable. van a mantener vas a tener la capacidad de convertirlos en texto editable y refresco. Pero para preservar la tipografía, vienen como texto listo, por lo que efectivamente siguen siendo GraphX. Y, pero eso, eso sí, eso sí significa que lo harán, apoyarán las tipografías y las fuentes que tú elijas. Cuando conviertes un diseño listo para impuestos en tartas de crédito a texto real. Vas a tener que venir, vamos, vamos, vamos, vamos a pasar por esto. Vas a tener que cargar el teléfono en, digamos, tu dispositivo cuando estés probando en tu dispositivo para asegurarte de que se renderiza correctamente. Ok, entonces si reduce la opacidad de un fotograma en sigma para un componente o grupo, se ignora un impulso. Por lo que la única opacidad que se reconoce aplicada a las capas reales de objetos, FISMA objet labs. Y luego finalmente, si aplicas algún efecto de texto como trazo, será impulso porque el, como dije anteriormente, eso es hex laser-like en su formato listo para impuestos. Pero si los conviertes en texto editable, y para mí vas a perder esos, esos efectos. Entonces solo algunas cosas a tener en cuenta cuando estás preparando tus archivos sigma antes de llevarlos a prettify. De acuerdo, entonces si lo estás siguiendo, por favor descargue el grueso adjunto refiérase al curso que Sección dos, activos de alto estrés. Y ya he preparado este archivo, por lo que se ajusta a todos esos lineamientos de importación que les he dado. Para que no tengas que preocuparte por ninguno de esos. Pero este archivo en particular, asegúrate de tener el archivo abierto en sigma. Con eso abierto, como pueden ver aquí, vamos a ir a prettificarlo. Y vamos a crear una pipa nueva. Entonces eso sólo va a crear un archivo sin título predeterminado, y va a ser predeterminado para el iPhone 11 pro. Entonces vamos a estar construyendo esta app para el iPhone 11 pro. Entonces solo vamos a usar unos presets predeterminados. Entonces eso está absolutamente bien. Y lo primero que vamos a hacer es ir a este menú de impulsos aquí. Por lo que podemos ver tenemos las tres opciones que U3 soportaba aplicaciones, Adobe XD, boceto figurativo. Entonces vamos a elegir sigma. Y de inmediato vamos a obtener este diálogo de permisos desde protoplaneta. Entonces debido a que el higo sopla una herramienta en línea, necesitamos dar permiso para acceder a nuestros perfiles falsos. Por lo que sólo vamos a tocar el botón del Navegador de ganancias. Eso va a abrir una ventana del navegador. Y se nos va a pedir que demos acceso del eje S y R. Entonces eso está hecho. Podemos volver atrás y podemos continuar. Entonces eso es Volver a importar y elegir sigma de nuevo. De acuerdo, así que ahora tenemos abierto el diálogo Importación sigma. Entonces, solo pasemos por las opciones que tenemos aquí. Entonces lo primero que podemos ver es este cuadro desplegable, que nos muestra todos los marcos que tenemos dentro de nuestro Figaro desea sentarse en el fondo y deslizarse hacia la derecha aquí, tenemos las opciones para elegir el tamaño de entrada. Por lo que puedes ver que está por defecto agregar 3x, que es lo mismo que la densidad de píxeles de nuestro preajuste para iPhone 11. Pero sí tenemos la opción de cambiar eso a otra densidad. Desea asegurarse de que esta densidad coincida con su densidad preestablecida. Si estamos orgullosos del ISIL, lo contrario sus gráficos van a entrar en los sitios incorrectos. De lo siguiente que tenemos algunas opciones es de cómo importamos capas. Entonces por defecto, va a imitar toda la última estructura. Entonces lo que eso significa va a tomar la estructura de capa sigma y su va a duplicar eso correctamente dentro del prototipo. En su mayor parte es cómo quieres meter tus diseños en predicado. Existe una opción secundaria que es sólo capas MLT para las exportaciones. Entonces si quieres tener un control un poco más granular sobre lo que importas de fig. Se pueden exportar capas específicas. Y si eliges esta opción, entonces sólo se va a, digamos va a importar las capas exportadas a tu, a tu perfil de crédito. El resto de los oxígenos son todos respecto a una, otra característica dentro de la reimportación prototípica. Puedes volver a importar un archivo FISMA después de haber importado inicialmente en y esto tiene tipo de límites, cabezas, beneficios. Ciertamente desde mi perspectiva, realmente no uso tanto esto, pero solo para un poco de paso para la opción para que entiendas lo que significan. Entonces por defecto, los dos primeros oxígenos Hecht, que son posiciones sobremaduras de capas y sobrescriben tamaños de capas. Entonces si ya has importado tu archivo y vuelves atrás y cambias la posición del diseño o cambias el tamaño de un, son tan efectos que estás cambiando el diseño es cuando vuelves a importar conjunto, se va a actualizar todo de las capas donde has realizado esos cambios. Las otras dos cajas de chat, que son órdenes de actualización de capas e instrucción de grupo. Entonces de nuevo, si has cambiado la instrucción de grupo o te mueves a las capas alrededor nuevo fema va a aplicar esos cambios a tu importación Cuando lo vuelvas a importar al prototipo. Y luego finalmente nos han quitado capas, lo borra, o hecho invisible en marca gruesa. Entonces como viste antes, cuando dije que si haces invisible sobre la capa, va a bloquear que sea importada. Entonces esto va a suceder si compruebas esta opción donde si reimportas. Pero solo para reiterar, esto solo está relacionado con si utilizas la función de reimportación. Y eso no es realmente algo que usamos mucho. De acuerdo, entonces vamos a traer inicialmente nuestra primera pantalla, que es nuestra pantalla de inicio. Por lo que va a presionar el botón Importar. Y se va a conectar con sigma. Y va a importar todas esas capas. Y como puedes ver, está traído. Si miramos el panel de capas aquí en el lado izquierdo, se puede ver que S representó con precisión todas nuestras capas y nuestros nombres de tierra tal como aparecieron dentro de un FISMA. Y una de las cosas a señalar aquí es que cuando se utilizan las importaciones son de sigma intérprete pi, se va a importar todo como archivo PNG. Por lo que van a ser gráficos basados en píxeles. Se va a, va a hacer grupos fuera del, de los marcos que tienes. Entonces eso está todo renderizado como para como entre los dos. Y aquí está una de esas capas listas para impuestos de las que estaba hablando. Para que veas que tiene un poco de té en el círculo base de esquina, un ícono de imagen. Entonces eso significa que su capa de ataques y yo la puedo convertir en impuesto, pero en MOM, todavía sólo una imagen. De acuerdo, así que esos son nuestros primeros archivos para nuestra primera pantalla, imórtalo. Eso es bueno. Entonces ahora queremos tirar las otras dos pantallas que tienen pantalla de inicio de sesión y tenemos piscina de pantalla de inicio. Se puede ver aquí la primera pantalla del búho tiene unas pequeñas etiquetas vistas una. Entonces protoplaneta tiene el concepto de escenas y vamos a ser presencia y más parece emplear nuestra otra pantalla. Entonces vamos a ser muy breves, rompiendo nuestro bombo de prensa usando la característica de escenas dentro del protoplaneta. Entonces si pasamos a este pequeño ícono justo debajo del botón Importar que usamos, y simplemente lo tocamos. Podemos ver C1 y podemos ver este botón más. Entonces podemos usar eso para agregar una nueva escena. Entonces voy a añadir un par de escenas. Y nos dieron un doble clic en s2. Así que asegúrate de que tenemos parecer a la actividad. Voy a volver a imple Sigma. Y vamos a importar nuestra segunda pantalla, que es la pantalla de inicio de sesión. De nuevo, vamos a dejarlo todo. Es por defecto y hit Import. Descargando capas ahí y allá vamos, bang. Tenemos nuestra, toda nuestra pantalla renderizada dentro de un prototipo. De acuerdo, así que eso va a nuestra tercera y última escena. Entonces haga doble clic en eso. Y vamos a volver a la piscina. Y vamos a traer nuestra pantalla de inicio. Está bien, eso se ve bien. Simplemente voy a renombrar estas escenas para que podamos renombrar estas cosas ya sea haciendo doble clic en ellas. Entonces voy a llamar a este inicio. Este va a ser login. Y por último, tercero. Enfriar. De acuerdo, así que volvamos a ver por un segundo. Entonces solo haré doble clic en eso. Y quiero hablar un poco de SVG. Se puede emplear a SVG en prettify. Desafortunadamente, los importadores, y eso va para todos los importadores, gente de bebidas dispersas por dxdy. No apoyan a SVG por el momento. Por el momento, son justo como vimos ahí trayendo PNG. Pero hay algunas características con él, credito pi donde vas a querer tener SVG dentro de tu, dentro del archivo. Entonces solo te voy a mostrar cómo importar un SVG y es relativamente indoloro. Entonces lo que vamos a hacer es un ejemplo de esto es que vamos a reemplazar aquí el estrés de la meseta y el logotipo. Entonces si saltamos de nuevo a sigma y encontramos nuestra pantalla de inicio, y solo vamos a seleccionar el logo de pipas rest y vamos a hacer clic derecho o control-click. Y si no tienes un ratón de dos botones y solo vamos a elegir copiar pegar, que está en la parte inferior del menú. Y vamos a elegir copiar como SVG. De acuerdo, así que eso es saltar de nuevo al prototipo. Y sólo vamos a hacer una pasta irregular aquí. Por lo que Comando V, controlar vehículo usando ventanas. Y se puede ver que tenemos nuestro logo, pero se puede ver que es mucho más pequeño. Y esto es porque tenemos esta cosa de la densidad de píxeles pasando. Entonces nuestro iPhone 11 actual está en 3x, pero SVG, porque su resolución independiente, realidad no tienen una densidad de píxeles. Tan crédito por sólo traerlos a una x. Tan eficazmente, en nuestro tamaño de pantalla actual, Eso es fácil, fácil de arreglar. Entonces si mantenemos nuestro, nuestro SVG seleccionado y vamos a venir aquí a los valores de talla. Y dentro de estos, estos insumos podemos hacer efecto. Hacemos algunas matemáticas simples. Entonces solo vamos a multiplicar este ancho por tres y solo asegurarnos de que esto debe estar encendido por defecto porque asegúrate de que tienes el candado pequeño bloqueado. Por lo que esto se verá cómo relación de aspecto. Por lo que sólo podemos poner veces tres en este campo y va a escalar nuestro logo correctamente. Ok, entonces ahora tenemos nuestros logos crédito Gao. Simplemente vamos a posicionar eso más o menos en el lugar correcto donde está OWL, donde está nuestro actual logotipo basado en píxeles. Y vamos a ir a permite Pam, voy a eliminar el logotipo basado en píxeles. Entonces tenemos este SVG, así que esto tiene sí, otro ícono. Para que veas que tiene poco icono de imagen con este pequeño círculo en la esquina inferior derecha. Y sólo vamos a hacer doble clic en esto en el nombre y sólo vamos a llamarlo. De acuerdo, así que eso sobre lo envuelve para el video de importación de higo. Entonces, como puedes ver, es relativamente indoloro traer tus activos a un pastel de sigma. Hay algunas optimizaciones, son pocas cosas que deberás hacer para elaborar tu archivo solo para que saquen lo mejor del importador. Y también te he mostrado cómo puedes traer SVG en, en prettify de figura también. Entonces si figura es tu herramienta de elección, entonces puedes saltarte el siguiente par de videos. No te asegures de ver el impulso desde el video del Sistema de Archivos sin embargo. Por lo que hay algunas cosas ahí dentro que deberás saber antes de progresar. Y te veré en el siguiente tutorial. 6. Importación del boceto: Hola ahí. Entonces en este segundo video, vamos a estar viendo cómo podemos mejorar nuestros gráficos desde scatch ends acercar a un pi. Y vamos a estar construyendo nuestra nueva app genial llamada Arresto de piratas. El único app en el mercado que permite mirar fotos de tartas todo el día. Deberíamos francamente, sólo suena impresionante. Y lo que quiero hacer antes de que nos metamos en imponer nuestros gráficos InterPro pi es que solo quiero pasar por algunos de los gotchas de los que debes estar al tanto cuando estás importando gráficos desde sketch. Entonces lo primero que me gustaría llamar su atención es el hecho de que el protocolo, no soporta componentes de boceto ni símbolos. Si tienes un diseño que está usando componentes de Sketch y lo importas a prensatelas pi. Lo que va a pasar es que el protocolo va a convertir todos esos componentes en mapas de bits aplanados. Entonces tengo dicho fuera de borda por aquí solo para ilustrar lo que quiero decir y lo que va a pasar. Por lo que puedes ver aquí, tengo un logotipo y un componente de línea de correa. Y si no rompo esto, entonces se va a aplanar. El segundo escenario donde esto va a suceder es si tengo un grupo el cual tiene una mezquita dentro de eso, otra vez, si enmascara objetos dentro de scatch antes de llevarlos al procesador Pi, protoplasma va a convertir eso en un mapa de bits aplanado. Ahora esto podría ser algo que es deseable, sobre todo si tienes muchos gráficos que no son agregan una interacción a, puedes usar estas dos estrategias para flasear las cosas automáticamente, lo cual en realidad es bastante útil. Entonces lo que voy a hacer ahora es solo quiero mostrarles lo que pasa cuando traigo esto comprado a proceso Pi. Entonces vamos a pasar al proceso pi. Y vamos a crear un nuevo archivo de pila. Y acabo de tener un iPhone 11 pro setup. Entonces estoy usando este preset estándar. Y para importar intérprete de gráficos Pi, necesitas venir al menú de importación y yo voy a elegir boceto. Y se puede ver al instante ese protocolo está mirando el archivo de boceto que se sienta detrás. Y puede ver todos los tableros de arte que están dentro de nuestro archivo de boceto. Por lo que voy a seleccionar esculturas de inicio. Y voy a volver a esto, este menú y explicarlo. Pero justo por ahora, sólo vamos a dejarlo todo de los impagos e impulso. Ok, así se puede ver por aquí en el panel Capas de precipicio, mis dos objetos de línea de logo y correa. Entonces en scatch, el primero era un componente, y en boceto el segundo era ese grupo de mezquita. Por lo que se puede ver que es simplemente squash todos hacia abajo en un mapa de bits aplanado. De acuerdo, entonces vamos a deshacer eso. Vamos a volver a bosquejar. Y sólo vamos a echar un vistazo a estos otros archivos gráficos que tengo aquí. Y es querer hablar un poco de algunas otras características que tiene el importador. Entonces una de las cosas que es realmente genial es que puedes hacer muchas cosas dinámicas con capas de texto. Por lo que quieres asegurarte de que tus capas de texto de boceto sean tapas exactamente igual, así. Y cuando los importamos en, perfil va a mapear las capas de textos de boceto a sus propias capas fiscales nativas. Y vamos a poder hacer algunas cosas con esas y eso es, eso es bastante guay. Una última cosa sobre la que quiero llamar su atención es el hecho de que cuando usted trae gráficos a través de las importaciones de Sketch, intérprete pi va a convertir todos sus gráficos en mapas de bits. Entonces por el momento, prettify no soporta los gráficos importantes o vectoriales, una versión de mapa de bits de impulso santo de tus gráficos vectoriales. Y en su mayor parte, esto no es demasiado tema. Y sí tienes la capacidad de crear algunas formas nativas con increíblemente altas y exploraremos algunas de esas cosas más adelante en el curso. Pero aparte de eso, se puede esperar que proto pi respete para permitir la jerarquía. Todo lo que hay en una carpeta se va a convertir en versión prototipo de una carpeta de archivos, que es un contenedor. Pero para todos los efectos, es exactamente lo mismo y todo lo demás va a aparecer en el orden en que lo tienes dentro de tu archivo de boceto. De acuerdo, entonces con esos gotchas fuera del camino, vamos a dar nuestro primer paso. Vamos a importar algunos gráficos intérprete pi e iniciar la creación de nuestra app lugar rest. Justo antes de que hagamos eso, sólo voy a deshacerme de mis acciones captchas son comida. Deshazte de eso de las vigilias. No queremos confundirnos con eso. Y vamos a saltar por encima de dos pi. Y tenemos nuestro archivo py que creamos hace apenas un momento, lo cual está absolutamente bien. Podemos empezar con este. Y como lo hicimos antes, vamos a ir a importar y vamos a elegir boceto. Y cuando elijamos eso, vamos a conseguir este diálogo emergente es Importar diálogo. Y por defecto, va a leer el archivo de boceto activo que está sentado en segundo plano. En este caso es como la sección dos, las tuberías descansan activos. Y también va a poder ver todas las salidas que tenemos configuradas en nuestro archivo. Y los va a enumerar en este menú de Apple aquí. Por aquí tenemos el tamaño de entrada. Entonces, dependiendo del dispositivo para el que estés prototipando, vas a querer asegurarte de que los gráficos sean de tamaño a la densidad de píxeles correcta. Y de nuevo, debido a que el protocolo no admite la importación de gráficos vectoriales y vía las importaciones en este momento, vas a necesitar asegurarte de que tus gráficos de mapa de bits estén en la densidad correcta porque son dependientes de Resolución . Entonces para el iPhone 1011 pro, sabemos que el tamaño de impulso está en 3x, por lo que vamos a dejarlo en el valor predeterminado. Protocolo sabe esto también, es que sabe lo que el dispositivo preventa. Y como va a predicar, elige el tamaño del impulso, que es correcto para nosotros. De acuerdo, bajando a aquí, tenemos dos opciones bajo impulso lateral. Por lo que podemos importar toda la última estructura o podemos elegir simplemente impulsar capas exportables. Entonces si ya has sentado ciertas capas para ser explotables en scatch, sólo va a importar esas capas. Esto es algo que realmente no hago eso. Si eso es algo que es deseable para ti, entonces puedes elegir eso como opción. La última parte del impulso soy yo, una vez que viene rápidamente chats sobre es esta opciones de reimportación. Por lo que los pros Pi sí tienen la capacidad de reimportar gráficos que acaban de importarse, solo recuerda los últimos gráficos que importaste. Por lo que no hay ningún tipo de vínculo dinámico entre todos los gráficos que estás importando y las áreas particulares en tu archivo pila ondulado también importante. Entonces, si acabas de ver algo que necesitarías cambiar rápidamente, entonces puede haber una opción útil. Pero para ser honesto, No es algo que realmente use. Si eso es algo que haces por tu vas a conseguir valor nosotros mismos, entonces tienes algunas opciones aquí. Por lo que tenemos la capacidad de anular posiciones de capas. Entonces si ya has importado algún pastel intérprete de gráficos y quieres cambiar las capas alrededor. Se pueden cambiar las capas en Sketch y luego reimportar. Y va a reorganizar las capas dentro de tu archivo PY, sobrescribiendo tamaños de capas. De nuevo, si has cambiado algún tamaño en tus capas y las dispersas, vuelve a importar, va a actualizarlas . Actualizar órdenes de capas en grupo y estructura. De nuevo, si has reorganizado tus capas de tus grupos dentro un boceto cuando vuelvas a importar va a aplicar esas actualizaciones. Y finalmente eliminar capas eliminadas en boceto. Entonces si eliminas cualquier boceto duradero y luego reimportas, también te va a quitar esas capas. De acuerdo, entonces vamos a dejar efectivamente todas estas opciones se forma, se va a establecer los últimos murciélagos son estructura de capas y vamos a importar nuestra pantalla de inicio. De acuerdo, entonces nuestros gráficos tienen ahora impulsivos. Y si echas un vistazo, puedes ver que la jerarquía de capas coincide con nuestro archivo de boceto. Las casitas con las líneas punteadas. Estos son grupos, estos son efectivamente los grupos y boceto, y estos son nuestros contenedores pro proveedor. Se puede ver aquí conseguimos unos objetos de texto y esta era una capa de texto nativo dentro de scatch. Se ha importado, interpreta o pi como es un boceto especial. Perdón, esto, esta capa especial de impuestos. Se puede ver que tiene un poco de C en la base de esquina inferior también tiene un ícono gráfico también. Y lo que esto efectivamente significa es que por el momento sigue siendo un gráfico, pero sí tenemos la capacidad de convertirlo en tanques si queremos. Por lo que no todas tus etiquetas se convertirán de inmediato en textos nativos. Podrás seleccionar un V, elegir qué pedazo de texto realmente quieres ser nativo. Y eso normalmente son solo las cosas que quieres agregar, alguna interacción también. De acuerdo, así que esa es nuestra primera capa importada. Por lo que pueden ver aquí tenemos este nombre aquí que dice c1. Entonces protoplaneta tiene el concepto de escenas y podemos usar parece descomponer nuestro prototipo. Entonces vamos a sumar unas cuantas escenas más. Entonces si nos acercamos al panel de escenas volamos, que está justo por aquí a la izquierda se puede ver que tenemos como C1. Entonces solo voy a sumar otras temporadas porque queremos importar a nuestros otros que pantallas desde nuestro archivo de boceto. Y sólo vamos a hacer doble clic en s2. ¿ Cómo vamos a volver a importar boceto? Y esta vez vamos a elegir login. Tenemos que dejar todo en los valores predeterminados y hacer clic en las entradas. Eso es bueno. Y entonces finalmente queremos ir a nuestra tercera escena. Ir a boceto de impulso. Y vamos a elegir home and click import. Costera, esas son nuestras casas vistas importadas. Entonces lo que vamos a hacer ahora es sólo vamos a cambiar el nombre de estas tres escenas. Entonces vamos a llamar al primero, empezar. El segundo, vamos a llamarlo login. Y tercer vínculo la vamos a llamar. Ahora. Yo sí dije que a través del importador, tú, solo puedes importar gráficos en formato bitmap. Y eso es cierto. Pero hay otra forma de impulsarle los gráficos desde el boceto a la alabanza pi, donde en realidad no se podía imitar gráficos como vectores. Por lo que los protoplanetas soportan el formato SVG y existe la funcionalidad para poder importar SVG integra simplemente no directamente a través de las importaciones son en este momento actual. Entonces lo que vamos a hacer es que sólo vamos a ir a nuestra pantalla Inicio. Y voy a abrir su grupo y voy a conseguir mi logo, mi logo de Pintrest. Yo quiero traer eso como SVG porque vamos a estar agregando algunas animaciones donde más tarde. Entonces no iba a hacer es volver a bosquejar y voy a encontrar mi grupo de logotipos. Entonces este de aquí, solo quiero el logo marca partes del logo. Y voy a hacer clic derecho en la carpeta dentro del panel Capas. Y voy a elegir Copiar código SVG. De acuerdo, entonces voy a cambiar de nuevo al prototipo. Y sólo voy a hacer un comando Paste regular aquí. Ahora verás que mis mis Logos importaron en. Se llama imagen ancha y tiene este ícono. Este es el ícono de SVG, pero al instante notarás que es muy, muy pequeño. Por lo que actualmente por el momento impresionado por cinco puntos 05, hay un problema con las importaciones SVG, donde la importación solo trae en el archivo, agrega su tamaño físico en 1X, y no reconoce la densidad de píxeles de tu tamaño del archivo. Entonces solo necesitamos hacer un poco de mapas y un poco de manipulación para arreglar esto es SVG, por lo que el vector escalable. Entonces el tamaño no es realmente un problema para nosotros. Entonces sólo vamos a mantener esto seleccionado y vamos a venir a la Talla. Entonces por aquí tenemos el ancho y tenemos el más alto. Y dentro de estos campos, en realidad puedo hacer matemáticas simples. Entonces voy a asegurarme de que mi candado esté bloqueado, eso bloqueará la relación de aspecto. Y en el campo ancho izquierdo, lo voy a atar asterisco, que es el símbolo para multiplicar y mirar su altura tres. Y efectivamente vamos a multiplicar este valor por tres. Entonces va a dar vuelta. De acuerdo, así que ahora tenemos nuestro logotipo de tamaño hasta el tamaño correcto porque está a 3x densidad de píxeles. Lo multiplicamos por tres y lo tenemos al tamaño correcto. De acuerdo, así que sólo voy a poner eso en su lugar. Eso se ve bien. Y voy a renombrar este logotipo. Y ahora puedo quitar de forma segura mi grupo de logotipos hace éste aquí. Y de hecho, eso acaba de poner el logo dentro de este grupo aquí. Y ahora he reemplazado mi logotipo de mapa de bits por uno de gráficos vectoriales escalables. Para que sobre envuelve nuestra mirada al impulso en gráficos de Sketch interpreter pi. En el siguiente video, vamos a ver cómo imploramos gráficos de Adobe XD interpreta un pastel. Pero si bosqueja tu herramienta de elección, entonces puedes saltarte ese video con seguridad. Asegúrate de ver el video donde hablo de importar desde el sistema de archivos sin embargo, porque hay algunas cosas en ese video que vas a necesitar saber. Entonces te veré en el siguiente tutorial. 7. Importación de Adobe XD: Hola. En este tercer video, estaremos viendo cómo importamos gráficos de Adobe XD para crear esta increíble nueva app llamada Pipes rest. No sé tú, pero me encanta cuando llego a conocer esas cosas que me encantan, como los pi y los prototipos. O sea, Regla buscando nuestros proyectos de ensueño ¿verdad? En fin, antes de introducir nuestros diseños, quiero charlar un poco sobre algunos de los matices entre XD y Presser pi. Entonces algunas de las cosas que quiero discutir contigo es sobre la forma en que tiendes a diseñar gráficos en este tipo de softwares. Las tres aplicaciones de software que se soportan con orgullo de pi, Adobe XD, si la programación de ignorancia tiene el concepto de componentes, todas tienen el concepto de capas de texto y estilos. Entonces hay ciertas cosas que todos estamos haciendo cuando estamos creando gráficos tienen mucho sentido cuando estamos creando esas gráficas en estas, en estas aplicaciones. Pero hay algunos matices entre cómo creamos esos gráficos y cómo necesitamos importarlos a proto pyre y cómo prototipo tiene tipo de SAP para interpretar los gráficos que nosotros, que agregamos. Y verás si sucede que ves los tres videos, ¿cómo funcionan las sutiles diferencias entre cómo funcionan las tres apps? Entonces para Adobe XD , sus matices son, son estos. Entonces de lo primero de lo que hablaremos es de componentes. Por lo que los componentes de Adobe XD. Entonces cuando importas un componente, que es un componente de Adobe XD y lo importas a proto pi, se va a importar como un grupo Pi de proceso. Entonces eso es realmente bueno. Permite seguir utilizando componentes dentro de tus proyectos de Adobe XD sin temor perder ni ninguna funcionalidad o tener que manipular esos componentes de una manera particular como podría tener que hacer en algunos de los, en algunos de los otras apps. Por lo que los componentes son importantes como grupos. Y todos los gráficos aparte de las capas de texto, se convierten en mapas de bits. Ahora esto es algo que es bastante común en toda la importación está en el momento actual en el tiempo, todos los gráficos se convierten en mapas de bits cuando se importan, interpreta upaya presionado por no soporta dentro del impulso, el impulso de los gráficos vectoriales. Pero dicho eso, el hecho de que se pueda tener un componente en Adobe XD y llevarlo al procesador Pi y aún así manipula el cabello. Y también por el hecho de que las capas de texto estén preservadas y en realidad mapeadas directamente para presionar por capas de texto es algo bueno. Hace mucho frío. lo segundo de lo que quiero hablar es de capas enmascaradas. Por lo que W x D tiene un par de formas diferentes de tratar con imágenes y masas. Entonces tenemos por aquí en esta pantalla de inicio, tenemos esto, esta forma, que se tiene estos esta máscara aplicada a ella. Entonces si importas una mezquita en tarta de intérprete de Adobe XD, va a aplanar eso, todo ese grupo de objetos. Se va a asumir que es sólo una sola capa. Entonces eso podría ser algo que realmente quieras usar. Puede usar capas masivas para condensar la interfaz de usuario y a la que no necesita agregar interacción. Y haciendo eso en realidad condensa el tamaño de archivo de tu prototipo y también condensa la complejidad también. Entonces eso en realidad es algo que es bastante útil. Pero solo ten eso en cuenta que si tienes un simulacro, los objetos dentro de dxdy se van a aplanar. Entonces algo que no quieres hacer. No quieres una mezquita, un grupo donde tienes una capa fiscal y N por ejemplo. Y es posible que quieras usar esa capa fiscal mejora aplicada dinámicamente porque vas a hacerlo, vas a perder esa capacidad de edición cuando te transfieras. De acuerdo, entonces si tú, otra cosa a tener en cuenta es si solo volvemos a dos, casa, esta escena Home aquí. Y si miro dentro, permítanme destacar esto. Y vamos a entrar en la corriente de fotos aquí. Y sólo vamos a abrir una de las imágenes, en realidad Cisco Sekhmet una. Entonces puedes ver aquí que sólo tengo un solo objeto. Es una imagen que es efectivamente es un rectángulo de esquina redondeada donde acabo de caer una imagen. Y según Adobe XD es funcionalidad nativa es instantáneamente marca esa imagen. Y en realidad tengo esquinas redondeadas aplicadas a esto. Ahora, el problema, bueno, puede que no sea un problema, pero sólo algo a tener en cuenta es que si querías manipular esas esquinas redondeadas dinámicamente dentro de un proto pi, vas a tener que repensar la forma en que traes objetos, en para, para este tipo de cosas. Por lo que la forma en que funciona el protocolo es que permite agregar alrededor de las esquinas a grupos, a grupos proto pi nativos. Y también tienes funcionalidad que te permite animar dinámicamente esas esquinas redondeadas y cambiar esas esquinas redondeadas. Entonces si eso es algo que vas a necesitar hacer cuando estés, cuando empieces a crear prototipos. Entonces vas a querer quitarte las esquinas redondeadas dentro de Adobe XD. Simplemente trae tus imágenes cuadradas y luego agrupa y aplica las esquinas redondeadas dentro de un prototipo en su lugar. De acuerdo, entonces esas son realmente las únicas cosas a las que llamar su atención. Aparte de eso, puedes seguir diseñando exactamente como has estado en Adobe XD. Sabiendo que podrás llevar tus gráficos a la prosa upaya, sin que ocurra ninguna, ninguna rareza. De acuerdo, entonces ahora vamos a importar en realidad algunos gráficos a papaya prosa de Adobe XD. Entonces, y vamos a importar gráficos de esta sección al archivo P3s Assets, que está disponible en los archivos descargables. Y lo que voy a hacer es cambiarme para producir un pastel. Y sólo voy a crear una pipa nueva. Y por defecto voy a conseguir este iPhone 11 pro acts, que es del tamaño del teléfono que vamos a estar usando a través de todo este curso de capacitación. Y lo que voy a hacer es que sólo voy a deshacerme de la vista previa aquí. Entonces lo primero que voy a hacer es que voy a importar mis gráficos. Entonces si subo hasta aquí y puedes ver tengo este menú de importación. Y si has visto los otros dos videos, ya has visto esto. Esto es más o menos exactamente lo que pasé con los otros dos con los datos a las apps. Entonces para este video en particular, vamos a importar desde Adobe XD. Por lo que voy a elegir Adobe XD del menú. Y se les va a presentar este diálogo. Y este diálogo es casi idéntico para de hecho, es completamente idéntico para las tres apps. Apenas unas cuantas cosas terminológicas ¿qué diferente? Por lo que para Adobe XD, puedo ver aquí mi archivo el cual está abierto. Entonces tienes que tener tu archivo abierto en Adobe XD sentado en segundo plano y prettify va a recoger ese archivo y se va a introducir ese archivo y va a poder mirar todos los aeropuertos que tengas. Entonces en este menú de aquí, inicialmente puedo ver los tableros de arte que tengo dentro de mi archivo XD. Aquí, se puede ver el tamaño del impulso. Entonces porque como dije antes, todos los gráficos se convertirán en, o la mayoría de los gráficos se convertirán en bitmaps. Tenemos que asegurarnos de que esos gráficos sean importantes, que el tamaño correcto. Y para los dispositivos porque tenemos un, seguro que estás al tanto, porque tenemos pantallas de densidad de píxeles con diferentes, diferentes densidades de píxeles, entonces vamos a tener que asegurarnos de que traemos nuestro gráficos que sean de tamaño correcto. Entonces porque estamos diseñando en un iPhone 11 Pro, presionamos aplicar. Ya sabe que eso es, eso es una densidad 3x. Por lo que ya ha pre-elegido la densidad correcta para nosotros. Ok, así que moviéndonos más abajo, tenemos capa que importar. Por lo que aquí hay dos opciones. Podemos importar todas nuestras capas en la misma última estructura que se encuentra en nuestro archivo EXE. O bien podemos seleccionar sólo las capas marcadas para la exportación por lotes. Por lo que tiendo a usar sólo la estructura OLAP. Pero el solo para saber que tienes que pasar la opción ahí y disponible para ti si solo quieres importar ciertas capas. Toda la sección inferior tiene que ver con algo llamado re-importación. Ahora re-importar es una característica dentro de proto pastel en la que te permite volver a importar un diseño que acabas de importar. Y eso te permite realizar cualquier cambio en tu archivo Adobe XD. A lo mejor te has dado cuenta de que un gráfico no se ha posicionado correctamente o que querías las capas en un orden diferente o algo así. Después puedes hacer tus cambios en Adobe XD y luego puedes usar las opciones de reimportación dependiendo de lo que inicialmente establecieras aquí. Opciones de reimportación de Azure al importar por primera vez, eso es lo que se va a actualizar cuando realice alguna reimportación futura. Por lo que aquí hay cuatro opciones. Todos son bastante autoexplicativos. Por lo que tenemos posición demasiado madura de capas. Entonces si haces un cambio posicional en tus capas en XD, lo va a sobrescribir y prettificar. Sobrescribir tamaños de capas. Entonces de nuevo, si cambias el tamaño de las capas, eso va a ser lo actualiza. Y luego tienes estas otras dos opciones, actualizar diseño, órdenes y estructura de agrupamiento, y eliminar capas eliminadas en Adobe XD, de nuevo, bastante autoexplicativas, pero te permitirán hacer esos cambios. Y cuando vuelvas a importar tu archivo, esos cambios se van a hacer. Como ya he dicho anteriormente, realmente no uso tanto la función de reimportación. Y hay muchas razones por las que tiendo a cambiar mucho las cosas una vez como la empresa, pero Eso es algo que es de valor para ti, entonces la característica está ahí. De acuerdo, entonces solo vamos a dejar esto o en los valores predeterminados y asegurarnos que tenemos toda la última estructura y vamos a tocar entradas. De acuerdo, Entonces nuestra pantalla inicial ha sido impulsola. Se puede ver por aquí en el último panel, la jerarquía de capas ha sido respetada y preservada. Se puede ver que todos mis gráficos, que eran vectores, ahora se convierten en mapas de bits. Aparte de mis capas de texto las cuales tienen este icono especial de ley fiscal. Y capas de texto por defecto GET impulso dicho como capas de texto gráficas. Y lo que eso significa es que no es texto apropiado hasta que realmente me convertí a texto. Por lo que esto, esto permite no tener que tener todo el texto convertido por defecto. Hay algunos problemas con cuando estás previsualizando tus prototipos, digamos en la nube o en la web. No podemos, no podemos cargar fuentes personalizadas en la Web. Por lo que cualquiera, cualquier fuente que utilice necesita ser apoyada por fondos que tenían su navegador tenga acceso. Entonces cosas como esa, tal vez razones por las que tal vez no quieras convertir todas tus, todas tus fuentes en fuentes nativas. Entonces, pero aparte de eso, tenemos a nuestros grupos, que son efectivamente los grupos que estaban en Adobe XD. Y todo lo demás está bastante aseado. De acuerdo, así que tal vez hayas notado que en realidad tenemos este pequeño título escena uno de Haeckel. Por lo que eso hará alusión al hecho de que pro supply tiene el concepto de escenas. Y puedes pensar en las escenas como una forma de compartimentalizar tu prototipo en trozos manejables. Y vamos a estar usando bastante escenas con, a través de este curso vas a aprender mucho sobre cómo usar cantos y los pros y contras de las escenas. Vamos a traer nuestro 3C inicial, tres escenas, tres pantallas en intercedes. Y para hacer eso, vamos a ir a este menú flyout de escenas, y vamos a añadir un par de escenas extra nosotros pulsando el botón más aquí. Y vamos a cambiar a parecer también, sólo hacer doble clic en él. Y cuando vuelva a nuestro impulso, murciélagos, Adobe XD, y vamos a traer nuestra segunda pantalla, que es nuestra pantalla de inicio de sesión. Vamos a elegir eso otra vez. Vamos a dejar todas las demás opciones en el valor predeterminado y vamos a entrada de reloj. Por lo que ahora tenemos nuestra pantalla de inicio de sesión importada. Vamos a pasar a nuestra escena final, viendo tres, y vamos a importar nuestra pantalla de inicio. Yo sólo voy a elegir el para nosotros casa aquí. Y vamos a importar. Está bien, genial. Entonces todo se ve bien. Entonces como dije anteriormente, proveedor pro solo mapas de bits impulsan, pero están arriba ahí en realidad hay una forma de adivinar vectores, intérprete pyre, y eso es a través del uso de SVG. Por lo que pro supply soporta SVG. Tiene una cantidad limitada de soporte en este momento, pero sí te permite impulsar gráficos individualmente como SVG. Entonces lo que vamos a hacer para echarle un vistazo a eso mientras nosotros, ellos van a nuestro C1. Por lo que tenemos este logo es peice rest logo. Podemos ver que seis está aquí en este grupo y tiene la capa de texto ahí, pero tiene esta marca de logotipo, que es una gráfica. Y en realidad quiero aplicar algo de animación a esto. Vamos a hacerlo, vamos a hacerlo en un video futuro. Entonces una vez a punto de escalar hacia arriba y hacia abajo, no quiero que bitmap, así que voy a traer un SVG. Entonces la forma en que voy a hacer eso no va a volver a Adobe XD. Y voy a encontrar mi logo, me toca. Entonces es justo dentro de este grupo de aquí. Y voy a seleccionar set y voy a hacer clic derecho y voy a elegir la opción Copiar código SVG. De acuerdo, entonces voy a cambiar de nuevo al procesador Pi, y sólo voy a hacer una pasta regular aquí para pegar nuestro logo. Y se puede ver entrar nuestros logotipos, pero es insanamente pequeño ¿qué está pasando? Entonces a partir de la versión actual del protocolo que es sondeado por 5-0 cinco, hay un problema cuando traes SVG en el sentido de que entra en uno actúa ahora porque nuestro prototipo es un iPhone y es nuestra densidad de píxeles o 3x. No es tomar eso en cuenta, pero es un efecto fácil. Tenemos un SVG después de todo, así que sólo podemos inscribirnos. Y como sabemos exactamente el multiplicador en el que necesitamos para dimensionarlo, solo podemos hacer algo de masa básica. Entonces una de las cosas geniales del imperio pros y su impulso se siente como un amor por el rap dice que puedes hacer matemáticas básicas, cálculos matemáticos dentro de los propios campos. Entonces vamos a venir aquí al tamaño y donde podamos ver nuestro ancho y nuestra altura. Y asegurándose de que el candado esté bloqueado. Por lo que bloquea la relación de aspecto. Sólo vamos a poner una vez tres dentro de este campo. Ahora los tiempos dentro del software tienden a ser los asteriscos, así que eso es lo que vamos a usar. Entonces Astra S es tiempos y sólo vamos a escribir el número tres. Y vamos a dar vuelta. Y he aquí, ahora tenemos nuestra marca de logotipo dimensionada hasta el tamaño correcto. Está bien. Entonces esa es la posición que en la posición correcta justo encima de nuestro logo de mapa de bits como actual MAC. Y vamos a mover la imagen que es nuestro SVG, que va a mover eso al grupo logger. Y vamos a renombrarlo logo simulacro, sólo hacer doble clic en marca. Y ahora podemos quitar de forma segura nuestro grupo de mapa de bits del logotipo. Ya no necesitamos eso. Y hemos reemplazado con éxito nuestro gráfico de mapa de bits por un gráfico SVG. Ok, entonces una última cosa que tenemos que hacer es simplemente cambiar el nombre de estas escenas. Entonces vamos a nombrar a éste empieza. Y luego tenemos login. Y finalmente tenemos a casa. De acuerdo, así que eso sobre lo envuelve para nuestra mirada de impulso en gráficos hacia Adobe XD. Hemos cubierto algunos matices y cosas que te serán buenas saber si Adobe XD es tu herramienta de elección y quieres usarlos en concierto con la prosopagnosia. Y en el siguiente video, vamos a estar viendo cómo importas gráficos desde el sistema de archivos. Por lo que hay algunas otras cosas que son bastante útiles para saber hasta cuándo tu impulso en gráficos desde el sistema de archivos, a diferencia de solo usar los impulsos. Entonces te veré en el siguiente tutorial. 8. Importación del sistema de archivos: Entonces en este video, voy a mostrar cómo puedes importar GraphX desde el sistema de archivos. Por lo que tal vez quieras estar haciendo esto si estamos usando una herramienta, una herramienta gráfica para crear o gráficos que no sea una de las tres herramientas de apoyo. Cuenta con un insumos especializados. Entonces por ejemplo, algo así como Photoshop. O si te han suministrado gráficos por otra persona y solo necesitas obtener esos en un caso. Por lo que hay algunas maneras diferentes en las que podemos traer imágenes desde el sistema de archivos. También soporta una serie de formatos de archivo de imagen. Entonces supongamos PNG, JPEG, y SVG. Y para ilustrar esto, vamos a empezar navegando hasta la pantalla de inicio. Y sólo vamos a reemplazar una de estas imágenes de pastel por, una alternativa. Ahora, otra cosa a tener en cuenta es que al exportar gráficos hacia fuera, necesitan ser la densidad de píxeles correcta. Entonces cuando los importadores importan lo resolvieron para ti. Pero si lo estás haciendo con otra herramienta como Photoshop, Vas a tener que guardar la imagen OWL a un tamaño mayor dependiendo de cuál sea tu densidad de píxeles. Entonces porque lo estamos haciendo, cuando estábamos construyendo nuestro prototipo Editor, iPhone 11 Pro, podemos comprobar con la densidad de píxeles aquí. Entonces para nosotros, es 3x, lo que básicamente significa que cualquier gráfico que traigamos necesita ser tres veces el tamaño del sitio físico. Entonces, por ejemplo, si tuviéramos una imagen de 100 cuadrados cuando tenemos la garantía de explorar African Photoshop a 300 pixels cuadrados, para que sea la perspicacia de tamaño correcta sobre la fotosférica. De acuerdo, entonces una de las primeras formas en las que quiero mostrarles cómo traer imágenes desde el sistema de archivos es solo usar el botón de imagen regular aquí. Entonces más la mitad esto va a abrir una ventana del Finder. Voy a navegar a esta carpeta donde tengo algunas leyes, nos tenía aquí tener imágenes pyre. Voy a seleccionar este. Y vamos a importarlo que sólo un poco atascado en la parte superior del panel de capas aquí. Y voy a reemplazar este primer pi en el flujo de fotos, así image1 con mi, mi entrada para dañar. Entonces sólo voy a arrastrar eso al contenedor. Y voy a simplemente reposicionar eso al 0-0, así que está en la misma posición. Ahora puedo eliminar esto, esto existe en image1 y haga doble clic en esto para simplemente renombrarlo a imagen uno. De acuerdo, entonces esa es la primera forma en que reemplazamos nuestra primera imagen. Ahora, hay algunos problemas con el mal si decimos, por ejemplo, quiere reemplazar. Por lo que hemos, efectivamente hemos reemplazado una imagen por otra imagen, por lo que reemplazamos el gráfico existente. Y, y el problema con eso es que si nosotros, si ya hubiéramos agregado algunas interacciones a través del panel Desencadenadores aquí. Se va a romper y las interacciones que agregamos si somos etiquetas en esa imagen en particular. Y la razón de eso es que esta, esta capa de imagen aquí, se puede pensar en ella como un contenedor. Entonces cuando esto se importa y cuando apuntamos, digamos image1 con una sobre interacciones, en realidad va a apuntar al aire. Esto, esto como contenedor. No sólo va a ser el nombre de la imagen o vamos a elegir el nombre de la imagen, sino que en realidad es un objeto único. Y puedes pensar aquí como un contenedor de imágenes que tiene una imagen dentro de eso en oposición a solo una imagen regular. Por lo que hay otra forma de reemplazar los gráficos existentes. Y te voy a mostrar eso ahora. Entonces si mantenemos nuestra imagen una seleccionada y miramos por aquí, podemos ver que hay un botón de reemplazo. Por lo que esto nos va a permitir realmente reemplazar la imagen dentro del contenedor de imágenes por una imagen diferente. Entonces si tocamos un botón de reemplazo, navegaremos de nuevo a nuestra, nuestras piras y elegiremos a jugadores diferentes cuando esos gustos profundos s, Eso es reemplazar nuestra imagen actual de esta. Entonces vamos a golpear abierto. Y se puede ver ahora nuestra imagen ha sido colocada. Se ha reemplazado dentro del contenedor existente, el nombre del archivo todavía. Y si lo hacemos de esta manera y sí tuvimos algunas interacciones adjuntas, entonces van a estar bien y me van a romper de cualquier manera. Entonces si necesitas reemplazar los gráficos, esta es la forma en que debes hacerlo. De acuerdo, así que esa es una forma de llevar imágenes del sistema de archivos a tu archivo de pila. Hay otra forma de hacerlo. Por lo que para ilustrar esto, solo voy a saltar fui pantalla de inicio de sesión válida. Y si recuerdas, en el video anterior, sustituimos nuestro precio por logotipo S en nuestra pantalla de inicio por un SVG. Pero tenemos esta instancia del mismo logo en esto, en esta segunda pantalla de inicio de sesión también. Y se puede ver que se trata de un grupo de contenedores. Tiene una serie de imágenes separadas que conforman. Esta es justamente la forma en que se importó de sigma. Por lo que no puedo usar el comando Reemplazar. No existe porque sólo existe cuando hay una sola imagen. Entonces si selecciono una de estas imágenes, se puede ver que lo he reemplazado en eso porque nuestra marca de logotipo está conformada por múltiples gráficos, eso no va a funcionar. Entonces voy a tener que traer una imagen para nuevo. Esta vez sin embargo. Voy a traerlo directamente en el escritorio. Por lo que esto está bajo apoyo en, on, en el sistema presente MCAT. Por lo que FI aquí voy a encontrar este logo, SVG. Sólo voy a arrastrar y soltar. Y se puede ver que eso también es insumo a eso. Entonces eso es sólo traer ese n Ahora como antes, es más pequeño porque es sólo uno actúa porque es el archivo independiente de resolución. Y sólo vamos a dimensionar esto. Simplemente nos vamos al globo ocular como dicen, llévala a más o menos la ciencia correcta que se ve bastante cerca. Y de nuevo, ya sabes, es un SVG tiene este ícono muy especializado con el ícono de la imagen y este pequeño círculo en la esquina inferior derecha. Por lo que ahora puedo deshacerme de mi grupo con seguridad. Y ahora me han estrechado basado eso con el SVG. De acuerdo, así que eso nos lleva al final de la acción de impulso. Ahora debes tener una buena comprensión de las diferentes formas en que puedes importar tu GraphX junto con nuevas antiguas series de todas las diferentes herramientas de UI soportadas hasta el importador Bodega de vx, el boceto con FISMA. A continuación, te presentaré al modelo conceptual precipicio y a explorar que vamos a estar agraciando nuestras primeras interacciones. Entonces nos vemos en el siguiente tutorial. 9. El modelo de concepto Protopie: El protocolo funciona conceptualmente, pero los objetos del mundo real, no hay ningún código, solo objetos, desencadenantes y respuestas. Si piensas en señor, puedes aplicarlo a cualquier cosa que hagas en el mundo, como verter un vaso de agua. Tienes que tocar, que es el objeto. Es necesario encender el grifo, que es el gatillo, y luego salir verter un poco de agua, que es la respuesta. En principio, hay muchos desencadenantes o respuestas. Algunas son contextuales también. Por ejemplo, si echamos un vistazo al gatillo de arrastre, solo permite que las respuestas se muevan, escalen y roten. Otros, como tag, casi fuera de cada respuesta que la oración tiene para ofrecer. Las respuestas también cambian sus propiedades dependiendo de qué gatillo se utilice. Para dar un ejemplo de esto, cuando añades una respuesta de movimiento al desencadenador de ataque, puedes desplazarte a una ubicación o por nuestro número de píxeles relativos a la posición actual de los objetos. En un movimiento respuesta a un gatillo de cadena, sin embargo. Y en esta ocasión se te pide una gama de valores. Dado que la naturaleza de la cadena es conectar los atributos de un objeto con otros objetos afecta, los encadenamos juntos. Los desencadenantes se agrupan en una serie de categorías. Estos son táctiles, condicionales, mouse, key, input, y sensor. Para que veas que hay bastantes desencadenantes con los que jugar. Las respuestas también se agrupan juntas. Pero no tengo ningún nombre de categoría. Pero me gusta pensar en estas como propiedades de traducción. Movimiento, navegación, entrada, audiovisual, y un grupo final de respuestas no visuales diversas. La respuesta final no es realmente una respuesta en absoluto, sino una forma de organizar y múltiples otras respuestas basadas en ciertas condiciones. Añadirías una respuesta condicionada si quisieras crear una interacción con múltiples resultados. Por ejemplo, un login estará haciendo justo esto en un video futuro dentro de este curso. Ok, entonces eso es seis blog llamado set model con un simple ejemplo. Voy a dibujar un cuadrado y un círculo. Voy a hacerlos de diferentes colores. Agregaremos un gatillo de tabulación a nuestro círculo. Ahora agreguemos una respuesta de rotación y elijamos el cuadrado como nuestro objetivo. Y vamos a hacer que rote 180 grados. Yo quiero que la plaza gire desde su centro. Por lo que necesitamos cambiar el punto de origen. Por defecto, el punto de origen es la esquina superior izquierda. Ok, así que menos pérdida para previsualizar ventana. Ahora como puedes ver, cada vez que toco para círculo, los cuadrados encajan es puedo agregar múltiples respuestas a un solo gatillo. Es así como la respuesta escalar hará que la escala cuadrada sea un 5%. Vamos a previsualizar eso. Entonces ahora cada vez que toco el círculo, el cuadrado gira y se escala. Es importante saber que el orden en el que se ejecutan las respuestas se basa en el tiempo más que en el más viejo y las tienen en el panel Desencadenadores. Puedo controlar cada respuesta, arranques, y duración con estos valores aquí abajo. También hay una Línea de Tiempo muy simple. Y puedo controlar ambos valores dentro de esta mina superior también. Por lo que demora, duración. Entonces como puedes ver, la creación de interacciones es súper fácil de hacer. Hay algunas excepciones y es cierto que cada respuesta desencadenante tiene sus matices. Pero con un poco de jugar a nuestro alrededor y juicio y error, todos son bastante fáciles de entender. La prensa bastante documentación es bastante buena. Y puedes acceder a los documentos de cada elemento seleccionando el signo de interrogación al pasar el cursor sobre el elemento en el panel desencadenador o respuestas. Para que podamos ir a saltar aquí. Y me ha llevado directo a la documentación de salto. Por lo que ahora debes tener una comprensión básica del modelo conceptual y cómo los objetos, los desencadenantes y las respuestas funcionan juntos. En la próxima conferencia, aplicaremos parte de la teoría que hemos aprendido aquí. Empieza a construir la app de descanso de nuestro planeta. 10. Crear tu primera interacción: Si has estado siguiendo, abre tu archivo anterior con tus gráficos de importador. De lo contrario se puede descargar el archivo de inicio de este tutorial. De acuerdo, entonces lo primero que vamos a hacer es seleccionar CTA y añadir un gatillo de tap. Y ahora vamos a sumar una respuesta llamada Jump. Por lo que saltar es una respuesta que te permite pasar de una escena a otra. Entonces hemos saltado seleccionados, vamos a ir a seleccionar cómo C, Y vamos a elegir iniciar sesión. Y puedes ver aquí tenemos algunas transiciones preconstruidas que podemos usar. Entonces tenemos fade, POP, slide in, slide out y flip. Para esta primera transición, solo vamos a usar el fade. Y esa más o menos es nuestra primera interacción creada. Entonces eso fue fácil, ¿no? Ok? Entonces conectemos nuestra pantalla de inicio de sesión a la pantalla de inicio. Si quieres pausar el video y tener un objetivo para ti, hazlo ahora. Ok, si has tenido un go en conectar la segunda pantalla hacia arriba, espero que haya salido bien. Déjame ponerme al día contigo y hacerlo también. Por lo que voy a seleccionar el botón Continuar en el inicio de sesión a tiene que ir a nuestro login parecen. Entonces sigamos ahora botón. Voy a añadir otro disparador de pestañas. Al igual que antes. Voy a añadir una respuesta de salto. Y esta vez voy a seleccionar la pantalla de inicio. Y mantendremos este como un desvanecido también. De acuerdo, entonces vamos a probar esto. Entonces, antes que nada, necesitamos asegurarnos de que nuestro archivo esté en la escena inicial antes de entrar en previsualizaciones de S, haga doble clic en el personal. Vista previa. Y vamos a golpear inicio de sesión. Buena transición de desvanecido a nuestra pantalla de inicio de sesión. Y luego vamos a pegarle Continuar. Y un bonito desvanecerse en nuestra pantalla de inicio. Genial, así que ahora hemos conectado las tres pantallas usando algunos disparadores básicos y respuestas. A continuación vamos a crear alguna entrada de texto real y estamos deseando verte allí. 11. Crear un formulario de inicio de ingreso: Hey, bienvenido de nuevo. En este video, vamos a crear un formulario de inicio de sesión de trabajo. Para ello, vamos a utilizar prettify entradas de texto especiales, lo que nos permite escribir impuestos reales utilizando el teclado nativo. De acuerdo, entonces vamos a asegurarnos de que estés en la escena de inicio de sesión. Si no lo has hecho, si no has estado siguiendo, puedes descargar un archivo Python de inicio. Para que puedas seguir adelante. Entonces lo primero que vamos a hacer es que vamos a arrastrar hacia fuera una entrada de texto. Vamos a crear entrada de texto por aquí desde el menú de impuestos. Y queríamos darle estilo a esta entrada SAT refleja nuestro diseño aquí. Entonces lo primero que vamos a hacer es que vamos a establecer la talla para que sea del mismo tamaño. Por lo que comprobamos aquí es 343 por 48. Entonces eso se hizo así. De acuerdo, y vamos a querer curvar fuera de las esquinas. Entonces vamos a establecer las esquinas del radio. Esto aplanado. Entonces vamos a establecer el radio a 24. Y vamos a poner el relleno de fondo de la entrada en blanco. De acuerdo, así que también queremos igualar este relleno. Entonces vamos a añadir algo de relleno a la izquierda. Y vamos a añadir algo de relleno. Ahí es cuando C. Y voy a poner la fuente va a cambiar el pulgar. Puedes usar lo que quieras. Y voy a usar sonidos de Museo, 516 píxeles de grande. Y vamos a cambiar el, aquí es donde dice input dot-dot-dot. Este es el texto de marcador de posición. Entonces sólo voy a cambiar el color de eso. Entonces voy a encontrar texto de marcador de posición. Y voy a cambiar esto a siete. De acuerdo, así que como puedes ver ahora, que entre cada quita, vamos a deshacernos de esa frontera. Entonces solo voy a desmarcar eso. Esa fue la frontera gris original. Está bien. Entonces eso se ve bien. Vamos a mover la posición de camionetas justo encima de ese campo de correo electrónico. Y quiero cambiar el texto del marcador de posición. Entonces solo voy a cambiar eso por correo electrónico. ¿De acuerdo? Y vamos a renombrar esta entrada, correo electrónico. entrada. De acuerdo, así que eso es duplicar eso. Entonces Comando o Control D. Y vamos a nombrar esta contraseña. Y sólo voy a posicionar eso sobre el campo de contraseñas. Pero también voy a cambiar el orden dentro del panel de capas. De acuerdo, entonces eso cambió el texto del marcador de posición a contraseña. Y si nos desplazamos hacia abajo hasta las opciones del teclado aquí, así podemos cambiar el tipo de teclado a una serie de teclados. Por lo que por defecto utiliza el teclado fiscal donde tenemos URL, correo electrónico, número, texto y contraseña y contraseña numérica. Y vamos a cambiar el teclado a la contraseña fiscal. De acuerdo, así que en realidad, si vuelvo a mi campo de entrada de correo electrónico, también voy a cambiar ese teclado a correo electrónico. Y solo nos daré el, el símbolo de la app en el teclado. De acuerdo, así que eso es sólo probar rápidamente eso, a ver qué tenemos. Entonces si toco el correo electrónico, puedes ver ahora aparece un teclado. Ahora este teclado aquí en vista previa no es un teclado real. Esto es solo para mostrarte que la funcionalidad del teclado está funcionando. Pero si esto estuviera conectado a un dispositivo real, obtendrías un teclado de trabajo real. Cuando estás, cuando estás probando en vista previa, aún puedes usar tu teclado real que está conectado a tu computadora. Simplemente no puedes escribir ni tocar ninguna de estas teclas dentro de la ventana de vista previa, esa red. Entonces si solo puedo teclear aquí mi teclado y puedes ver que estoy consiguiendo todo lo que necesito. Entonces le digo a mi correo electrónico y si escribo contraseña, si empiezo a escribir, verás obtendré los puntos de contraseña porque elegimos la contraseña fiscal como la, como el tipo de teclado. Genial, así que ahora hemos reemplazado con éxito nuestro TextField gráfico, tenemos unos reales interactivos. Para que puedas ver cuando tocamos cualquiera de estos campos, el teclado aparece y oscurece nuestro botón Continuar. Y así vamos a manejar esto de dos maneras. En primer lugar, vamos a hacer que funcione el botón ir para que cuando tuvimos, cuando lo tocamos, nos dirijamos a la pantalla Inicio. Entonces hagámoslo ahora. Entonces vamos a agregar otro gatillo y va a ser un gatillo de retorno. Y desde el menú desplegable de capas, vamos a elegir elegir el campo de contraseña, entrada de contraseña. Y porque efectivamente vamos a estar usando la misma transición que ya hemos configurado sin capturar, y sólo vamos a copiar esta respuesta de salto. Entonces Comando Z o Control Z, si tus ventanas, y vamos a pegar eso en. Y probamos esto ahora debemos navegar a la pantalla Inicio. Entonces, vamos a tener una jugada. Entonces si toco el campo de mi contraseña y luego presiono el botón de retorno, puedes ver que he transitado a la pantalla de inicio. De acuerdo, así que eso está bien, pero aún así queremos que nuestro botón sea visible como opción también. Por lo que necesitamos animar por encima del teclado cuando aparece. El primero que tenemos que hacer es activar la animación cuando un usuario está en el campo de correo electrónico. Ok, así que eso ha movido los campos de texto juntos y agruparlos. Y eso los va a poner dentro de un contenedor. En realidad podemos eliminar cómo graficar capas de contraseñas también. Y vamos a nombrar este formulario de contenedor. Ok, así que eso es abrir esto y seleccionar el campo de correo electrónico. Y ahora vamos a añadir un manejador de disparador de enfoque. El otoño, tenemos lo tenemos satisface, que es lo que queremos. ¿ De acuerdo? Entonces eso es que un duns que tenemos refleja cómo forma. Y ahora vamos a añadir una respuesta de movimiento dentro de nuestro gatillo de enfoque. Observe que en ese espacio tenemos nuestra forma seleccionada. Eso es mejor. Voy a poner el cable a 3-20. De acuerdo, entonces vamos a probar eso. Entonces cuando nosotros la gente en campo de correo electrónico, podemos ver que nuestro formulario se mueve hacia arriba luciendo bien. De acuerdo, entonces volvamos a nuestro prototipo. Y eso es duplicar este movimiento. Entonces eso dice Comando Z o Control D. Y esta vez vamos a elegir la primaria CTA, que es nuestro botón Continuar aquí abajo. Voy a poner eso como el blanco. Y vamos a poner la y a cuatro 55. Y eso es probar eso otra vez. Por lo que seleccionamos en nuestro campo de correo electrónico, podemos ver que nuestra forma ahora se ajusta para sentarse encima del teclado. Está bien, genial. Por lo que ahora hemos construido nuestro formulario de inicio de sesión. Por ahora, está bastante hecho, pero estaremos agregando alguna lógica condicional en un video posterior para que funcione de verdad. Por lo que hemos cubierto algunas cosas bastante cool ya con entradas y lo anima basado en el enfoque de entrada. Y la app ya empieza a sentirse más real. Aunque hacer que cayera aún más real, es probarlo en un dispositivo real, que es lo que estaremos haciendo en el próximo video para verte ahí. 12. Prueba en dispositivos reales: Hola allá y bienvenido de nuevo. Entonces en este video, solo te voy a llevar a través de la app compañera para prototipo superior, cual puedes descargar para iOS y Android respectivamente, es app gratuita y es una app de jugador. Y esta es una gran forma de probar tus prototipos en dispositivos, de hecho, es esencial para ti también, y poder probar tus prototipos en dispositivos. No puedo recalcar lo importante que es realizar pruebas en dispositivo. Obviamente depende. También en la vigilancia de su edificio. Hay algunas cosas que vas a necesitar probar en el dispositivo. Y en realidad en este curso vamos a estar usando algunas características que son solo de dispositivo. Entonces cosas como vamos a estar construyendo una aplicación de cámara y vamos a estar usando retroalimentación háptica más adelante en el curso. Por lo que vas a necesitar poder usar un dispositivo para experimentar eso. Entonces, ¿cómo funciona con dispositivos? Entonces si echamos un vistazo aquí en esta área de menú aquí podemos ver que tenemos esta opción de dispositivo y tenemos esta opción Ejecutar. Por lo que puedes ver ahora mismo ese ícono del dispositivo es en realidad verde. Entonces si toco eso, puedes ver que mi iPhone está conectado. Sabemos que está conectado porque está en azul y es ese pequeño ícono de juego junto a él. Y hay un par de formas diferentes de conectar dispositivos. Entonces estoy, estoy conectado vía USB, así que tengo un cable USB conectado desde mi computadora a mi teléfono. Entonces esa es una forma de hacerlo. También puedes conectarte a través de WiFi. Solo tienes que asegurarte de que incendio de tu computadora y el wifi de tu teléfono sea el mismo. Y luego puedes conectarte. Por lo que también puedes, si sí usas Wi-Fi y luego puedes, puedes escanear este código QR. Y puedes acceder a este código QR desde dentro del pro supply en que también te ahorrará la molestia de escribir en la dirección IP de tu, de tu wifi. Por lo que te asegurarás de que tus teléfonos estén conectados en una de esas opciones. Y luego el botón de ejecución básicamente envía un prototipo a tu dispositivo. Entonces a diferencia de la vista previa, donde es una especie de automático. Entonces vista previa, si muestro eso aquí, tenemos esto también autobuses. Por lo que tan pronto como haga un cambio en su entorno de tres se va a actualizar automáticamente en Vista previa. No es así como funciona para el dispositivo. Vas a tener que apretar el botón Ejecutar. Vas a conseguir este pequeño sonido de carnero y lo verás cargar en tu dispositivo. Y luego vas a poder probar eso. Por lo que en realidad vamos a echar un vistazo a nuestro sitio anfitrión tal y como actualmente se encuentra en nuestro dispositivo. Entonces ahora voy a cambiar a nuestro dispositivo. Para que puedan ver por aquí, ahora estoy viendo mi prototipo en mi, en mi dispositivo. Entonces solo voy a arrastrar desde la parte inferior de la pantalla para revelar el menú. Entonces tenemos algunas opciones aquí dentro de player, que es el nombre de la app que descargas tanto para iOS como para Android. Y tenemos la capacidad de parar, tenemos la capacidad de reiniciar el prototipo y tenemos la capacidad de ahorrar. Por lo que podemos guardar el prototipo en el propio dispositivo, lo cual es realmente útil si tienes una conexión a internet realmente mala, si estás haciendo algunas pruebas de usabilidad. También tenemos una base para cambiar la velocidad del jugador y también podemos cambiar la escena que estamos, estamos viendo. Entonces podemos, podemos hacerlo dentro del panel de control. Y si solo paro el prototipo aquí puedes ver esta es la pantalla por defecto que verás. Donde puedes ver puedo conectarme vía USB o puedo escanear el código QR. Se puede ver que estamos conectados vía USB en la parte inferior. Entonces solo para llamar su atención sobre la barra de pestañas en la parte inferior. Por lo que tengo la capacidad de acceder a Cloud. Puedo iniciar sesión y ver mis prototipos que he subido a Cloud. Tengo la carpeta donde puedo acceder a los prototipos que he guardado en mi dispositivo. Una cosa que quiero mostrarles, que es realmente, realmente importante es el gestor de fuentes aquí, que tenemos dentro de la configuración general. Y si hago clic en eso, se puede ver el, tengo ciertas fuentes instaladas. Por lo que si quieres usar la capacidad de tipo dinámico dentro de Pro pi, que definitivamente estará usando en futuros videos, realidad puedes descargar fuentes personalizadas en tu dispositivo. Y puedes asegurarte de que tus prototipados se renderizan correctamente. Y eso es realmente, realmente, muy útil. Hay algo que no es compatible dentro de la nube, dentro de la web, la parte web de la prensa Aplicar. Pero puedes hacer totalmente app en dispositivos. Y la forma en que lo haces es siempre y cuando puedas compartir esas fuentes con una app en tu teléfono. Entonces, ya sea por correo electrónico o por la nube de escoria o, o de cualquier otra forma, cualquier otra aplicación donde puedas transferir esos archivos a tu teléfono, solo puedes compartirlos. Producimos un pastel en el menú Compartir, y luego podrás descargarlos en tu dispositivo. De acuerdo, así que vamos a poner en marcha nuestro prototipo pulsando aquí el botón de reproducción. De acuerdo, así que estoy en mi app, así que solo voy a introducir mi app. Vamos a presionar el botón de inicio de sesión y voy a presionar el botón de continuar y eso me ha conectado a casa. De acuerdo, así que esta es la forma en que previsualizas tus prototipos en dispositivos. Es esencial para muchas características dentro de un plan PPO. De verdad te animo a probar tus prototipos en dispositivos de esta manera. Y hay algunas otras características dentro de la aplicación que es posible que desee revisar, como la capacidad de activar y desactivar las sugerencias. Entonces sí, es una aplicación realmente, realmente genial y es una manera realmente genial de ver tus prototipos. De acuerdo, así que este sobre termina nuestro video para buscar cómo previsualizar en el dispositivo. Y te veré en el siguiente video. 13. Crear el photostream desplegable: Hola ahí. Entonces en este video, vamos a estar creando un flujo de fotos desplazable. Así que abre tu expediente si has estado siguiendo. Si no, hay un archivo estrella que puedes descargar. Por lo que quería hablar de contenedores. Por lo que hay tres tipos de contenedores. Ahí hay un contenedor regular que es como un grupo. Ahí hay un contenedor desplazable y hay un contenedor de paginación, y puedes acceder a ellos desde este menú de aquí. De una manera podrás acceder a ellos. Pero sobre todo vas a ser contenedores locos por un grupo en capas juntas. Y hay, hay una, hay una muy buena razón para esto. Entonces si solo creo un espacio en blanco parece sólo por el bien de la demostración. Por lo que creo un contenedor a partir de aquí. Y efectivamente es una caja vacía. Y lo puedes ver aquí, mi panel Capas. Entonces pelea con nosotros crear un rectángulo. Y yo sólo voy a posicionar aquí mi rectángulo. Y voy a arrastrar eso al contenedor. Por lo que puedes ver que cuando pase el cursor sobre mi contenedor, el límite del contenedor es, pero mi rectángulo es una fábrica fuera de ese contenedor. Por lo que ahora voy a necesitar posicionar manualmente mi rectángulo en la posición que quiero. Y lo que puedes ver es el, si agarro mi contenedor, puedo mover eso por ahí. Se puede ver que los rectángulos se mueven con el contenedor. Si selecciono el rectángulo, se puede ver que se mueve por separado. Pero es, hay mucho trabajo manual aquí para especie de conseguir todo en la posición correcta. Si quiero asegurarme de que mis rectángulos en una, en una posición en la esquina superior izquierda. Y puedes ver aquí si selecciono Rectángulo que la posición es relativa el contenedor. Entonces por el momento, si yo, déjame simplemente cambiar esto a 00. Por lo que se puede ver cuando paso el cursor sobre que mi rectángulo está enteramente en la esquina superior izquierda y su posición es relativa al contenedor. Si selecciono el contenedor, se puede ver que su posición es un valor diferente porque es relativo a la escena. Por lo que existe esta relación padre-hijo entre contenedores y objetos que están anidados dentro de contenedores. Está bien. Entonces esa es una forma de, de, de usar contenedores. Pero como dije, en su mayoría vamos a estar agrupando contenedores, que es, es mucho más útil y más fácil de conseguir las cosas tal vez. Entonces justo como ejemplo de eso. Entonces si yo, si creo un rectángulo y un óvalo, y sólo voy a desplazar selecciónelos, y voy a agruparlos juntos. Entonces ese es el comando G en el Mac control G en windows. Se puede ver ahora que han sido puestos dentro de un contenedor. Y se puede ver que el límite de contenedores coincide exactamente con el área que es retomada por los dos objetos. Por lo que esta es, con mucho, una forma mucho mejor de crear contenedores. Y probablemente probablemente te encuentres haciendo el rastreo de contenedores de esta manera más a menudo que a la inversa. De acuerdo, entonces vamos a deshacernos de esta escena. Vamos a llamar nuestra atención de nuevo a la escena local. Y vamos a hacer nuestro flujo de fotos. Por lo que nuestro contenedor de flujo de fotos aquí con imágenes de cableado. Y vamos a convertir eso en un contenedor desplazable para que podamos desplazarnos hacia arriba y hacia abajo. Lo primero que vamos a hacer es que vamos a seleccionar la cadena de fotos. Y si nos desplazamos hacia abajo en el panel Propiedades, verás que hay una sección llamada paginación de desplazamiento. Entonces vamos a seleccionar scroll. Y eso ahora ha convertido nuestro contenedor regular en un contenedor de desplazamiento. Y se puede decir esto un par de maneras. Número uno, puedes ver que los iconos cambian por estas dos flechas pequeñas dentro, que significa que es un contenedor de desplazamiento vertical. Y también cuando seleccioné scroll, puedes ver que tengo algunas opciones más que me han revelado. Entonces a saber, el tercero, que es la dirección del pergamino, que por defecto es vertical. Esa tiende a ser la dirección de desplazamiento más popular. Por puede cambiarlo a horizontal con un deseo. Y también tengo esta opción llamada sobre scroll, que es el equilibrio que se obtiene cuando se desplace contenedor y llega hasta el final del contenedor y un poco tira de él como llena su no elástico. Esto es mucho un patrón de iOS. Y puedes tener aquello que se conmuta por defecto aquí también puedes apagarlo si lo deseas. La opción final es esta posición de desplazamiento. Por lo que puedo establecer la posición predeterminada de mis contenedores o ser algo distinto a 0. Lo vamos a mantener 0 por ahora, pero eso es lo que es si eres, si tienes curiosidad. Está bien. Entonces por el momento, así tenemos este contenedor de scroll. Pero por el momento, si solo previsualizo esto, para que veas que en realidad ni siquiera puedo mudarme. Y eso es porque tenemos a este grupo en la parte superior es el dispositivo y el grupo de biseles, que efectivamente está bloqueando nuestro acceso al flujo de fotos. Entonces esto es algo a tener en cuenta si lo estás, si estás intentando desplazarte contenedor y no se está desplazando, entonces hay una buena probabilidad de que haya algo más arriba en el panel de capas que es Bloquear en eso. Ahora, hay un par de formas en las que puedes lidiar con esto. Ross, No necesitamos para nada a este grupo, así que sólo podemos borrar aquí. Pero sólo quiero mostrarles otra forma de lidiar con el aire. Entonces si sí quería mantener este grupo, si lo mantengo seleccionado. Y aquí en la parte inferior del panel Propiedades, verás que esta opción hace que las capas inferiores sean tocables. Entonces si selecciono esto, lo que es efectivo va a hacer, va a decirle a mi cursor que ignore este grupo, este contenedor, y todos los objetos dentro de él. Por lo que efectivamente voy a poder hacer click a través de él y llegar a mi flujo de fotos. Entonces si tan solo previsualizamos eso de nuevo, correcto, para que ahora puedas ver yo puedo semblanza de scroll, puedo desplazar mi stream de fotos. No exactamente por qué uno, pero al menos puedo llegar a ella. Y aquí se puede ver eso sobre la inacción de desplazamiento. De acuerdo, en realidad vamos a eliminar este grupo era no lo necesitamos. Fue algo que vino del engrosamiento Ripple. Ok, y vamos a volver a devolver nuestra atención al contenedor de desplazamiento del flujo de fotos. Entonces la forma en que lo haces realmente desplazar es que necesitas definir el área desplazable. Entonces esa es la zona visualizable. Por lo que para nosotros, las áreas alveolares van a ser este tipo de área de pantallas de telefonía celular. Por lo que comienza justo debajo de la frase de catchphrase, pero queremos que termine justo encima de la barra de pestañas aquí. Entonces la forma en que hacemos eso es que solo necesitamos cambiar el tamaño del cuadro delimitador del propio contenedor de desplazamiento. Podemos simplemente arrastrar desde abajo aquí, conseguirlo más o menos en su posición. El uno. Entonces eso se ve bien. Entonces vamos a previsualizar eso. De acuerdo, así que ahora puedes ver realmente puedo desplazarme hasta el fondo. Pero todo como cuando estoy desplazando cómo va por debajo de las categorías que quería, fui a desaparecer efectivamente cuando va bajo los guiones de gato. Entonces, ¿cómo hacemos eso? Entonces lo que vamos a hacer es que vamos a asegurarnos nuestros contenedores de desplazamiento de flujo de fotos vuelvan a seleccionarse. Y vamos a volver al panel Propiedades. Y vamos a seleccionar esta opción llamada subcapas de clips. Por lo que clips hasta capas es efectivamente pesamos la forma en que enmascaramos proceso pi. Y se puede ver de inmediato se recorta el, el, el contenido del pergamino a mi cuadro delimitador de desplazamiento. Entonces si ahora previsualizamos eso, podemos ver que efectivamente estamos recortados dentro de esto, dentro de esta ventana. Suena bien. Pero ahora no me gusta realmente la forma en que es, está un poco viniendo en pantalla. Yo quería especie de las imágenes para estar debajo de la barra de pestañas. Simplemente no quiero que desaparezcan debajo de las categorías. Entonces voy a extender esto de nuevo hacia abajo. ¿ De acuerdo? Y vamos a previsualizar eso otra vez. De acuerdo, así que eso se ve más bonito, pero ahora no puedo desplazarme más allá. Y eso se debe a que la vista de desplazamiento solo se desplaza a la profundidad máxima del contenido que está dentro. Y los últimos objetos que tengo dentro de mi consentimiento de pergamino o son estas dos imágenes? Entonces necesito hacer un pequeño hackeo para forzarlo a desplazarse un poco más allá. Entonces vamos a crear un rectángulo. Y sólo llamaremos a este hack de pergamino. Y vamos a arrastrar eso al flujo de fotos. Voy a sentarme ahí abajo. Y necesito posicionar esto. Entonces sólo para las lambdas y sólo tipo de deshacer clic en el sublattice para que pueda ver lo que estoy haciendo. Y yo sólo voy a practicar hasta el fondo. De acuerdo, así que eso es sólo echar un vistazo a esto. Por lo que necesitamos averiguar cuál es la distancia. Entonces tenemos como barra de pestañas, que es 52. Entonces hagámoslo . Está bien. Por lo que ahora ya podemos ver un caso que se ve bien. Eso casi siempre son caminos. Pero no quiero ver esta caja gris. Entonces sólo voy a volver a esta caja gris y voy a bajar la visibilidad para llenar la opacidad a 0. Entonces no lo podemos ver. De acuerdo, vamos a previsualizar esa última vez. Ok, entonces ahora he conseguido la posición correcta de desplazamiento y todo se ve bien. Dulce. Ahora tenemos un buen flujo de fotos de desplazamiento. Las vistas de desplazamiento son la patente caballo de batalla para móvil. Y como puedes ver en pro upaya, es realmente fácil crearlos. Entonces eso es todo para este video. Se me unió en el siguiente video donde estaremos explorando el contenedor de paginación y estaremos construyendo una vista de página. Nos vemos entonces. 14. Crear pagar las pagas entre las vistas de detalle: Hola ahí. Entonces en este video, vamos a estar construyendo alguna funcionalidad de paginación en nuestro prototipo en la pantalla de inicio. Por lo que tenemos esta pestaña de desplazamiento de categoría en la parte superior. Por lo que vamos a permitir que los usuarios puedan hacer una página entre la pantalla d hoy y la pantalla reciente. De acuerdo, entonces para eso vamos a necesitar un poco más de contenido. Entonces tengo otra página preparada en el archivo de figura. Entonces tenemos esta página reciente de inicio, que es más o menos el mismo diseño, se acaba de conseguir contenido tan extra diferente para que podamos construir esta característica. Entonces porque no necesitamos el resto de los gráficos, solo necesitamos realmente este flujo de fotos. Lo que tiendo a hacer es simplemente crear una nueva escena en mi archivo Py. Y sólo voy a llamar a este impulso. Y este es solo un lugar donde soy gráficos cool, que luego puedo extraer las diversas piezas que necesito. De acuerdo, entonces vamos a ir a Import Fichman. Simplemente deja que eso se conecte y vamos a agarrar nuestro diseño reciente de casa. Ok, entonces todo lo que realmente necesitamos de esto, este importante archivo son los grupos de flujo de fotos. Entonces solo vamos a copiar ese comando C en el Mac o Control C o windows. Y vamos a cambiar de nuevo a nuestra escena Home. Y sólo vamos a pegar eso. Y voy a dejar eso por ahora, va a dejar eso ahí. Y voy a llamar a esta página dos. Y voy a necesitar que esto sea efectivamente igual que nuestro flujo de fotos en mucho Elaine Page one. Es un contenedor desplazable y todo eso. Entonces, solo hagamos eso ahora. Entonces solo revisamos cómo página 1716, Así que hay puede hacer que 716 alto. Y vamos a necesitar un pequeño gráfico de relleno también. Entonces solo voy a copiar eso y pegar eso en, aquí dentro. Lo mismo. Ok, entonces necesitamos convertir esto en un grupo de desplazamiento. Entonces eso es desplazarse hacia abajo a nuestra paginación y elegir scroll. Y estableceremos aquí los predeterminados. Por lo que ahora deberíamos tener efectivamente una página de desplazamiento duplicada. Por lo que necesitamos compensar a estos dos hacia el lado derecho para que no pagemos ella sintió lados de la mano derecha. Queremos que solo esté en el límite de nuestra pantalla. Por lo que sabemos que nuestro iPhone tiene 375 de ancho. Por lo que sólo vamos a cambiar con la página dos seleccionada. Simplemente vamos a cambiar la posición x 2375. De acuerdo, entonces tenemos nuestras páginas. Entonces lo que tenemos que hacer ahora es que necesitamos, de hecho, iba a reordenar estas páginas las de arriba. Y seleccionamos ambos y hacemos otro grupo. Entonces comando y control, G, Mac y PC. Ahora tenemos grupos son dos páginas en este otro contenedor. Y porque tenemos agrupados las páginas ese contenedor es exactamente del mismo tamaño que los dos grupos contenedores que dos agrupa páginas. Entonces vamos a tomar este stream fotográfico y vamos a convertir esto en un contenedor de pintura. Entonces vamos a la misma página de desplazamiento y pero esta vez elegimos paging. Y los contenedores de paginación por defecto a horizontal porque la página pretende ser semana horizontal puede utilizar la paginación vertical también. Y de manera similar a la forma en que funcionan los contenedores de desplazamiento, es la página está definida por el cuadro delimitador. Por lo que necesitamos reducir este cuadro delimitador para que sea sólo el tamaño del ancho de página de pago de una página. Podemos ver que es para 343. Por lo que sólo queremos que nuestro contenedor de paginación de flujo de fotos sea el mismo tres para tres. De acuerdo, entonces se puede ver ahora que se heredó el mismo límite. De acuerdo, hora de apegarse a este hit adelanto. Y hay paginación de juicio. Para que veas que es paging, tiene resistencia anual que obtienes con la paginación. Pero se puede ver que no está paginando exactamente en la posición correcta ya que todavía podemos ver el borde de nuestra FirstPage. Y la razón de esto, tenemos esta canaleta entre las dos páginas, pero estamos usando el ancho del contenedor de paginación para definir qué tan lejos, cómo próximas páginas de pantalla. Entonces si solo tenemos una mirada rápida hacia abajo a las opciones de paginación de scroll, dice página por contenedor. Y nuestro contenedor es 343. Entonces es paginando por tres para tres, pero necesitamos tener en cuenta la gasolina. Entonces lo que vamos a hacer es seleccionar nuestro contenedor de paginación de flujo de fotos. Y está esta página de opciones por la que vamos a elegir la segunda opción que es personalizada. Por lo que en realidad podemos definir un ancho personalizado. Y sé que esta costumbre con estos sp3 para tomar en cuenta el GSA. Entonces voy a teclear 360 en, ahí dentro y vamos a regalar en la prueba. De acuerdo, entonces ahora podemos ver cuando ponemos todas las páginas en la posición correcta. Está bien, genial. Entonces ese es el primer trabajo hecho. El segundo que queremos hacer es que queremos poder tocar estos botones de categoría y cambiar entre los dos. Por lo que queremos poder efectivamente lo que hago este botón de reinicio un toque en el botón en este momento no se puede ver ninguno de estos funciona. Y también queremos que este desplazamiento sea medio desplazable. Entonces hagámoslo ahora. Entonces primero vamos a cortar el grupo de categorías. Y tenemos que convertir eso en una contención de desplazamiento. Pero esta vez queremos que la dirección del desplazamiento sea horizontal. Al igual que antes, necesitamos cambiar el ancho del cuadro delimitador. Por lo que vamos a reducir el ancho 2343 sitio coincide con el mismo ancho que nuestro contenido. Y si rápidamente probamos eso, podemos ver que ahora hemos llamado pestaña desplazable. ¿De acuerdo? Entonces si abrimos esto, queremos encontrar la razón por la que las mayordomos recientes y es, hay un contenedor para carrera. Y lo que queremos hacer es que queremos hacer ese segundo balón. Por lo que vamos a agregar un disparador SAP, así que asegúrate de que esté seleccionado aquí en el último panel y agrega disparador de ataque. Y manteniendo seleccionados recientes, vamos a añadir una respuesta de color. Entonces las respuestas de color, como se podría adivinar, nos permiten cambiar el color de las cosas. Las respuestas de color solo funcionan en objetos de perfil nativos. Por lo que no puedes traer un PNG o, o simplemente un SVG y cambiar el color. Tienes que hacer algunos pasos extra y algunos de esos donde aplicar un color forma dos y un sub contenedores. Entonces todo eso está un poco listo para salir. Y sólo vamos a hacer de este un color particular. Entonces agarramos la referencia que es 00064, y necesitamos asegurarnos de que Phil tenga 100 de lo contrario funciona aquí. ¿ De acuerdo? Entonces vamos a probar eso rápidamente. Tos i Cuando lo hayamos tocado, podemos ver que la forma de la píldora ha cambiado de color, pero no podemos ver el texto. Entonces si abrimos nuestro contenedor, podemos ver que tenemos el texto y es este especial objeto de texto gráfico. Por lo que actualmente no podemos hacer efecto ese es color hexadecimal porque son estos objetos gráficos. Por lo que necesitamos convertir en texto. Entonces hagámoslo con este toque de este botón aquí. Y se puede ver ahora el icono se cambia y ahora es texto real. Entonces manteniendo eso seleccionado, vamos a añadir otra respuesta de color. Y esta vez vamos a cambiar el texto a blanco, Asegurándonos de que Phil esté configurado en 100. Vamos a probar ese código para que ahora podamos ver que tenemos outs, hap, estado, lo completa, pero cuando lo que ha pasado es gratis, por lo que Owl hoy sigue seleccionado. Queremos que no sean seleccionados hagan eso a continuación. Entonces lo que vamos a hacer realmente fácil, No pudimos, puedes copiar trozos enteros de interacciones dentro del panel Trigger. Por lo que va a seleccionar este gatillo de sombrero. Y sólo vamos a copiar eso. Y lo vamos a pegar. Por lo que hemos duplicado completamente. El gatillo del grifo y todo su contenido. Y así como de otra manera, permítanme simplemente borrar esto. No podemos seleccionar y hacer Comando D para duplicar aquí también. De acuerdo, entonces este gatillo de tap va a ser para nuestro botón de dos días. Entonces vamos a cambiar el objetivo a hoy. Entonces eso es sólo escribir palabras de búsqueda hoy. Y podemos ver que tenemos dos opciones que tenemos hoy, que es el contenedor y hoy deberíamos atacar. Entonces vamos a elegir el contenedor. Y vamos a cambiar el contenedor para hoy a hoy. Y vamos a cambiar la reciente demanda. Entonces para reciente necesitamos dos. Perdón por hoy se cambió hoy. En primer lugar, los objetos de texto. Y sólo vamos a, como lo hicimos antes, vamos a cambiar el gráfico a texto. Los combates son un poco de respuesta y vamos a hacer que ese blanco 100. De acuerdo, así que efectivamente duplicamos ambas pestañas. Hemos creado ambas pestañas. Entonces si toco, reset va a cambiar y si toco hoy va a cambiar. Pero como podemos ver, que ambos seleccionados, por lo que necesitamos cambiar el estado del otro. Por lo que cuando se selecciona recientemente, Hoy cambia, cambia de color. Entonces, ¿cómo vamos a hacer eso? Sólo vamos a cambiar seleccionar estas dos respuestas de color y nos dieron una copia estas. Y vamos a pegar directamente dentro. Y sólo vamos a cambiar el, los objetivos a los otros botones. Entonces aquí estamos cambiando reciente a azul y blanco y ahora vamos a cambiar hoy. Entonces vamos a encontrar hoy, elegir el contenedor y vamos a cambiar eso a blanco. Y vamos a seleccionar la siguiente respuesta de color. Vamos a buscar hoy. El texto. Y tenemos que cambiar eso a esa floración. Entonces esta basura ese valor hexadecimal. Y aplicaremos que aquí S certezas al Comando D para duplicar estos dos en nuestro segundo botón. Y vamos a hacer lo mismo porque en realidad vamos a revertir estos y queremos recientes, que tiene que ser blanco. Y permítanme una reciente, los objetos de texto. Y queremos cambiar eso a nuestro azul. De acuerdo, entonces eso da esa prueba. Por lo que empezamos hoy, podemos aprovechar recientes, ahora, recientemente seleccionados, y hoy no está seleccionado porque hemos cambiado las propiedades de color. Y también podemos porque hemos creado ambas tácticas como podemos aprovechar hoy. Y nuevamente, lo reciente es inseleccionado. De acuerdo, así que eso nos lleva al final de este video. Por lo que hemos creado estos dos disparadores de tap. Hemos creado la capacidad de página, y en el siguiente video, vamos a enganchar estas dos cosas. Entonces, cuando paginas aquí, vas a cambiar la pestaña seleccionada. Y de igual manera cuando selecciones aquí su hub, tu página también se moverá. Entonces nos vemos en el siguiente video. 15. Crear pestañas de desplazamiento con la cadena: Entonces en este video, vamos a estar conectando las pestañas de desplazamiento con un gatillo llamado cadena. Entonces, cuando deslicemos de un lugar a otro, queremos que la pestaña seleccionada se mueva. Aquí hay un poco de complejidad. Como podemos ver, estas etiquetas tienen diferentes lámparas y colores. Por lo que necesitamos no sólo transitar, cambiar su Lemma, también necesitamos manejar el cambio del color de la etiqueta también. Entonces lo primero que voy a hacer también, sólo para que sea un poco más dramático, sólo voy a reordenar algunas de las categorías aquí. Entonces lo primero que voy a hacerlo y esta lata para conseguir el orden en el panel de capas. El orden correcto. Me gusta mi capa ordenada para reflejar jerárquicamente. Entonces porque hoy es el primer elemento de la lista, quiero que esté en la parte superior. Entonces, solo moveamos estos alrededor. Entonces tenemos hoy, en realidad quiero poner recomendado continuación sólo porque es una palabra un poco más larga y va a hacer que sea un poco más dramáticamente. Funcionalidad que vamos a añadir aquí. Por lo que el próximo será reciente. Y entonces podemos dejar el resto como están. Tan dulce, salado y pollo. Y quiero búsqueda en la parte inferior. Yo quiero que eso sea por debajo. Sólo por una razón particular por la que eso tiene que ser así. De acuerdo, así que eso tiene que primeras partes y la siguiente parte sólo necesitamos cambiar visualmente los recientes recomendados alrededor. Entonces sólo voy a reposicionar estos aproximadamente. Y puedo seleccionar todos estos. Y por aquí puedo simplemente espaciarlos uniformemente. Está bien, eso está bien. De acuerdo, así que primero, necesitamos seguir moviendo tabulador. Nosotros los queremos queremos que el movimiento de la píldora al máximo, al movimiento del contenedor de paginación como lo deslizamos también. Entonces, entonces lo primero que vamos a hacer sin embargo, es que sólo vinimos a dar la capacidad de cambiar de pestañas cuando nosotros, cuando las seleccionamos con tapeado, ¿verdad? De acuerdo, entonces lo primero que vamos a hacer es crear un rectángulo de forma. Y esta va a ser nuestra pastilla. Por lo que necesitamos un tipo de crear una píldora gráfica. Entonces vamos a hacer esto del mismo tamaño que nuestra, como nuestra píldora gráfica que ya tenemos aquí, este contenedor. Entonces sólo vamos a hacer 7727. Vamos a cambiar el radio a 14. Y vamos a cambiar el color 00, 0-6 o d, k Y vamos a nombrar esta ayuda. Y sólo vamos a mover esto para debajo de las dos primeras pestañas. Y queremos asegurarnos de que empiece su posición exactamente en la misma posición que hoy, que es 390390. Está bien, eso está bien. De acuerdo, entonces lo siguiente que tenemos que hacer es que necesitamos quitar los campos de estos dos contenedores ellos mismos. Entonces solo necesitamos dejar Hoy vamos a mandar el relleno, no la opacidad de la respuesta llenada 0. Y vamos a cambiar, recomendar, recomendar que se esté llenando a 0 también. ¿ De acuerdo? Entonces lo siguiente que queremos hacer es que queremos duplicar. Tap contenedores, digamos mercancía. Y los vamos a mover a debajo de la pastilla gráfica. Y vamos a llamar a éste hoy. Y se recomienda embarazada hoy. Pero tocaré para seleccionar hit. Significa que es Hex es blanco, por lo que ambos textos tienen que ser por qué es el primero es ¿qué quieres? ¿Por eso? Basta con cambiar el color seleccionado recomendado, el blanco. Y podemos ver aquí en realidad que recomendado no es un objeto de texto nativo todavía. Por lo que primero necesitamos convertir este texto. Eso luego desbloquea cómo ese ETC, para cambiar de color, que podemos cambiar para esperar. Está bien. Simplemente volviendo a nuestros dos contenedores debajo de la pastilla. Por lo que estos dos necesitan ser el azul. Entonces al lado de nosotros en el día de hoy, hagamos ese 00064. Y sólo podemos copiar eso. Y para recomendado, de nuevo, necesitamos convertir esto a texto. Y eso ya tiene el color de la manivela, así que eso está bien. De acuerdo, todo parece un poco raro y solo necesitamos hacer una cosa más para que esto cambie mágicamente. Entonces vamos a seleccionar la píldora y vamos a elegir esta opción de manera abajo en el panel Propiedades en la parte inferior hay un obstáculo usa masa, así que vamos a seleccionar eso. De acuerdo, así que ahora se puede ver que los dos objetos, los dos contenedores por encima de la píldora han sido la pequeña flecha basada en CCS masiva. Entonces y los dos debajo de todo debajo no es masa. Entonces si solo agarro la pastilla gráfica y solo la muevo, puedes ver que la consigo cambiando mágicamente de azul a blanco. De acuerdo, así que eso se ordena el cambio de color. A continuación, necesitamos conectar las pestañas al contenedor de paginación. Para esto, vamos a usar una poderosa cadena de llamadas de gatillo. Cadena nos permite a Cannes cualquier rango de valor de propiedad a cualquier otro valor proxy ¿verdad? Aquí vamos a utilizar el rango de desplazamiento del contenedor de paginación para mover la píldora. Pero ahora sólo va a mover el pilar. Recuerda que la segunda etiqueta es mucho más larga que la primera. Entonces vamos a usar el cambio y transformar el lemma. De acuerdo, entonces vamos a seleccionar la cadena de fotos. Voy a añadir un gatillo de cadena. Y vamos a establecer el origen de los dos grifos solo para arriba sitio central coincide fuera Hill. ¿ Podría leer el valor correcto? Porque efectivamente vamos a transformarnos de esta pastilla de hoy a la píldora recomendada. De acuerdo, así que dejemos la píldora y vamos a añadir una respuesta a la cadena. Entonces cuando mires la cadena, verás que está conformada por seis cajas. Y sin duda por la respuesta del estado de ánimo. Por lo que las otras respuestas serían diferentes para que las dos primeras cajas sean el rango de movimiento. Entonces porque estamos cambiando al contenedor de paginación, la cantidad de distancia de una página a la otra es de 360. Entonces vamos de 0 a 360. Entonces ese es nuestro valor inicial. Entonces ese es el valor de nuestro, de nuestro desplazado nuestro distribuidor foci. Se puede ver arriba aquí, tenemos esta infografía cartográfica, que se relaciona directamente con los dos conjuntos de cajas. De acuerdo, así que eso es solo revisar los valores de las píldoras de hoy. Entonces cuando buscamos la posición, la posición central. Por lo que nos da un hacha de 77.5 para la estrella. Entonces estamos quitando los actos. Podemos ignorar estas, estas cajas blancas. Entonces vamos a sumar 77.5 aquí. Y entonces ahora necesitamos revisar la casilla recomendada x coordenada, que es 204. Cuando bombeamos ese valor aquí. De acuerdo, así que eso es prueba eso. ¿ De acuerdo? Entonces podemos ver ahora a medida que envejecemos nuestro contenido, pero como pueden ver, todavía tenemos que lidiar con la longitud de la píldora. hoy. La palabra es mucho más corta que el trabajo recomendado. De acuerdo, entonces volvamos a nuestro gatillo de cadena. Y vamos a añadir una respuesta escalar. Y vamos a poner, asegurarnos de que ponemos la capa de almohada como el objetivo. Y de nuevo, vamos a necesitar un rango de 0 a 360. Entonces estamos usando el mismo rango de movimiento o el flujo de fotos para cambiar el tamaño de la píldora. Tan bien a partir de la escala. Por lo que comprobamos hoy. Por lo que el ancho es de 77 aquí. Y la píldora recomendada que es 126. Ok, vamos a probar eso. Entonces a medida que me movemos página, podemos ver ahora que no sólo nos mueve cuesta arriba, sino que escala al tamaño correcto. Para que pueda encapsular la pestaña recomendada y luego enfriar. Por lo que ahora hemos conectado con éxito nuestra página y pestañas juntas y crear una animación genial entre la cinta. Si volvemos a tocar pestañas, podemos ver que las cosas están un poco rotas. Y eso es porque cambiamos la transición de tabulación. En el siguiente video, vamos a arreglar esto para verte ahí. 16. Selección de pestañas para pasar entre las páginas: Hola ahí. Entonces en este video, vamos a completar nuestro desplazamiento y paginación conectando nuestras pestañas para mover las páginas. Nadie podrá los usuarios deslizar la pantalla, pero también tendrán la capacidad de tocar las pestañas. Ok, entonces lo primero que vamos a hacer es que vamos a seleccionar nuestra primera pestaña y vamos a cambiar esto por recomendado. Entonces a continuación vamos a eliminar todas las respuestas de color. Ya no los necesitamos porque ahora hemos creado nuestra nueva animación de colina. Y vamos a seleccionar la píldora. Y vamos a añadir una respuesta de movimiento. Ok, entonces eso es poner la x en 204. Y ahora agreguemos una respuesta de cicatriz para que podamos escalar la píldora así como mudarnos. Y vamos a fijar el ancho aquí, 2146. Está bien, eso está bien. Eso funciona como se esperaba. De acuerdo, así que pasemos a nuestra siguiente pestaña. Y vamos a seleccionar el gatillo de salto siguiente. Y vamos a cambiar estos objetivos que hoy. Y de nuevo como antes, vamos a eliminar todas las respuestas de color. ¿ De acuerdo? Porque nuestra animación, prácticamente lo mismo que la primera. Podemos simplemente copiar esta escala de movers. También lo hace el comando C o el control C o Windows. Y si seleccionamos tabulador, podemos pegarlo en. Y esto va a paso y queremos cambiar los valores. Queremos cambiar el movimiento a escala de cambio de 77.5 amperios también. Ok, vamos a probar eso. Co. Por lo que ahora hemos duplicado el diseño de movimiento whens sucediendo en nuestras pestañas. Por lo que ahora necesitamos conectar cómo a las pestañas al comportamiento de desplazamiento. De acuerdo, entonces vamos a ir con mi primera pestaña, y voy a añadir una respuesta de desplazamiento aquí abajo. Y tenemos que asegurarnos de que elegimos el flujo de fotos como objetivo. Porque eso es lo que vamos a desplazar. Y vamos a desplazarnos a tres sextos. De acuerdo, entonces vamos a copiar este pergamino y pegarlo en nuestros segundos HAP. Y esta vez vamos a cambiar el valor de desplazamiento a 0. Ok, ahí, a ver si eso funciona. Entonces como sucedió recomendado, mi vista de desplazamiento ahora lo páginas de vuelta. Y si lo muevo paginando contenido ágil, también tenemos nuestra animación previa. Impresionante. Hemos completado conectado hasta cómo pestañas. Yo solo quiero hacer un poco de limpieza. Entonces vamos a renombrar algunos de nuestros desencadenantes para que sea un poco más fácil identificar qué ley. Y así vamos a hacer doble clic en la primera pestaña y cambiar el nombre de ese toque recomendado. Podemos llamar hoy al segundo tabulador. Y por último, renombraremos esta cadena a página para el SRI. Creo que ya terminamos. Por lo que esta sección se cubre mucho y espero que estés obteniendo un verdadero sentido de cómo funciona la sonda además de estar un poco más cómodo con el modelo conceptual. Es realmente un poco como construir Lego es un M. Tal vez por eso es tan divertido. Si quieres practicar un poco más, intenta crear una tercera página y hazla otra pestaña activa. Eso te interesará porque necesitarás averiguar cómo tienen los bots de desplazamiento también para que la pestaña activa esté en pantalla. Por lo que esto nos lleva al final de este apartado. Espero que lo estés disfrutando hasta ahora. Toma un descanso, toma una taza de té, y únete a mí en la siguiente sección donde estaremos aprendiendo todo sobre cómo crear una obra en barra de pestañas que te permita navegar entre escenas. Nos vemos ahí. 17. Construir la barra de la barra de tab la configuración: Hola ahí. Y en este video, vamos a estar configurando nuestra barra de pestañas para que nuestros aplanados estén contentos de que tenemos aquí en la parte inferior de la pantalla. Entonces tenemos algunos gráficos nuevos, algunos nuevos streams que vamos a estar importando. En primer lugar, antes de que hagamos cualquier cosa importante sin embargo, vamos a, vamos a configurar nuestra barra de pestañas aquí en la pantalla de inicio. Y si barra de pestañas, verás que tenemos este grifo flotante, nuestro grupo, y tenemos a dos subgrupos. Uno llamado seleccionado, y lo llamaremos no seleccionado. Y dentro de aquí, tenemos los Estados de nuestros ítems de pestaña completa. Ok, entonces lo primero que voy a hacer es que sólo voy a reorganizar estos. Por lo que los hogares han llamado a una tata de manera efectiva, estamos revirtiendo el orden de éstos para hacer un poco más fácil. Y lo haremos para no seleccionados también. Esto es algo que me gusta hacer. Me gusta tener el elemento más a la izquierda en mi diseño para ser el elemento más alto, mis capas en mi panel de linaje. Está bien, genial. Por lo que ya estamos en la pantalla de inicio, por lo que queremos primero hacer selectivo nuestro elemento de la pestaña de inicio. Entonces todo lo que tenemos que hacer es si vamos y seleccionamos un grupo y nos desplazamos, seleccionamos los otros tres. Y sólo vamos a bajar la opacidad a 0. Entonces esto va a revelar nuestro estado no seleccionado, que está sentado muy bien debajo. Por lo que el azul oscuro es una patentes selectivas. ¿ Estos no están seleccionados? De acuerdo, entonces vamos a C y vamos a crear tres escenas más. Y vamos a nombrar estos Favoritos, actualizaciones y perfil. Y eso acaba de mover el impulso visto humillarse. Está bien, genial. Entonces empleemos nuestros gráficos. Entonces si vamos a impulso sigma, sigma por la duración de este tutorial, y voy a elegir mi, así que sólo asegúrate de que tienes tu archivo abierto en segundo plano, ya sea usando SketchUp. Y voy a elegir pastel favorito es como mi primera importación. Deja todo el, esto son los impagos. Hagamos lo mismo para las otras dos pantallas. Y finalmente, Perfil. Genial. De acuerdo, entonces volvamos a casa. Y lo que vamos a hacer ahora es que los vamos a conectar a todos juntos. De acuerdo, entonces vamos a seleccionar nuestros corazones sin seleccionar. Y vamos a añadir un gatillo de tap. Y vamos a sumar una respuesta conjunta. Y vamos a seleccionar nuestra escena favorita. De acuerdo, y vamos a repetir que para las otras dos pestañas así vamos a abofetear el equilibrio para que Ted en un toque La respuesta de la gráfica de activación saltó a actualizaciones. Y luego seleccione a nuestro usuario no seleccionado. Respuesta de tap. Lo sentimos, gatillo de toque, John encuestados, y seleccione nuestro perfil visto. De acuerdo, así que vamos a previsualizar eso y probarlo. Para que veas que nada está funcionando, así que algo está pasando aquí. Entonces tratemos de averiguarlo y qué, qué está ocurriendo. Entonces si volvemos a nuestro grupo, podemos ver aquí que el grupo seleccionado realmente está sentado por encima del Grupo no seleccionado y se ocupa la misma cantidad de espacio que efectivamente está superponiendo al grupo no seleccionado porque esto, este grupo seleccionado tiene una opacidad de 100, pesar de que tiene un relleno de 0, es efectivamente tappable, lo que significa que está bloqueando el acceso para desseleccionarlo debajo. Por suerte, hay una manera realmente fácil de permitir que los elementos del grupo no seleccionados sean tocables. Entonces con el grupo seleccionado, seleccionado, vamos a desplazarnos hacia abajo hasta la parte inferior, el panel proxies y vamos a elegir esto, hacer que las capas inferiores sean tocables. Vamos a revisar esa casilla. Y lo que eso va a hacer eso va a ignorar efectivamente a este grupo y nos permitirá tocar los aligeros que hay debajo. Entonces esa es nuestra prueba. Entonces ahora puedes ver que puedo llegar a mi, mi gatillo y todo está funcionando según lo planeado. Por lo que obviamente necesitamos aplicar nuestro grifo al alcohol sí tiene b2 al otro parece. Está bien. Antes de hacer eso, sólo vamos a nombrar nuestro nombre, el de nuestro grupo, nombre, nuestro nombre, nuestros desencadenantes. Por lo que nos van a llamar S tap favoritos. Este va a ser actualizaciones de tap. La amabilidad no era para ser golpeado perfil. Y entonces sólo vamos a cambiar seleccionar los tres de estos y sólo vamos a mandar G, controlar G en Windows para agruparlos. Y vamos a llamar a esta barra de pestañas. Entonces lo voy a hacer ahora es que vamos a aplicar outs, tener br a todos los demás, los otros tres mismos. Entonces eso es selecto los pecados de salida tienen br en el panel Capas. Y sólo vamos a hacer una copia. Y vamos a cambiar a nuestra escena favorita. Y en lugar de simplemente dar esta colocaciones existentes tienen, en lugar de simplemente pegarlas, vamos a usar esto. Piezas de interacción. Y lo que eso va a hacer es ir sólo a pegar nuestros gráficos, pero nuestros desencadenantes y respuestas también. Entonces son merienda esa cancha para que puedas ver las descargas la barra de pestañas está aquí. También soy todo nuestro verdadero porque las respuestas también están aquí. Pero notarás que hay un artículo naranja. Entonces cuando alguna vez te encuentras con cualquiera, Aquí está naranja en pro pi en el panel Desencadenadores. Significa que falta un poco de información no va a funcionar. Necesitas hacer algo. Y en el caso de esto, es la respuesta conjunta se pondrá a saltar a favoritos estaban obviamente en la escena favorita. Entonces no podemos, no podemos saltar a la limosna de Siemer y por eso está rota porque no va a mostrar la escena. Estamos en subastas en el desplegable. Pero eso está bien porque realmente queremos cambiar eso a casa de todos modos. Entonces vamos a renombrar esto para tocar Inicio. Y vamos a elegir casa sin seleccionar. Y vamos a establecer un omega de respuesta conjunta y yo puse eso para saltar al código. Actualizaciones vienen perfil debe estar bien. De acuerdo, así que eso es sólo saltar de vuelta a casa. Y vamos a conseguir esta prueba para asegurarnos de que esto no funcione correctamente. Por lo que empezamos en cómo seleccionamos favoritos. Vamos aquí y podemos ver que nos hemos olvidado de cambiar ese Cisco y hacer eso ahora. Por lo que va a abrir los lugares hat bar y vamos a reducir la capacidad del Elemento Seleccionado Inicio. Y vamos a aumentar la capacidad del ítem seleccionado del corazón porque ahora estamos en esa escena. Y así se puede ver ahora que eso es lo que se ve correcto. Entonces eso es Botón de prueba una vez más. Vuelve a Inicio. Vista previa. Por lo que corriendo a casa, abofeteamos favoritos. Ya hemos seleccionado favoritos y ahora podemos volver a casa. De acuerdo, entonces eso es efectivamente trabajar, ¿verdad? Por lo que sólo tenemos que aplicar esto al otro. Si quieres pausar el video y tener un go y hazlo tú mismo, por favor hazlo ya. Y te alcanzaré en un minuto. De acuerdo, entonces si pausas el video, espero que todo entonces sea bueno para ti. Déjame ponerme al día con una actualización en mi expediente para que coincida con esos. Entonces sólo voy a ir a mi escena favorita. Y voy a copiar mis actualizaciones de la barra de pestañas. Voy a quitar esa barra de pestañas piezas de interacción paciente. En realidad hay un atajo Comando Shift B que puedes usar. Tipo de cambio actualiza a Favoritos y dormía los favoritos patrón no seleccionado seleccionado. Y vamos a saltar a Favoritos. Y luego necesito cambiar mi, mi estado así HA, se convierte en 0 y sólo queremos subir a ese 1000. Se ve bien. De acuerdo, así que eso es esto. Haz eso hasta la escena final. De hecho, permítanme volver a copiar esta barra de pestañas. No tienes que mantener el salto en una barra de pestañas justo de la forma en que hago eso, pero aún puedes usar la primera siempre y cuando todas tus pestañas coincidan con la estructura de eso debería estar bien. Pero por eso hago eso. Simplemente tipo de alivio gracias sistema presenta cómo Paso comercial FV. Y sólo voy a cambiar de perfil a cómo recoge. Voy a seleccionar Actualizaciones. Val ahora está equilibrado seleccionado, seleccione actualizaciones. Y luego finalmente sólo necesitamos cambiar el poder estados seleccionados. Por lo que ahora se va a desseleccionar bow y se va a seleccionar usuario. De acuerdo, así que eso es esto. Vuelve a casa y haz una prueba rápida. Así que corre a casa. Podemos navegar a favoritos, podemos navegar a las actualizaciones, y podemos navegar a nuestra sección de perfiles. Enfriar. Por lo que hemos impreso la navegación básica de pestañas para nuestra aplicación. Esperemos que se pueda ver lo fácil que es eso. ¿ Dónde se habilitó? Estamos habilitando que sea más fácil porque estamos usando escenas y estamos usando la capacidad de cambiar entre escenas para solo compartimentalizar nuestro prototipo, también hacer que sea más fácil, para crear nuestro, nuestra barra de pestañas. Entonces ojalá te vaya a ver en el siguiente video donde crearemos una pantalla de detalle de imagen. Y vamos a configurar la capacidad de navegar hacia atrás y caer desde esa pantalla de detalles. Volver a nuestra lista de flujo de fotos View. 18. Navegación personalizada en la pantalla de los detalles: Por lo que en el video anterior, aprendimos a crear navegación entre escenas. En este video, vamos a aprender a navegar dentro de una escena. Entonces lo primero que tenemos que hacer es simplemente ir a nuestras importaciones y simplemente quitar todo de la cabeza es eliminar, eliminar eso fuera. Y vamos a ir a nuestro archivo fema o a Scatchard por usar este catchword dvx, dy. Y vamos a importar al-Din te lo dice. Está bien, genial. Vamos a seleccionar el contener los grupos y el grupo contenedor general llamado DES how Card. Y sólo vamos a revisar la caja de sublattice de clip para que podamos cortar cualquiera de las extremidades alrededor de la frontera. Y vamos a copiar a este grupo. Cambie a nuestra pantalla de inicio. Y sólo lo vamos a pegar. Vamos a reducir su pasado C2 es 0. Y también estamos descarta su sombrero, este pequeño icono a la derecha de la capa de cartas aullido DES. Y esto es sólo porque cuando trabajemos en esto, vamos a hacerlo, vamos a necesitar llegar a los objetos debajo. Y a pesar de que los autos diesel opacidad 0 todavía nos va a estar bloqueando cuando estamos trabajando en el entorno de autoría. Entonces sólo él un poco yo icono, sólo alturas. Se puede plegar desde el montaje, puede hacer clic a través de los artículos son lineales. Entonces eso es genial. Vamos a usar este ícono de la harangue como nuestro objetivo para mostrar estos son manantiales y encontrar eso. Y tenemos que tener un gatillo de tap. Vuelve a gritar estos. Y vamos a sumar una opacidad. Y vamos a aumentar la capacidad a 100. Supongo que tiene personal que es código de trabajo. Entonces he aprovechado mi imagen de harangue y he revelado la salud del d. Se puede ver aquí podemos ver el área debajo de la pantalla debajo que está mirando las aplicaciones fijas de MSC como código de vuelta a nuestra escena. Rectángulo extraoral. Y queremos que el cuidado sea exactamente del mismo tamaño que la pantalla. Entonces un pequeño consejo aquí, y ella puede entrar en los insumos de tamaño y podemos simplemente escribir un 100% en ambos. Y va a funcionar cómo, cuál es el tamaño real de nuestra escena y convertirla en un tamaño adecuado. De acuerdo, cambiemos ese color de relleno. Voy a cambiar ese dos a 1999. Y voy a renombrar ese Bg por fondo. Esa es la posición por debajo de que estos sostuvieron grupo. Y vamos a agrupar ambos juntos. Y voy a renombrar este contenedor y vista de detalle. De acuerdo, entonces ahora hemos cambiado el objetivo de la capacidad tendrá que ir y editar nuestro gatillo y respuesta. Entonces eso es cambios de DES, cómo detalles de tarjetas. Y sólo necesitamos jugar con las opacidades de estos, de estos dos grupos. Por lo que para estas tarjeta aullido, queremos que la capacidad sea de 104. El nuevo grupo de contenedores sí te ayuda. Queremos que eso sea 0. Por lo que está cambiando necesidades porque el grupo contenedor, que ahora es estos salud tú cuando ese 0, todo dentro de ella será 0 también. De igual manera, cuando queremos mostrar este punto de vista, queríamos probar aumentar su pastoso de estos enormes 100s de salud. Entonces si el detallado Cobb seguía en 0, todavía no se mostraría. Por lo que necesitamos asegurarnos de que eso ya esté en 100. De acuerdo, vamos a probar esto. Asegurémonos de que nuestro truco esté funcionando correctamente. Está bien, eso se ve bien. A continuación, necesitamos iniciar la navegación trasera. De acuerdo, así que eso es solo llevar nuestra capacidad de vista de detalle hasta 100 para que podamos trabajar con eso. Tendremos que recordar volver a bajarlo cuando vayamos a probar. Y vamos a seleccionar este botón Atrás aquí. Y vamos a añadir un disparador de tabuladores. De acuerdo, vamos a copiar esta opacidad del gatillo anterior y simplemente pegarla en nuestro nuevo gatillo aquí. Y vamos a poner esta opacidad en 0. De acuerdo, entonces volvamos a estos salud tú y volvamos a bajar a ceros. Terminamos de trabajar con ello. Y sólo vamos a probar, probar para ver si nuestras interacciones de espalda están funcionando correctamente. Por lo que tocamos en la imagen moraine para abrir la vista de detalle, y tocamos en el botón Atrás para cerrarla. Ahí lo tienes navegación básica dentro de una escena. Lo siguiente de vuelta a la animación inversa, acabamos de hacerlo. Usamos un pastoso, pero podríamos haber usado otra cosa. Recuerda lo que es útil para volver a establecer los objetos a su estado original. No obstante, eso es correcto, la respuesta de reinicio. Entonces vamos a cambiar ahora la opacidad a la respuesta de reinicio. Entonces eso es solo agregar un reinicio. Para restablecer que estos más saludables que ya está seleccionado, eso es agradable y práctico caer y solo voy a quitar esta opacidad. De acuerdo, eso es sólo una doble comprobación. Eso va a funcionar por lo que abrimos y cerramos. Podría estar preguntándose cuál es el beneficio del reset sobre la inversión de la opacidad. O en este caso, para ser honesto, la respuesta no es mucho. Pero si empiezo a agregar más animación cuando se abre la vista, reset siempre ajustará todos los objetos a su estado predeterminado. Exploraremos esto más en la sección de movimiento. De acuerdo, así que eso sobre lo envuelve para este video. A continuación, vamos a añadir un poco de navegación a nuestros scripts de inicio de sesión. Entonces nos vemos ahí. 19. Agrega navegación al inicio de inicio de inicio de inicio al: Por lo que sólo quiero volver a visitar a los encuestados de salto con un poco más de detalle. Para explorar esto, vamos a añadir algo de navegación entre los dos primeros asientos. Entonces vayamos a nuestra corriente de entrada, y sólo vinimos a copiar la columna vertebral aquí. Vamos a iniciar sesión y pegarlo en. Ahora, vamos al Inicio C. Así que tenemos esta respuesta de salto que solo está configurada para desvanecerse para darle a esto un poco más de una progresión de alimentador que ha cambiado a transición para deslizarse. Y vamos a dejar la dirección de transición de derecha a izquierda. De acuerdo, volvamos a la escena de inicio de sesión. Y eso dormía como Botón Back. Y vamos a añadir un disparador de tabulación. Y a eso vamos a añadir otra respuesta de salto. De acuerdo, entonces queremos que este botón vuelva a la escena anterior. Y si nosotros, si abrimos este selecto viendo desplegable, podemos ver todas nuestras escenas, pero también podemos ver este salto opcional previamente mostrado lo mismo. Y esto es bastante útil si tienes múltiples escenas como objetivos y no lo sabes, no vas a saber de cuál ha venido el usuario. Se puede utilizar previamente mostrado mismo. Entonces vamos a usar esa de aquí. Y vamos a elegir una transición diapositiva hacia fuera. Y lo vamos a elegir para ir de izquierda a derecha. Entonces de nuevo, obtenemos esta continuidad de animación. ¿ De acuerdo? El asunto de previamente mostrado senior solo funciona cuando pruebas tu prototipo de la escena anterior porque necesita recordar esa historia de acciones. Entonces vamos a navegar de nuevo a nuestro inicio C. Y vamos a abofetear prueba previa. Entonces si ahora presiono login, vengo a mi pantalla de inicio de sesión. Y si presiono el botón Atrás en, navega de regreso a mi escena anterior. De acuerdo, así que eso nos trae el final de la sección de navegación. En la siguiente sección, vamos a aprender todo sobre las capacidades de movimiento de los predecesores. Entonces nos vemos ahí. 20. Agrega animación a la barra de la tablas: En este video, vamos a crear una pequeña animación cuando navegues entre escenas usando la barra de pestañas. Entonces sólo voy a demostrarlo para ti aquí ahora. Entonces cuando toco y golpeo el corazón, y se puede ver que hay esta animación de rebote que va entre estos dos. ¿De acuerdo? Por lo que el Sappho está usando escenas para la navegación. Por lo que necesitamos una forma de activar automáticamente una animación cuando se carga la semilla. Y para esto, vamos a estar usando el gatillo estelar. Entonces vamos a nuestra pantalla de inicio. Y sólo necesitamos sus manos atrás fue golpeado. Está bien. Y vamos a añadir un gatillo de stop. Añadimos un poco una respuesta a escala. Y vamos a establecer este Haag es Inicio seleccionado. Solo echemos un vistazo a Inicio seleccionado. Queremos nuestra animación cuando rebota para rebotar desde los puntos de venta del centro. Por lo que necesitamos asegurarnos de que nuestro origen en nuestro grupo homeostático sea enviado a censurar. De lo contrario, va a usar ese origen como el punto de la escala, levantándose o bajando escala. Surface off left y se va a animar fuera desde la izquierda, que es más que queremos. De acuerdo, entonces volvamos a nuestra respuesta de escala. Entonces tenemos que pesar báscula. Podemos o bien escalar a un tamaño específico o podemos escalar por un factor, que efectivamente es un porcentaje. Entonces vamos a seleccionar factor. Lo siguiente que debemos considerar es si escalamos a un valor específico o escala en cierta cantidad. Voy a sumar un 122ambos aquí. Entonces voy a escalar a una cantidad específica. Usar Gao Bi es puramente una preferencia. Creo que porque estoy pasando por un valor literal muy específico, me siento escala a. ¿ Es un poco más comprensible pero siéntete libre de tener una jugada con eso. De acuerdo, probemos esto y veamos dónde se ve nuestra primera parte de animación. Entonces solo voy a golpear refrescar aquí si solo te enfocas en el ícono de casa. Para que veas que hay un pequeño rebote ahí. Entonces esa es la primera mitad de la animación. De acuerdo, así que puedes, bastante difícil de ver, pero tal vez notes que la báscula se acelera y luego se ralentiza. Y esto se debe a que tiene un ajuste de electrodoméstico de curva de flexión por defecto. Y la curva de flexibilización que tiene por defecto es facilidad de entrada y facilidad de salida. Por lo que tener la flexibilización agrega unos campos más naturales cuando los objetos y la sonda tengo bastantes para elegir. Hay muchas curvas de flexibilización diferentes o puedes seleccionar. Entonces tienes al principio, tienes lineal. Por lo que esto no tiene ningún cambio de velocidad, es un completamente Has, dice una animación muy lineal. Por lo que es muy plano de la animación única, pero es genial para la animación de looping hoy realmente querría bajar la velocidad o acelerar y curva de animación y estás en un looping porque vas a notar cuando esos, esos saltos suceden. De acuerdo, entonces IES, El siguiente es que da pasos de manera efectiva. Acelera y se ralentiza. Pero no tienes ninguna habilidad para cambiar lo que se llama el interpolador, que voy a llegar en un minuto. 0s en la curva de animación, que se ralentiza al final. Por lo que casi te imaginas una especie de arranques a la velocidad y su extensión se ralentiza. Pero si seleccionamos esto, se puede ver esto nos da la capacidad de cambiar lo que se llama el interpolante. Entonces que es efectivamente la curva específica que la animación es lápiz seguir puede, llegará a los en un minuto. Del otro lado de la facilidad de entrada y facilidad de salida nuestra curva. Por lo que este inicio lento y termina rápido. Y de nuevo, si elegimos esto, ven que tenemos acceso a las interpolaciones. Siguiente arriba es fácil entrar y salir. Entonces esa es una mezcla de la facilidad de entrada y facilidad de salida que tenemos, acabamos de mirar. Y esto es, con mucho, la curva de animación más común que la gente tiende a usar es en realidad uno de los Disney es 12 principios de animación de pensar en la física de un objeto y cómo funcionaría en el mundo real si alguna vez miras ante el movimiento de alguien caminando o corriendo em, no sólo de repente corremos a dos millas por hora. Nosotros acumulamos velocidad. Si miras el coche, se acumula velocidad y luego se ralentiza. No arranca de inmediato, se detiene inmediatamente. Por lo que esta es, con mucho, la curva de animación más natural que puedes usar. Cubic Bessie BCA es un, es una curva de animación similar, pero ahora tienes control sobre los cuatro puntos. Se pueden crear curvas de flexibilización personalizadas utilizando bases cúbicas. Y en realidad puedes ver aquí, si toco esto, en realidad tienes un poco de Bessie cúbica, un gráfico donde efectivamente puedes crear tus propias curvas de interpolación de animación. ¿De acuerdo? Y por último, tenemos primavera. Y así la primavera es una curva de animación muy diferente impresionaría pi te da en su lugar estos dos deslizadores, una vez una tensión de control y uno para controlar la fricción. Entonces, y vamos a estar usando esta flexibilización tiene en un minuto para una animación y te explicamos cómo funcionan estos dos deslizadores entre sí. Por lo que la segunda mitad del rompecabezas de animación son intercaladores. Entonces si volvemos a relajarnos y en realidad puedes hacer click en, vamos a dar click en esto, ver las diferencias aquí. Y yo sólo voy a traer marco. Por lo que esta es la documentación para comer curvas. En la página web. Aquí puedes ver lo diferentes que son las curvas y las diferentes curvas van a cambiar. Puedes ver aquí, si acabas de pasar el ratón, puedes ver que diferentes animaciones vas a obtener usando estas diferentes curvas. Y estas curvas son todos presets que vienen con y orgullosos de lo alto. Por lo que definitivamente puedes tener una bahía por aquí pronto en relajar en curvas y aquí, aquí abajo en las curvas de flexibilización. Y luego tenemos. Y alivia las curvas. Entonces echa un vistazo a esta página web y echa un vistazo y ten una obra de teatro con las animaciones. El animación se curva dentro, lo prettifica. Voy a pegarme por el momento con facilidad de entrada y facilidad de salida. Y luego lo siguiente necesitamos mirar su duración. Para, para la mayoría U IS en algún lugar entre 0.20.4 es una buena regla de oro para la duración de una animación. Si bien esto sí depende en gran medida de algunas cosas como el tamaño de un objeto, la distancia que tiene que recorrer a través de su pantalla, y el énfasis que necesita para el usuario. Otra cosa que tiendo a hacer también es tener un animate un poco más largo en duración que la emigración animada. Por ejemplo, un cuadro de diálogo que aparece en sería un poco más largo que cuando desaparece. Cuando añadas respuestas a un disparador, podrías sorprenderte al saber que desde una perspectiva de emoción, el orden que las agregues es algo irrelevante. La secuencia en la que se ejecutan las respuestas animadoras se basa en la duración y el retraso. Esto nos lleva prolijamente a la demora. El retraso es sólo un punto en el que se inicia la animación. Si estás familiarizado con la animación tradicional, retrasarás será tu fotograma clave inicial. El fotograma clave final está definido por la propia curación. Hay una manera de ver una vista más tradicional de tus animaciones aquí en pro pi. Y es justo aquí en el lado derecho del panel Desencadenadores. Entonces sólo voy a sacar eso. Por lo que actualmente la funcional, por lo que la línea de tiempo es bastante limitada. Simplemente actúa como otra forma de cambiar la duración y el retraso. Aquí puedes ver mi animación de escala. Puedo hacer click en él y moverme ahí y puedes ver que moverlo cambiará mi duración y mi stop delay. Irán los derechos y del lado derecho aquí. Ok, vamos a volver a poner eso a los predeterminados. Por lo que lo dejaremos en la capa 0. De acuerdo, así que sigamos con nuestra animación de rebote para que podamos ver cómo encajan todas estas características y trolls. Entonces solo voy a resaltar esta línea de tiempo porque esta animación en particular, vale, para nuestro rebote, hemos rebotado, pero ahora necesitamos rebotar hacia abajo. Entonces necesitamos revertir la animación y sabemos cuál es una respuesta realmente buena para los valores predeterminados por lotes de juegos, ¿verdad? Eso es correcto, reinicializar. Añadamos un objetivo de reinicio de respuesta en el mismo contenedor seleccionado en casa. Lo bueno de reset es que sí, se restablece de nuevo al estado original. Pero cómo se enemigos llegar allí puede ser completamente diferente. Por lo que quiero agregar un poco de personalidad divertida y ligera a en mi animación. Entonces voy a cambiar la flexibilización a la primavera. De acuerdo, entonces voy a añadir, voy a cambiar la tensión a 500. Y voy a sumar diez a la fricción. De acuerdo, vamos a probar eso. De acuerdo, entonces se puede ver que nada ha cambiado aquí y eso es porque necesitamos realmente sentar un retraso. Entonces si volvemos atrás y miramos cómo escalado la animación, podemos ver que se toma una duración de 4.2. Entonces tenemos que sumar 0.20.2 aquí y preguntar si eso está tramado. Lágrimas, corremos eso. De acuerdo, así que ahora puedes ver. Que la primera parte de la animación sea adecuada y arriba y la segunda parte le está dando ese bonito rebote. Y estamos usando el retraso para compensar estas dos animaciones. Y en realidad, si simplemente volvemos a nuestra línea de tiempo de nuevo aquí se puede ver que mi primera duración de animación está aquí, y luego mi segunda duración de animación está aquí. Y obviamente puedes jugar con estos diferentes, diferentes tamaños. Lo que notarás con el reset es que no tiene estas manecitas. Por lo que estos pequeños maneja en su vista a tipo de cambiar el, el tamaño de manera efectiva como cambió la duración de su animación. Pero porque esto que le ha aplicado una curva de animación de primavera y está muy bloqueado por en atención y la fricción que se puede ver la duración aquí en realidad está en color grisácea. No podemos cambiar la iteración. Cambiamos la duración cambiando la tensión y la fricción. Por lo que ligeramente, ligeramente diferente situación con esa va a recibir eso, reinicia eso de nuevo. Ok, creo que eso se ve bien. Por lo que ahora tenemos nuestros enemigos primero parte de nuestra animación. Tenemos que simplemente aplicar eso ahora a otra escena. Entonces vamos, vamos a copiar nuestro bloque de gatillo. Qué tan fuerte bloqueo de gatillo. Entonces vamos C. Y vamos a ir a nuestra escena favorita. Y lo vamos a pegar. Y debido a que he copiado un bloque de gatillo, no necesito seleccionar nada va a saber exactamente dónde poner un. puedes ver lo agregué a la parte inferior de mi panel de Desencadenadores aquí. De acuerdo, así podemos ver que tenemos algunas respuestas anaranjadas. Eso se debe a que las cosas a las que se dirigían estaban conectados no existen en esto, en este mismo por lo que hay que sumar nuestros nuevos objetivos. Y de hecho, vamos a estar apuntando a un elemento de pestaña completamente diferente. Entonces vamos a estar apuntando a los corazones tienen artículo. Entonces vamos a nuestra respuesta scour y eso es encontrar nuestros corazones seleccionados. ¿ De acuerdo? Y vamos a dejar todo exactamente igual. Y también vamos a cambiar nuestros restablecimientos, nuestra casa seleccionada. Y también necesitamos asegurarnos de que el punto de origen esté establecido en el centro. Los centros que verás por defecto siempre están configurados en la parte superior izquierda. De acuerdo, entonces volvamos a casa y probemos. Por lo que voy a seleccionar mis favoritos. Y se puede ver arriba en la animación su logo para chasquear mi casa. Y se puede ver que no hay animación. De acuerdo, entonces esto se debe a que las respuestas en un disparador estrella solo se activan una vez por sesión por defecto. Por lo que necesitamos cambiar eso. Por lo que a continuación vamos a nuestro gatillo estelar. Y puedes ver aquí hay una opción para reiniciar cada vez, y eso es lo que queremos seleccionar. Por lo que queremos seleccionar que también en nuestra escena favorita colapsó yo disparo. Correcto, así que eso se lee medio personal. De acuerdo, entonces cuando selecciono mi Inicio, Seleccionado, lo siento, cuando divido mis favoritos, puedes ver animación es huecos ahí. Selecciono casa. Y se puede ver que la animación también está ahí. Pero se puede ver que aún podemos ver el blanco sin seleccionar debajo. Por lo que necesitamos sólo asegurarnos de que eso es opacidad 0 casi parece. Entonces volvamos a nuestra escena Home. Y eso es encontrar OWL estado no seleccionado para casa en la barra de pestañas aquí. Método de hormonas no seleccionadas, sólo vamos a reducir sus pastizzi 0. Y vamos a ir a través de nuestros favoritos y vamos a hacer exactamente lo mismo. Pero para el arpa en seleccionado, vamos a reducir eso a 0. Volvamos a casa y probemos de nuevo. Entonces ahora podemos ver que tenemos una bonita animación limpia entre los dos. De acuerdo, bueno eso sobre lo envuelve para este video. Eso es una práctica. Y antes de pasar al siguiente video, me gustaría que aplicaran la animación de rebote a las otras pestañas. También siéntete libre de jugar con las opciones de flexibilización y circula como volverse loco, crear algo único. En el siguiente video, vamos a buscar una transición que requiere un poco más de coreografía. Entonces nos vemos en el siguiente video. 21. Animación del inicio de sesión: Hola ahí. En este video, vamos a estar abordando una transición de pantalla entre dos escenas. Anteriormente teníamos una transición muy básica entre las pantallas de inicio y de inicio de sesión. Y ahora vamos a condimentar las cosas con alguna animación personalizada. Entonces vamos a asegurarnos de que entiendes pantalla si lo estás siguiendo y lo vamos a ver, vamos a establecer una transición de salto que actualmente es aire. Y en cambio va a despegar nuestra, nuestra transición básica. Y en realidad vamos a desactivar todo el salto sólo por el minuto y configurar nuestra animación personalizada en esta pantalla. Entonces vamos a tener una sección de la animación en esta pantalla. Entonces vamos a animar el logo y la línea de la correa y los botones. Y luego vamos a saltar y decir pantalla de inicio de sesión. Y vamos a establecer la animación, la animación intro para la pantalla de inicio de sesión aquí. Entonces eso se hace en la pantalla de inicio. De acuerdo, entonces animemos el logo. Entonces vamos a seleccionar el gráfico del logotipo. Y vamos a poner el origen en el centro superior. Ese es el punto en el que queremos que los pivotes de animación golpeen y con el logotipo seleccionado, solo vamos a sumar a esta táctica o vamos a añadir una respuesta de movimiento. De acuerdo, y vamos a decir que es Y 2119. También queríamos jugar con el tiempo de animación. Entonces vamos a fijar la duración 2.4. Y vamos a configurar el relé también de dos entradas para ok. Por lo que la primera parte va a ser sin embargo la mano de obra moviéndose a la cima de los gritos también quiere que se escale. Entonces vamos a agregar una respuesta a escala. Y vamos a fijar la escala, así que vamos a dejarla por defecto. Entonces vamos a establecer una escala tamaño 257 12ths. Y de nuevo, vamos a fijar la misma duración, 0.410.4. De acuerdo, entonces voy a, voy a seleccionar turnos de humor, seleccionar ambas respuestas. Y quiero cambiar la curva de flexibilización a una facilidad fuera. Y de nuevo, esto sólo tiene que ver con el tiempo de la animación. Tenemos 1.5 sucediendo en esta primera escena, y la otra mitad había estado en la segunda escena. De acuerdo, así que hagamos esa prueba rápida. Entonces si toco login, puedo ver que mi logo se está animando en posición. Entonces eso se ve bien. Ahora volvamos nuestra atención a la línea de la correa. Entonces eso es asegurarse de que eso esté seleccionado. Vamos a sumar una capacidad y saldar más allá de su Sarah, ¿cómo vamos a darle una duración de 0.3 K? Esto es prueba que otra vez. Por lo que esto efectivamente desvaneciendo la línea de la correa realmente es solo quitarle eso de la pantalla. Está bien, como genial. De acuerdo, así que finalmente para esta pantalla necesitamos hacer algo con las fracciones gruesas. Entonces seleccionemos el CTA Primaria, CTA. Y vamos a sumar una jugada. Y vamos a establecer el x 2x menos tres para tres carreras, lo golpea, se apagan de pantalla, apagan al lado izquierdo de la pantalla. Y de nuevo, voy a jugar con la animación. Curvas van a arena intercaladores que regresan. Y voy a cambiar las duraciones de este conjunto. El tiempo sigue poniendo el sexo y los carriles. Y 1.6, sólo quiero compensar ligeramente el movimiento de estas llamadas a la acción está lejos de la animación del logotipo. De acuerdo, así que eso es solo respuesta de movimiento. Y voy a cambiar el objetivo a los autobuses terciarios como el infierno fuera de nosotros. Y en este solo voy a cambiar ligeramente el retraso a 0.8. Entonces es cuando se desplaza este botón del Otro Botón. De acuerdo, vamos y volvamos a encender nuestra respuesta de salto. Y para asegurarnos de que podamos ver esta animación realmente funcionando, necesitamos retrasar también nuestra respuesta de salto. De lo contrario vamos a saltar al instante y no veremos que pase nada de esta animación. Entonces vamos a poner el retraso de esto en 1.4. De acuerdo, eso es lo mejor. Prueba eso y ve cómo se ve eso. Entonces cuando tocamos login, nuestro m, nuestra acción puede ralentizar esto. Por lo que se puede ver que sucede en la esclavitud. Enlistada para no bajarlo a un cuarto de segundo. Por lo que golpeé el inicio de sesión. Los logotipos de mayo se desvanecen y mis dos botones se están deslizando. Enfriar. Por lo que hemos completado la mitad de nuestra transición. Ahora vamos a terminar en pantalla. Entonces eso es cambiar escenas. De acuerdo, entonces vamos a agregar un gatillo de inicio. Simplemente lo voy a mover a la cima. Y tenemos que cambiar algunas de las propiedades por defecto en los disparadores estelares. Entonces lo vamos a seleccionar para parar con salto en lugar de staff el salto. Y todo esto significa es que la animación va a empezar un poco más rápido y vamos a comprobar nuestro reinicio cada vez. Y eso es principalmente porque queremos que esto funcione cada vez que se cargue la semilla. De acuerdo, así que eso es seleccionar nuestra línea de correa trasera bienvenida. Y vamos a, a este truco estelar, vamos a sumar una capacidad. Y vamos a establecer su capacidad en 0, MSN su duración en 0. Entonces lo que está haciendo este disparador estelar es configurar un estado por defecto antes de que esta escena se haya cargado. Entonces si recuerdas, ya tenemos el logotipo en un particular, animado, en una posición particular en la escena startup. Y también ya hemos desvanecido la línea de la correa. Por lo que necesitamos continuar que la animación en esta escena y establecer esos estatus por defecto porque tienen esas cosas y efectivamente sucedieron. De acuerdo, entonces a continuación vamos a apuntar al grupo de formulario. Y vamos a sumar una jugada. Y vamos a decir como x 2375. Y de nuevo es duración a 0 k Ahora vamos a apuntar al CTA. Y tenemos que añadir otro movimiento. Y también vamos a establecer como X2 375 y la duración a 0. Ok, entonces ahora hemos configurado nuestros valores predeterminados de tiempo de ejecución. A continuación vamos a hacer la parte final de la transición. Entonces vamos a añadir otra estrella. Y de nuevo, vamos a platicar por completo. Y vamos a añadir una respuesta de reinicio. Vamos a cambiar el interpolador del Reset por atrás. Y vamos a fijar la duración a 0.6. De acuerdo, eso ahora es objetivo estos CTA Primaria en otro Reset. También voy a cambiar el interpolador a espalda. Vamos a fijar la duración para establecer 2p 06. Y vamos a darle un ligero retraso, será 0.2. De acuerdo, así que déjame explicarle lo que hemos hecho aquí. Tenemos, hemos establecido un estado predeterminado de algunos objetos basado en la animación que está sucediendo en la primera escena de la estrella c. Y efectivamente estamos usando este otro disparador de estrellas para revertir nuestros valores predeterminados mediante el uso de las respuestas de restablecimiento. De acuerdo, hemos hecho mucho aquí, así que tenemos ediciones tiene que ver qué tenemos. Entonces volvamos atrás y seleccionemos el estilo de escena porque ahí empieza nuestra animación. Y eso es correr esta animación. Por lo que empezamos a resolver la estrella c, golpeamos login. Obtenemos la animación es ASI, ¿verdad? Y un cuarto de velocidad para que puedas verlo. Y luego entramos nuestro segundo CMB. Entonces, solo ejecutemos ese código de velocidad completa de Pat. mí me parece bien. Entonces repasemos lo que hemos hecho en este video. Tenemos proxenetas cómo transición entre dos escenas. Hemos aprendido a configurar los valores predeterminados en tiempo de ejecución. Hemos aprendido un poco más sobre las curvas de animación y el interpolador. Creo que ahora es el momento de una taza de té antes de pasar al siguiente video. Y en el siguiente video vamos a ser fervor explorando las animaciones de los clientes agregando una animación personalizada a cuando un usuario toca una foto en su flujo de fotos. Nos vemos en unos minutos. 22. Crear una animación personalizada: Hola ahí. En este video, vamos a crear interacción que permita a los usuarios guardar una imagen de su flujo de fotos en la sección de favoritos. Entonces echemos un vistazo rápido a la demo, pero vamos a estar construyendo. Entonces solo voy a desplazarme hacia abajo a esta imagen de aquí. Yo sólo voy a dar un doble toque. Vamos a conseguir su ícono favorito. Y una pequeña miniatura simplemente cae en la sección favorita. Y viste que algunas de estas otras imágenes se desvanecían. Bestest correr que a una velocidad mucho más lenta. Entonces podemos simplemente pasar por ese paso a paso k Así que me voy a desplazar hacia abajo. Entonces primero vamos a crear la interacción favorita en el doble-tap que va a traer en nuestras bolsas favoritas a EU podemos ver lo que han tocado, luego se desvanecerán las otras imágenes para enfatizar la imagen que nosotros favoritada. A continuación, vamos a enemigo la miniatura de la imagen, que nos servirá para ayudarnos a entender lo que se ha guardado la imagen, estará usando algunos principios de animación aquí como anticipación y puesta en escena, seguir y solapar en acción, así como el tiempo y la exageración. Esto se mostrará cuando una miniatura golpee el corazón, causando que el corazón reaccione. Por último, vamos a desvanecer todas las demás imágenes de nuevo en completar la pieza set animadores. Hay mucho pasando en estas pequeñas micro interacciones para asegurarse de que el usuario sepa lo que está pasando. Y esto es por todas las cuentas, nuestra animación más compleja hasta la fecha. Ok, vamos a agrietarnos. Entonces solo voy a abrir mi archivo anterior aquí. Por lo que en primer lugar, necesitamos ir y obtener nuestro gráfico de nuestro archivo sigma o, o sketch o dvx, dy dependiente de lo que estés usando. Entonces sólo voy a cambiar sigma. Y sólo voy a copiar mi gráfico, tiene una remontada SVG para prettificarlo. Sólo voy a pegar diez. De acuerdo, entonces como se vio anteriormente, la SVD entrará a una x, lo que necesitamos simplemente multiplicar eso por tres. Y lo vamos a nombrar renombrar spots favoritos. De acuerdo, vamos a la página uno sobre la transmisión de fotos. Y vamos a agrupar todos estos contextos juntos. Y vamos a llamar a esto fotos. Y si solo abrimos esto, vamos a encontrar esta imagen pi, que se imagina nueve, y sólo vamos a arrastrarla fuera del pecado arriba. Ahora voy a mover mis spots favoritos él justo por encima de la imagen nueve. Y sólo vamos a posicionar esto centralmente sobre la imagen. De acuerdo, por fin estoy, sólo vamos a ser uno. Queremos que esto aparezca Así que necesitamos hacer su pasado T 0. Entonces esa es la configuración hecha. Por lo que a continuación vamos a elegir cómo imagen nueve. Y vamos a venir a nuestro panel de Desencadenadores y vamos a añadir un doble toque. Vayamos a nuestros favoritos, Boston. Y sólo queremos asegurarnos de que el origen esté en. Queremos esperar, queríamos animar desde el centro. Y manteniendo seleccionado ese botón favores, vamos a sumar una capacidades que outs tienen gatillo? Voy a hacer un 100. Y vamos a fijar la duración a un poco más rápido y 0.01. OK. También vamos a sumar una escala. Y vamos a escalar a un factor de 120. Y vamos a fijar la duración aquí en 0.01. ok, vamos a conseguir esa prueba. Entonces si nos desplazamos hacia abajo a nuestra imagen y contamos lo que ha pasado, así podemos ver que la imagen acaba de aparecer de inmediato. Por lo que quería retrasado un poco para que podamos ver la escala realmente sucediendo. Entonces eso no ha tenido retraso más 0.1. Y vamos a probar eso otra vez. Está bien, eso es un poco mejor. A continuación, quiero enfatizar qué gente que ha sido seleccionada un poco más. Para que seleccione el grupo de fotos. Voy a sumar una capacidad. Y voy a hacerlo 10% porque saturación a 0. Y lo vamos a agregar al laboratorio punto cero también. De acuerdo, eso es duplicado que pasé. Y lo vamos a aumentar a un 100. Esto voy a poner una dirección a tres y el retraso a 0.4. bien, eso está bien. Esa prueba. Por lo que doblamos la pestaña y podemos ver que efectivamente nos hemos desvanecido. Toda la afterimage es como una especie de wow gordo y luego lentamente se desvanecen de nuevo dentro. Vamos a reproducirlo otra vez. De acuerdo, entonces a continuación vamos a añadir la animación en miniatura. Entonces lo que vamos a hacer es que vamos a duplicar nuestra imagen nueve. Y obtenemos un verdadero renombrar esta imagen nueve pulgar, hematita subrayado pulgar. Y vamos a fijar el origen en el centro, centro. Y que puede escalar esto, asegurándose de que su relación de aspecto no va a escalar esto a un ancho 20. Y eso nos dará una calculadora. Hola, estoy un poco, un poco más alto, 2126. Y vamos a mover esto fuera de nuestro contenedor de paginación. No queremos que esto se desplace. Entonces vamos a poner esto en una posición fija ahí y vamos a moverlo a una posición diferente. Efectivamente, queremos movernos allí justo arriba donde los favoritos es bastante AS aproximadamente localiza cabezas. Y se va a vender esto a 600 grados. Es como una buena posición. De acuerdo, entonces ahora vamos a establecer su opacidad en 0, también forma dos veces de mostrar bastante todavía. Y manteniéndolo selectivo, vamos a añadir otra opacidad a nuestro gatillo, donde vamos a aumentar la invisibilidad de la miniatura a 100. Y vamos a fijar la duración en 0.2 y vamos a sumar un retraso de 0.2. Por lo que aún con el sistema inmunológico, vamos a sumar otra respuesta en esta escala de tiempo. Y necesitamos bombear en los valores de tamaño actuales porque necesitamos dimensionar y queremos que el más pro pi funcione cómo los bosques dimensionados correctamente. Entonces sabemos sólo un poco lo que sea que sea de 20 por 21.6. Entonces eso es sólo tirar eso en estos valores inicialmente, 1.6. Y con relación de aspecto loblado, ahora podemos cambiar este lado dos defectuoso y va a funcionar la altura correcta para nosotros, K. Y vamos a fijar la duración en 0.4. Y vamos a fijar el 0.2 posterior. Ok, vamos a hacer esa prueba. Entonces haga doble clic. Y ahora m es Tom ahora aparece luciendo bien. De acuerdo, entonces lo que quiero hacer ahora es imitar que caiga en los favoritos también va a usar uno de los 12 principios de animación básicos que aquí principios de animación Disney , que es la exageración. Entonces cuando el pulgar cae en lo más difícil se va a hinchar, sólo suerte absorbió la imagen. Entonces otra vez, sólo va a enfatizar la animación que un poco. Lo que vamos a hacer es volver aquí. Vamos a duplicar esta escala. Y vamos a cambiar el ancho a diez. Y eso automáticamente el tamaño son mayores. Y vamos a cambiar la duración a 0.2. Y lo vamos a dar en el laboratorio uno. Pero también van a mover los veteranos van a agregar una respuesta de movimiento. Y queremos que lo haga, queremos que se mueva. Aquí es donde va a caer en el, en los iconos favoritos. Entonces podemos posicionarnos un poco a las dos donde creemos que debería estar. Algo así. Eso es sólo redondear eso a seis. 669 y volvió a nuestra jugada. Está bien. Entonces sí, eso es realmente a la señora deshacer eso mismo rápidamente sobre el espacio, posición correcta. Entonces ahora sabemos cuál es ese valor. Podemos bombear un dentro o entrar en el por qué S6 69. Y eso a veces es un tienes que hacer cosas porque no tenemos ninguna capacidad para fregar líneas de tiempo y cosas así. Si mueve su objeto a su ubicación final, puede obtener el valor. Entonces solo asegúrate de que quieres hacerlo y muévelo hacia atrás. Y luego puedes poner ese valor en tu respuesta. Ok, entonces sí, la duración, duración 0.2, voy a retrasar esto por 1 segundo. De acuerdo, hay pruebas que ven cómo se ve eso. Entonces haga doble clic y la miniatura desaparece en el corazón. Ahora en realidad va detrás de bambalinas sombrero va a ser tan rápido que la gente realmente no va a notar eso. Además, cuando añadimos la siguiente animación con el corazón se va a hinchar, el cerebro humano tiende a descifrar los fotogramas en medio para que no tengamos que ser súper precisos todo el tiempo, tiene a cómo reaccionan las cosas. En ocasiones podemos salirnos con la suya animaciones muy, muy rápidas con sólo permitir que el cerebro descubra la animación de un fotograma a otro. De acuerdo, entonces vamos a encontrar nuestro corazón grupo inseleccionado dentro de nuestras carrozas. Está pasando aquí. Y vamos a asegurarnos de que el origen esté configurado en sensor, sensor porque somos el corazón para animar desde el centro. Es manera muy natural y natural para su dominio y. Y vamos a volver a nuestra respuesta de doble toque. Y vamos a sumar otra escala. Vamos a scouts con factor. Y ese factor va a ser 120. Vamos a establecer la duración donde la duración de la palanca responde 0.2 en realidad, y estamos configurados el retraso en uno. De acuerdo, así que esa es la primera mitad de la animación del corazón a esa amenaza para hincharse, ahora necesitamos completar eso. Entonces lo voy a hacer es que voy a agregar una respuesta de reinicios. Asegurándose de tener el conjunto, el conjunto X al corazón grupo no seleccionado. Y esta vez vamos a elegir la primavera tiene nuestra curva de flexibilización. Y vamos a hacer los 500s de tensión. Y vamos a poner la fricción a diez. Y por último, vamos a retrasar que en 1.2 segundos pasa dado un tiempo para que se ejecute la primera parte de las animaciones. Para que podamos coreografiar estos juntos. Y en realidad si solo echamos un vistazo rápido, porque he bombeado a todo un montón de valores aquí. Pero se puede ver cómo las cosas realmente están animando el cabello vita timeline. Y en realidad podrías usar esto para agruparlo si quieres entender, si quieres retocar aquí, puedes tuitear tu cabello moviendo las cosas hacia atrás y hacia adelante por retraso. Y entonces también puedes cambiar la duración por nosotros arrastrando. O bien. Decide si arrastras los restos, ve tu cambio en el retardo, así como el sistema de duración. Haz eso. Porque yo soy y ponemos en los valores. Y así eso es sólo tener una mirada rápida y ver cómo se ve eso. Servidor desplácese hacia abajo, haga doble clic en mi pipa. Tiene que ser favorito. Y la miniatura cae en el corazón y el corazón reacciona para absorber en esa miniatura y hace ese poco, esa pequeña animación de rebote. Enfriar, bueno eso completa la animación favorita. Y esto nos lleva al final de este video. Ojalá esto te dé algunas ideas más sobre el tipo de cosas que puedes hacer. Jugamos con algunos disparadores nuevos y pasamos mucho tiempo en coreografía de animación. En el siguiente video, vamos a estar teniendo nuestra mirada final al movimiento añadiendo una fantasía de transición de una foto a su pantalla de detalle. 23. Crear una transición de la pantalla del detalle personalizada: Hola ahí. En este video vamos a estar creando una transición personalizada a nuestra pantalla de detalle fotográfico. Entonces antes de construir eso, solo quería mostrarles cómo va a ser eso, qué vamos a estar construyendo. Entonces voy a tocar esta imagen en miniatura aquí. Tenemos una transición a esta vista de detalle con esta transición del cliente. Y luego voy a poder presionar este botón de retroceso y volver a salir la transición. De acuerdo, así que vayamos a F. Así que si has estado siguiendo, puedes seguir adelante con tu archivo existente. De lo contrario se puede abrir el archivo de inicio se adjunta a este capítulo. De acuerdo, así que vamos a navegar a la pantalla Inicio. Y vamos a abrir estas tarjetas de salud tú y estos aullidos. Y sólo llegaremos a sacar la opacidad de todo el asunto. Y luego vamos a querer en primer lugar, este grupo o este menor contenido juntos. Entonces esto va a cambiar selecto que seamos un grupo que juntos y vamos a llamar a esta tarjeta detalles. Y estamos haciendo esto porque vamos a serlo, más adelante vamos a ser animados. Y este fue un grupo grande, grande. Ok, entonces eso es escondite. Está sano un segundo y vamos a bajar a nuestro grupo de fotos. Y vamos a encontrar árbol de imágenes, que es la imagen a la que vamos a ser tan feliz o transición personalizada. Y vamos a agrupar esto para ponerlo en un contenedor. Y vamos a nombrar a este árbol de imágenes de contenedor. Y vamos a volver a cómo estas salud vas a copiar nuestra página principal. Y lo vamos a pegar en nuestras imágenes recién creadas contienen hit. Ok. Redujamos el ancho a un 163, pero básicamente dimensionándolo hacia abajo. Por lo que es del mismo tamaño que la miniatura. Estamos recreando una miniatura de manera efectiva aquí. Y vamos a ajustar esta imagen. Su posición, por lo que está en la misma posición, tiene el, tiene el pulgar actual ahora. Y está bien. Y vamos a recortar la subcapa. Así que selecciona cómo agrupar, y desplázate todo el camino hacia abajo hasta la parte inferior y elige la opción de subcapas de clip. Entonces eso va a ocultar todos los demás contenidos lentos añadidos. Vamos a establecer el radio de esta Conservancia 16. De acuerdo, así que ahora parece nuestra imagen original en miniatura. De acuerdo, entonces vamos a renombrar nuestra nueva imagen a imagen de violación dentro de este contenedor. Y ahora podemos decir a través de mover nuestra vieja imagen. Está bien. Entonces ese es el primer bit hecho. Al problema que tenemos es que tenemos esta imagen que está dentro de un contenedor de scroll. Pero nosotros, cuando abrimos el, cuando hacemos la transición a esta costumbre, alimentación personalizada saludable, no queremos esto. Estos tienen que ser desplazables y se desplazará hacia fuera. Todavía está dentro de la vista de desplazamiento. Por lo que necesitamos averiguar una forma de seguir conectando la exposición a la vista de desplazamiento. Pero también cuando tocamos ahí para que esté fuera del ScrollView. Obviamente, todavía necesitamos tener el desplazamiento de la miniatura también. Entonces la forma en que vamos a hacer esto va a usar un gatillo llamado cadena. Voy a hacer es vamos a duplicar nuestro contenedor de imágenes. Y vamos a renombrar esa cadena de imágenes. Y lo vamos a mover fuera del desplazamiento todo el camino hasta la cadera por debajo de estos sanos. Y con la página uno contiene una ropa seleccionada. De acuerdo, entonces con la página una Vista de desplazamiento seleccionada, vamos a agregar un cambio donde vamos a encadenar a la posición de desplazamiento. Entonces eso es por defecto, así que eso es bueno. Y vamos a seleccionar cómo grupo de cadenas de imágenes. Y vamos a sumar a ese gatillo, vamos a sumar un movimiento. Está bien. Entonces cuando agregamos un, un gatillo a un, lo siento, una respuesta al gatillo de cadena, obtenemos este diferente tipo de caja y la forma en cadena, conecta rangos. Por lo que no veríamos encadenar el rango de movimiento de la vista de desplazamiento a un rango de movimiento en la respuesta en movimiento para nuestro grupo de cadenas de imágenes. Entonces en primer lugar, vamos a caber en esta, esta mitad, que es el rango de la vista de desplazamiento. Por lo tanto Desplazamiento Las vistas de distancia comienzan en 0. Entonces ese es un punto de partida agradable, fácil. Y lo vamos a poner para que se desplace mil píxeles. Por lo que ahora necesitamos mapear la posición y de nuestra cadena de imágenes a este rango de ceros por debajo de 1000. Entonces lo primero que tenemos que hacer es bien y posicionar. Y podemos ver aquí es que a ocho. Por lo que es agradable saber que nuestra posición de partida. Y porque queremos tener un mapeo uno a uno entre el rango del pergamino y la velocidad del movimiento. Tenemos que asegurarnos de que se muevan la misma cantidad de píxeles. Por lo que las vistas de desplazamiento funcionan en la dirección opuesta y se mueven en la dirección opuesta a los objetos que se mueven por debajo de la pantalla. Por lo que actualmente, la posición de cualquier objeto comienza en la esquina superior izquierda. Y cualquier cosa fuera de arriba estará en lo negativo y cualquier cosa abajo estará en lo positivo. Para scroll aunque funciona en la otra dirección. Entonces arriba es positivo y eso es negativo. Por lo que necesitamos dar la vuelta a estos. Y la cadena de la industria está empezando a AAA y necesitábamos mover mil píxeles. Por lo que sólo necesitamos hacer un poco de mapas. Y sólo tenemos que minar este 28 mil y eso nos da menos 712. Por lo que eso ahora se está moviendo de a a menos 712, que es un 1000 pixeles. Y eso se mapea directamente a nuestra vista de desplazamiento, que se está moviendo de la posición 0 a unos 1000 píxeles. De acuerdo, entonces vamos a darle una prueba a eso. Se puede ver que podemos ver que eso se está moviendo y su posición exacta. Si eso es si tire del pergamino sobre, se puede ver la otra imagen debajo. De acuerdo, así que vamos a arreglar eso. Entonces volvamos a nuestro expediente. Y vamos a reducir la opacidad de las cadenas de imágenes a 0. Y eso va a arreglar dos cosas. Una, va a esconder la imagen para que no veamos eso sobre scroll. Y el número dos es si un usuario hubiera decidido desplazarse tocando en esa imagen, esa imagen, porque es un 100% y está fuera del alcance, va a bloquear la vista de desplazamiento. Entonces necesitamos ser de la manera de la teoría de la opacidad para que no se interponga en el camino. Está bien, genial. Entonces lo siguiente que vamos a llamar la atención es la animación de transición real. Lo primero que tenemos que hacer es arreglar este gatillo de tap. Por lo que necesitamos tocar trigger para apuntar a nuestro grupo de imágenes, que es el grupo dentro de nuestro contenedor Scroll. Está bien, eso está bien. Y podemos quitar esta capacidad. Y vamos a, vamos a añadir una nueva opacidad. Y vamos a apuntar al grupo de cadena de imagen tres. Y vamos a poner su opacidad en 100. También vamos a establecer la duración en 0 cuz queremos que eso aparezca de inmediato. A continuación, vamos a sumar una escala. Y podemos escalar la cadena de la industria, 2359764, movimiento del átomo. Y vamos a mover la cadena de imágenes 240 hacia abajo. De acuerdo, entonces básicamente estas dos respuestas están escalando nuestro pulgar ahora y entrar en la posición correcta para que coincida con nuestra vista de detalle original. Está bien. Vamos a ahora necesitamos dimensionar la imagen en su interior así a unas posiciones particulares. Entonces vamos a dejar que nuestra imagen tres y vamos a sumar una escala. Y vamos a poner esto 359 por 8. De acuerdo, así que vamos a probar eso, ver si eso es código de trabajo. Entonces podemos ver aquí, tenemos nuestras imágenes escaladas. Podemos ver que tenemos nuestra mitad superior de nuestro contenedor, pero podemos ver que hay este espacio vacío y aún se puede ver la imagen debajo. Ok, entonces lo que vamos a hacer es que vamos a volver. En realidad vamos a establecer el fondo de la cadena de imágenes en un 100. Y vamos a volver a entrar ¿son estos sanos? Vamos a agarrar nuestros antecedentes, que es como Claire latas hit box y cuyo TNC ahora el fondo del ListView, va a traer eso debajo de cómo cadena de imágenes. Y vamos a bajar esta opacidad a 0. Manteniéndolo seleccionado, vamos a añadir otra respuesta de opacidad a nuestro gatillo. Y vamos a hacer el, el trasfondo shim 70%. De acuerdo, vamos a volver a nuestra cadena de imágenes y vamos a añadir un radio. Por lo que queremos cambiar la curvatura de la, de esta miniatura original, que es de 16 píxeles. Nosotros queremos, queremos crecer ese radio para que coincida con las formas del teléfono y vamos a cambiar ese radio dos de 16 a 32. Y vamos a probar eso. Entonces eso parece. Por lo que ahora podemos ver que tenemos nuestros rincones de radio más grandes. Nunca seríamos fondo blanco. Tenemos este bonito radio que es, que coincide con nuestros teléfonos. Por lo que empieza a parecerse a la transición del cliente que te mostré al principio. Ok, entonces volvamos a nuestro expediente. De acuerdo, entonces a continuación tenemos que traer de vuelta en nuestro contenido y controles por debajo de la imagen. Si recuerdas camino de regreso al inicio de este video, los agrupamos en un contenedor y lo llamamos tallado estas casa. Entonces vamos a buscar eso llamado DES. ¿Cómo está grupo? Tenemos un aquí y vamos a hacerlo, vamos a copiar eso. Y vamos a pegar ese grupo de cadena de imágenes de Intel. Y vamos a fijar su posición y 2561. De acuerdo, así que eso son pruebas que, a ver si eso es cierto. Eso fue como, OK, así que dale un toque y podemos ver que tenemos nuestro concepto de fondo ahora entrando en posición. Ok, así que eso se vuelve a jugar. De acuerdo, así que eso es, vamos a emparejarlo y pagar por ahí. Eso es para asegurarse de que la animación esté buscando. Entonces volvamos a ello. Eso es mantener nuestros cuádruple lidera. Estos casa selectiva. Vamos a, vamos a cambiar sus contraseñas es 0. Y vamos a añadir una respuesta de opacidad a nuestro gatillo de tap. Y vamos a poner la opacidad en 100. Y vamos a darle una duración de 0 punto tres y un ligero retraso o 0.1. así que veamos eso. Oye, yo, así que eso ahora se está desvaneciendo y no teníamos un poco moviéndose hacia arriba desde abajo como lo era antes con un poco extraño. De acuerdo, así que todo se ve bien. El último que tenemos que hacer es traer de vuelta el botón Atrás para que podamos hacer nuestra transición inversa. Entonces vamos a agarrar de nuevo. Entonces si entramos en cómo estos cómo ver de nuevo, agarraremos nuestras mochilas y copiaremos eso. Y vamos a pegar eso dentro del botón de equipo dos. Y vamos a fijar su posición. Entonces x va a ser siete, va a ser ocho. Y también necesitamos cambiar nuestros objetivos on outs tienen disparadores, por lo que necesitamos encontrar nuestro botón original de tap back y necesitamos encontrar dos interruptores, cambiar eso. De acuerdo, entonces lo último que tenemos que hacer es agregar la animación inversa. Entonces cambiemos este reinicio a la cadena de imágenes objetivo. Y vamos a añadir otro reinicio. Y esta vez vamos a apuntar al fondo. Shim scrim, consigue la palabra correcta. Y luego finalmente vamos a sumar un tercer resets. Y vamos a apuntar a la imagen del árbol de imágenes. Y hay algunas imágenes de imágenes asomando alrededor de lo mismo, pero solo asegúrate de que tienes la correcta. No pudiste. Podrás ver cuando tienes un seleccionado aquí, se seleccionará en tu panel Capas aquí. Para que veas que este es el que realmente queremos restablecer. Y queríamos cambiar la duración y un poco a 0.3. Está bien, eso está bien. Esa prueba. Por lo que vamos a dar click en nuestra imagen es un poco de tamaño. Vamos a golpear nuestra columna vertebral y va a redimensionar. Eso se ve un poco rápido. Entonces, solo volvamos a nuestros restablecimientos y creo que probablemente los hemos cambiado todos a los primeros senderos. Prueba eso. Test tiene ese poquito mejor. ¿ De acuerdo? Entonces podemos ver que no está mal, pero no es perfecto. Y si nos desplazamos un poco y luego lo abrimos y lo cerramos, podemos ver que en realidad no retrocede necesariamente al posicionador, Posición perfecta donde estaba. Ha vuelto a donde estaba originalmente. Pero no es tan malo por ahora. Vamos a volver a esta mano. Vamos a solucionar estos problemas. Pero haz eso, necesitamos aprender sobre las fórmulas. De acuerdo, así que este ha sido un video largo. Espero tener un cerebro mayor a2 mucho. Hemos logrado llegar bastante rápido todavía con casi las mismas cosas que habíamos aprendido anteriormente. Y hemos tenido un poco más de práctica creando movimiento. En el siguiente video, vamos a revisitar la transición de inicio de sesión ya que hay algunas cosas ahí que necesitamos arreglar antes de entrar, en fórmulas en la siguiente sección. 24. Crear transiciones personalizadas con el retorno y la línea de tiempo: Hola ahí. Entonces en este video final, mirando al movimiento, vamos a volver al inicio de nuestra app. Vamos a ir a ver las cosas en las pantallas de inicio de sesión. Y vamos a añadir una transición personalizada entre esos dos gritos. Si solo tenemos una revisión de lo que tenemos hasta ahora, tenemos el login, que no ha concentrado edición en m Pero si recuerdas, agregamos un botón Atrás en un video anterior. Y si presiono este botón de retroceso, se puede ver que sólo es una transición básica. Y también nuestro primer green no construye. Faltan los componentes, así que vamos a arreglar esto. De acuerdo, así que eso es solo refrescar eso e ir a nuestro archivo. Y vamos a empezar con el con el inicio s2 espacialmente en el equipo de staff, si lo estás siguiendo , sigue con tu expediente. De lo contrario, puedes descargar un archivo de inicio para esto, para este video. Entonces ahora empezamos a ver, y lo que vamos a hacer es añadir un gatillo de inicio. Y vamos a añadir un disparador fuerte porque queremos y animaciones que lo ejecutan automáticamente cuando se carga la escena. Por lo que hoy inicia gatillo, vamos a marcar esta casilla reset, reiniciar cada vez. Esto, este reinicio cada vez está relacionado con saltar a la respuesta basura y estamos usando respuestas basura para navegar de escena en escena. Entonces por eso esa casilla de verificación no lo es demasiado. Y vamos a añadir un reset para cada objeto que tenemos en nuestra animación. Por lo que tenemos un logo con línea de correa. Tenemos el CTA primario, tenemos el CCA terciario. Por lo que necesitamos agregar una respuesta de reinicio para cada uno de esos. Entonces voy al primer paso terciario CCA, y voy a añadir un reset. Entonces voy a seleccionar el CTA Primaria. En un reinicio. Siguiente será el logo. Y voy a añadir un reset ahí. Y luego finalmente, voy a añadir un reinicio para la línea de correa. ¿ De acuerdo? Entonces lo que efectivamente estamos haciendo aquí es cuando se carga el tratado de inicio, vamos a restablecer la posición inicial de estos objetos. Entonces cuando toquemos el gatillo de tap de arriba, eso va a animar nuestros objetos a un estado de posición particular y los va a dejar. Ahí. Se va a recordar esa estancia. Cuando volvemos a esta pantalla, queremos ejecutar una animación que reinicia y vuelve a su estado original. Entonces, hagamos una prueba rápida para ver qué tenemos hasta ahora. Por lo que tocamos en el inicio de sesión. Vamos a la segunda pantalla de inicio de sesión. Cuando retrocedamos el golpe, va a desencadenar esos. Y puedes ver que todos entran a la vez. Tienen, todos tienen las mismas propiedades de movimiento. Y queremos cambiar eso tan mejor imita la inversión de la animación personalizada que tenemos en primera instancia. Entonces antes de que hagamos eso, solo vamos a Reese renombrar estas respuestas para que podamos entender qué es cada una en este momento todos dicen que receptor sea un poco confuso. Vamos a nombrar a este un CTA terciario. Siguiente arriba, CTA Primaria, logo. Y finalmente línea de correa. Está bien. Por esta situación. Y sólo para que podamos jugar con la línea de tiempo, voy a usar la línea de tiempo para cambiar estos valores de propiedad de movimiento. Solo quiero mostrarte cómo puedes usar este Highline y cómo puede ser bastante útil visualmente cuando estás haciendo animaciones coreografiadas como esta. Vamos primero, este trabajo de arriba a abajo. Entonces el CTA terciario, yo quiero que a dominante dure 4.6 por segundo. Entonces sólo voy a arrastrar eso a 0.6. Se puede ver que aún tenemos los valores de propiedad aquí. que podamos ver para asegurarnos de que estamos a la derecha, en la cantidad correcta. Y voy a dejar el retraso en 0 porque quiero que esto se ejecute primero. Siguiente arriba CTA Primaria, soy Gaines que también satisfacen la misma duración de 0.6. Y te das cuenta de que tipo de broches de presión. Entonces eso es bastante útil. Y para este estoy una vez que lo retrasas por 0.2 de segundo, logo de cable, vamos a, vamos a dejarlo a la duración de 0.2 de segundo. Pero queremos que eso no suceda hasta que estemos un segundo en nuestra animación. Entonces los vamos a sacar a 1 segundo. Y luego finalmente la línea de correa. También vamos a dejar la duración en 0.2. Pero queremos que esto suceda último, y queremos que eso suceda A 1.3 de segundo. ¿De acuerdo? Otra cosa que queremos hacer es echar un vistazo atrás a nuestras respuestas iniciales de movimiento para los dos botones que podemos ver hemos usado interpolados con espalda. Por lo que queremos replicar eso también en nuestra animación inversa. Entonces eso es seleccionar turno, seleccionar CTA Primaria Tertuliana y trazar el cúbico, lo interpola de nuevo. De acuerdo, vamos a dar esa prueba. Por lo que iniciamos sesión, obtenemos nuestra animación personalizada inicial. Y luego vuelves atrás y obtenemos ¿cómo hacemos la animación? Está bien, eso se ve bastante bien. Entonces esa es la primera mitad del costo de la animación que estamos creando este video. A continuación, vamos a crear la animación de espalda, que es la salida de la pantalla de inicio de sesión. Entonces eso es Ir a nuestra escena de inicio de sesión. Y vamos a seleccionar primero el botón Atrás. Y notarás que probablemente he mencionado esto algunas veces en videos anteriores, pero cuando seleccionas algo en la paleta Capas en el último panel, selecciona automáticamente cualquier instancia de uso del mismo en tus disparadores, que es realmente usado Suecia CS es gris claro, resalte aquí. Entonces sobre todo donde tengo múltiples disparadores TAP y no he sido muy bueno en nombrarlos los cuales son deberían estar haciendo realmente. Pero esto es, es que tenemos estos dos disparadores de tap, por lo que hay nos ayuda a encontrar el correcto. Ok. Entonces vamos a ver la respuesta de salto. Y se puede ver aquí tenemos, previamente hemos peón, hey, transiciones básicas. Vamos a convertir esa transición que vamos a poner eso a ninguna. ¿ De acuerdo? Y vamos a ir a nuestro primer gatillo de parada. Y este es este gatillo de inicio es el gatillo que básicamente establece todos nuestros objetos en sus posiciones iniciales. Y si recuerdas de nuevo, la forma en que hicimos esta animación fue usar el Star Trek dos conjuntos de estados de posición inicial. Por eso la duración y el retraso es 0. Y luego en este segundo gatillo estrella, usamos para restablecer a los encuestados, para restablecerlo a su estado original. Y esta es la forma en que creamos esto y summation, porque hemos usado reset para crear la animación de primera entrada, no podemos usar reset en esta instancia para crear la siguiente animación. Tenemos que usar algunas técnicas de movimiento estándar para crear eso. Entonces eso es lo que vamos a hacer ahora. Entonces vamos a volver a ese primer gatillo de inicio, y vamos a cambiar las respuestas selectas. vamos a copiar, y los vamos a pegar en nuestros botones de respaldo tienen gatillo. Y, pero sólo asegúrate de que quiero decir, esto no es necesariamente súper importante porque como he dicho anteriormente, duración y el retraso deciden cuándo se ejecutan las cosas, pero solo por y tu cordura, supongo. Y para asegurarme de que cuando estás mirando puedes ver el orden de cosas como, solo tiendo a seguir manteniendo el orden o trato de mantener el orden de estas cosas en el orden que ejecutan. Por lo que estos objetos van a suceder primero y los saltos pueden suceder en último lugar. Entonces nos han saltado en la parte inferior. ¿ De acuerdo? Vamos a centrar nuestra atención la respuesta de opacidad primero y vamos a fijar su duración en 0.2. A continuación, vamos a tratar cómo mover respuestas que controlan los campos de entrada y el CTA primario. Entonces eso son turnos que suceden esos. Y vamos a fijar la duración a 0.6. Queremos que ambos se muevan al mismo tiempo. Pero también queremos hacer, es queremos, de nuevo, si nos fijamos en estos, de estos reset, Tenemos de vuelta interpolador. Por lo que también queremos agregar un interpolador de espalda a nuestra animación inversa para estos dos objetos también. Y sólo para echarle un vistazo ahí. Entonces tenemos, de hecho, lo podemos ver aquí al final. Esta es otra razón por la que las líneas de tiempo bastante usan donde se puede ver la capacidad de potencia es una especie de movimientos R1 y R2 van a correr todos al mismo tiempo, el enemigo sinfín al mismo tiempo. Y se puede ver la respuesta laboral, que es este pequeño punto que se va a ejecutar de inmediato también. Obviamente, si nuestro salto, salta de inmediato, no vamos a llegar a ver ninguna de estas animaciones. Entonces en realidad tenemos que asegurarnos de que saltaré pasa después de las animaciones de ejecutados. Entonces lo que vamos a hacer es cuando me senté, las respuestas van a sumar un retraso. Todo 0.06, que es la duración más larga para los objetos AR es 0.6. Y nos iremos seguros sabiendo que toda la animación ha concluido. Y también vamos a asegurarnos de que cualquier respuesta de inicio que tengamos aquí, esto solo doble cheque que queremos que todos restyle cada vez. Y queremos hacer eso porque estamos usando saltos a la transición. Entonces queremos que pasen estas cosas, que sucedan estas animaciones cada vez que saltamos de ida y vuelta. ¿ De acuerdo? Entonces creo que eso es todo, sólo va a volver al inicio de ver. Y vamos a previsualizar nuestras nuevas actualizaciones y animaciones personalizadas. Por lo que tocaré buscar en mi entrada, animación personalizada a la pantalla de inicio de sesión. Y luego si me devuelvo el golpe, voy a llevar mi acostumbrada animación de espalda a la pantalla de inicio. Ok, genial. Por lo que eso completa la corrección para esta transición personalizada para este video. También rondas de la sección de movimiento. En el siguiente apartado, vamos a estar explorando el mundo de las condiciones y las variables. Estas son dos características realmente poderosas que nos permitirán construir lógica real en nuestros prototipos. Y que esto sólo va a hacer que las cosas vean aún más realistas, va a ser realmente cool. Y luego nos vamos a utilizar en esa capacidad para hacer un login real. Además, lo que vamos a estar haciendo en la siguiente sección es dar la capacidad para que los usuarios vean fotos que han preferido. Entonces vamos a agregar algo de personalización usando nuestras, nuestras nuevas habilidades encontradas. Tenemos variables de condiciones. Entonces nos vemos en el siguiente apartado. 25. Realizar trabajos de Login con la de sesión con las condiciones: Hola ahí. En este video, vamos a estar usando condiciones para crear la lógica detrás de nuestro formulario de inicio de sesión. Vamos a crear estados tanto de éxito como de error con algunos mensajes asociados también. Entonces si has estado siguiendo los zapatos para fallar que tú que tienes. Si no has estado siguiendo, entonces puedes descargar el archivo de inicio que va con este video. De acuerdo, entonces vamos a empezar obviamente con nuestra pantalla de inicio de sesión a esto, asegúrate de ir a la escena de inicio de sesión. Y vamos a primero, vamos a renombrar algunas de estas capas porque son un poco confusas. Entonces vamos a renombrar esto, esta primera capa y vamos a casa. Y vamos a renombrar esta capa, retornó. El foco, vamos a llamar foco femenino. Esto volverá porque está conectado a nuestro botón Atrás. Este primer Star Trek y vamos a llamar cinética inicial por iniciación. Y eso es porque estamos iniciando algunos de nuestros, algunos de nuestros estados aquí. Esta es la razón por la que normalmente llama a mi grupo superior si tengo algún, cualquiera, cualquier personal para tipo de configurar este, vamos a enfriar la intro. Así es como intro animación. Y nos deja leer, organizarlos en, están en buen orden. Voy a traerlo aquí abajo. Eso está bien. Eso es todo. Bien. Está bien. Bueno, lo dejaremos en ese caso Holder que nos metimos. correo electrónico de enfoque de intro va a Inicio, regresó a ella y toca de nuevo. Una última cosa que voy a hacer es que en realidad voy a agrupar de nuevo a estos dos grupos de casa. Entonces puedo, puedo agrupar, puedo agrupar grupos de grupos. Entonces voy a agrupar a un grupo de un grupo, vega. Entonces esta es una manera realmente buena de organizar tu última pila, tu, tu pila de interacción, debo decir, porque puede llegar a ser bastante larga. A medida que añadas cada vez más funcionalidad, revelará cocinero casero. De acuerdo, entonces lo primero que vamos a hacer es crear la lógica para el campo de correo electrónico. Entonces vamos a nuestro gatillo de casa. Y vamos a añadir una condición. Y vamos a elegir la entrada de correo electrónico. Y puedes ver aquí que tenemos todo un montón de propiedades a las que podemos apuntar. Todo femenino impulso consciente, aprender y buscar la propiedad de texto. Y se puede ver aquí. Tenemos algunas opciones diferentes en cuanto a cómo queremos configurar esta condición. Entonces buscamos la igualdad. Por lo que queremos hacer coincidir el valor del campo de texto con el valor particular. Entonces vamos a mantener eso igual. Y vamos a establecer el valor. Puedes, puedes poner lo que quieras. Simplemente me voy a poner en mi dirección de correo electrónico. ¿ De acuerdo? Y ahora vamos a tomar nuestra condición de salto. Yo lo voy a mover a la cabaña. Responsive dice, oye, voy a pasar a la condición de salto. Está bien. Entonces solo iremos a hacer una prueba. Y lo que solo quiero mostrarles es que retype ahora llamamos aquí una condición la cual esta buscando aquí este valor en particular. Entonces si solo escribimos algo ahí dentro y golpeamos continuar, no vamos a progresar a la pantalla de inicio. Y eso es porque hemos puesto el salto. Respuesta está dentro de esta condición ahora, por lo que este salto es falso, no va a correr a menos que esta condición, esta condición es igual a verdadera. En este caso, el escribo esta dirección de correo electrónico en el campo de correo electrónico. Ok, así que solo para mostrarte que en realidad sí funciona, eso es políticamente correcto. Y si continúo, puedes ver que paso a la pantalla de inicio. Está bien. Entonces esa es la que es la primera condición configurada. Obviamente, para un login, necesitas tanto ella, un correo electrónico y una contraseña o un nombre de usuario y una contraseña y ahora casos y correo electrónico y contraseña. Entonces eso es agregar otra condición. Y esta vez vamos a añadir un padecimiento en un lugar diferente. No vamos a agregar una condición completamente nueva como nosotros, como normalmente lo hacemos desde la parte inferior del menú, realidad puede que necesitemos agregar otra, otra comparación a nuestra única condición. Y así se puede agregar un múltiples subcondiciones a una condición. Y puedes pensar en esto como cuando necesitas comparar algo con múltiples valores. Entonces todos esos, todos esos múltiples valores necesitan ser ciertos para que esta condición sea un éxito. Y eso es exactamente lo que tenemos que hacer. Su inicio de sesión, ambos necesitamos que el correo electrónico y la contraseña sean correctos antes de permitir que alguien entre a la pantalla de inicio. Por lo que hay un botón de aplicación que puede o no haber notado justo abajo aquí. Entonces vamos a presionar eso para agregar una segunda condición. Y esta vez vamos a seleccionar el campo de entrada de contraseñas. Vamos a y la propiedad Text otra vez, va a ser la comparación igualitaria. Y esta vez vamos a poner una contraseña. Por lo que solo puedes inventar una contraseña. Simplemente voy a inventar un valor de contraseña. ¿ De acuerdo? Y vamos a probar eso. Entonces ahora si pongo en mi dirección de correo electrónico, pero lo pondré en la contraseña equivocada. No es una alanina. Si pongo la contraseña correcta. Me permite entrar. Por lo que está buscando y comparando ambas condiciones, asegurándose de que ambas verdaderas antes de que permita que esa condición de salto se ejecute. Está bien, genial, así que eso es todo para este video. En el siguiente video, vamos a seguir con construido en la lógica para la forma de volumen. Y vamos a estar poniendo algún error manejando OC por el momento. Si pones las credenciales equivocadas, el cable simplemente desapareció y solo se pone arena de pantalla en blanco estaba pasando. Por lo que queríamos hacer algo para que la experiencia del usuario sea un poco mejor aquí. Y para que vamos a estar agregando un estado de error personalizado. Entonces nos vemos en el siguiente video. 26. Manejo de los estados de errores de error en el inicio de sesión: Hola ahí. Entonces en este video, vamos a continuar con nuestro movimiento, nuestra lógica de inicio de sesión, y vamos a lidiar con cómo reacciona la interfaz cuando ponemos las credenciales de inicio de sesión equivocadas. Al tratarse de un inicio de sesión por razones de seguridad, no queremos hacer alusión a qué valor está mal. Entonces sólo vamos a estar mostrando un mensaje genérico que el usuario tiene, consiguió algo de información en Roma. Entonces para hacer esto, vamos a ir a agarrar un activo. Entonces eso es saltar a fig, scatch o Adobe XD dependiente de qué, qué programa estamos usando. Estoy usando sigma y estoy solo, tengo este mensaje de error. Oye, obviamente puedes crear un MSD. Bueno, si quieres o puedes copiar el activo que he creado para ti. Y sólo vamos a copiar esto como SVG. Y vamos a volver a PowerPoint y vamos a pegar nuestra gráfica. Porque es SVG. Según lo habitual, necesitamos multiplicarlo por tres para llegar al tamaño correcto. Y sólo lo vamos a colocar en algún lugar debajo de este espacio aquí abajo no tiene que ser súper exacto. Y vamos a renombrar su mensaje de error. Y vamos a voltear para superar t abajo a 0. Ok, entonces volvamos a nuestra condición y en realidad vamos a renombrar esta condición para el éxito de inicio de sesión. Por lo que comenzaron a crear unas condiciones más. Entonces queremos asegurarnos de saber cuál, qué estamos haciendo. Y vamos a ver ahora duplicar esta condición. Por lo que Command D controla las ventanas de trato, y vamos a nombrar a este correo fallar. Vamos a quitar el salto porque este va a ser un escenario con nuestra escena de arranque Inicio. Y vamos a entrar en la condición y en realidad vamos a cambiar el operador de comparación aquí. Entonces en lugar de igual, queremos que no sea igual. Y no igual es este pequeño signo igual en el amor tachado diagonal recta a través de seis. Quieres cambiar a no igual para ambos. En nuestra, en nuestras respuestas, vamos a seleccionar el mensaje de error y vamos a sumar una capacidad. Y vamos a cambiar eso a un 100. Entonces básicamente vamos a desvanecernos en el mensaje de error. También vamos a desvanecerse búho continuar botón. Entonces nuestra CCA primaria, si empezamos con, seleccionamos eso. Y también vamos a sumar una opacidad. Y lo van a derribar a 0. ¿De acuerdo? Ahora vamos a duplicar de nuevo esta condición. Entonces el que acabamos de crear. Y vamos a cambiar el nombre, voy a llamar a esta contraseña sentida. Entonces mientras que teníamos una condición exitosa donde nosotros, necesitábamos tanto de estos correos electrónicos como de contraseña para ser verdaderos para permitir que el usuario entrara. Estas dos condiciones, no queremos tener esta condición compuesta aquí porque básicamente si un usuario hace atar mal el email, pero en realidad consigue la contraseña correcta, esto todavía no va a, eso no va a, eso no va a, eso no va a tener una comparación de comparaciones exitosas en s, Así que va a fallar, lo cual sería incorrecto. Por lo que en realidad estamos desglosando nuestras condiciones de L2 en dos bloques separados. Entonces para el archivo de correo electrónico, solo queremos que se ejecute la condición de correo electrónico, así que solo vamos a golpear para eliminar la condición de contraseña. Y de igual manera en el archivo de contraseña, necesitamos eliminar la condición de correo electrónico. Entonces básicamente ahora tienes un, la condición en cada uno. Y esos sólo van a correr de forma individual. Lo que esto permitirá que suceda es que el usuario pueda obtener ambas credenciales equivocadas, balear, conseguir ya sea una correcta y la otra una función. Y todavía van a recibir el error, el mensaje de manejo de errores. Entonces eso es sólo esta prueba que así Depredadores Poner en credenciales equivocadas. Obtengo el me sale el mensaje. Si realmente escribo una contraseña correcta. Pero puse la contraseña equivocada. También recibo el mensaje de error. Por lo que se ocupa de todos los diferentes escenarios. Entonces eso se ve bien. De acuerdo, entonces a continuación tenemos que lidiar con el estado. Después de un error el usuario quiere volver a intentarlo. Si volvemos atrás y previsualizamos esto, si tengo, si pongo las credenciales equivocadas y presiono Continuar, me va a dar el error, pero también no hay forma de que vuelva al botón Continuar. Por lo que necesito una forma de restablecer el formulario para que el usuario pueda volver a intentarlo. De acuerdo, entonces eso es lo que tenemos que hacer. Entonces, pero para hacer esto, lo que vamos a hacer es que vamos a copiar nuestras dos opacidad. Y vamos a ir al disparador de email de enfoque y los vamos a pegar aquí. Esto está tirando por debajo. Y lo que vamos a hacer es que vamos a revertir estos. Entonces la RMSE que queríamos desaparecer y la llamada a la acción, el login, pero queríamos volver a subir aquí. También, necesitamos copiar boy, la lógica condicional. Por lo que estos tres bloques condicionales, y tenemos que añadirlo también a nuestro disparador de clave de retorno. Si recuerdas, hay dos formas en que podemos enviar el formulario. Podemos o presionar continuar por ley, podemos golpear ahí estaban Sankey, así que podemos quitar este salto. Y podemos simplemente pegar todo el lote aquí dentro. De acuerdo, entonces tenemos nuestra lógica condicional en ambas interacciones. Eso es si el usuario presiona el botón Continuar o si el usuario pulsa volver en la tecla Inicio. También hemos agregado esto. Se trata de pastores que el foco email para que si el usuario consigue sonar una de esas credenciales, entonces puedan tocar el campo de correo y obtener el botón Continuar de nuevo. Una última cosa que tenemos que hacer es que solo necesitamos duplicar este email de enfoque porque no lo hemos hecho. Tenemos que añadirlo también al campo de contraseña por si se equivocó la contraseña. Entonces voy a renombrar esto para enfocar contraseña. Y sólo vamos a cambiar el objetivo al campo de contraseña. Ok? Entonces si preferimos que si meto las convenciones equivocadas y golpeo continuar, y obtenemos el mensaje de error. Si toco en el campo de correo electrónico, entonces voy a recuperar el botón Continuar. Y luego si también toco en el campo de contraseña, también voy a recuperar el botón Continuar. Está bien, impresionante. Por lo que ahora tenemos una forma funcional de lógica real. A continuación, vamos a utilizar algunas variables para que el inicio de sesión sea aún más flexible y dinámico. Entonces nos vemos en el siguiente video. 27. Uso de variables para iniciar sesión: Hola ahí. Entonces en este video, vamos a estar reemplazando los valores duros para nuestro correo electrónico, nuestra contraseña por algunas variables. Por lo que tener los datos en variables lo mantiene separado de toda la otra lógica. Y esto nos da un acceso más fácil para hacer cosas como el cambio en el valor o incluso el tipo de datos. Si en el futuro quisiéramos crear un prototipo donde el usuario establezca su inicio de sesión. Entonces podemos acceder fácilmente a él y usarlo en nuestro flujo de inicio de sesión. Otra razón por la que podríamos querer usar variables es para que podamos realizar otros cálculos o el formato terminará. A medida que sucede, tenemos un problema con nuestro inicio de sesión en este momento. Si probamos, el inicio de sesión probablemente fallará ya que un inicio de sesión es sensible a mayúsculas y minúsculas y los dispositivos tienden a capitalizar el primer carácter. En un apartado posterior, vamos a echar un vistazo a las fórmulas para superar este tema en particular. De acuerdo, entonces echemos un vistazo a las variables. ¿De acuerdo? Por lo que existen variables abajo en este panel en la esquina inferior izquierda. Entonces este es tu panel de variables. Y si tocamos este pequeño botón de agregar, puedes ver que hay dos tipos de variables Podemos agregar. Hay una variable para todas las escenas, y luego hay una variable solo para este C. Así que si quieres acceder a un valor variable a través de todo tu prototipo , IAE en las escenas de tu prototipo, vas a necesitar elige esta primera opción. Si sin embargo, solo necesitas la variable accesible dentro del senior actual en, o si no estás usando escenas en absoluto, puedes usar esta segunda opción. ¿ De acuerdo? Entonces voy a mantener abiertas mis opciones y voy a elegir para todos parece por si acaso necesito usar en el futuro en una escena diferente. También vale la pena señalar que una vez que elijas un tipo de variable, puedes cambiarlo. Por lo que ahora no puedo convertir global. Hay tipo de para todas las escenas variable en Hunt cambio en un. para esta variable de escena. Tendría que crear una nueva variable, eliminar esta variable y cambiar. Y eso puede ser bastante problemático, sobre todo si estamos usando las variables dentro de muchas condiciones y cosas así. Entonces piensa mucho sobre qué tipo de variable tú, tú, vas a usar. Podrías simplemente ir y agregar variables globales para todo de esa manera a la que siempre has tenido acceso. El único inconveniente de eso son todas estas variables para todas las escenas, las llamo variables globales. Serán accesibles en el panel Variables para cada escena, tanto si las estás usando como si no. Y que si estás usando mucha evolución puede llegar a ser bastante largo. Entonces sí, es, alguien solo necesita ver qué funciona para ti, ver qué funciona dentro del prototipo que estás construyendo. De acuerdo, así que me voy a quedar con la variable de escenas completas por si acaso necesito usarla y otra escena más adelante. Y vamos a asegurarnos de que estamos en la escena de inicio de sesión aquí. Y si tú, de nuevo, si estás siguiendo junto encuentro con tu archivo, si no, puedes descargar un archivo de inicio para este video. Entonces vamos a renombrar esta variable. Por lo que solo tienes que hacer doble clic para renombrarlo y vamos a incluir correo electrónico. Y Cuando seleccionas la variable y miras hacia el lado derecho, puedes ver que en realidad hay tres tipos diferentes de variables a las que podemos establecer esta variable. Por lo que estos son tipos variables. Entonces tienes número, texto, y en realidad colores hexagonales. Por lo que dependiendo de cuál se va a mantener el valor en esta variable, se desea elegir el tipo de variable correcto. El color es tranquilo, nicho. Probablemente no vas a usar todos nuestros textos de lote en ellos. Definitivamente estarás usando mucho. Para nosotros. Estamos guardando el valor de texto de nuestro correo electrónico y nuestras contraseñas. Por lo que vamos a querer elegir textos como el, como el tipo variable. También tienes la capacidad de agregar un valor inicial en esto. Es textual a continuación. Vamos a hacer eso. Por lo que este es nuestro correo electrónico. Por lo que le vamos a bombear Ni correo electrónico que queremos utilizar en nuestras condiciones como lo hicimos antes. Está bien, eso está bien. Está bien. Tenemos que hacer necesitamos renunciar a la contraseña también para que puedas duplicar variables de la misma manera que pagaste en otro lugar. Hagamos este correo electrónico y vamos a llamar a esta contraseña. Y vamos a cambiar el valor a nuestra contraseña. Enfriar. Entonces ahora tenemos variables configuradas. Vamos a aplicarlos a nuestro inicio de sesión. Por lo que desea navegar a la condición de éxito de inicio de sesión. Entonces éste de aquí. Y si miramos nuestra primera sub condición, tenemos este valor duro aquí. Entonces si miras la caja justo arriba donde dice uno un valor, realidad podemos dar click en eso y podemos elegir un montón de cosas diferentes terminaría en este caso, queremos elegir nuestras variables para que veas como son dos variables listados aquí. Para este, necesitamos variables de correo electrónico que vamos a elegir. Ahora. Pasemos a nuestra segunda condición, que es la contraseña. Tenemos que hacer las mismas cosas que necesitamos para elegir la variable contraseña. De acuerdo, vamos a probar eso. Por lo que efectivamente, para los criterios de éxito, nada debería, cambiar. Deberíamos poder iniciar sesión de la misma manera que antes. Y mi contraseña para que puedas ver nos encerramos así pero ahora está usando los valores dentro de nuestras variables en lugar de los valores b. Porque sólo necesitamos aplicarlo a nuestras otras condiciones. Por lo que hicimos el éxito de inicio de sesión, hagamos las condiciones de falta de correo electrónico, cambiemos esto a correo electrónico y contraseña condición falta vamos a cambiar a contraseña. También necesitamos ponerlo en nuestro gatillo de regreso a casa también. Entonces, lo que podrías hacer es en realidad simplemente eliminar todo aquí. Y podemos simplemente copiar, copiar nuestro bloque condicional y este pegar en. Por lo que ahora tenemos ese set usando también nuestras variables. Enfriar. Entonces como puedes ver, ya se hace las cosas un poco más accesibles. Y también sólo tenemos que cambiar el valor en una sola ubicación. Ahora, como se puede ver anteriormente, tenemos estos, estas exactamente seis condiciones o con valores duros habrían tenido que cambiar esas seis veces. Ahora solo podemos actualizar el valor en una variable. Ok, así que sobre lo envuelve para el inicio de sesión y este video. En el siguiente video, vamos a utilizar variables y condiciones para mostrar un teléfono favorito tienen en nuestra sección favorita. Entonces nos vemos ahí. 28. Cómo gestionar los estados con variables y condiciones: En este video, vamos a estar usando variables y condiciones para cambiar esta vista de Favoritos desde el estado vacío que puedes ver aquí en mostrar nuestros favoritos ID pies. Entonces si recuerdas en el video anterior, agregamos una animación a una de las imágenes en nuestro flujo fotográfico, que entonces pedirían favorecer esa imagen. Y básicamente hicimos esta animación donde sí cayó en el, en lo alto. Por lo que ahora vamos a añadir la lógica a esta pantalla. En realidad podemos ver que la imagen aparece como un pi preferido. Entonces esto, este es un buen ejemplo de cómo se pueden utilizar variables y condiciones para la gestión estatal. Y los estados son partes realmente importantes de las apps. Por lo que poder prototipar estados es una habilidad realmente importante para aprender. Entonces vas a aprender algunas cosas realmente geniales en los próximos videos. Lo primero que quiero hacer es querer impulsar, hace algunos gráficos para una versión ligeramente actualizada de esta pantalla en particular. Entonces voy a saltar por encima de dos sigma. Entonces este es mi nuevo diseño de favoritos. Por lo que puedes ver aquí, he añadido una navegación de pestañas aquí para pasteles favoritos y también una sección de lugar Maya. Se puede ver aquí hay una miniatura, piso. Proponer. Esto es efectivamente como es nuestra pantalla, Gainesville alguien puede parecer. Entonces ese es el salto de vuelta a sonda. Y vamos a ir a cómo la gente ve. Y solo eliminemos cualquier gráfico viejo de eso. Y vamos a importar nuestro nuevo diseño de sigma a esta escena para dejar todo como predeterminados. Y luego veré si estamos usando un boceto o Adobe XD, entonces hace NFO como lo has hecho antes. Está bien, genial. Por lo que nuestros gráficos han llegado. Por ahora. Simplemente vamos a agarrar el gráfico de cabecera estándar. Se va a copiar eso. Y vamos a saltar de nuevo a nuestra escena de favoritos y vamos a pegar nuestro encabezado. Y sólo vamos a sacar la palabra copia del final de eso, vamos a eliminar el encabezado estándar existente Grupo gráfico que teníamos ahí. Y sólo vamos a reemplazar eso en posicionalmente con nuestro nuevo. A continuación, queremos agrupar los gráficos que componen los estados vacíos juntos. Entonces eso es ilustración, los textos y el botón. Por lo que va a agruparlos. Y vamos a llamar a este estado vacío. ¿ De acuerdo? Y a dónde vamos a ir, vamos a armar nuestro tipo de marco de gestión estatal. Entonces lo primero que vamos a hacer es que vamos a crear una variable para todas las escenas. Y vamos a hacer que ese sexo sea variable. Y vamos a llamar a ese estado F, F subrayado estado. Nuevamente, el nombramiento. La estructura es más importante es la forma en que hice las cosas. De acuerdo, y vamos a establecer, vamos a darle a esta variable un valor predeterminado de vacío. Y lo que estamos haciendo aquí es que estamos usando la variable para controlar qué estado estamos mostrando en realidad. Por lo que nuestro estado por defecto son los estados vacíos, así ascendería el primer día como la estancia vacía como nuestro estado por defecto, por defecto para nuestro gerente estatal. De acuerdo, a continuación, vamos a añadir un gatillo estelar. Y estamos desinstalados tratados porque start trigger es el disparador que se ejecuta automáticamente cuando se carga la escena. Por lo que queremos a nuestros directivos estatales que inicien cuando la escena. Por eso estamos usando un gatillo estelar. Y vamos a renombrar este gatillo de inicio a estados. Y lo vamos a evaluar para empezar con salto en lugar de una estrella tras salto, porque queremos que se establezca el estado antes de que se renderice la pantalla. Usando inicio con salto, solo sucede un poco más rápido que estrella tras salto. Si usamos salto de personal, entonces probablemente tengamos un parpadeo de lo que haya antes, antes de vender filetes y además no queremos eso. Y queremos comprobar el reinicio cada vez porque queremos que el Gerente estatal compruebe cómo quedarnos cada vez que SQL vengamos a esto, ver, vamos a volver a nuestros gráficos de estado vacíos. Y como dije, queremos realmente usar a nuestro Gerente estatal para iniciar primero el estado vacío por defecto. Entonces en realidad queremos bajar la opacidad de esto, así que no queremos que esté ahí por defecto. Queremos que eso sea iniciado por nuestro directivo. Y en realidad vamos a añadir una condición a nuestro estado. Y vamos a llamar a esto vacío. Y vamos a establecer la condición para elegir nuestra variable de estado F. Y vamos a mirar, porque este es el estado vacío que realmente estamos evaluando aquí. Queremos buscar la palabra vacío. Entonces en gorras, para que coincida con el valor que agregamos a nuestra variable. Y si la condición es igual a MC, Queremos cargar efectivamente el antiestado. Entonces vamos a sumar una opacidad. Y tenemos que subir hasta 100. Y vamos a fijar la duración a 0 porque queremos que esto suceda de inmediato. No lo es. Entonces va a haber animación en Así es como queremos simplemente estar ahí si ese estado en particular es el estado que se necesita mostrar. ¿ De acuerdo? Entonces eso es sólo dar esa prueba. Por lo que obviamente esto está estableciendo el estado vacío por defecto. Por lo que solo debes ver tu estado vacío como viste antes. Pero obviamente se puede ver eso en nuestro verdadero expediente. Por lo que pasado aquí 0. Entonces sabemos que nuestro gerente estatal está trabajando porque podemos ver al estado aquí núcleo. Por lo que efectivamente hemos sur cómo gerente estatal. Y nos hemos sentado en nuestro primer día, que es nuestro estado vacío. Entonces tenemos todo en su lugar para sumar más estados a medida que nosotros, a medida que avanzamos. En el siguiente video, vamos a estar configurando nuestra funcionalidad de favor. Por lo que en realidad podemos agregar nuestra diversión ahora desde el flujo de fotos a esta corriente. Entonces nos vemos ahí. 29. Crear una característica de favorito de fotos: En este video, vamos a agregar algunas personalizaciones son n variables y las condiciones son realmente buenas para agregar características de personalización. En la sección seis, empezamos a construir los favoritos, viendo una función fotográfica. En este video, vamos a continuar con esa característica construyendo la capacidad de mostrar la foto en la sección favorita. Depredador no tiene la capacidad de mover objetos de un lugar a otro entre escenas, por ejemplo. Tampoco tiene ninguna capacidad para importar datos reales. Por lo que tendremos que añadir algo de falsificación para que esto funcione. Pero eso está bien. Esta idea prototipo ofs regla. De acuerdo, entonces si lo estás siguiendo , sigue con tu expediente. De lo contrario puedes descargar un archivo de inicio para este video. Y vamos a despegar yendo a la sección Inicio, la pantalla de inicio. Y vamos a copiar imagen nueve dentro de nuestros grupos de fotos o efectos de grupo de flujo de fotos no abiertos entonces OpenFlow stream uva y en la página uno. Y vamos a agarrar esta imagen nueve aquí. Y sólo vamos a copiar esto. Y vamos a volver a nuestra sección favorita. Y vamos a pegar. Y vamos a renombrarlo. Y vamos a posicionar en la sede coordinan 16 para X y 96 para y Así está en la esquina superior izquierda. Y vamos a agrupar la imagen para que podamos, para que podamos ponerla en un contenedor y vamos a llamar a este contenedor pasteles favoritos. De acuerdo, entonces vamos a reducir la opacidad de los contenedores cuya época. Y también vamos a reducir la pi one imagen a. A continuación, vamos a crear una variable numérica para todas las escenas. Entonces por defecto, obtendrás una variable numérica a la que voy a llamar a esta pi one. Y dejaremos el valor por defecto es 0. De acuerdo, entonces vamos a crear un nuevo gatillo estelar. Y vamos a dejar de administrador de contenido, dice otro manager que crea y lo establece para que se reinicie cada vez. Y hoy, vamos a añadir una condición. Y vamos a llamar a este pi uno. Por lo que en la condición vamos a elegir nuestro pi una variable. Y lo vamos a, vamos a buscar un valor de uno. De acuerdo, entonces volvamos a nuestro Player una imagen y vamos a seleccionar eso y vamos a añadir una respuesta de opacidad dentro de esa condición. Vamos a ponerlo en 100. Y vamos a reducir la duración a 0. Voy a volver con el Gerente de nuestro estado, que montamos en el último video. Y vamos a sumar un nuevo estado, por lo que una nueva condición. Y lo vamos a llamar como favoritos. Y vamos a poner el estado F. Y vamos a buscar los favoritos de valor. Gorras plegables, como viste anteriormente en el video anterior, estoy usando todas las gorras para mis nombres de estado. Y si eso es cierto, si vamos a hacerlo, si conseguimos un igual a favoritos, queremos analizar la capacidad. Y queremos seleccionar nuestro estado vacío. Y queremos establecer la opacidad en 0. Y queremos establecer la duración en 0. Queremos luego seleccionar nuestro grupo de piras favorito. Queremos sumar otra opacidad. Oye, queremos ponerlo en 100. Y de nuevo queremos una duración también. De acuerdo, así que hemos hecho dos cosas aquí. Hemos ensillado concepto manage, que es básicamente para gestionar la exhibición y ocultación de nuestras imágenes pi preferidas pi L. Aquí, hemos agregado otro estado a nuestro manager de etapa, que efectivamente va a mostrar nuestro pastel favorito si nuestra estancia f es igual a favoritos. Y también vamos a ocultar el estado vacío. Tiene alfa c serán cambios toman de vacío para brillar algo. Ok, entonces a continuación necesitamos detener las imágenes que la imagen va a ser favorecida. Por lo que volveremos a la pantalla de inicio. Vamos a averiguar el gatillo de doble toque. Y eso se abrió eso. Y vamos a añadir una nueva respuesta. Y esto va a ser una respuesta de asignación. Y los encuestados asignados nos permite asignar valores a variables. Y vamos a seleccionar nuestra variable f estado. Entonces se puede ver, porque esta es una variable que puede ser vista por todas las escenas. Tienes acceso a ella en todas las cosas. Y la razón por la que llamé F underscore stay es F obviamente para los favoritos. Entonces porque vas a ver a través de todas tus escenas, solo necesitas asegurarte de que tenga un nombre único. Entonces voy a elegir eso como nuestra variable. Y vamos a cambiar el valor a Favoritos, asegurándonos de que todo sea gorras, correcto, entonces ¿qué ha salido mal aquí? Podemos ver que los espejos completos siguen siendo una naranja. Una naranja como sabemos, significa que hay algo mal. Ok, entonces porque estamos analizando ayudas valor hexadecimal. Cuando agregamos un valor de texto dentro de una fórmula, necesitamos envolverlo en comillas simples. De lo contrario no funcionará. Entonces solo envuelve la palabra entre comillas dobles. Y ahora se puede ver que el, nuestros intereses se fueron. De acuerdo, vamos a añadir otra respuesta de asignación. Y esta vez vamos a elegir nuestra pi una variable. Y vamos a poner en la fórmula a una. Ok, vamos a probar eso. Entonces vamos a ejecutar nuestra pantalla de inicio. Qué tipo de llama a nuestro pi uno. Y vamos a tener, bueno, van a peice de los favoritos, que yo creo es éste. Vamos a hacer doble clic en él. Nos dieron la animación que hicimos antes. Y si ahora vamos a nuestra sección favorita, podemos ver que ha aparecido el r pi. Está bien, eso está bien. Ahora hemos agregado algo de personalización genial a nuestra aplicación. Es decir, puede parecer excesivamente complejo, pero todos nosotros red a prueba de futuro para donde podríamos querer agregar múltiples favoritos. El desgaste nos da control tanto sobre las imágenes individuales como sobre los favoritos que tú en su conjunto, lo que hará las cosas mucho más fáciles a la larga. Una de las cosas que lanzamos un pastel, sobre todo cuando comienzas a crear mucha funcionalidad, es que las cosas pueden ponerse un poco difíciles de manejar con bastante rapidez. Es por ello que una buena estructura y buen nombre y su vitalmente importante. De acuerdo, así que esto termina la Sección siete. Espero que esto les haya dado una buena base de comprensión o variables y condiciones y cómo se pueden utilizar. He desafiado que eran algunos conceptos bastante avanzados aquí. Entonces para todos tiene sentido y estás bien en camino de crear algunas cosas increíbles. Si ha sido un poco difícil ir, Clave, Pásalo, juega con las características juega con las características y prueba otras formas de hacer las cosas. Ciertamente hay diferentes formas de crear la misma funcionalidad. En la siguiente sección, vamos a explorar algunas de las características de hardware pro pies. No quieres perderte este. Entonces nos vemos ahí. 30. Crear una cámara real en la aplicación en la aplicación: Hola ahí. En este video, vamos a estar curando una verdadera cámara in-app. Por lo que en la sección siete, agregamos una nueva característica a nuestra app de Pintrest llamada Mis pasteles. Con esta característica, vamos a dar a nuestros usuarios la capacidad de sumar las esperanzas de sus propias Python. Podemos prototipear esto con tartas depredadoras capacidad para acceder a la cámara en el dispositivo. Por lo que podemos enfocarnos en la función de la cámara. Ya construí cómo la vista de paginación y pestañas todo la idea es idéntica a lo que cubrimos en la Sección cuatro. Por lo tanto, siéntete libre de tener una oportunidad en la construcción de esta media característica tú mismo. Alternativamente, puedes simplemente descargar el archivo de inicio donde ya están incorporados. De acuerdo, entonces tenemos nuestro buscapersonas y nuestras dos sub pantallas. Se puede ver que tengo un marcador de posición llamado mis comparecencias. Por lo que en primer lugar, importemos nuestro diseño desde la carpeta de activos y creemos esta vista. Entonces me voy a saltar a FISMA. Obviamente usa la herramienta de elección que estás siguiendo junto con. Y voy a impulsar, sólo quería mostrarles la vista de los dos. Entonces tengo estas dos vistas sobre la vista de las jugadas mentales y tengo la vista de la cámara. De acuerdo, así que voy a importar esto puede aplicarse como tú. Vayamos a la escena de impulsos dentro de nuestro archivo y solo eliminemos todo lo que hay ahí afuera. Y vamos a ir a importar. Y solo voy a importar ese diseño para que mi upaya esté diseñada para mejorar el N. Ahora solo me interesa el botón de la cámara aquí, así que solo voy a copiar esto. Y voy a volver a mis favoritos aquí. Y sólo lo voy a pegar en su lugar. De acuerdo, así que quiero, quiero que esté dentro de mi grupo de jugadas, que es este contenido de página justo al lado derecho tiene, y lo va a mover a este contenedor grupal. Y voy a poner los actos en 1-0 y asegurarme de que la Y también sea 0. Por lo que está en la esquina superior izquierda de esto. Mi PI es contenedor. Está bien, genial. Tan genial. Por lo que tenemos nuestra vista de estancia vacía lista para ir. Siguiente tipo, queremos crear el modal de la cámara. Desafortunadamente, no hay forma de guardar fotos ni moverlas entre escenas en oración a pi. Por lo que cualquier foto tomada con la cámara sólo puede existir en la escena en la que fueron filmadas. Esto es un poco de restricción, pero podemos trabajar con eso. lo que efectivamente lo que necesitamos hacer, necesitamos crear nuestra vista modal de cámara dentro de la misma escena que queremos utilizar la foto que comenzó a tomar. Y en este caso, todo tiene que existir dentro de nuestra escena favorita. Entonces volvamos al impulso visto de nuevo. Y otra vez. Aquí vamos a eliminar todos nuestros gráficos. Y esta vez vamos a impulsar nuestro diseño de cámara en modo o diseño de cámara. Entonces vamos a elegir Cámara y vamos a tirar de eso. Lo primero que vamos a hacer es que vamos a eliminar esta guía de Bessel que esto era sólo para nuestro, para mi uso cuando estaba poniendo los estudiosos de diseño creen ese grupo qué tan completamente. Y vamos a añadir un rectángulo. Y lo vamos a hacer exactamente del mismo tamaño que nuestro dispositivo telefónico. Así que forma realmente rápida y fácil de hacer eso es simplemente ajustar el ancho y la altura a un 100%. Y luego sonda voy a trabajar el ancho y la altura exactas para nosotros. Vamos a mover esto al fondo de nuestra última app. Y ahora vamos a agrupar todo. De acuerdo, entonces la única razón por la que corregimos este rectángulo fue para forzar al grupo a ser del tamaño exacto de la pantalla. Por lo que ahora el trabajo de estado del rectángulo, sólo podemos quitar el rectángulo por completo. Vamos a renombrar esta cámara contenedor. Y vamos a poner el color del fondo de los contenedores en un E1, E, cuando E. Y asegurándonos de que tenga un relleno del 100%. Y ahora vamos a copiar a todo el grupo. Y de nuevo, para volver a nuestra escena favorita y sólo vamos a pegarla. Vamos a deshacernos de esa taza de café. Entonces ahora lo que tenemos que hacer es agregar la capa de la cámara para acceder a la cámara del pasillo, en realidad tenemos que añadir una capa especial. Y esa capa existe dentro de este menú de medios aquí. Entonces aquí están las cámaras. Por lo que un poco elegimos cámara para agregar una capa especial de cámara. Y verás que tiene un pequeño ícono de una cámara en medio de eso. Y lo que queremos hacer es que sea del mismo tamaño que nuestra capa de marcador de posición fotográfico dentro de nuestro diseño. Entonces eso son tres 5-9 donde 359. Entonces hagámoslo igual. 259 por 359. Y lo vamos a poner en nuestro grupo de contenedores de cámaras justo encima de la foto. Y sólo vamos a movernos a sitios de posición en la misma posición que el, como guía a los contrarios de la OMS capa guía. Y entonces ya podemos quitar el trabajo de este hotel Aristóteles. Y podemos simplemente renombrar esta cámara. De acuerdo, entonces eso es si te aseguras de que tu, tienes tu cámara seleccionada por última vez. Vamos a pasar al panel Propiedades y vamos a marcar esta casilla junto a autostart. Y eso va a arrancar automáticamente nuestra cámara tan pronto como este diseño, quienes son efectivamente tan pronto como se carga el prototipo. Y se puede ver aquí realmente tenemos control sobre la cara frontal y la cámara trasera. Para esta característica en particular queremos utilizar. En cámaras, queremos tomar una foto de nuestro pastel. Entonces lo dejaremos en ese defecto. Y si buscamos previsualizar, podemos ver que tenemos esta cosa de la línea en zigzaggy pasando. Entonces este es básicamente nuestro laboratorio de cámaras y porque la vista previa está en nuestra, en nuestra computadora y ahora la computadora no tiene cámara o no tiene acceso a la a la cámara. Si tienes cámara incorporada en tu computadora, solo nos va a mostrar exactamente estas luces. Entonces lo que vamos a hacer ahora es que realmente vamos a enviar nuestro prototipo a nuestro dispositivo. Y luego una vez que está en el dispositivo, que en realidad recogen la cámara real, verás que la cámara real funciona en. Entonces hagámoslo ahora. Por lo que cierran, revisión. Y lo que queremos hacer es querer abrir la prensa, Aplicar un jugador en nuestro dispositivo. Entonces solo voy a cambiar a la, la vista de la cámara para que veas lo que estoy haciendo. Se puede ver aquí tengo la sonda I jugador abierta. Entonces y puedes ver aquí abajo ya hemos conectado vía Wi-Fi a nuestro proceso en alto. Por lo que puedes hacer esto escaneando un código QR. Si sólo te muestro eso. Entonces si haces clic en el menú del dispositivo, puedes ver que tienes este código QR. Y puedes ver que ya conecté mi teléfono aquí, así que solo necesitas escanear este código. De acuerdo, así que una vez que pregunten todos conecten dijo que vamos a presionar el botón Ejecutar. Y vas a escuchar eso y va a sonar. Eso significa que es sólo el prototipo de mi teléfono. Y se puede ver que se acaba de cargar aquí. Y se puede ver ahora que mi prototipo se ha cargado. Y se puede ver que la cámara, las cámaras reales realmente funcionan. Y puedes ver que tengo mi bodegón fuera mi tiro de Pi montada y la estoy mirando con mi cámara. Entonces eso es bastante guay. Eso es todo trabajo en muy bien. Ok, entonces a continuación queremos que la vista de la cámara sea modal. Entonces lo que vamos a hacer es que vamos a seleccionar todo nuestro grupo de cámaras. Y sólo lo vamos a sacar de la parte inferior de la pantalla. Queremos perder animar en modalmente desde la parte inferior de la pantalla. Y vamos a seleccionar nuestro botón de cámara, que es esta gran miniatura dentro de nuestro grupo de jugadas mayas, el que agregamos antes, uno que está seleccionado. Y vamos a añadir un tetramer. Y vamos a llamar a este gatillo de toque Abrir Cámara. Y vamos a volver a seleccionar nuestra vista de cámara. Y vamos a añadir una respuesta de movimiento a nuestro gatillo recién creado. Y queremos mover la cámara lambda_2 0 y posición. Tan efectivamente uno que es Animate arriba desde abajo. Y sólo vamos a aumentar la duración a 0.4 es viajar bastante, bastante distancia toda la pantalla de hecho, así que no queremos que la duración sea demasiado rápida, lo contrario va a ser demasiado rápido. Pace. Y a continuación, queremos enganchar el botón de cierre. Entonces si miramos dentro de nuestro grupo de capas de cámara, tenemos un interior del encabezado estándar aquí, tenemos un botón Cerrar, por lo que quiere seleccionar eso. Y notarás esto. En realidad, si me desplaza hacia abajo, puedes ver mi botón de cerrar aquí es un blanco bastante pequeño. Entonces tienes esta habilidad y sonda pilotos que en realidad aumentaron el cuidado táctil sin complemento como un rectángulo o nada por el estilo. Entonces vamos a hacer eso ahora. Entonces si tenemos eso seleccionado y nos desplazamos hasta la parte inferior de nuestro panel de propiedades, Tenemos esta opción área táctil. Entonces vamos a marcar esa casilla. Y eso nos va a abrir y darnos la capacidad de agregar relleno en cualquiera de los lados o en todos los lados de nuestro, de nuestro botón. Queremos que esté acolchada todo el camino. Entonces sólo vamos a mantener esta casilla marcada igual m para todos los lados y sólo vamos a sumar 16 en cualquiera de las casillas. Y cuando lleguemos al regreso, se lo va a sumar a todo el camino. Y ya puedes ver ahora tengo hoyo roscado mucho más grande se pone. Eso va a ser mucho más fácil para las cabezas. ¿ De acuerdo? Lo que vamos a hacer ahora es agregar otro disparador de pestañas para nuestro botón de cierre. Y a eso vamos a sumar unos reajustes y efectos. Nosotros, lo que queremos hacer es querer restablecer la animación de la apertura de la vista modal. Por lo que queremos asegurarnos de que tenemos nuestra vista modal de cámara. Entonces esa es una especie de la C mayúscula Eso es genial. Y vamos a fijar la duración a 0.3. Entonces como dije en el, en la sección de animación, tiendo a poner una, una duración más rápida en algo que se está cerrando o, o pareja saliendo haciendo esto nuestra animación que yo también, es en animación. Entonces por eso me he fijado en una décima de segundo más rápido. Enfriar, así que ahora hemos completado una configuración del mismo en nuestras cámaras. Entonces de nuevo, vamos a ejecutar esto y probar esto en nuestro dispositivo. Lo que vamos a hacer ahora es que vamos a deslizar la cruz que obtenemos cuatro. Vamos a abrir nuestra cámara modal. Eso va a traer ahí nuestra visión modal. Y podemos ver que ahora tenemos es como vista de cámara en vivo todavía. Y luego podemos presionar este botón de cierre para cerrar la vista modal. Entonces ahí vamos. Todos estamos listos y listos para hacer la siguiente pieza de funcionalidad, que es realmente tomar la foto. Y eso es lo que vamos a estar haciendo en el próximo video. Vamos a estar tomando una foto. Entonces y vamos a hacer que esa miniatura de foto aparezca en la sección del mercado. 31. Agrega una foto tomada por la cámara de la aplicación en la aplicación: Hola ahí. Entonces en este video, vamos a continuar con la construcción de nuestra, nuestra característica para permitir a los usuarios tomar fotos de sus propias piras y llevarlas a la app. Y específicamente, vamos a estar buscando tomar un teléfono real. Entonces después de tomar una foto y vamos a estar agregando algunas interacciones de cámara más realistas a nuestro prototipo. Entonces, vamos a ir. Entonces lo primero que queremos hacer es que queremos, si lo estás siguiendo, puedes descargar el archivo de inicio. Quieres asegurarte de navegar al cabello de la escena favorita. Ahí es donde estoy actualmente. Y lo primero que vamos a hacer es que vamos a encontrar el grupo de botones dentro del Grupo de cámaras, que aquí es un grupo R. Y queremos este grupo de botones aquí. Y yo sólo voy a desplazarme hacia abajo para que podamos ver cómo dura la cámara. Entonces es esto, este botón en el centro. Entonces queremos asegurarnos de que eso sea seleccionado. Y vamos a añadir gatillo de ataque. Y lo vamos a nombrar Toma Foto. Y a eso vamos a sumar una respuesta de cámara. Por lo que la respuesta de la cámara funciona en conjunto con las capas de la cámara. Solo tenemos una capa de cámara en nuestro sitio de proyecto. Ese es el que creamos anteriormente. Por lo que vamos a seleccionar nuestra capa de cámara aquí. Y tenemos dos opciones aquí. Podemos arrancar la cámara y podemos parar la cámara. Por lo que ya hemos configurado el teléfono TO La funcionalidad de foto in-app para iniciar automáticamente con cámaras a las cámaras ya lo estaba ejecutando. Si has visto el video anterior, viste un sombrero que se alimenta en vivo. Por lo que para imitar tomar una foto, efectivamente vamos a utilizar estos errores de riesgo para detener la cámara. Entonces vamos a seleccionar stop. Y la forma en que funciona el diseño de la cámara BET. Probablemente un poco inusual en cuanto a cómo piensas esto, esta función sabe cómo funciona dentro de la proteína pi. Por lo que el diseño de la cámara puede o bien arrancar o parar, como dije antes , cuando se detiene, recuerda la última imagen. Fue, la vida que buscaría en eso y qué tan efectivo pausa el video. Entonces tienes una imagen fija. Entonces vamos a usar eso, esa funcionalidad para imitar que realmente nos tomó una foto. Y eso es lo que esta respuesta está haciendo. Está deteniendo ofensivamente la cámara y en el, en el, en el feed. Lo que realmente podemos hacer es si solo ejecutamos eso y cargaremos cómo prototipo aquí en nuestro dispositivo. Y entraremos y te mostraré, voy a lanzar nuestra cámara como, funcionalidad de cámara. Entonces tenemos nuestra alimentación en vivo aquí como yo era, como decía antes. Y ahora sólo voy a presionar el botón y se puede ver ahora que tenemos una imagen fija, cámara ahora se ha detenido ofensivamente. Entonces esta es la primera parte de imitar. Tomó una foto. Enfriar. Entonces vamos a cambiar de nuevo al estudio prettify. Por lo que hemos hecho la primera parte donde hemos. Efectivamente congeló el urogallo de MSC hasta la imagen, pero en realidad no parece que realmente hayamos tomado la foto. Entonces, así que solo quiero agregar algunas interacciones más, más interacciones visuales para que se sienta un poco más ligera. En realidad hemos tomado una foto. Y lo que realmente vamos a hacer es que va a agregar un poco, poco efecto para que las cámaras parezcan que está parpadeada. Y eso es para imitar la forma en que funciona un obturador de cámara. Y te da esa sensación de que realmente has tomado una foto. ¿ De acuerdo? Lo que vamos a hacer es que vamos a añadir un rectángulo. Y lo vamos a hacer negro. Y lo vamos a hacer del mismo tamaño que nuestra cámara ahí. Por lo que en realidad lo bebió dentro de nuestro grupo de cámaras justo encima de la capa. Y sólo vamos a conseguir el tamaño de coordenadas en NIH y un 101. Y lo mismo. Y queremos que las dimensiones, el ancho y la altura sean las mismas también, 359 cuadrada. Y vamos a llamar a esto etiquetado. Ok, entonces queremos darle la vuelta tan inicialmente cuando su opacidad sea 0. Entonces vamos a bajar eso a 0. Y vamos a volver para ahora tomar fotos. Whoa, gatillo. Y vamos a asegurarnos de que tenemos seleccionada la, la capa de parpadeo. Y vamos a sumar una opacidad. Y vamos a hacer que sea un 100. Y vamos a darle una duración de 0. ¿ De acuerdo? Vamos a duplicar la opacidad. Y vamos a bajarlo a 0. Y sólo vamos a sumar un retraso de 0.12 pases. Oye, genial. Entonces eso se trata de la animación. También queremos hacer es no queremos que este CPA esté mostrando hasta que realmente hayamos tomado la foto. Entonces vamos a poner su trabajo inicial pasado los dientes son 0. Y asegurándome de que sea seleccionado, voy a añadir otra opacidad para sacar a las personas que desencadenan OMS para esto, para este CTA. Y vamos a cambiar su opacidad a 100. Vamos a mantener la duración en 0.2 y sólo vamos a sumar y 0.3. retraso. De acuerdo, pasemos a nuestro, nuestro dispositivo y probemos eso. Así que sólo estamos un poco manejarlo. Podemos ver aquí que acaba de recargar en mi dispositivo. Y voy a iniciar mi cámara y a preparar a mis papás OMS. Y se puede ver aquí ahora que ahora falta el CTA en la parte inferior de la pantalla. Entonces voy a tomar mi foto. Y puedes ver que tengo mi pequeño parpadeo y tengo mi imagen fija. Está bien, eso se ve bien. Saltar de nuevo al estudio. Ok, digamos de nuevo Harry Studio. Y quiero añadir una cosa final. Y es decir, quiero agregar un poco de animación al botón real en sí para que parezca que ha sido presionado. Esto es todo para ayudarles a darles un efecto realista o tomar una foto. Entonces lo que voy a hacer es que voy a seleccionar el contenedor de botones. Y voy a añadir un gatillo de touchdown. Y entonces sólo voy a seleccionar el círculo interno de mi, de mi botón. Y quiero asegurarme de que el origen esté puesto a centro, centro porque voy a hacer animación política sobre esto. Y manteniendo el enter, el botón enter seleccionado. Voy a agregar una respuesta de escala a este gatillo. Y voy a ponerlo a escala por un factor de 90. Por lo que sólo vamos a reducir su escala en un 10%. Y voy a decir esa duración de eso a 0.01. bien. Ahora voy a añadir un gatillo de retoque. Y quiero que esto esté en el contenedor de botones. Obtiene una copia esta escala, la respuesta de escala del otro disparador. Y lo voy a pegar en mi toque aquí arriba. Y voy a cambiar la escala de nuevo a 100. Por lo que efectivamente lo vamos a escalar de nuevo hasta su posición original, original. De acuerdo, vamos a probarlos. De acuerdo, así que eso es correr eso en dispositivo hinchado. Y volveremos a iniciar nuestra foto. Asegúrate de que puedas ver c o y voy a apretar el botón. Y ojalá hayas visto esa baja animación ahí. Ahora tenemos nuestra imagen fija y también tenemos nuestras fotos seguras que muestran CCA también. Enfriar. Por lo que ahora tenemos una cámara in-app real realista que toma fotos. Bueno, una foto al menos, que sobre se termina para este video. En el siguiente video, tomaremos la foto capturada luego construiremos una diversión ahora y añadimos a la sección de miopía para verte ahí. 32. Cómo guardar una foto como miniatura: Hola ahí, bienvenido de nuevo. Y en este video, seguiremos desde el último video donde creamos una foto con la capa de cámara. Y en este video, vamos a estar ahorrando que la gente tenga activos. Y ahora tenemos un poco de problema sin embargo, porque la forma en prettify funciona con el diseño de la cámara es que no podemos reutilizar stat esa imagen de la imagen fija de la capa de cámara que nosotros, que tomamos en el último video. Entonces tenemos que ver con nuestro humo y espejos para imitar la funcionalidad, funcionalidad de guardar esa foto así como una miniatura. Entonces lo que efectivamente tenemos que hacer es que tenemos que usar otra capa de cámara. Y sólo para explicar un poco sobre, un poco más sobre la capa de la cámara. Porque en realidad no estás tomando fotos con una cámara yacía o en realidad simplemente mirando la cámara a través de una capa. En realidad puedes agregar montones y montones de capas de cámara. Y todos van a hacer lo mismo. Todos van a mirar a través de la cámara. Entonces lo que realmente vamos a hacer para, para imitar el guardado de las fotos realmente iba a tener que camara capas corriendo al mismo tiempo. Una tu opinión, que es la que ya construimos, pero una no vas a ver cuál va a ser la miniatura. Y ahí es donde entra la parte de humo y espejos. Entonces próximos artistas invitados, así tendrá más sentido a medida que avancemos. Entonces lo primero que vamos a hacer. Entonces si no has hecho, solo para decir si no has estado siguiendo, entonces por favor descarga el archivo de inicio que viene con este video. De lo contrario continuaremos desde donde lo dejamos. Por lo que estamos escuchando ahora Pintrest en y donde en la escena favorita. Así que solo asegúrate de navegar por los favoritos. Podemos estar en la misma página que estamos. Y lo primero que vamos a hacer es que vamos a duplicar nuestra capa de cámara. Y vamos a renombrarlo a cámara pulgar. Y voy a posicionarme en las vistas de las jugadas mayas. Entonces vamos a traerlo aquí abajo. Y lo que queremos hacer es que te hagamos del mismo tamaño y ponerlo en la misma ubicación que el botón de la cámara aquí. Por lo que el Karabaj peca 163 por uno, 76. Entonces, solo hagamos nuestra capa y la misma ciencia por 17. Y entonces sólo necesitamos agarrar la posición que es 00. Eso es agradable y fácil vender los celíacos y más blancos 00. Ok. Lo que también podías ver es que si solo escondo esta cámara y esta tiene esquinas redondeadas esta vez, y quiero mis miniaturas o tener esquinas redondeadas también. Desafortunadamente, vienes no tienes acceso a esquinas de radio en la cámara. mismos Lera tendremos que hacer eso? Tenemos que agrupar la capa, también lo hace el comando G, control g de Windows. Y sólo somos amables con el radio de Saturno ahora del grupo 16. Y vamos a bajar hasta el fondo, vamos a recortar subcapas. Por lo que ahora puedes ver tenemos nuestras esquinas redondeadas. Envolvemos ir alrededor de una capa de cámara de esquina. Y vamos a nombrar a esta imagen una. Y nos va a decir inicialmente, tenemos que decir su opacidad hasta 0. De acuerdo, de vuelta a nuestro gatillo Toma una Foto. Entonces éste de aquí. Entonces con nuestras selecciones de fondos de cámara, vamos a añadir otra respuesta de cámara. Y vamos a poner los pulgares de la cámara para que se detengan. Lo que hicimos antes. Vamos a sumar una opacidad. Vamos a apuntar cómo, cómo imagen a un grupo. Y vamos a sumar capacidad a un 100. Por último estamos llegando a búho, guarda un botón Foto, desplázate hacia abajo. Cta primaria. Seleccione eso. Y vamos a añadir un gatillo de tap. Y tenemos que copiar el reset que agregamos a nuestro botón de cierre aquí. Copiar eso. Voy a entrar en este gatillo de tap. De acuerdo, eso es, eso se ve bien. Por lo que efectivamente lo que queremos que suceda es cuando presionamos el botón Guardar, solo queremos que desaparezca toda la app de la cámara. Entonces lo que vamos a hacer ahora es que voy a probar eso en el dispositivo. De acuerdo, así que eso es correr eso cargando aquí en mi dispositivo. Entonces voy a preguntar antes de irme y voy a seleccionar mi, mi botón para entrar en modo Cámara. Y voy a conseguir una bonita foto de mi, mi preciosa 2k pi aquí en donde mi encantadora pequeña configuración. Scott y yo cantamos regresamos. Oye, toma esa foto, eso se ve bien. De acuerdo, entonces tenemos mi limosna de imagen. Por lo que sólo voy a apretar el botón de decir Foto. Y voila, hemos guardado nuestro punto de alberca a nuestra lista de favoritos. Entonces lo que realmente hemos hecho aquí, como tú, como puedes columna, en realidad tenemos las dos, las dos capas corriendo al mismo tiempo. Entonces cuando nosotros cuando detenemos la cámara, ella se detuvo en ambas capas de cámara y solo sacamos la opacidad. Por lo que muchas veces repro pi, que pensar un poco fuera de la caja para lograr los resultados E1, vale, hay una última cosa que me gustaría hacer en este momento. Se puede ver sólo puedo tomar una foto ya el botón de la cámara ha sido escondido por las primeras personas que selecciona OMS, rectificar eso de vuelta al estudio. De acuerdo, entonces lo que queremos hacer es efectivamente, queremos mover nuestro botón de cámara poco más de uno. Entonces cuando obtenemos la foto que aparece a la izquierda, queremos movernos hacia la derecha. Entonces lo que vamos a hacer es volver a nuestras fotos tomadas, pero algunos McKenna vamos a seleccionar ahora botón Cámara. Entonces ése es ese de aquí. Y vamos a sumar una respuesta de movimiento. Y si miramos el ancho de cómo de nuestro botón de cámara, podemos ver es un 163. Entonces quisiéramos movernos allá junto con, con unos mejores patrones. Entonces en realidad vamos a pasar y vamos a movernos ahí por un 180 en la x Y vamos a fijar la duración a 0 porque no tenemos, no queremos que veas esto. Sólo queríamos resolver por el cabello. Por lo que sólo vamos a establecer la duración en 0, así que sobre todo en la posición correcta. De acuerdo, sólo vamos a probar eso otra vez. Volver a nuestro dispositivo, una caja que ha corrido nuestro prototipo. De acuerdo, entonces aquí estamos otra vez. Entonces vamos a tomar una foto. Y vamos a guardar la foto. Y se puede ver aquí, tenemos a nuestra gente por aquí y podemos ver que tenemos nuestro botón de cámara que ha sido movido hacia el lado derecho. Perfecto. Ahí vas. Acabamos de crear un predecesor en que toma fotos reales y las guarda en la sección MyPlate se detendrá aquí. Pero podrías seguir agregando la capacidad de tomar más fotos si lo deseas. Solo necesitarás usar más capas de cámara. De acuerdo, así que esto nos lleva al final de este video. En el siguiente video, vamos a poner algo de glaseado en el pastel agregando alguna app de azulejo haptics. Entonces nos vemos ahí. 33. Agrega retroalimentación haptic con los sensores de dispositivo: Otra capacidad de dispositivo sobre la que tenemos control es haptics probe, supongo disponer de haptics tanto para iOS como para Android ya que utiliza sexo hap real. Las subastas de retroalimentación para las dos plataformas son diferentes. En este video, estaremos usando el iOS, pero si tienes un teléfono Android, podrás elegir también tus propias haptics. Entonces estoy pensando que hay dos lugares donde podríamos agregar algunos Hapsburgs a la app de Pinterest cuando guardamos un favorito y cuando tocamos el botón de la cámara, hagamos los favores 1 primero. Entonces vamos a casa. Estoy en los hogares, en la pantalla de inicio aquí. Y vamos a abrir el gatillo de doble toque. De acuerdo, entonces vamos a añadir una respuesta vibrante. Por lo que la háptica se llama vibrar dentro de Pro pi. Y cuando seleccionas vibrar, puedes ver que hay una serie de opciones. Entonces tenemos iOS aquí y tenemos Android, y aquí es hap seis. Entonces nos vamos a centrar en mi sistema operativo. Y podemos ver que hay una serie de teléfonos, notificación, segues, impactos, haptics, y tenía una selección ayuda también. Entonces voy a ir con pesado por el bien del sombrero que quiero usar. Y literalmente puedes ejecutar esto en tu dispositivo y luego sentir, Obviamente no lo hay, realmente no puedo mostrártelo en este video porque no podemos comunicarnos y vibrar a través, a través, a través de su medio, pero, pero correr lo ejecuta en tu teléfono como hemos corrido antes. Por lo que quieres ir al dispositivo y quieres escanear el código QR y quieres ejecutarlo en tu teléfono. Entonces ese es el primer lugar que creo que sería donde quiero poner algunos hápticos. De acuerdo, entonces pasemos a la cámara. Entonces vayamos a la escena favorita. Y vamos a ir a la cámara in-app. Entonces esto, este grupo que tenemos aquí y vamos a ir al gatillo de touchdown. Entonces aquí es donde estamos presionando nuestros autobuses. Por lo que es realmente agradable dejar de sentir nostalgia cuando estás presionando botones. Por lo que vamos a sumar aquí a nuestro botón Foto. Entonces vamos a volver a hacerlo, vamos a añadir una respuesta vibrante. Y esta vez donde Gaines que utilizan el éxito háptico como creo que funciona muy bien aquí. Nuevamente, ejecútalo conectando tu dispositivo a tu prototipo y mira cómo tú, cómo se siente eso. Y eso es, eso es literalmente tan fácil como es agregar haptics a tu, a tus prototipos. De acuerdo, así que siéntete libre de tener una jugada con diferente hap, sexo y sentir lo diferentes que son y sentir lo que está bien. Hay un poco muy experimentación va por el camino para que realmente te pedimos que experimentes con estos para este sensor muy físico en particular que tienes disponible aquí dentro de petabyte. De acuerdo, así que eso es un envoltorio en nuestra mirada al hardware del dispositivo. Siéntase libre de explorar algunas de las otras respuestas de hardware como, aquí tenemos brújula, y también tenemos inclinación. Entonces y también tenemos 3D Touch, que es algo que ha quedado en desuso para iOS ahora. Pero si tienes una mayor y sí tienes que tener unos fundadores que soporten 3D touch. Pero si tienes un iPhone diez por ejemplo, entonces, entonces puedes experimentar también. ¿ De acuerdo? En la siguiente sección, te estaré presentando fórmulas que agregan algunos superpoderes increíbles para que realmente crees alguna funcionalidad avanzada. Entonces nos vemos en el siguiente apartado. 34. Uso de tu Formulas para seguir la posición: Hola ahí. Entonces en este video vamos a estar usando fórmulas para rastrear la posición en algunos de los componentes que construimos ya en nuestro prototipo. Entonces vamos a volver a la pantalla de inicio y vamos a ir a la pestaña de desplazamiento. Y en lugar de usar esos valores manuales que teníamos para los disparadores de tap, vamos a poner una fórmula dentro de esos y vamos a esos, esos valores dinámicamente. Entonces eso llega a eso. En primer lugar, queremos hacer es querer navegar a la escena Inicio. ¿ De acuerdo? Y vamos a encontrar el gatillo de hoy aquí. Entonces solo para recordarles, el gatillo de hoy está conectado a esta hab de hoy. Y dentro de ella donde efectivamente estamos moviendo esta pastilla gráfica. Por lo que se centran en la posición de cangrejo en la ficha al seleccionar eso. Y si, y si seleccionas la respuesta de movimiento aquí, puedes ver que aquí tenemos un valor duro, así que tenemos 77.5. Si tocas ese campo, verás que hay este icono de fx espolvoreado allí a un escritor. Y cuando sea donde quiera que veas y fx icono dentro de un campo de entrada, dentro de una interfaz de usuario pro pies. Eso significa que se puede agregar una fórmula en su lugar. Entonces lo que vamos a hacer es que vamos a tocar el icono de fx. Y va a salir este pequeño campo de aquí. Y aquí es donde podemos empezar a crear nuestras fórmulas. Y lo que vamos a hacer, sólo vamos a quitar el valor duro aquí. Y lo que vamos a hacer es que vamos a tocar el botón más. Y vamos a buscar al grupo llamado hoy. Así que asegúrate de agrupar, ese es un icono cuadrado punteado junto a él. Entonces vamos a seleccionar eso. Y puedes ver aquí tenemos estas pequeñas marcas de garrapatas. Entonces este es el agradecimiento de Lee. Cómo dentro de una fórmula, haces referencia a un diseño o a un grupo de capas dentro de tu, dentro de tu bombo de proceso. De acuerdo, entonces tenemos a nuestro grupo. Ahora, ahora queremos agregar una propiedad particular de ese grupo. Entonces para acceder a una propiedad en un grupo, lo primero que hacemos es aprovechar unos periodos, así adopta. Y en cuanto toques eso, verás que aparece un menú. Y puedes ver que tienes acceso a las propiedades habituales que has visto en diversas etapas a través de este curso. Y en realidad podemos acceder directamente a estas propiedades de este grupo a través de esta fórmula. Entonces lo que vamos a hacer es que vamos a seleccionar la propiedad x. Entonces puedes ver cuando tipeo bancos también se completa y luego básicamente filtra este cuadro desplegable en todo lo que tiene x en S. Así que simplemente queríamos los valores x. Entonces vamos a seleccionar eso. Y vamos a dar click en Aceptar. Y vamos a probar eso. Y lo que realmente estamos buscando no es ningún cambio. Por lo que tocamos a recomendado que voy a ver obras como antes si tocamos hoy, podemos ver que también funciona. Pero ahora hoy en día se usa en realidad. Fórmula, está usando la x es el valor x del, del Grupo de hoy. Y murciélagos ahora conduciendo este comportamiento. Entonces si nosotros, si efectivamente movemos este grupo a una ubicación diferente, la pelvis aún funciona. Todavía se encontraba el centro de ese grupo porque en realidad está directamente conectado a un valor dinámico en el propio grupo. De acuerdo, entonces ese es el primer uso de fórmula que estamos usando en nuestro prototipo. A continuación vamos a, vamos a arreglar una animación que hicimos hace bastante tiempo. Y fue la animación donde estuvimos en esta pantalla de inicio. Y lo que vamos a hacer en realidad, sólo voy a, Va a bloquear este fondo sólo para que podamos acceder a otros, otros componentes. Entonces conseguimos esto, esta imagen de este pastel de merengue de limón moraine. Y si recuerdas, en la sección anterior hace bastante tiempo, básicamente creamos una vista de detalle. Cuando selecciones esto, solo ejecutemos eso para que veas cómo se ve eso. Soft consiguió Maya, mi ventana de vista previa aquí. Entonces voy a hacer clic en ellos o imperio. Y conseguimos esto. Y eso está todo bien. Era una especie de crecer fuera del pulgar. Ahora, también tuvimos una animación de espalda donde acabo de presionar este botón de retroceso y que efectivamente se contrae. Y eso está bien. Funciona bien cuando la posición de desplazamiento está en esta, en esta posición predeterminada. Pero si ahora muevo este pergamino, este lemma, pyre marina gráfica hasta la parte superior de la pantalla. Y si ahora lo presiono, verás que empieza desde la posición correcta. Por lo que sigue creciendo de la miniatura. Pero si presiono el botón Atrás, verás que en realidad ha vuelto a bajar a algún lugar aquí abajo. Y déjame simplemente frenar eso. Para que se pueda ver eso. Por lo que vamos, vamos a mover arriba casa Posición de rollo y vamos a dar un toque al pi. Y se puede ver que eso está creciendo correctamente. Pero cuando tocamos hacia atrás, podemos ver que en realidad está bajando a su espacio de posición inicial no, no siguiendo la posición de desplazamiento. Cuando es cuando salimos de eso, que estos sanos. Entonces eso es lo que vamos a arreglar ahora usando fórmulas. De acuerdo, entonces lo que vamos a hacer es ir al gatillo de tap que se conecta al botón Atrás también. Por lo que necesitamos averiguar el botón Atrás al que está aquí. Entonces tenemos a este grupo aquí atrás Boston. Y aquí está outs sombrero gatillo. Y en realidad esto es renombrar eso para que sea un poco más fácil de encontrar. Y vamos a abrir esto y vamos a quitar estos tres receso. Simplemente los vamos a eliminar por completo para que vamos a recrear esto, esta animación de espalda. Pero esta vez va a estar siguiendo la posición correcta de la posición de desplazamiento de nuestro, de nuestro punto de vista. De acuerdo, entonces vamos a entrar en este gatillo justo arriba. Entonces así es como de hecho es simplemente cambiar el nombre esta pestaña de vista de detalle de tap para. Entonces esta es nuestra animación de entrada y nosotros efectos, queremos revertir esto para animación X. De acuerdo, entonces otra vez, para copiar la opacidad de la tarjeta, estas casa o esta primera. Y vamos a pegar eso en nuestro grifo de vuelta. Y vamos a poner la opacidad a 0. Y vamos a establecer la duración a 0 punto uno. Y vamos a quitar el retraso. Entonces el siguiente que vamos a copiar es el fondo o Pasiphae. Y vamos a pegar eso. Y vamos a poner eso en 0. Entonces esta es la carpa de fondo que efectivamente esto marca el debajo cuando el, cuando sale la vista. A continuación, vamos a copiar el radio. Pega eso en. Y vamos a establecer el radio respaldado 16 porque esa es la curvatura original de nuestro pulgar. Ahora, a continuación vamos a copiar la imagen de tres escala. Voy a pegar eso. Y vamos a poner la escala a una. Y te daré dos por 4.5. Y vamos a dejar la duración a las dos, y vamos a dejar ese retraso a las 0. Eso está todo bien. Y k Siguiente vamos a copiar y pegar eso en. Y vamos a poner la x a 16. Y aquí es donde nuestro plenamente ahí ahora va a entrar en juego porque el movimiento es el, es la respuesta clave para conseguir la animación en la posición correcta en ese pergamino, en esa posición de desplazamiento. Entonces sólo voy a pasar a Y en el campo y y vamos a golpear el icono de fx. Y vamos a quitar el valor del corazón. Y lo vamos a empatar y todas nuestras matemáticas. Entonces lo primero que voy a escribir es de 19 a más 96. Y vamos a envolver eso entre algunos corchetes. Y cuál es la razón por la que hemos hecho que es que queremos sumar estos dos valores juntos antes de trabajar los próximos cálculos tenemos recomendamos entre paréntesis que va a forzar la fórmula para sumar estos dos valores juntos primero, obtener el resultado y luego usar ese resultado. Y a veces necesitas hacer eso. De lo contrario podría obtener resultado diferente si funcionan cómo valor primero? Entonces vamos a sumar un menos. Entonces otra vez, c menos esto de algo. Y luego vamos a verter espacio. No tienes que ir al espacio M, pero solo lo hace un poco más legible. Y ahora vamos a tocar el botón más. Y queremos buscar la página uno, que es que nuestra primera vista de desplazamiento aquí. Por lo que queremos elegir Página uno. Vamos a escribir prepararlo el Doppler que hicimos antes. Y esta vez queremos un valor diferente. Queremos algo llamado desplazamiento. Entonces esto nos va a dar el valor del scroll y un momento en particular cuando el usuario ha desplazado hacia abajo. De acuerdo, entonces vamos a dar clic en Aceptar. Así se completa la fórmula. De acuerdo, entonces ahora vamos a copiar la imagen escala tres. Esa es la escala de cadenas misteriosas. Voy a copiar este. Y vamos a pegar eso en reversa. Y vamos a poner eso en 163176. Y luego finalmente, vamos a copiar la imagen de tres cadenas de opacidad. Voy a pegar eso. Y vamos a dejar una duración 0, pero vamos a retrasar esto en 0.2 porque queremos que esto suceda último. Entonces efectivamente lo que estamos haciendo aquí es que vamos a desvanecer la imagen en cadena de vuelta hacia fuera. En realidad está tendiendo a 0 a la derecha en el último, en el último minuto. Entonces la mayoría de eso es, así que esto es, esta es una especie de animación inversa complaciente MOSFET es más o menos lo mismo. Sólo estamos revirtiendo los valores. Y como dije, el movimiento es el, es donde estábamos agregando el valor dinámico. De acuerdo, así que eso es dar esa prueba para ver si eso funciona. Entonces, así que todavía lo tengo en un término fresco, velocidades para que podamos poner nuestro pergamino en una posición para que podamos ver que esto está funcionando o no. Entonces voy a aprovechar esto y tenemos nuestra animación abierta, que no hemos cambiado eso, eso ya funciona, pero ésta es la que cambiamos. Entonces cuando tocamos Close, ahora podemos ver que la animación para revertir N es en realidad lo anima nuevo a la posición de desplazamiento correcta de nuestra capa Scroll. Por lo que esto nos lleva al final de nuestra primera mirada a las fórmulas y cómo podemos usar fórmulas para rastrear posiciones. En el siguiente video, vamos a estar persiguiendo algunos ejemplos más de fórmulas. Entonces te veré ahí. 35. Crear un contorno de notificación: Hola ahí. En este video, vamos a utilizar fórmulas para crear un contador de notificaciones. Entonces eso primero echa un vistazo a lo que vamos a construir. Entonces lo primero que vamos a hacer es importar este nuevo diseño para nuestra pantalla Actualizaciones. Y esta pantalla de actualización nos va a mostrar tres lugares. Por lo que tres potenciales entusiastas de pi que podríamos querer seguir. Y vamos a añadir esta insignia de notificación sobre el icono de actualizaciones en la barra superior, que nos va a decir que tenemos tres artículos que necesitamos revisar. Vamos a usar variables para tipo de control eso, ese número. Y luego si saltamos a la pantalla de inicio, vamos a ver esta pequeña animación estallando, mostrándonos la insignia mientras iniciamos sesión. Entonces eso es lo que vamos a construir en este video. Entonces vayamos a ello. Por lo que aquí estoy de vuelta él mis placas de descanso app. Si has estado siguiendo, te puedes usar solo puedes usar el mismo, el mismo archivo que has estado, has estado creando o siguiendo junto conmigo. De no ser así, puedes descargar un archivo de inicio. Por lo que puedes seguir de esto, de esta sección. Entonces lo primero que voy a hacer es ir a la escena de actualización. Y voy a agrupar todas las capas juntas aparte del flujo que suceden las cosas. Por lo que estas capas representan el estado vacío. Por lo que sólo queremos resaltar esa ola ahora. Entonces lo vamos a llamar mancha vacía. Y eso es sólo contratar eso. A continuación vamos a importar cómo nueva pantalla de nuestra desde la Sección nueve activos, que también se adjunta a la, a esta sección, a esta sección de video. Y voy a usar figura como he estado, he estado haciendo todo a través. Y solo para darle un vistazo, este es el diseño que vamos a estar trayendo de nuestro archivo en particular. Pero claro, si estás siguiendo junto con sketch o simplemente puedes usar los gráficos de esas apps. Y lo que voy a hacer es que voy a ir a nuestra escena y sólo voy a borrar si hay algo en que sólo se desencadene. Por lo que está completamente claro. Y vamos a importar nuestros gráficos. Excepto los dos full stack diseño de nubes costeras impulsan. Entonces lo siguiente que vamos a hacer es que sólo vamos a agrupar nuestras tres notificaciones son tres precios juntos. En realidad voy a llamar a ese grupo Paestum. Cómo jugar aficionados. Y sólo vamos a igualar parte del espaciado y del tamaño en. Entonces vamos a hacerlo, por cada subgrupo de pice. Entonces si solo Herzl abajo para volver a esos tres grupos individuales gratis y sólo vamos a hacerlos 200. Hola, esto es un poco de configuración para alguien o ellos más tarde. Y también sólo quiero hacer la brecha esa distancia entre cada uno. Entonces puedes simplemente, si quieres conseguir este pequeño gráfico donde tipo de muestra el espacio en las distancias. Si solo seleccionas un objeto, el cursor sobre el objeto entre el que quieras medir. Y luego solo mantén pulsado el botón. Tu gad que obtendrás un poquito te ayudará. Para que podamos ver sólo necesitamos ajustar esto por un píxel. Y éste uno por dos. Porque ahora debería estar todo en medio. Eso se ve bien. De acuerdo, entonces ahora vamos a copiar lugares grupo y su título. Se va a mandar C o controlar C en Windows. Y vamos a volver a nuestras actualizaciones. Y sólo vamos a pegar esos gráficos en. Ok, entonces eso deja que nuestro Grupo de Electrodomésticos y queremos convertir una en una vista de desplazamiento. Entonces dejamos a Will los pensamientos, su precio un pergamino vertical. Y solo vamos a cambiar el área de desplazamiento a más o menos para que se sientan dentro de nuestra, dentro de nuestra escena que así como hemos aprendido anteriormente, para hacer un desplazamiento grupal, necesario establecer el área de desplazamiento visualizable, que es lo que acabamos de hacer. Y no tiene que ser súper preciso. Es que más o menos siempre se trata de la barra de pestañas, entonces va a estar bien. Y entonces por fin vamos a simplemente mover la barra de sombrero de nuestro fotón a la parte superior. Eso queremos. Queremos que nuestra vista de desplazamiento se desplace efectivamente debajo de su barra caliente allí. Ese es el pensador. Entonces así se configura la vista. Solo queremos pensar que solo voy a agrupar todos estos desencadenantes juntos también para que podamos enfocarnos en nuestro nuevo o nuevo truco es que vamos a sumar algunos como vamos a agrupar estos juntos. Y voy a llamar a estos navegación. Entonces eso es sólo algunas cosas que hicimos en un video anterior. Simplemente esconde eso fuera del camino abrigo, y esa es nuestra pantalla de actualización configurada. A continuación vamos a estar provocando que nuestra atención vuelva a crear el cáncer. De acuerdo, entonces vamos a crear las cuentas ahora y funcionalmente, queremos ahora conteos a Robert representando el número de solicitudes de amigos que están pendientes. Entonces básicamente los amigos, las recomendaciones de los amigos que tenemos aquí en nuestra opinión. Entonces lo primero que vamos a hacer es volver al impulso viendo. Y queremos conseguir nuestra gráfica de insignia. Eso es todavía poco gráfico que se centre aquí en el icono de la campana. Entonces vamos a copiar eso. Y vamos a volver a la pantalla de inicio. Voy a pegarlo. De acuerdo, entonces vamos a mover la placa, la placa a Búho, a su gorro bar. Déjame simplemente cerrar algunos de estos grupos sobre cómo tocar nuestro grupo, vamos a mover las insignias o están justo en la parte superior está bien. Y lo vamos a reposicionar. Entonces pasemos a nuestro panel de propiedades y cambiemos estos valores a 225. Y podemos ver ahí acabamos de tener una sesión justo en la esquina superior derecha de nuestro Bel Air. Ok. Entonces volviendo a nuestra insignia con El último panel, solo queremos abrir ese grupo de insignias y quieres encontrar la capa de texto, que es ésta, el pequeño ícono, las cargas aquí y S. Así que eso tiene actualmente como número uno, queremos seleccionar eso. Queremos poder editar ese texto. Queremos pasar un valor real a eso. Por lo que necesitamos convertir eso en un verdadero objeto de texto de altura de sonda nativo. Entonces si lo seleccionas en el panel de capas y luego vas todo el camino hasta el panel Propiedades y solo toca este convertir textos Vaseline, CO. Y ahora se puede ver que es, los iconos cambian es que se ha cambiado esta TI concisa ahora un campo de texto editable. Vamos a renombrar este contador. Y así lo siguiente que queremos hacer es que queremos crear una variable para sostener el valor de nuestro consejo. Entonces vamos a bajar al panel Variables aquí. Y vamos a crear una variable para todas las escenas. Y vamos a renombrar este contador. Y vamos a establecer el valor inicial 23 dice que recibimos tres notificaciones en nuestro diseño. Ok, entonces a continuación vamos a dejar de trabajar en algunos desencadenantes como concentrados alrededor de algunos de nuestros desencadenantes mayores para que podamos recordar algún espacio con el que trabajar. Y vamos a añadir un disparador descarado. Y sólo lo vamos a dejar en sus impagos por ahora. Y luego dentro de este disparador de acciones, vamos a, vamos a añadir algunas, algunas respuestas, pero antes de hacerlo, sólo vamos a renombrarlo para contrarrestar la piedra. Y a c