Transcripciones
1. ¡Hola!: I Caso de mi nombre y soy la interfaz de usuario en uso de experiencias line Me especializo en crear por qué frames prototipos en diseños de alta fidelidad. En el transcurso de mi carrera de diseño, desarrollé un flujo de trabajo consistente al mantenerme al tanto de las tendencias de la industria involucraron un campo de tecnología y diseño. Esto me ha llevado a encontrar nuevas formas de agregar un nivel único de nous dinámico a los productos que creo en esta clase estaría mirando huevos de marco. Te estaré caminando a través de todo el proceso de traer vivos tus diseños. Por lo que está utilizando componentes, agregando eventos y explorando las tiendas internas de Freeman que podrías obtener
experiencia práctica en el uso del último potencial. Detrás de este software es inmenso. medida que pasemos por cada etapa del proceso interactivo, me tomaré el tiempo para explicar qué hace cada característica total y por qué lo hizo un específico. Antes de continuar con esta clase, adelante y descarga los archivos de proyecto adjuntos en Habrá un proyecto de clase el cual te
dará la oportunidad de experimentar en la práctica en orden a tiempo. Si quieres ver más de mi trabajo, asegúrate de dirigirme al perfil de habilidadcompartir o conectarme en otras plataformas sociales . Tal drivel en Twitter también siéntete libre de mantener este perfil de seguimiento para estar al día de cualquier clase futura sobre cualquier cosa diseñada en sabes que está relacionado. Siéntase libre de contactarme si tiene alguna pregunta o retroalimentación sobre cómo podría
mejorarse este curso , listo para empezar, así que empecemos.
2. Descripción de Framer X: Hola, chicos. Y bienvenidos de nuevo a la siguiente parte de este video. Te estaré dando una visión general rápida del software frame X como tor cualquier interfaz y echar un
vistazo a lo que hacen algunas de las características. Esto es solo para darte una idea de cómo va a ser la plataforma antes de que nos metamos
realmente en crear un prototipo. Lo que es genial de esto es un potencial detrás de él y la forma en que ha sido recibido dentro de la comunidad, específicamente entre diseñadores. Ya que sentí que con la versión anterior, tenía una curva de aprendizaje bastante empinada, lo que significaba que si no estabas familiarizado con JavaScript, familiarizarte con lo básico en impuestos y aprovechar al máximo el proceso de creación de prototipos parecía un punto y tarea a muchas personas. Y a pesar de que frame de X sigue usando el motor basado en código esta vez reacciona, El proceso real de prototipado en sí se ha hecho mucho más amigable e intuitivo, y definitivamente rivaliza con los gustos de estudio de visión en un doobie supera el prototipado, característica o superan mucho en principio en términos de simplicidad. Por lo tanto, siento que es beneficioso aprender esto porque como diseñadores no sólo podemos crear
interacciones increíbles . También podemos ver el poder de reaccionar, cómo funciona sin realmente tener que escribir alguna reactivación en sí misma. Entonces sin más preámbulos, abramos la interfaz principal y explosiva con las características. De acuerdo, entonces aquí estamos en mags gratis, como puedes ver, no muchas pasando. No obstante, aquí
hemos seleccionado este tipo, que es donde comienza la magia principal. El suceder se llama herramientas y ahí dentro se divide en cuatro secciones, que es de diseño interactivo. Dibujo en la decisión de lienzo permite controlar no sólo el proceso de diseño sino también el proceso prototipos. Esta encuesta probablemente le parezca muy familiar, pero para abrir más de la interfaz, seleccionemos gratis y elijamos un campus en el que el diseño para Senador Cómo imaginarse
boceto ¿Tenemos la opción de elegir reloj, teléfono, tableta, computadora o TV? Para los efectos de esto, elijamos huevos de iPhone, y es como la gira redonda para abrir las cosas de la propiedad. Ahora que he creado círculo, verás en la tina de capas que está anidada dentro de este iPhone para él aquí en, tienes las cosas de la propiedad que probablemente se ven muy familiares para tenerlo se ve en sketch aquí, puedes alinearlo. Establece la posición en para la capacidad de respuesta tal como lo ve la animación de abajo, dijo el dentro de
la altura, el desbordamiento para mostrar u ocultar, así
como cosas como la A, Passy, la rotación y el Radio. También puedes convertir esto en un enlace haciendo de este un evento clicable que te llevará a la siguiente página es lo que edita el código. Es como la opción de mezcla o cambiar otras cosas familiares que deberían tener sentir color y otros elementos de estilo como el borde en las sombras. También podrías explorarlo de forma individual o como un lienzo completo. Dependiente de los requisitos, sin embargo, tocará las noticias en un video posterior dentro de una sección de herramientas. También verás otros tres elementos importantes, que un enlace de pila y pila de desplazamiento es esencialmente un atributo de libros flex que te
permite distribuir una listas organizadas, pero para limpiar horizontalmente de una manera fácil y eficiente. Enlace es esencialmente el proceso de vinculación de la pantalla para que puedas ir entre ellos y scroll es un componente de desplazamiento te permitirá desplazarte dentro de una máscara en una determinada página debajo de la que debajo del dibujo, tienes gráfico, que es donde se pueden crear y editar formas y rutas vectoriales. Y por último, bajo lienzo, tienes opciones básicas de navegación. Tal selecto zoom y panorámica este tema para que puedas moverte por la página y acercar a medida que
diseñas . Está bien, así que no he mirado el lado del diseño de las cosas, y siento la necesidad de entrar en demasiados detalles. Estaba listo para ser sencillo en similar a todos los Softwares? Por lo tanto, veamos los componentes ahora similares a los símbolos, y los componentes de boceto son esencialmente elementos reutilizables. Podría distribuirse a través de múltiples páginas, sin embargo, sólo necesita editarse una vez. Para poder usar tus propios componentes, puedes crearlos usando incluso diseño o código. Si eres diseñador, por
supuesto, tu favor esto. No obstante, si eres un desarrollador o alguien que está familiarizado con el código de reaccionar exageradamente, puedes crearlos. Usar esto en el código de estudio visual de noticias es una integración de flujo de trabajo. Para los efectos de este video, vamos a crear usando código para que pueda mostrar cómo funcionará esa integración para empezar. Démosle título algo sencillo, como Hello World Click, creándolo. Es Lo que sucederá es que el código de estudio visual se cargará mostrando todas las
propiedades de reacción para ese componente. No voy a meterme demasiado en esto es como dije, aunque usa reaccionar, no
tenemos que preocuparnos realmente justo en esto, a pesar de estos a tus componentes o debería decir componente que se está creando en reaccionar para él. Eggs también ofrece la oportunidad de anular cosas como el título. Cómo hay algún elemento básico de estilo todavía tendrá que hacerse en código de estudio visual para mostrar cómo funcionan los componentes a través de dos páginas. Volvamos rápidamente y cambiemos uno del estilo de los elementos. ¿ No es un simple como cambiar de color del texto de Black Control S del cual es un poco de cambio a través del Like, dije, la
mayoría de ustedes probablemente lo hayan hecho en diseño. No obstante, la tienda Framers también ofrece una variedad de diferentes tú I kits y componentes ya para que instales nuevos en tus proyectos. Entonces, vamos a explorar eso a continuación. Muy bien, así que he tocado los componentes y cómo se puede crear inusual propia. No obstante, cuando se trata de prototipado rápido, a veces crear el tuyo propio desde cero no es factible. Por suerte, frame ofrece toda una tienda interna o las personas dentro de la comunidad pueden darte una variedad de diferentes You I kids on components ready for you use. Esto es específicamente útil para personas como yo. Simplemente quieres arrastrar rápidamente cosas como cargar iconos. Y no pienses demasiado en ello. ¿ Se está actualizando esta constante? Por lo que definitivamente recomiendo echar un vistazo a esto.
3. Actuaciones y documentos de framer: Muy bien, chicos, bienvenidos de nuevo a la siguiente parte de este video. En un poco de investigación esta mañana, y la última versión, que fue lanzada el 16 de octubre es en realidad framer X three. Ahora, honestamente, porque en la X cinco en la versión beta se ve exactamente igual. Es frame extra. Creo que en su mayoría es solo funcionalidad mejorada. Entonces si estás siguiendo este tutorial realmente no hace la diferencia. Podrías usar ya sea ésta o ésta, porque si vuelves a la interfaz, esta es la última versión. Se ve exactamente igual. Como dije, su mayoría sólo son cosas mejoradas. Um, y tenían muchas cosas en que la comunidad también ha recomendado. Así transiciones de superposición personalizadas. Lo que es realmente raro es que en realidad envié eso a través de feedbacks propiedad. Si se llevaron esa ambulancia bastante guay. Parte de este video estuvo bien, fue principalmente solo darte una visión general del sitio web real. Entonces la comunidad detrás de ella sobre las otras personas que lo están respaldando porque están consiguiendo atrás y solo, ya
sabes, el tipo general de apoyo que encontrarías en Twitter y Dribble. Y otra cosa que recomendaría mirar también. Ahora soy más de una persona manos a mano. Me gusta sumergirme en Softwares y aprender. No obstante siempre doy. La documentación para el nuevo software es una lectura rápida porque era realmente útil para realmente pasar. Ellos lo explicarán todo. Sí, está muy prolijo, pero y las imágenes visuales están ahí. Son muy amables. Y como dije, si tú si quieres ir y echar un vistazo a eso, solo dirígete a frame ex dot com. Pero sí, En el siguiente video, lo
veremos importar y exportar desde boceto y también se acaba de dar una visión rápida de cómo funciona la capacidad de respuesta dentro del diseño y luego, sí, nos meteremos en prototipos.
4. Importación del boceto: Muy bien, Así que en este video, estamos buscando importar tus diseños directamente de boceto a Freeman, ahora 22. Largo es que es un proceso realmente sencillo. Pero digamos que has diseñado algún boceto de pensamiento y te gusta cualquiera al prototipo. Tiene que ser rápido y rápido. ¿ Qué tendrás que hacer? Es decir, disculpe la horrible jerarquía de capas estaba implicado comando. A ver para copiarlo, te metes en Freeman. Vamos, V y que te vayas. Y lo que haría es retener todas las capas y también agregar padres también. Por lo que estos grupos, aunque no marcos, tendrán enajenados dentro de ellos. Conserva su y a partir de ahí simplemente podrías resaltar lo que quieres hacer. Ligero enlace contar, llévala a esta página. Y cuando lo previsualizas, esto es sencillo. Está arriba ahora importante de sketch no es sin sus limitaciones. Te darás cuenta de inmediato. Bueno, puede que no se hayan dado cuenta, sin embargo, que estos dos gráficos aquí en puerto en, no importa cuántas veces traté de conseguir que esos se traduzcan aquí, eso simplemente no sucede. Son solo cuadrados blancos puros. Por lo que hay algunas faltas en cuanto a traducir el diseño de ahí a un
software diferente . Otra cosa genial sobre importada directamente del boceto es esencialmente retiene todas las propiedades de
capa del archivo original. Si quieres hacer algún ajuste de diseño de último minuto, no
tienes que volver al boceto original para que lo puedas hacer directamente en marco simplemente tocando dos veces para subir las propiedades de la capa. A partir de ahí, se
puede cambiar el color. Cambia tu Plessy dado cambio de irritación, lo que significa que puedes mantener un control constante. El proceso de diseño lo que al mismo tiempo manteniéndolo separado del archivo de boceto original .
5. Diseño en Framer X: De acuerdo, entonces lo último que vamos a ver rápidamente es las relaciones padre e hijo dentro del proceso de diseño que forma la jerarquía de capas está bien,
es un lado receptivo de las cosas basado en el diseño de flex box. Huevos de Airframe está realmente metido en ello, y todo ya está organizado para ti. Si creas un jugador tipo,
Hola, Hola, Forever X determinará automáticamente la relación padre e hijo entre estas dos capas. Esto significa que todo se mantiene organizado. No tienes que preocuparte por trabajar hacia dónde van los del grupo. Esto también facilita el lado receptivo de las cosas que demostrarán aquí para demostrarlo. respuesta han creado estos tres años. Continúo esto aquí cada uno conteniendo dos elementos dentro de ocho pixel margin figurehead y cierra sin abrir responsablemente. Verás tres marcos cada uno de estos enmarcados representan cada uno de estos contenedores aquí con ellos. En esos marcos, tienes los dos Niños, el texto y el círculo. Esto permite que la salida del framer determine la capacidad de respuesta con precisión. De acuerdo, Así que acabo de mostrarte poner una jerarquía y capacidad de respuesta y te muestran exportar como realmente obviamente para mostrar es más o menos lo mismo que cualquier otro software. No obstante, Es cool show de todos modos, si
acaso. Entonces lo que haremos si quieres exportar todo tu campus seleccionará el título exportador. Voy a cruzar la hazaña este pequeño desplegable. ¿ Esperarías tu tamaño y vas una X, creo dos x o tres x Si estoy comprimiendo hacia abajo para dribble, nunca escucho tal tipo de archivo, así que puedes ver el completo es PNG. No obstante, puedes elegir entre el paquete Web de J. Peg Ah, que básicamente es un formato de compresión para imágenes que pones en la Web y luego
tienes PDF export y veggies frescas es un proceso ligeramente diferente es lo requiere que copies los abrigos SPG que puedes pasarlo directamente a tu editor de texto. Esto es especialmente útil para la exportación y la iconografía para que tu desarrollador demuestre cómo podría funcionar
esto. Voy a entrar en el tipo de herramientas en gráfico selecto, crear marco, y lo que esto hará es abrir una variedad de opciones diferentes que deben trazarse, rectángulo, ovalado, polígono y empezar a mostrar cómo exportar ella. Vamos a crear una forma básica usando el hojaldre. No se ha vuelto nada demasiado loco solo lo suficiente para mostrar cómo lo explotamos. Ponte a Phil, ya
sabes, el 100 y ahora tienes tu forma. A menos que
diga, es necesario exportar. Esto lo mantendrá totalmente comestible. Con tu en la etapa de producción, simplemente
vas a copiar. Tienes la opción de copiar el código SPG. Ahora que he cubierto la exportación, siento que es hora de pasar al prototipo completo. Así que adelante y abre el expediente de práctica. Y debajo de Archivos principales, es como la carpeta Usuarios, donde encontrarás el trabajo de los dedos del archivo desde ahí podrás pasar por los incrementos del prototipo juntos. Nos vemos en el siguiente video.
6. Pantallas de enlazo: Muy bien, Bienvenido de nuevo a la siguiente etapa de este curso. En esto, vamos a empezar realmente a construir un prototipo básico. Estoy asumiendo que ha abierto los archivos del proyecto. ¿ Qué? Ya verás que he creado cuatro pantallas. Si bien relativamente simple, Estas cuatro pantallas contiene cuatro de las principales características en expediciones de marco, pilas Cree componentes inescrutables que enlazan pantallas y utilizan videos de YouTube. Mantenlo sencillo. Vamos a mirar las pantallas de Lincoln y crear un flujo básico dentro de la APP. Creo que hace poco lo mostré antes cuando no debería tener que importar del sketch. Es un proceso realmente fácil, así que demostremos eso ahora. En la página entra, tienes un pero aquí dentro, que tiene miedo me llamaron entrar. Lo que vamos a hacer es cuando un enlace es que la página transita a la página de categorías aquí para hacer arriba. Voy a cocinar enlace, apuntarlo a esta página y verás una variedad de opciones diferentes como la transición y la dirección en la que entra es lo que hace a qué páginas de un objetivo o una anulación no hacer eso. Incluso puedes bajar aquí. Digamos que quieres ir a la principal. Simplemente seleccionarás menú donde podrás volver a hacer clic en él y será realmente en sí mismo. No es que el linchamiento para ver que las transiciones completas de lo que funciona y déjame
previsualizarlo . Hacemos clic en esto, ponemos tus transiciones de página de categorías dormidas en realmente simples, realmente efectivas y buenas para mostrar cómo fluye la manzana. Seguiré adelante y buscaré más de las pantallas. Entonces digo desde las categorías Page, tenemos este marco aquí, que es un menú lo que vamos a hacer. También nos va a gustar que este menú Hoover arrendamiento lo puedes enlazar tan me gustó ir a la opción de
transición están actualmente configurada para alimentar, que es lo que funciona tienes derecho de diferentes. Cuentan con el modo push overlay. Además, si fue como un instante pop up, que quiere el actual Dept de Animación. Simplemente no usaría eso y flip lo he usado. Es caótico, pero se desvanece. Creará un poco bonito excesivamente no habrá movimiento y lo verás a medida que volvamos a
entrar , así que refrescarlo. Ya verás que aparece el menú. De acuerdo, así que desde aquí, ya
sabes como lo siguiente pero Por supuesto, no
tenemos ninguna rotura. Es decir, qué cosas fluir bien. Volvamos atrás. Desliza el marco X y otra vez Bonito, bastante sencillo Procesa lo que estás vinculando práctica está de acuerdo. No empujes. Querías desvanecerte de nuevo en déjame volver, gente fresca. No hay fe por dos categorías. Ahora lo que vamos a hacer es ir de metraje de video. Vamos a cruzar hasta la última página para terminar la parte Lincoln de este proceso. Vamos a conseguir metraje de video otra vez. Enlace videos La página tiene que empujar de nuevo. Entonces lo que haremos son cosas como menús que cada uno cree que van a desvanecerse. Cualquier página tendrá en transición en desde el de la derecha para ir a la izquierda. Y ahora vamos a previsualizar todo el asunto si en realidad se vuelve negro. A lo mejor no. Pero de cualquier manera, así que si haces clic en metraje de video, verás que va a la página de video. Es por ello que miramos a las oficinas GT. Se puede ver lo más destacado, su activo. Es realmente genial, pero nos fijamos en esos aires tardíos Ahora que nos hemos vinculado a las pantallas, vamos a previsualizar el todo para ver cómo fluirá Pantalla completa que puedes ver
todavía estamos en este bonito pH. Aquí harás clic Enter the cosmos, no te llevarás a través para cortar cada página. A partir de ahí, puedes golpear el menú, y luego seleccionaremos un metraje de video para pasar a la última página. Y otra cosa que tengo que mostrar también es que este Bakker también va a cortar, está de acuerdo. Al hacer clic en eso verás las transiciones opuestas para crear una muerte agradable y
dinámica dentro del diseño.
7. Crear pilas: De acuerdo, entonces ahora que hemos enlazado edades y viendo cómo las salidas el siguiente looker sencillo es pilas y cómo podemos organizar y distribuir lista de una manera fácil y eficiente, esto es particularmente útil porque frame reconoce la exacta posición de donde estaba la
última, permitiéndoles que se ajusten a su lugar sin que tengas que preocuparte por organizarlos de una manera diferente. Por lo que te muestran cómo hacer esto. Para empezar con cada uno de estos marcos sus elementos individuales encima Para ponerlos en un stock podrías ir a través de la sección de herramientas y en el diseño hit stack o s seguro. , Dejé correr los elementos que deseas poner en la pila y esperar a que
aparezca el panel de propiedades . Entonces, como puedes ver aquí, tienes un relleno que te permitirá distribuir en la página si quieres mantener ese cero. Y para estos tenía un margen de 30 píxeles entre ellos se cambiaron una brecha a 30. Como pueden ver, entonces me veo exactamente igual. No obstante, normalmente
puedes moverlas y organizarlas y hacer que se ponga en su lugar. No obstante lo que quieras fue poder establecer la brecha en la fiesta en porque es un
atributo flex books . También utiliza una gran cantidad de los libros flex originales. Terminología Simplemente empezar en el centro es lo que te está dando la opción de establecer una dirección
ya sea a disposición horizontal o a una salida vertical. Ahora con esta pila, esencialmente accede a una máscara, lo
que significa que está refrenada por aquí. Entonces si lo vendieras a vertical lo siento horizontal, no va a pasar mucho ya que está literalmente contenido dentro de esta sección. Normalmente saldría fuera de página para los efectos de esto, o en realidad no lo necesitarán. Demostrar cómo funcionaría eso para como se puede ver y le doy un poco de espacio alrededor del costado porque está listo para empezar, distribuirlo dijo que arriba vista para poner eso al centro. Como puedes ver, no
está perfumada dentro de la mezquita. Si hubieras dicho al final, claro, estás fijado al fondo de la mezquita también es que también tienes una línea, así que si dices que empieza como puedes ver, es una línea al lado izquierdo. Dijiste que hasta el final, bien alineado al lado derecho, y esa etapa tardía estará convirtiendo esto en un componente escolar. Por lo que siempre es útil encontrarlos en una pila primero para que cualquier ajuste de último minuto se
pueda hacer fácilmente. Entonces ahora que ya sabes utilizar pilas y organizar a tu oyente, pero lejos en el siguiente video, veremos convertir estos componentes indescriptibles.
8. Crear secciones Scrollable: Muy bien, chicos. Ahora que hemos cubierto ciervos, veamos que se desplaza. Aquí es donde los sitios interactivos vamos a conseguir mucho más interesantes. Entonces primero lo primero y habría hace que parezca un poco largo bobinado va a sacar estos fuera del camino. Gracias que eso, Entonces este enlace de video metraje El fantasma era una página de videos que vamos a quitar. Voy a duplicar esta página. Bueno, lo
sé muy bien porque CD ahí está. Simplemente voy a borrar esto. Hemos enfriado estas categorías. Un pergamino que voy a hacer va a convertirlo en 910 píxeles. 110. Deshazte de estos. Ahora, solo siéntate en las pilas. Lo que hagas va a quitar esta pila. Visita ST Pictures from the top, alguien a esencialmente la fotografía. Duplicar estos. Ahora es cualquier cosa a extremo es solo mostrar cómo se desplazarían en lo que hacemos. Colocar un minuto. Atrapados solo para que se organizaran por si quieres hacer algún ajuste de último minuto desde ahí como hicimos la última vez. 30 pixel encendido con estación, debo decir? Y ahora tienes este pergamino aquí. Entonces ahora vamos a hacer va a ir a herramientas. Te vas a sentar como pergamino. Vas a dibujar en este comercio aquí donde necesita ir el componente de puntuación. Por lo que 37 píxeles en 375 píxeles de ancho y aproximadamente 654 píxeles de altura. Entonces rastreé esa estupa, y luego qué vamos a hacer antes de vincular que Va a volver a vincular esto a la página de video , Así que voy a joderme ahí vamos. Vincularlo Que hay No, no usar eso dentro de una pila en un futuro componente de desplazamiento ahora también está vinculado. Ahora vuelve a la sección de desplazamiento inicial. Nosotros lo vinculamos a eso. Como pueden ver, acaban de aparecer. Se ve exactamente igual. No obstante, iríamos en vista previa de que lo estoy actualizando. No sólo funciona el metraje de video, sino que no se puede desplazar también
9. Agrega componentes de Youtube: De acuerdo, así que bienvenidos de nuevo a la etapa final de este proceso. Ahora, en este video, vamos a mirar usando el componente e t media níquel orar en tiempo real, ustedes RL's en proyectos bajos. Lo genial de esto no es solo que esté usando el bebé de YouTube I también ayuda a retener todas las miniaturas originales también. Si obtenemos vista previa, verás que todos estos eran enlaces activos. Da clic ahí, ya ves, el video se cargará en su lugar que normalmente no emitiría sus diversas especies diferentes temas y cosas. Eso es una especie de lo que iba por aquí. Y para ello, todo lo que tienes que hacer es salir no se muestra aquí. Siempre no pudo la manifestación suicida. Pero vas a ir a tu eso. Te muestro lo que descarga originalmente. Entonces es esto aquí ahora ya se adelantó y descargó eso y se veía así. Así será un marco de YouTube. Como se puede ver que el teléfono es un video de intro marco X, sin embargo bien, he ido adelante y hecho se encuentra incluso aquí que uso allá. Entonces es solo equipo espacial. Entonces ella es tu mejor comida. Apresúrate, así que lo harás muy simple copiaremos bien el euro, volverás y verás que el euro está aquí. Vamos, Vey mucho esta vez ahora cambia cuando golpeo. Entra otra cosa genial. También puedes desmenuzar las cosas auto colocar. Ahora. Esto determina esencialmente cómo se reproducirá el video cuando ingreses por primera vez a la página actualmente desactivada, lo que significa que tienes que hacer clic físicamente en él en video antiguo para cargarlo. Creo que también se puede elegir de en adelante, lo que esencialmente permite que los videos empiecen a reproducirse automáticamente así como Luke, que reproducirá el video en un ciclo continuo. Entonces, ¿qué es eso que quieres cortarle el video código a la derecha? También edito el código de ejemplo real para este componente. Entonces es realmente genial, realmente versátil. Y, sí, ya
sabes, un nivel real de profundidad a tus animaciones tampoco se sienten restringidos por estas dimensiones que puedes ver aquí. Esto es básicamente en 1920 por 10 80 p dimensión. No obstante verás aquí en realidad lo he cambiado, y esto es esencialmente una máscara de recorte. Entonces cuando haga clic en esto, verá que el marco está anidado verá. El componente you tube está anidado dentro del marco que habría hecho se utiliza como
máscara de recorte . Entonces voy a desclip. Ya verás que las dimensiones reales de los componentes originales de YouTube están ahí. Y si me gustan los dos de nuevo estás para recortar ves que está de vuelta a cómo originalmente Waas. Adelante y juega una ronda de apuestas alrededor. Estás rollings ahí dentro, incluso recortando esto o simplemente doble tap? Y si quieres mantener la evidencia de estilismo, yo también seré Lincoln. Ejemplo Becarios en el Flotador de Proyectos. Podrás salir adelante en la práctica con esto en tu propio tiempo. Entonces ahora que sabes incrustar videos de YouTube dentro de tu proyecto, eso concluye esencialmente nuestro proceso de creación de prototipos para este diseño, siguiente a
los videos se romperá. Todo lo que hemos hecho es lo que está buscando. La última actualización en las nuevas características que se han agregado
10. Aplícalo todo: Entonces bienvenidos de nuevo a lo que iba a ser el video final. Obviamente, esta mañana por más de su lanzamiento versión cinco para su base A en Italia han sido, como un nuevo lado interactivo de las cosas también. Pero digo que fue un extra,ya
sabes, ya
sabes, rápido resumen que en el siguiente video,
pero esencialmente, pero esencialmente, esto iba a ser,ya
sabes, ya
sabes, especie de recapitulación de lo que hemos hecho. Por lo que les he mostrado la interfaz. Seguro que enmarcan una tienda. Sí, los diferentes futuros y espera realmente construir un diseño sobre prototiparlo. Entonces esto parece, ya
sabes, la pestaña de propiedades, y sabes usar el diseño responsive. Y fue realmente, realmente en él se compara con el marco original. Si alguna vez usas eso, no
te aguantaste. ¿ Por qué? Esto es, ya
sabes, todo el bombo. Uh, sí. Conjuntamos el prototipo más básico posible. Uh, claro, en el mundo real, armas flujos más complejos en este revolucionario como nosotros. No tiene mucha de la muerte de animación que tiene el principio. Yo lo sé. Dije que es mucho más fácil de usar, uh, en principio,
principio te da mucho más tipo de libertad para jugar alrededor de la línea de tiempo y personalizar diferentes transiciones que has visto dicho antes en ese momento. Los cuatro elementos principales que hay ahora hay otro elemento llamado Page, pero esto solo estaba vinculando pantallas, organizando estos componentes para marco, Debo decir en un componente de pila y también, ya
sabes, crear pergaminos y ese nivel de nous dinámico a diferentes páginas? Ah, y obviamente, por
supuesto, agregar videos de YouTube, quiero decir, eso es como el proceso más simple, pero es realmente genial. Sí, quiero decir, sigamos adelante y previsualicemos el prototipo final. Voy a ir a pantalla completa. Vienen, explotaron, se superaron. Voy a entrar a los MERS de la CAA. Como recuerdan, pasamos por las categorías Página Ah, y no se puede desplazar con ahí también. Me he dado cuenta de que he seleccionado un poco la máscara de desplazamiento para más abajo. Ya ves donde se corta ahí. Ahí es donde debería estar la parte superior de esto. Y entonces probablemente a mitad de camino habría donde termina la máscara. Entonces está creciendo, pero es todo lo que muestra la demostración cómo flotaría. Por supuesto
, adelante. Ya cansaste estas cosas a medida que el proceso continúa. Por supuesto. Desde aquí, también se
puede ver el menú cuando se selecciona. Ahí vamos. Entonces por supuesto que podrías ser cool si tuvieran, como, estados
flotando está bien, recuerda, en principio, tienen la capacidad de cosechar. Tipo de ir por encima de estos y cambiar el color. Simplemente se da por vencida, ya
sabes, profundidad
extra. Pero estás cerca. ¿ Esto por lo que quieres pasar a video metraje? Por qué, No, tú trabajas. De ninguna manera. Iba a ir tan bien. Ah, ya veo. Yo lo he movido a su pero luego un sabio de eso vamos a pasar a video metraje. Y tienes videos fáciles aquí. Para que puedas hacer click a quien quieras. Uh, ya
sabes, tienes el sonido completo ahí, y es de muy alta calidad es lo que realmente me impresionó eso. Es decir, cuando lo vi por primera vez en el tenemos la demo que dieron, yo estaba como, Esto es increíble. Este no es otro Softwares hecho. Este corso y mordedura lo verá transiciones en una dirección diferente. Sí. Es decir, como dije, esto fue sólo para darle a la gente una introducción a ello. Se trata de un software relativamente nuevo. Entonces, ¿qué días están sucediendo constantemente? Y es un poco molesto tratar de enseñar software así porque, como dije, pensé que me mostraban aunque características principales. Y entonces esta mañana viene otra actualización y es como,
Oh, Oh, bueno ahora Adam Page y yo estábamos como, ¿
De verdad? Necesito crear otro video, solo una especie de demostrar lo que es eso, Porque de lo contrario siento como si me quedara corto cambiando. Te pasas, lee los muelles en la página web. Probablemente lo actualizaron. Ahora que vienen cosas nuevas,
sí,es sí, honestamente
se está moviendo tan rápido y todo el mundo ha estado detrás de ello. Y siento que este es el futuro de donde se dirigieron este tipo de Softwares.
11. Interacción: Está bien. Entonces aquí está el video no planificado basado en torno a la nueva característica llamada Page. Ahora tienen algunas otras una cuenca también, y yo literalmente sólo he tenido que pasar. Míralo. Entonces es marco x cuatro ahora, como, dijo, estábamos corriendo el libre hace tres. Ah, y sí, la más grande que han añadido es la nueva página interactiva. Hasta ahora, lo habían anunciado y lo mencionaron. Simplemente no había en el software. Y honestamente, lo olvidé por completo. A mí me encanta. Ya sabes, mirando a través del correo electrónico que enviaron también va a tener que retocar lo que estaba pasando. Ya
sabes, miras los ejemplos de lo que puedes crear. Quiero decir, mira eso. Realmente impresionante. Y sí, sólo rápidamente armar un perro ejemplo. Sí, eso podemos mirar a través. Entonces aquí tienes tres marcos y tienes una página en lienzo en iPhone X. Lo que hagas, ella irá a página, así que es vamos a hacer todo el ancho. Entonces 375 Esto es esencialmente, ya
sabes, el componente de página ahora dentro de los espacios donde estos elementos podrán ser deslizados a través de tu tipo. Estás usado para conectarte para que puedas usar, como, 23 Creo que está ahí. Bien. Uh, Moisés Que el último no lo es. Lo que ha pasado es que no está conectado. Todos estos juntos. Y cuando selecciones este componente traerá un montón de opciones diferentes también. Por lo que esencialmente se puede seleccionar la brecha entre las estaciones son sólo para hacerlo un poco más claro en el movimiento. Voy a darnos 30 pixeles relleno C o grande, y en el lado del relleno en el insensato dentro de esta máscara aquí, se
puede ver que aquí no hay hueco. Entonces lo que vamos a hacer es ponerle eso a 15. Entonces es exactamente media intensidad. Escucha, el deseo solo se ve bien. Ah, y sin embargo vamos a saber que puedes personalizar cualquiera de estas cosas. Este año actualmente se establece en el valor predeterminado, que es slide tiene momentum off, lo que significa que hay que hacer ciclo físico tres. Bueno, ya verás que lo previsualizo para que te asegures de que esté refrescado y sin embargo en realidad puedes atravesar como un metro. Momentum es este A, como esencialmente te permite simplemente deslizar una vez y tener una buena distancia. Tres. ¿ Dónde está porque está apagado? Tienes que pasar manualmente por eso lo haremos. Se jugará con los que encenderán el impulso. Seguro. Bueno, verás que hay sobre fresco que puedes atravesar directamente en un solo golpe, lo
cual probablemente útil o un poco demasiado rápido otra vez. No se puede controlar la velocidad de estos. Y entonces lo que haremos es que ya sabes, vamos a hacer tú vas a hacer cubo, porque sabes qué? Tu refresco favorito que puedes ver en lugar de tener que usar after effects ahora para crear este tipo de afectos, puedes entrar directamente aquí y hacer eso.
12. Envoltura hacia arriba: y eso es un envolver lo siento por la indignación poco convencional. Y me encantaría haber hecho realmente un video de cabeza parlante usando la cámara. Desafortunadamente, las circunstancias cambiaron. No pude apoderarme de uno. Entonces empiezo a lamentar no filmar que en los mismos días, el interés por nuestros realmente pone dan a esta pequeña camara. Ella va a decir, Gracias por mirar. Hay una pequeña foto de mí, como a su casa, pero en realidad no importa. Ah, y sí, honestamente, solo quiero animarte a que me pongas en contacto y en realidad te involucres con el curso, ya
sabes, hacer preguntas y también dar retroalimentación. Es decir, este es el primer curso que he hecho. No tengo experiencia en la enseñanza en línea. Ese tipo de se acercó a mí y me dijo:
Mira, Mira, ¿quieres hacer videos? Yo estaba como, Sí, sí, sé algo diferente Y, sí, llegar a mí en otro lugar también. Como dije, regate pre activo ahí, siempre publicando cosas y mayormente tratandode, creo que conseguir más de una red en LinkedIn ya del usuario. Pero sí, 57 conexiones ganando tan honestamente, si querías, como, red en un nivel más profesional. Golpéame al escuchar mensaje. Yo honorable, podría encontrarme en. Bueno, tengo los enlaces aquí, así que sí, usa el suelo. Es donde hice un poco de código. Sé manos y sí, Así que espero que hayas disfrutado de este curso. Traté de ser lo más informativo posible y desglosar todo de la mejor manera posible , Así que sí. Ofrecer algún comentario sobre? Sí. Mantente atentos. Ojalá voy a incluir algunas cosas más en un futuro cercano. Nos vemos pronto.
Curtis Lee, 21 | Product Designer
