Animación de la UI: sincronización y relajación en principio

1. Introducción: Hola, ruina y bienvenidos a mi segunda habilidad compartir Cerrar. En primer lugar, grandes cosas para revisar la clase. Espero que hoy hayan aprendido algo. Mi nombre es Shell, y soy diseñador y skater de Bélgica. Llevo patinando los últimos 10 años. Sólo pensé que podría ser una fábrica genial de chicos para saber de mí. Por lo que esta clase es todo sobre animación de interfaz de usuario en principio. Y hoy vamos a echar un vistazo a cómo podemos hacer que este video escolar revele efecto. Vamos a hablar de cómo podemos usar el video en principio. Vamos a hablar de mezquita ing. Vamos a hablar de animar el tiempo y fácil. Por lo que esta clase, está enfocada principalmente en diseñadores que ya tienen un poco de lo básico fuera de principio. Yo sí repaso primero algunos principios básicos fuera de principio. Y entonces ustedes tienen la noción de que el trabajo en video revelan efecto. Entonces, sin más preámbulos, empecemos. Y espero que te unas a mí en clase 2. Fundamentos básicos de principios: Oigan, chicos, Gracias por inscribirse en la clase. Entonces, antes que nada, vamos a repasar los fundamentos de principio. Entonces en primer lugar, para aquellos que son nuevos en la herramienta, lo que es Principal simplemente dijo principio es prototipar para dejar que las obras sean muy fáciles, rápidas y divertidas. Está hecho para en dirección. Entonces es necesidad. Necesita su insumo con entrada. Es decir, cosas como clics, arrastras, overs y así sucesivamente. Esto es lo que lo hace más divertido de más rápido que, por ejemplo, después de efectos con principio. Puedes hacer cool micro escuela de animación en direcciones y completar flujos entre múltiples pantallas. Pero lo uso principalmente para prototipos de animaciones de sitios web. Por lo que podría estar preguntándose, ¿Cómo funciona? Bueno, principal anima apropiadamente cambio de traje de un objeto entre dos o más son tableros. Aquí hay dos ejemplos. Entonces estamos aquí dentro de principio y acabo de hacer este nuevo documento para mostrarles cómo lo hacen en fácil revelación de texto. Entonces acabo de escribir un texto revelador aquí, así que utilizo principalmente el tablero de arte para poner una dirección. Entonces voy a presionar este relámpago aquí. Voy a pisar y voy a arrastrar la flecha en las tablas de arte y luego hace una copia fuera de ella tan deseada a nuestros tableros. La transición va a ir entre. Entonces este es el estado final donde podemos ver el texto. Y aquí sólo voy a arrastrar un poco esto hacia abajo y poner la opacidad a cero. Por lo que ahora principal anima esta propiedad. Se aburre la opacidad entre ambos. Entonces si vamos a ir aquí a nuestra sección de prototipos aquí, voy a dar un paso como la dirección que le puse. Entonces y voy a ver que hay una revisión de texto. Entonces es así de fácil. Entonces aquí hay un segundo ejemplo. Voy a usar una forma en lugar de un texto por ahora. Solo, uh, pon un rectángulo aquí en el medio. Yo sólo lo voy a hacer grande, más grande así. Y luego voy a dar la vuelta a los lectores para que se convierta en un círculo. Entonces solo voy a dar click en el círculo. Voy a hacer clic relámpagos arrastran desde el año en esta nuestra pizarra. Y así hace que Akopian, y por aquí en este tablero de arte, sólo va a hacer que el amor sea más grande. Entonces se quita todo el tablero de arte y ahora los vamos a ver. ¿ Cuándo? Aquí hago click en el círculo. Voy a verlo aquí en panel de interacción, hago clic. Simplemente se va a animar así. Por lo que es bastante genial hacer fondos de morfación o algo así. Pero que eso para un segundo ejemplo, también lo hace eso para los fundamentos de principio. Al igual que viste algún ejemplo, funciona bastante rápido y muy intuitivo. Estos fueron solo los fundamentos para esto. Escucha. Pero en la siguiente lección se irá sobre cómo usar grupos como máscaras las cuales necesitaremos para el efecto de revelación de video. 3. Enmascarado: Entonces, como dije en la lección anterior, ahora vamos a hablar de grupos de máscaras. Esto nos dará los conocimientos que necesitamos para nuestro efecto de revelación de video. Entonces en primer lugar, tal vez te estés preguntando, ¿Qué es una máscara? Bueno, una máscara. Es como un área designada que creas donde tu empresa a un espectáculo. En principio, usamos los libros limitadores del grupo como máscara, y de esa forma podemos revelar imágenes, formas de texto, etcétera. Entonces, ¿por qué usaríamos es una animación de los sitios web Al animar la máscara en lugar de una imagen dentro de ella, podemos llegar con algunos efectos muy cool muy fácilmente. Podemos crear un grupo must simplemente haciendo un grupo fuera de una o dos o más imágenes u objetos y y marcando la casilla que dice clips de jugadores. Y aquí hay un ejemplo. Por lo que aquí hice un nuevo documento. Justin nace con una imagen sobre ella y como lo que dije en la lección anterior, si quieres revelar esta imagen sin usar una máscara o algo así, el camino a seguir sería dar click aquí en el rayo y dar click en el paso en dirección para hacer la interacción y luego va a arrastrarla aquí sobre las tablas de arte . ¿ Qué hace una copia? Y estoy aquí el 1er 1 en el primer estado. Lo arrastraré fuera de la pantalla. Entonces donde lo pincharíamos aquí, ya verás. Simplemente se desliza dentro. Entonces otra forma genial de hacerlo. Entonces con las mezquitas de grupo, como dije aquí hace un par de segundos, sólo voy a estar de acuerdo en este arduo trabajo también. Por lo que tenemos nuestro tablero de arte con imagen. Ahora tenemos la capa aquí. Yo sólo voy a imprimir. Voy a presionar el comando G para que sea un grupo, y voy a dar click aquí en clip, señor. Jugadores. Entonces, ¿qué hacer al hacer eso, creamos libros limitadores va a actuar como una mezquita. Entonces aquí puedo hacer clic y arrastrar en la mezquita así, sólo voy a poner fuera de la pantalla, voy a volver a hacer clic en el tablero de arte para la interacción de paso arrastrada hasta allí para una copia. Y en este tablero de arte, solo voy a arrastrarlo así, ¿ves? Cuando manera de ver lo que necesitamos, manera tener una interacción mucho núcleo como esta. Entonces de eso se trata en principio la magia off mask off a mass groups. Entonces aquí, para un segundo ejemplo, acabo de agregar algo de texto a la imagen del lado izquierdo de la misma. Entonces vamos a hacer máscaras grupales en ambos en el texto y en la imagen. Entonces voy a pero un grupo alrededor de la imagen y alrededor de ella toma presionando el comando G y luego voy a hacer click slip, señor, jugadores para ambos grupos como este. Voy a empezar con el texto. Entonces vamos a arrastrar. Vamos a arrastrarlo hacia la izquierda así y para la imagen igual de esta. Y vamos a dar click en el a bordo para la tibia dirección. Hacer copia de ella así, y voy a tener donde tengamos nuestra imagen. Simplemente voy a arrastrarlo otra vez así y para nuestro texto. Yo sólo voy a hacer lo mismo para que puedan ver lo que hicimos algo como esto. Entonces con ese efecto, podemos hacer muchas cosas geniales, y lo vamos a necesitar para nuestro efecto de revelación de video que vamos a empezar en tan solo un par de lecciones. Entonces, como viste hace un par de segundos, es bastante fácil trabajar con grupos de masas. Al usarlos. Podemos hacer animaciones más intrigantes para los usuarios. Entonces eso fue para las máscaras. Y ahora vamos a echar un vistazo a cómo podemos condimentarlo un poco usando el tiempo y fácil. 4. Tiempo y relajación: Ahora vamos a echar un vistazo a la herramienta animada en principio, con enemigo para debilitarse y solo el tiempo de los objetos y la flexibilización de la animación, tiempo puede ser muy poderoso. Para darle estructura a una animación, por ejemplo, podemos dejar que un importante le dije primero o último que le diera dos atención más. Con la flexibilización, podemos darle cierto campo a una animación. Puede hacer que una animación sea dinámica muy tranquila o darle una sensación muy rápida. Ahora vamos a sumar algún tiempo y flexibilización al ejemplo que hicimos en la escucha anterior . Entonces estamos de vuelta en principio con nuestro ejemplo que hicimos en la lección anterior. Entonces todo lo que yo lo único que hice aquí fue que he puesto en una nueva dirección desde este tablero de arte hasta esto, nuestras tablas. Y la razón de eso es que podemos volver fácilmente en nuestra vista previa aquí para verlo y otra vez mientras estamos trabajando en ello. Entonces cuando queremos meternos en la propiedad enemiga fuera de principio, hay dos maneras en que puedes hacer clic aquí en el botón animates como este, o puedes hacer clic aquí en la flecha de First Art Board a la segunda nuestra pizarra. Entonces da click aquí obtenemos nuestras propiedades y esta es una línea de tiempo. Entonces ahora es la leszcz animación, como 1/3 de segundo. Por lo que tenemos el grupo de texto en el grupo de capas. El grupo laborista es una imagen, así que quiero que la imagen vaya primero, y después quiero enviar un texto a venir. Entonces voy a tomar estas dos barras del texto, y los voy a poner por aquí por ahora. Entonces si echara un vistazo a esto ahora, se puede ver que la imagen va primero y luego entra el texto. Por lo que quiero hacer la animación de la imagen un poco más tranquila bits más larga. Entonces voy a tomar, siempre tomar todas las barras de propiedad, tomarlas, siempre tomarlas todas porque de lo contrario vamos a conseguir cosas realmente extrañas, como ves, si los arrastro así, vamos a tener ah, sólo una animación más larga de la imagen. Pero si hiciera algo así, probablemente obtendría algo raro como eso. Entonces siempre piensa así. Siempre toma todas las barras así que Eso es por la imagen. Por la longitud que voy a echar un vistazo al texto más largo donde pueda colocarlo. Simplemente voy a hacer que se superponga un poco para que sea un poco más interesante y darle algo alrededor de la misma longitud. Algo así. Entonces eso se ve así ahora mismo eso es medio más tranquilo. Pero la flexibilización, no es realmente tan buena en este momento. Entonces si solo quieres relajarte, podemos irnos. Siempre quieres volver a poner la flexibilización siempre. Al igual que lo anterior. Dije, con la longitud que quieras poner la flexibilización en ambas barras, vamos a respirar aquí en la flecha pequeña y yo vería que tenemos todos estos presets. Tenemos impagos. Es un poco fácil. Rodillas hacia fuera. A mí me gusta el caballete fácil, pero siempre uso la vida. Este número. Ah, algo así. Um, 0.6 0.50 puntos, 01 y casi uno. Si echara un vistazo a eso ahora, la imagen iría Ir lento primero. Entonces va más rápido de lo que se puso lento al final. Por lo que nos da un buen combustible swoosh. Entonces vamos a poner lo mismo en el título. Lo mismo aquí a tus 0.6 tus puntos. 5.10 punto nueve Oh, 66 Vale, pierna. Entonces ahora si le echan un vistazo a nuestra animación, podemos ver que es mucho más llamada. Entonces eso es que por el tiempo y la flexibilización en este ejemplo que también se come por los fundamentos y lo básico. Y yo iba a ir al efecto de revelación de video, y la primera lección va a ser poner en marcha nuestros documentos. 5. Ejercicio: configuración del documento: Entonces ahora vamos a echar un vistazo a cómo vamos a configurar nuestro documento. Entonces antes que nada, hombres, un vistazo a mis diseños. Es una tienda de fotos, y lo más importante en el principio a hacer es hacer los diferentes estados fuera tu animación. Entonces aquí está mi diseño normal, el en estado animado. Y entonces vamos a tener que declarar. Por lo que el 1er 1 va a ser el menú en expansión. Al igual que este video está en animal. Tentamos video que va a ser revelado por aquí en este apartado. Entonces eso es importante para empezar a tener estados de Oiler fuera de tu animación va a realmente ayudarte cuando estás pensando en cómo vas a animar tu diseño. También quería decir, Si no tienes un diseño listo o se te ocurre algo que hacer, te recomiendo encarecidamente que revisen mi primera clase. Ahí es donde cubro la parte de diseño donde enseño cómo puedes diseñar cosas como esta. Entonces otra cosa que queremos hacer su queremos exportar todos los activos que necesitamos para nuestra animación. Entonces, primer lugar, vamos a ver las cosas que van a mantenerse consistentes en los tres estados. Entonces ese es particularmente el título del lado izquierdo en el texto, en las flechas y esas cosas para que voy a exportar en una sola pieza porque no lo necesito en una diferente en diferentes estados. Entonces vamos a tener que pensar en qué podemos hacer en principio y qué tenemos que exportar? Entonces lo que voy a tener que exportar son las capas de texto como estas porque principio no es muy bueno con el texto. Um, lo que podemos hacer en principio es esta caja negra y va a ser mucho más fácil, más fácil si usas una forma en principio. Entonces sólo voy a empezar a exportar ahora, probablemente va al tiempo obsesionado porque es aburrido para ustedes chicos. Entonces esta es la parte izquierda, la imagen así. Así es. Yo sólo voy a exportarnos una pieza porque no va a tener que ser ninguna hecha. Entonces hice una carpeta nueva, mi escritorio, simplemente yendo Teoh exportar como PNG. Entonces es transparente, e hice un nuevo fuller aquí en mi escritorio y recomiendo ustedes chicos hagan una estructura llena para sus diferentes estados porque sabíamos si todos sus activos en uno en una carpeta van a poner agitado. Entonces esto es general las cosas que no se van a mover, se va a escribir texto. Entonces eso es exportación. Ahora lo tenemos aquí en PNG para que podamos colocarlo fácilmente en principio. Entonces la imagen es otra cosa que no se va a mover. Entonces solo voy a tomar imagen yendo a exportarla también. En realidad, esta parte puede ir con ella. Entonces, como esto probablemente va a empezar los labios de tiempo ahora. Entonces en nuestro aquí en principio, y lo primero que quiero hacer es hacer mis tableros de arte tan grandes como los nuestros barcos que tenemos para la tienda de fotos de diseño. Entonces este es de 1000 en 1000 pixeles, pero no va a ser el ajuste adecuado. Entonces sólo voy por aquí a la tienda de fotos. Pero voy a echar un vistazo a lo grande que mi arte Vortis por aquí en el panel de propiedades, Así son nuestros cuerpos 1005 100 píxeles por nueve cientos. Entonces sólo voy a cambiarlo. 0 1005 100 por nueve cientos. Por lo que en nuestros tableros de arte, está listo para ser trabajado. Entonces lo siguiente que vamos a hacer es que vamos a arrastrar nuestros activos. Entonces aquí tenemos una imagen estática de que esto es todo lo que no se va a animar. Entonces esto va a ser estético. Simplemente lo voy a arrastrar en el tablero de arte. Es realmente importante que ustedes arrastren sus activos en el tablero de arte porque, por ejemplo, si arrastraría este debajo del o tablero va a hacer un nuevo tablero de pedidos y no es lo que queremos, voy a creer esto. Entonces voy a colocar este aquí, para que eso se vea bien. Por lo que ahora queremos agregar nuestra caja negra. Teníamos, como, por aquí, y vamos a usar un rectángulo para la deuda. Entonces voy a dar clic aquí en rectángulo en nuestro principal, pone un año rectángulo en la esquina superior izquierda, y ahora lo único que necesitamos son las dimensiones. Entonces voy a ir a la tienda de fotos y usar la herramienta de marquesina por aquí y luego sólo voy a arrastrarla sobre la caja negra para ver qué hiciste, cuáles son las dimensiones. Y podemos ver que las dimensiones son alrededor de 40 70 píxeles en ingenio y 360 en altura. Entonces 470 lo puso por aquí. Por lo que para el ancho, teníamos 470 para el alto hasta su A 360. Algo así. Voy a arrastrar aquí en su lugar. Amplía para ver si se alinea con los libros amarillos. Entonces, como la muerte en el fondo, se ve bien, así que ahora va a cambiar el color a negro. Entonces eso es eso. Y luego vamos Todo dragón, El texto que estaba aquí. Entonces tengo mi carpeta aquí, ST uno. Y sólo voy a seleccionar este árbol. Lo arrastró hasta aquí, um, para arrastrarlo hasta aquí para poder verlos un poco mejor. Entonces para mirar por encima de Photoshopped, el 1er 1 que tuvimos fue el lago más grande y lo hice menciones desde arriba son 76 en alturas, así que solo voy a poner eso por aquí. Voy a hacer un nuevo rectángulo solo para fines de medición. Por lo que la altura waas 76 que medimos. Yo sólo voy a poner eso por aquí para la altura. Entonces no, eso se coloca correctamente desde la altura. Se va a ver cuál es la distancia de la izquierda. 305. Voy a darles un ingenio fuera del número cinco y cómo esos artículos se colocaron correctamente. Entonces la siguiente fue la actividad de las escuelas que se va a alinear con ésta. Pero vamos a tener que medir para la altura entre estos dos desde la parte inferior de la letra B hasta la parte superior de la letra L. Son como 43 píxeles. Por lo que sólo va a usar dirigir de nuevo la altura de 43. Entonces quiero poner eso por aquí, y éste va a ir así. Entonces eso es eso. Ahora lo único que necesitamos es el llamado a la acción. Es un efectos Seymour. Entonces tenemos eso por aquí que se va a alinear con esto otra vez. Ahora vamos a buscar las dimensiones desde abajo, va a ser alrededor de 70 píxeles. Entonces de nuevo, rectángulo 70 píxeles lo ponen aquí en la parte inferior. llamado a la acción va a subir un poco Así que ahora tenemos eso. Entonces ahora tenemos aquí nuestro primer estado. Y la forma en que funciona el principio, o mejor dicho, la forma en que trabajo con principio es que ya estoy enfermo. Hago todos mis estados en un solo tablero de arte y luego, como, por ejemplo, para el menú en expansión. Ahora voy a cambiar esto por el al menú grande. Y yo sólo voy a poner estos, como como se ampliarían así, y luego voy a simplemente esconderlos para poder revelarlos de nuevo en los próximos tableros de arte. Por lo que solo hago una copia del primero nuestro tablero, y luego podemos trabajar en el segundo orden para hacer el menú en expansión. Entonces la forma en que trabajo con principio es que siempre hago todos mis estados en una sola pizarras de arte. Pero que esto para este ejemplo para el video revele. Voy a hacer invisible el segundo estado y el tercer estado en el primer tablero de arte para que podamos hacerlo visible en el segundo tablero. Pero quedará más claro cuando estemos trabajando en esto. Entonces por ahora desde mi segundo estado, necesito la miniatura del video el otro efecto en el título para el video. Entonces sólo voy a arrastrar eso aquí. Ella cometió un error. Entonces solo los voy a arrastrar en nuestra pizarra así en un zoom en un poco. Y sólo voy a colocarlos como siento por no. Ah, algo así para estar más cerca de la miniatura. Entonces creo que estos iban a subir un poco. Entonces y entonces creo que me olvidé del dedo a salvo de la tienda de fotos es la otra cultura accion insiste, Ver menos hechos. Por lo que sólo voy con el dedo rápido. Hazlo ahora mismo. Entonces el grupo para exportarlo Y eso va en el estado a Fuller oro dirección menos. Por lo que ahora lo hemos hecho en nuestras carpetas. Entonces vamos a volver al principio. Vamos a poner la dirección del cráneo aquí, así que va a ir en la misma ubicación exacta. Entonces sólo voy a alinear el verte así, y luego el año cosa, quiero hacerlo invisible para que podamos hacerlo visible en el siguiente tablero de arte. Entonces lo que voy a hacer aquí sólo va a cambiar la opacidad a cero así. Y luego vamos al título para el terminal del video y el video. Este grupo juntos va a venir de abajo. Entonces vamos a tener después de dejar eso abajo y poner la opacidad a cero así como ésta. Entonces vamos a tomar éste y éste, y van a tener que cubrir mucha distancia porque esto a esto son a los que siguen. Y estos estos 1er 2 vienen de aquí abajo. Por lo que es bastante distancia Viaje de un día. Entonces voy a arrastrar estos hacia abajo como si estuvieran aquí debajo de ellos así. Y voy a bajar tu capacidad a cero así. Y entonces sólo voy a decir que está de vuelta en su lugar y en la altura fuera el rectángulo va a volver a él era 360. ¿ Quieres beber esto recién abajo otra vez? Entonces en nuestro ahora, esto se ve de nuevo como el primer estado. Pero tiene el segundo estado en su invisible. Entonces para los terceros Estados, primero queremos que el menú vaya así y luego queríamos llevarnos el todo con y aquí se va a ir un video. Pero por ahora, podemos simplemente poner una imagen ahí adentro porque funciona mucho más fácil de lo que, como por digamos, le ponemos el video ahora mismo porque tiene que renderizar y todas esas cosas. Entonces sólo voy a ir dedo del pie sin spool Esh realmente rápido. Mi facebook va a chapotear y sólo voy a tomar una de las primeras fotos. Veo que no es realmente importante porque vamos a cambiarlo por el video. Entonces solo voy a copia del dedo ¿Este año volvió a principios y te vas a mamar venga en televisión, baste en su lugar. Y ahora el video probablemente va a ser algo así. Pero la razón por la que expliqué las mezquitas porque vamos a usar una mezquita para revelarla para que venga de izquierda aquí. Entonces la primera vez cuando estaba haciendo que el grupo y los clips de aliento de los jugadores lo hicieran una máscara, y ahora podemos hacer esto un poco más corto por lo que la imagen se mantendrá en su lugar, por lo que probablemente va a ser algo así y luego para el video aquí, exporté mi botón de pausa. Entonces sólo voy a ir por aquí y agarrar a Dragón de la Muerte aquí. Entonces ahora tenemos ese botón de pausa por aquí, y luego necesitamos, como, como, una barra de progreso. Entonces para una barra de progreso, solo voy a usar, um, dos rectángulos. Sólo voy a arrastrarlo por aquí, hacerlo mucho más pequeño en altura, por lo que podría ser un bar. Probablemente va a estar alrededor de algo como esto, y luego lo voy a arrastrar como si fuera barra de progreso. Entonces esto para bajar un poco así. Entonces ahora es genial. Entonces lo voy a hacer blanco. Y este no es el progreso del video, sino el marcador de posición. Entonces voy a hacer que le dé a esto una opacidad, como, como, alrededor del 30% o algo así. Entonces, ¿eso significa que voy a hacer una copia de ella? Vamos, C Comando V. Y esta va a ser la parte. Eso es todo lo que está jugando. Va a ser el indicador. Entonces se va a venir aquí la altura de dos, y entonces éste va a ser completamente blanco, así que voy a dar la mejor una vez más. Voy a mirar la colocación. Entonces la aerolínea algo así. Entonces eso es para nuestro video. No tengas que preocuparte por estos dos ahora mismo porque estos van a ir pesando en transición. Entonces lo que quiero hacer aquí es que quiero que este video revele desde la izquierda y así así así como las barras de progreso. Entonces solo voy a hacer de esto el botón de pausa va a darle una opacidad de Ciro porque no va a ser tan importante. Y luego le voy a dar a esto el marcador de posición para el progreso del video. Voy a convertirlo en un grupo. En realidad no es necesario convertirlo en grupo, pero me parece que funciona más fácil hacer que las cosas vayan de izquierda a derecha si lo haces en grupo. Entonces solo voy a recortar algunos jugadores aquí y solo voy a arrastrar. Es así que tiene cero ingenio como vemos aquí y luego con éste en el mismo va a recordar sobre, um,el um, progreso y los titulares de la policía progresan. Por lo que progresa de nuevo, clips de jugadores van a arrastrarlo hacia la izquierda para que el testigo cero y luego para el video . Ya lo hicimos un grupo con clips, clips de jugadores. Por lo que ya podemos hacer esto. Entonces esto va a ir así. Entonces, en realidad, siempre tienes que pensar en tienes que pensar en tu desenlace e ingenieros inversos lo que tenías en mente para tu animación. Por lo que quería hacer esto. Entonces primero voy a tener que hacerlo así. Y en esta parte, voy a hacer últimamente. Por lo que los testigos cero por ahora. Entonces eso es eso. Por lo que ahora podemos arrastrar esto de nuevo a alrededor de 470. Voy a hacer 470 por aquí. Y luego el ingenio waas la altura waas 600 a fondo. 0 360 Lo sentimos. Al igual que esto Voy a arrastrarlo hacia abajo otra vez. Entonces ahora tenemos aquí nuestro primer estado. Pero todos los estados están aquí, pero se inventan invisibles. Entonces eso fue para el montaje. Y ahora vamos a pasar a hacer el menú en expansión 6. Ejercicio: menú ampliado: Entonces ahora vamos a hacer que el menú revele el menú en expansión. Entonces, como dije en el video anterior ahora tenemos nuestro son nuestra junta aquí con todos nuestros estados encendidos , es sólo un estado dos y tres son invisibles. Entonces lo que voy a hacer ahora, podría hacer que éste sea clicable si fuera por un cliente. Y tienen que usarlo en dirección extranjera y esas cosas. Pero sólo por el bien de que más sea más fácil, voy a hacer de la obra el tablero de arte clicable, para que podamos comprobarlo más fácil en nuestra vista previa. Entonces voy a dar clic aquí en los relámpagos. Voy a elegir una interacción de paso, y sólo voy a arrastrarla a las tablas del corazón para que haga una copia de ella. Por lo que ahora tenemos una transición de esta obra de arte a tableros de desorden, y queremos que se amplíe el menú en este. Entonces sólo voy a llevar el rectángulo aquí a caja negra, y lo voy a arrastrar por aquí y este y este hecho que tuvimos va a subir aquí, y luego tuvimos, como, tuvimos este va a volver a poner la opacidad dedo del pie 100. Y tuvimos el video y y el título de video. Entonces es cuando éste va a ir por aquí y de nuevo cambiar la opacidad. Entonces eso fue solo colocación en sentimiento. Pero ahora que los podemos ver para arrastrarlos un poco más cerca, Así que espaciando bastante lo mismo entre estos y luego el video y el texto con el video, voy a arrastrar un poco hasta la cima así, Y éste va a ser el culto dirección va a cambiar de efectos Seymour para ver menos hecho. Entonces los efectos Seymour van a ser ¿Qué significa? Por lo que puedo hacer clic en él. Entonces este es el Seymour que va con la opacidad a cero y luego me voy a llevar este, ¿hace la c t. A. Por menos hechos, y voy a poner la capacidad a 100. Por lo que ahora principio va a hacer una animación de este tablero de arte a tablero de desorden. Entonces las cosas que cambiamos, esas son las cosas que vamos a ver en nuestro avance. Se echaría un vistazo a esto también, lo que voy a hacer sólo para que sea fácil. Voy a hacer que esta caja negra se pueda hacer clic para que vuelva a los primeros estados para que podamos echar un vistazo a nuestra interacción que hicimos un poco más fácil. Entonces ahora si echas un vistazo a lo que hizo el director, puedes dar click aquí en el o tablero donde queramos, porque hacemos que esa interacción vaya a hacer esto. Por lo que ahora tenemos la muerte, te puedo hacer click para que vuelva a subir. Entonces ahora eso ya es bastante guay. Pero ahora vamos a mirar en las propiedades animadas y relajarnos esto porque ahora es un poco aburridos porque todo va al mismo tiempo, Misma velocidad. Entonces lo primero que voy a hacer no va a dirigir esto un poco más cerca contra fin de semana si miras en lo que estamos trabajando. Por lo que voy a dar clic aquí en esta flecha la apertura de la propiedad animate. Y lo primero que voy a hacer es echarle un vistazo a nuestra caja negra, esta Así que se llama Layer aquí. Voy a cambiarme. No lo sé. Van a cambiar. Yo también me voy a cambiar aquí. Libros negros. Por lo que es realmente importante que nombre a sus capas lo mismo en ambos tableros porque de lo contrario no va a hacer la animación. Por lo que ahora tienen el mismo nombre. Vas a comprobarlo. Todavía funciona Gates a trabajar. Entonces quiero que esto sea un poco más largo, así que sólo voy a tomar todos los descansos y ponerlo un poco más tarde para poder ver qué hace la caja negra. Yo voy a esto. Yo sólo voy a ser algo alrededor. Sólo voy a probar un segundo y voy a seleccionar las dos barras porque siempre quieres hacer con lo que estás cambiando en ambas barras aquí. Como si dijeras, la caja negra tendría, como, 12 propiedades cambiando, y tendrías que poner tus cambios en las 12 barras, así que voy a entrar en el al fácil. Voy a cambiarlo a través del que las propiedades que siempre casi siempre uso y las alrededor como 0.6 y 0.5 0.1 y 0.99 Y esto en realidad hace algo que es un poco relajante y está fuera. Entonces eso significa que es que voy a ir despacio al principio. Entonces va muy rápido y vuelve a ir despacio. Entonces si echara un vistazo a eso, lo único que hicimos ahora es la caja negra. Está bien, echa un vistazo aquí. Mira, ya está un poco más fresco, pero ahora, tal vez, quizá un poco demasiado largo, Así que sólo voy a arrastrarlo en un rato. Voy a echar un vistazo a eso. ese tipo de le gustó. Para que ahora quiero estos artículos como este hecho y este hecho en este factor en el video con el título, quiero que estos sean escalonados. Y lo que eso significa es que la comuna, es diferente ahí espacio entre su animación. Por lo que el 1er 1 es el Leggett más grande aquí. Ese es el hecho uno. Entonces solo me voy a llevar esta propiedad. Voy a ponerlo primero, en realidad. Todos los van a poner para traerla aquí. Entonces primero va la caja y todas las cosas que hay en los libros van después de eso. Entonces primero tienes afecto uno. Entonces eso se queda aquí. Ahí afectamos a factor. Victor Debilita, Ponga como ahora está en 0.7 Creo que voy a trabajar con espacios fuera como, creo, alrededor de las siete. Por lo que va a ir alrededor de 14. Y ven aquí que sólo el por qué la propiedad ha cambiado porque siempre fueron visibles en el 1er 1 Así que entonces tenemos afecto tres. Y ahí tenemos la propiedad Y y la opacidad. Entonces sólo vamos a tomar este barco y van a pasar a 14. Entonces ahora iría en el mismo hecho de timo a No, solo voy a estar en 0.7 Así que ahora sube a 21 y luego tenemos el término de video clavo con el título del video. Entonces eso es todo esto, Y esto va a pasar del 21 al 28. Entonces ahora ya tendríamos, ah, de una animación genial, asombrosa. Este solo está en opacidad, por lo que no queremos llamar la atención del usuario. Por lo que éste sólo va a cambiar de capacidad, y puede comenzar por el principio. Entonces ahora vamos a echar un vistazo a lo que hicimos. Entonces ahora veo que el texto va más rápido que los bichos que tenemos, y es principalmente también porque no tenemos relajamiento ahí. Entonces solo voy a probar Si los hiciera en la misma longitud más o menos que la caja negra, eso cambiaría cualquier cosa. Por lo que ya está dando un efecto bastante cool. Pero ahora vemos que el texto no tiene la misma flexibilización que una caja negra. Y esa es la razón de eso. El texto va primero aquí, así que solo voy a seleccionar va a seleccionar estos todos los artículos en los libros negros y solo voy a dar clic aquí. Entonces los quieres a todos, selecciónalo, y luego solo vamos a dar clic aquí y añadir el mismo valor Así 0.60 punto 50.10 punto 99 Así que ahora si le echaras un vistazo a eso, creo que eso lo arreglaría. Entonces eso ya empieza a parecer genial. Hay frentes mal con la sangre. Mira a los extremos que van a, pero es un poco más tarde. ¿ Te gusta eso? Eso ya empieza a parecer bastante guay. Entonces sí, eso es para el menú en expansión y nuestro dedo del pie en marcha. Echa un vistazo en el siguiente video. Cómo vamos a hacer que el video revele con las barras de progreso fuera del tiempo del video y cómo podemos importar video en principio. 7. Ejercicio: revelación de video: Entonces ahora vamos a echar un vistazo a cómo podemos hacer que el video revele desde este estado. Entonces vamos a pasar de los segundos estados al último estado. Por lo que ahora ya tenemos una animación yendo de este tableros de arte a este tablero de arte para hacer el menú en expansión. Entonces ahora vamos a pasar al 31. Entonces lo que queremos es que el video va a ser clicable. Por lo que actualmente vamos a volver al rayo aquí, y vamos a arrastrar la interacción de paso sobre esto, nuestra pizarra para hacer una copia de la misma. Entonces ahora tenemos nuestra tercera se aburren y sólo queremos crear un estado aquí que queríamos ser . Entonces sólo voy a arrastrar este a la derecha como la muerte. Y luego éste, éste, éste fenómeno puso en cero opuesto y video hincha video. También va a estar en cero opacidad. Yo soy la razón por la que dejo este por ahora es porque olvidé el texto que viene debajo del video cuando se revela. Entonces esa es una buena manera de mostrarles cómo pueden agregar otro elemento cuando ya están profundamente en su animación. Entonces lo primero que queremos hacer si queremos nuestro video por aquí queríamos expandirnos. Ah, nuestro video. Sólo voy a darle un poquito de ella para que podamos arrastrar la semejanza del mango. Entonces, va a ser algo como esto Y luego éste, en realidad, éste vamos a mandar el pecho, mira, Porque éste es el original del manual en expansión. No necesitamos esa. Voy a poner opacidad cero en este también. Entonces éste se va a ir al estado, y yo voy a presionar el comando V. Así que tenemos uno nuevo. Este va a subir ligeramente por aquí. Entonces ahora tenemos nuestro texto aquí va a ir con un video, pero no está en el tablero de arte anterior. Entonces solo voy a presionar comentario, ver voy a ir al segundo tablero de arte por aquí. Sólo voy a presionar comentario, V y ahora está por aquí. Pero la animación que queríamos tener aquí es que quería venir de abajo a arriba. Entonces por esa razón, lo voy a poner un poco aquí abajo y van a presionar turno dentro y con las teclas de flecha. 123 Algo así. Y voy a poner a cero la opacidad Todos que porque en primer Estado, tampoco es visible. Por lo que ahora lo tenemos aquí en este estado. Yo sólo voy a presionar. Vamos, vuelve a ver y ponlo aquí en esta cuota de mando de cartón. Entonces ahora está en todos nuestros estados y principal sabe exactamente de dónde es muy necesita venir . Entonces ahora aquí en nuestro video, lo único que necesitábamos nuestras barras de progreso y son botón de pausa. Entonces esta es una lata posible. Esto sólo va a conseguir opacidad, cientos como este, y luego tenemos nuestro marcador de posición de una barra de progreso solo le va a dar un poco de con para que podamos verlo así. Y sólo voy a arrastrarlo a la derecha. Algo así, y para el progreso va a ser algo alrededor de lo mismo. Va a darle algo de ingenio como este es el estado final de la misma. Ah, mi apuesta. Entonces este es el estado final de la misma, y esto se va a mover muy lentamente porque eso indica que se está reproduciendo el video. Por lo que todo esto también va a desaparecer. Eso es cero. Y luego tenemos Ah, un pequeño botón de cierre ahí mismo. Entonces y eso se va a abrir athe cientos. Por lo que llegó a dirigirlo aquí arriba. Entonces, así , también voy a dar este tablero de arte y en dirección para volver a los estados anteriores. Y cuando solo voy a pisar aquí y lo voy a hacer con el botón de cierre, voy a escalar interacciones bajando aquí al segundo estado. Podemos ver en qué estamos trabajando. Entonces ahora por mirar lo que hicimos Presidente. Botón Cerrar. Por lo que ahora protege el video. Conseguimos que nuestro principal de interacción se haga, así que va a ser algo así. Pero como puedes ver, el tiempo está apagado y simplemente no se ve bien. Entonces ahora vamos a ver, ah, ah, tiempo fuera de nuestros elementos, y vamos a hacer que este bar vaya muy despacio. Entonces como en la anterior, voy a dar clic en la flecha entre los tableros de arte así. Entonces ahora obtenemos nuestra interacción. Yo nuestras propiedades. Entonces lo primero que voy a hacer. Lo primero que tiene que ser que tiene que pasar. Es que estos artículos, los textos y el video Tamil y todas esas cosas que eso debe desaparecer. Por lo que tenemos nuestro afecto. Uno. Se va a ir primero y falso a. Ahora tenemos fábrica. Este un principio aquí toma la longitud que le puse en el estado anterior. Pero sólo voy a cambiarlo de nuevo al adicto ladrón personalizado, el estado por defecto. Así que así. Por lo que está fingido 12 y tres. Entonces tenemos el término video video Neil y el título del video va a ir de nuevo por aquí. Dale la misma longitud de los descansos y voy a volver a poner esto a defecto. Entonces, como esto también volver al default así. Y entonces aquí tenemos el título del video. Por ahora, voy a dejarlo tal como está. Entonces lo primero que quieres hacer es que la opacidad cambie para que estos artículos desaparezcan de la caja negra. Por lo que estas esta animación tiene que ir primero. Por lo que afectamos un hecho a selectores fábrica efectiva en el término de video clavo en el título del video y el llamado a la acción, nosotros. Ver menos. También lo hace este. Entonces estos van a ir primero. En realidad, tengo que seleccionar todo el resto. Entonces éste, éste Este Este Este Este Este Este Este Este Este Este Este Estos nudos y caja negra y y la ropa en el título del video. Por lo que estos aires pasando así cuando miramos que normalmente ahora los artículos desaparecerían primero. Entonces se ve ya un poco mejor, pero creo que sería genial que los artículos desaparezcan escalonados. Entonces el de arriba desaparece primero, y luego el título aquí desaparece último. Entonces si esta es nuestra línea de tiempo, la que va primero sospecha una. Para que eso se quede en su lugar. Entonces solo voy a seleccionar todo el resto. Está ahí dentro. Entonces efecto, también. Efecto tres. El término de video clavo y video título Esos van porque estoy trabajando en el espacio está apagado. Siete. Voy a mantener que ese valor para mantener la animación consistente para que eso infecte a fantasma así que estos vaya a 14 de hecho, Rego. Para que eso se quede ahí. Entonces estos van a 21 así? Ese es el video Tommy en el título del video. Por lo que la ciudad son la ciudad un aquí por menos. Eso puede ir de inmediato porque no queremos llamar la atención. En realidad voy a hacer un poco más corto. arresto lo hará. Entonces nada echaría un vistazo a eso. Verían que el va primero. Y así va realmente rápido ahora mismo porque hay algo de superposición. Pero sólo voy a tomar estos artículos fuera del video y en el título del video por aquí, va a ir así sólo para hacer mi punto. Al igual que se puede ver que éste va primero y luego se cierran las puertas. Por lo que ahora lo puedo ver como un poquito. Es solo un pequeño detalle, pero los pequeños detalles pueden recorrer un largo camino. Entonces lo siguiente que queremos hacer queremos cambiar el tiempo y relajar el video revelado. Entonces esa es la máscara que tenemos alrededor de nuestra imagen ahora mismo, así que voy a hacer la muerte. Entonces solo voy a dirigirme a, uh, nuestro video y está justo aquí. Entonces de nuevo, querías que quisieras cambiar tu flexibilización de alargamiento en ambas pruebas de trueque aquí mismo . Entonces sólo voy a hacerlo un poco más largo, Algo como por aquí. Y voy a seleccionar esos dos, y luego voy a sumar los mismos valores de flexibilización dedo del pie 0.60 punto 05 0.10 punto 99 como este y solo para tener unos buenos pocos estaban en nuestro adelanto en vamos a poner todas las cosas que es el progreso nacido posibilidad un poco más tarde para que podamos ver nuestra animación. Muy bien. Entonces sólo lo voy a volver a hacer. Entonces eso ya está empezando a parecer bastante guay. Entonces esos se van, los libros negros se expanden. En realidad, la caja negra va un poco demasiado rápido ahora mismo, así que sólo voy a dirigirme a la caja negra aquí mismo. Entonces esas son las barras de estofado, y voy a hacer estas también más o menos alrededor de la misma longitud que el video revela, y voy a poner la misma flexión ahí. Entonces otra vez. 0.60 punto 50.10 punto 99 así. Entonces si le echas un vistazo a lo que está empezando a lucir bastante cool porque los dos elementos tienen la misma animación. Pero hay un poco de retraso ahí. Dale un poco. Yo le doy sensación realmente agradable. Entonces tenemos los libros negros y en el video yendo. Entonces lo siguiente que queremos hacer es la línea de tiempo aquí que queríamos hacer. Queremos que vaya realmente despacio, por lo que parece que es como un reproductor de video que indica lo lejos que estás en el video. Entonces lo que vamos a hacer con la deuda, el dedo del lugar, todo el progreso también sólo por los detalles. Este es el trasfondo. Yo sólo voy a hacer lo mismo que hice en video para que sea consistente. Entonces voy a tomar estos dos, y voy a hacerlos más o menos de la misma longitud que nuestro video revela así y seleccionarlos de nuevo barcos en ir de pie a nuestro valor relajado. 0.60 punto 550.10 punto 99 Así que ahora ya veremos. Eso tiene el mismo efecto. Ahora viste que el indicador de progreso blanco estaba un poco mal, pero no lo hace porque aún no lo hemos tocado. Entonces ahora por nuestro progreso aquí mismo. Simplemente en realidad queríamos que fuera realmente largo, así que va muy despacio. Entonces solo voy a arrastrar esto. Se va a echar un vistazo a cómo se vería, como, como, ocho segundos o algo así. Échale un vistazo ahora mismo. Ahora vemos que parece un video. Está jugando. A lo mejor va un poco hazlo rápido ahora mismo, así que sólo voy a arrastrarlo a alrededor de 12 segundos o algo así. Algo así. Algo así. Si le echas un vistazo a eso ahora, realidad se ve como un video. Está jugando. Entonces tomándolo de nuevo un look extra ahora mismo para ver si hay algo más que tenemos que cambiar . A lo mejor el título puede venir un poco más tarde, así que voy a echarle un vistazo a eso. Se va a desplazar hacia atrás. Y entonces aquí tenemos nuestro título de video de título aquí, y voy a darlo solo voy a probarlo, darle más o menos la misma longitud otra vez en algunos de nuestros otros artículos seleccionados para otra vez. Y también ya tenía el valor. Entonces es bastante guay. Entonces solo voy a comprobarlo. A lo mejor voy a ponerlo un poco más tarde. Entonces ese video entra primero y luego entra el título es el último detalle. Sí, eso me gusta. Entonces ahora lo único que queda en realidad es tener un video aquí. Y en realidad aestaba realmente sorprendido cuando me enteré de cómo se podía hacer esto y en realidad realmente fácil. Entonces aquí tenemos nuestro grupo del video y en nuestro grupo, podemos ver que tenemos Ahora tenemos justo la imagen que está en Eso está ahí, en la mezquita, en un grupo del video. Así que descargué un pequeño video de algunas imágenes de drones en Lake, y, um, acabo de conseguirlo. Por lo que fue alrededor como, 10 segundos y bastante corto en bastante baja calidad solo para fines de renderizado. Entonces este es el pequeño video que tuve, y realmente es así de fácil. Simplemente agárrala y lo arrastras a la mezquita. Yo no entré a la mezquita, pero aquí está nuestro video va a cambiar aquí, también, que está en nuestra mezquita la va a arrastrar para que cubra nuestros campos. Algo así. Entonces ahora si echara un vistazo aquí a nuestro producto final que nos encontramos, podemos ver que tenemos Aquí están First State y luego podemos dar click aquí. Efectos Seymour. No tenemos menú expandible. Hacemos click en el video y video revela y el video que está reproduciendo. Entonces eso es que para el efecto de revelación de video. Voy dedo del pie sube archivo fuente del deismo Así que ustedes pueden revisar eso. Espero que ustedes lo hayan disfrutado, y espero que aprendan algo chicos. 8. Proyecto de clase: Entonces espero que aprendan algo de las lecciones. Ahora te toca hacer algo impresionante. Asegúrate de tener diseñados todos tus estados de la animación porque te ayudarán de por lotes a pensar en cómo vamos a trabajar desde el principio. Además, piensa en High Wonder User para sentir cuándo verían tu animación. Si es un sitio web para un spot, por ejemplo, quieres ser muy Llámame. Yo quiero que ustedes publiquen sus diferentes estados de sus animaciones y su animación final aquí en el proyecto de clase, y los revisaré con certeza. Y les voy a dar algunos comentarios chicos. Además, si ustedes no tienen ni idea de qué hacer para un diseño antes de empezar en la animación, recomiendo encarecidamente echar un vistazo a mi clase anterior aquí en cuota de habilidad. Cubrí las partes de diseño por ahí, con ansias lo que ustedes van a llegar y recordar, diviértanse con ello. 9. Roundup: Entonces eso fue todo para la clase. Espero que aprendan algo de ello chicos. Siempre estoy abierto a la retroalimentación. Entonces si ustedes saben alguna forma más rápida de trabajar en principio o algo así, sólo háganmelo saber abajo en los comentarios. Espero que ustedes puedan hacer algunas cosas geniales en el proyecto de clase. Y realmente estoy deseando con ansias lo que ustedes van a llegar. También voy a comprobarlo. Les voy a dar algunos comentarios sobre. ¿ Pero fue para la clase? Gracias por quedarme conmigo. Enorme. Gracias por revisar la clase. Ahora es el día libre. víspera de Año Nuevo aquí, Bélgica. Así que la manera deberían los chicos todos Feliz Año Nuevo en mayo 2018 Gran gran año. ¡ Congelen! Así que las cosas, chicos.