Bueno ahorita que tocaron el tema de los elevadores, de una vez les enseñó hay una muestra que igual también vamos a poder hacer este con esto que les voy a explicar pero me acuerdo ahorita que en pie tron saco el elevador. Aquí en este caso el elevador digo los botones no están bien diseñados solo es una prueba pero lo que hice es hacer una png donde le pica salen los botones, te vas a pd se abre el elevador igualmente a cualquier piso pero es otra opción que tenemos para hacer ahí los botones animados. Aquí ya estamos en el programa donde inicia, aquí son los diferentes software que manejan dentro del mismo programa, en esta ocasión vamos a manejar lo que es edición y fusión. Aquí sobre edición vamos a, bueno primero que todo, aquí todo esto se los voy a dar documentado y si tienen alguna duda a medias pues me avisa porque más o menos lo armé ahí ya como fui entendiendo. Marco, por favor cuando se mueve el ratón puede moverlo despacio por favor. Claro sin problema, de todos los todos los voy a dar este documentado. Aquí nos vamos a ir a mero abajo del programa y en la parte derecha le vamos al engranaje, estos son los parámetros que va a llevar tu pantalla. Entonces aquí como vamos a crear un png yo lo voy a hacer en 500 por 500 pero ahí depende del tamaño que vayan a hacer su apng. Le vamos a salvar, ya tengo mi cuadro de 500 por 500, aquí ya tengo un png que formé de los que nos había dado Mario de Figma, puedo decir cualquier png de verdad el que quieran meter. Simplemente es de arrastrarlo y lo arrastra dentro de la línea de tiempo. Ahí ya tenemos el apng creado, obviamente ahorita lo doy play y no me va a hacer nada el apng. Lo primero que vamos a hacer es darle el tiempo que va a durar que en este caso lo vamos a hacer de un segundo solamente, pues es solamente una animación. Vamos a hacer un dipto Perdón, eso es da Vinci Este es da Vinci, este es da Vinci Resol, este es su versión, bueno tengo la estudio pero en versión gratuita se puede hacer sin problema. Bueno nos quedamos aquí en la pantalla de edición ya tenemos nuestro apng que va a durar un segundo de tiempo de vida. Nos vamos a ir aquí a la pestaña Fusion, esto es lo que debemos detener, son los dos nodos donde te está diciendo aquí, esto es la entrada y lo que se está viendo tu salida final que es esto. Si te quedamos de este lado pues ves lo que es la entrada y la salida. En un segundito aquí vamos a agregar un nodo que es el de transformación. Para aquí lo que vamos a conseguir en la png es que este mismo png se haga chico y se haga grande, es lo que vamos a hacer pero con lo mismo que les voy a explicar pueden hacer cualquier animación lo que se les venga su creatividad. Pulsando en media in uno vamos a presionar esta mi segundo, es chif, la tecla chif y espacio. Te va a abrir los nodos que puedes agregar, aquí en este caso vamos a agregar el de transformar, transform que es este. Le vas a adicionar y automáticamente se va a enlazar, si tienes este nodo primero seleccionado y agregas un nuevo nodo se va a adicionar aquí mismo. En dado caso que se venga por aquí afuera que no quede adicionado hay dos formas de hacerlo, pones esta flechita le pones para acá y esta le vuelves a conectar para acá. Ok, esa es una forma y la otra forma en dado que eso que nos salga presiones dejas pulsado chif, agarras lo que es el nodo de transform y lo pones adentro. Es que se convierte ahí como la línea de azul se va, bueno de blanco se va azul y amarillo, ahí es donde ya entró, ahí ya quedó dentro el nodo. Astorita tenemos alguna duda o vamos bien? El largo de la raya no importa. Esto no tiene nada que ver, lo puedes alargar, chicar, yo lo pongo equipos para tenerlo todo más juntito. Con nodos y es como en chufes. Si digamos que si, es como un chufe, un tipo de snarball de nodos. Si alguien iba a hablar? No. Ok. Aquí ya nos vamos a hacer que se anime este mismo nodo. No sé si ya están familiarizados con los K-Frames, alguien? Estamos todos en blanco. Blanco, yo. Blanco, ok. Si a veces se les va a dar paso a paso y al final les entrego un documento donde viene todo paso a paso y si tienen alguna duda me dicen, igualmente si voy muy rápido, se les hace alguna duda en el ahorita, me pueden interrumpir sin problema. Estos son los frames que tiene esta duración que es de 24 frames, lo que dura un segundo la animación. Vamos a estar aquí en el primer frame. Dándole a transform, esto se llama el inspector. El inspector viene siendo todo lo que le puede mover a ese nodo que tienes tu seleccionado. Entonces aquí en el inspector, aquí como nada más vamos a cambiar de tamaño. Yo aquí voy a agregar un nodo, un K-Frame le llama. Yo aquí, al momento de picar aquí, le estoy diciendo que en el frame 1 me mantenga su tamaño en 1% O sea bueno, al 100%, no a la escala. Aquí como lo que queremos hacer es que se haga chico y luego se haga grande, vamos a agregar un K-Frame a mitad del segundo, haciendo lo chico y a final del segundo, volviéndolo su tamaño original. Aquí esto es de 24 frames, nos vamos al frame 2, a la mitad de la línea de tiempo. Igualmente, aquí ya no es necesario agregar el K-Frame, al momento de mover aquí, solo se agrega, no sé si ven aquí que se pinta en rojo. Entonces lo hago un poquito más chico y me voy al final del frame y le voy a decir que al final del frame volvas su tamaño original que es 1. Ahí estamos en 1. Yo al momento de darle play, ahí puedo verificar, es la animación que hice. ¿Ok? Hasta aquí vamos todos bien? Bueno, vamos a agregar, ya tenemos la animación, ahora lo que nos falta es exportar esa animación a secuencia de imágenes, lo que queremos es que nos exporte en PNG frame by frame, en este caso los 23-24 frames. Vamos a agregar otro nodo, escogiendo transform, le vamos a igual chif espacio para buscar los nodos. Este se llama, no sé cómo se pronuncia, server, saver, este es el que vamos a agregar. Añadimos este nodo de igual manera como les digo, si lo añade afuera le damos chif y lo ponemos en medio, o la otra forma es agregar esta flechita para acá y así que queden medio. Y ahí tenemos nuestra animación, este es el media in, el de entrada del primer PNG que le di, el transform es la animación que le di para que sea grande y chica, el service nos va a servir para exportar todos los PNGs y el media outpost es el archivo de salida final. Entonces, estando en server nos vamos a ir a fusion, ah, dame un segundito, me salto un pedazo. Una vez que tenga server nos vamos a ir acá de lado derecho, hay una pestaña que dice bros, le damos bros, ahí es donde queremos que se guarden las opciones porque vamos a dar de salida. Entonces aquí yo le doy en da Vinci, aquí es importante ponerle, le da su nombre, da Vinci y hay que ponerle extensión aquí, da Vincipng y este es muy importante, tipo hay que ponerle alfights para que te los porten en PNG. Le damos guardar, nos vamos aquí a la parte de arriba en herramientas nos vamos a fusion y nos vamos a render our servers. Aquí le damos, ahí me lo generó y ya, esto es lo que hay que hacer en da Vinci. Aquí está la carpeta donde yo lo exporté, secuencia da Vinci y aquí tenemos los PNGs. Entonces ahí tenemos, yo te paso, bueno ahí estoy pasando de un PNG a otro, ahí está la animación. Ok, en cuestión de da Vinci esto sería todo, no sé si tienen alguna duda sobre cómo animar en da Vinci. Sí, como inciso el vídeo son 25 fotogramas por segundo y los APNG o los GIF animados podrían tener 12 o 10 fotogramas por segundo, podrían tener menos. El cómo está usando, el da Vinci que es de vídeo pues seguramente lo has portado 25 fotogramas por segundo. Sí, bueno acá se usa más 24 pero si venda a Vinci tu le puedes dar a 4 fotogramas, quieres trabajar tu proyecto. Roberto viene muy acelerado de las fiestas de Castellón. Aún estamos en fiestas, hoy es San Vicente en Castellón, bueno en Castellón no es fiesta, es fiesta en Almasora. Pero Roberto va donde está la fiesta? Siempre, eso siempre, siempre. Venga Marco. La parte de da Vinci es todo, es todo, es no más para que tenga una noción de cómo se puede generar una animación y exportarle en secuencia de imágenes. Vamos a hacer este, digo vamos a buen tiempo, lo voy a explicar, hacer la misma animación en Photoshop, que igualmente Photoshop está abierto también para pues cada quien su creatividad puede hacer la animación que quiera. Ahorita para no tomarnos tanto más tiempo pues vamos a hacer la misma animación. Generalmente tú abres Photoshop, yo voy a aparecer, aquí tengo abierto mi PNG y te apareces la línea de tiempo para que esa aparezca la línea de tiempo te vas a herramientas, nos vamos a ventana y palomita a línea de tiempo. Y aquí ya tenemos la línea de tiempo, muy importante aquí, bueno para este tipo de efecto vamos a utilizar lo que es, tenemos dos opciones, línea de tiempo y vídeo o crear animación de cuadros, en esta ocasión vamos a hacer de vídeo. Si, tienes razón, bueno me falta eso añadir, si tiene que ser objeto inteligente. Vale, ya tienes el primero, ahora vete al final del clip y dale al rombito de transformar. Ahí está, ahí tenemos una animación que no anima nada, pero esa animación, ahora te vas al medio y ya no te atendís, tienes toda la razón. Tienes toda la razón, si es por el clip. Si, es este buen tip, no lo había analizado de esa forma y si, ya no te estás peleando si quedó exactamente el mismo tamaño o no. Por eso digo que yo, la forma que tengo de explicar los keyframes son, esos son almacenes de datos, en este caso si solo vamos a cambiarla, el transformar, el ancho y el alto, eso es lo que nos va a guardar, nos guarda al inicio, unos valores, los van a ser los mismos al final. Y en medio, le hemos hecho esa modificación, la volvemos a memorizar en un keyframe y entre medias él dice, veate, ¿cómo vamos a cambiar estos valores? Si es una forma yo creo más sencillo y acertada el 100 porque ya no le vas a fallar el tamaño. Bueno, ya una vez que tenemos la animación, nos falta exportar ahora así como secuencia de imágenes PNG. Aquí nos vamos a ir a archivo, exportar y viene a interpretar en vídeo. Así en inglés no sé cómo venga pero bueno más o menos vienen acomodadas a las mismas alturas y algo debe decir de vídeo, no sé cómo se traduce en inglés. Utage, creo que eso le ponen. Ok, aquí nos va a pedir el nombre de archivo fundidor A12, seleccionar carpeta donde la quieran guardar. Y aquí nada más lo importante es que sea PNG y dame otro segundo, hay que esté todos los cuadros seleccionados, creo que eso viene por defecto. Le damos a interpretar, ahí está exportando y de igual manera acá tengo secuencia PCD donde la guardé y aquí tenemos la secuencia hecho. Ok. Pero no hay que ponerle loop. No, aquí lo que te está, no sé si alcancen a ver por ahí, pero lo que te está haciendo es nada más sacar un PNG de cada cuadro cada fotograma por segundo, que en este caso son 24. Entonces bueno aquí en foto chufaron 30, me genera el primero, el segundo, el tercero, el cuarto y ya te lo damos. Ahorita vamos al siguiente paso de convertirlo a PNG, ahorita nada más tenemos la secuencia de imágenes de PNG. Nos vamos a cualquier secuencia que hayamos sacado, esta es la Vinchila de Photoshop, es lo mismo, lo que vamos a hacer es las imágenes PNG, hacerlas una secuencia en APNG. Arrastramos aquí las secuencias imágenes. Aquí nos dice que está leyendo, donde está subiendo la secuencia de imágenes. Nos esperamos un momentito y depende qué tanto pecen las imágenes y la velocidad de internet. Me parece que hemos un sencillo Photoshop que de Vinchila. Sí pues puede ser, digo depende qué es lo que más se te familia dice. Lo que pasa es que en esa pestañita de Fusion te permite 3D, si conoces, ahí donde te parecerá más potente. Pero sí, ahora mismo para lo que estamos hablando de un icono, yo no me complicaría con DaVinci, está bien saberlo para los que sabemos DaVinci, para los que os queráis meter, porque es muy potente. Pero está claro que ahora mismo, yo solo escuchando a Marco, vamos hay un abismo de dificultad entre uno y otro. Pero aquí por ejemplo, digo, la ventaja de DaVinci que puedes encontrar por ejemplo en los Callouts o cualquier animación, ya hay muchas en la web, inclusive si se les ofrece algo de embato, yo tengo embato, busquen algo y les paso los archivos. Ya vienen hechos en DaVinci, ya no más exportas como secuencia de PNG y tienes ya la animación hecha, o sea no la tienes que crear de cero, esa es la ventaja, que hay mucho material de DaVinci hecho. Bueno, prosiguiendo acá con el, para convertirlo ya a PNG, ya subimos las imágenes, aquí está. de la parte de la que. carguen en delay time vamos a ver el en cero y aquí en la parte de abajo hay que marcar. esta caecilla que dice donde. está frames Leamos Make a PNG igual se va a tardar un ratito si este es parecido al que. enseñó eh Mario hay hay hay varios para hacerlos digo yo en este caso sé este pero pero hay varios es la pena de de la que se va a hacer el. programa de estos los buenos eh exporten ya así si es de pago esta no esto es gratuita esto es gratuita David es gratuito y Photoshop de pago y aquí tenemos la previsualización de de la PNG le vamos a guardar en este caso se va directamente a descargas y ahí tenemos el 3D visto nada más para mandarlo llamar y y y ver que funcione pero ya. con eso no debes detener ningún problema vamos aquí a hotspot vamos a agregar uno de descargas se fue fue este dos y cuarenta y cinco tres y un poco más de la extra APNG funcionando que. igualmente aquí este le puedes dar este puedes jugar con la velocidad creo que estaba. jugando el otro con la velocidad también aquí te viene frames por segundos ahí está cincuenta nosotros lo hicimos creo que a. treinta este esto dice si le das más pues ya se va a ver más altador ¿No? Pero ahí juegues con la velocidad de la pared por mi parte no sé si tengan alguna alguna duda al respecto brillante aquí aquí está no sé si alcancen a leer ¿Vale? Aquí está donde está el mouse quítale a ver aquí no lo previsualiza no no hasta hasta hasta ya este hasta crear el el previo no bueno el sí hasta crear el tridivista ¿No? Sí Trac y ahí. se paró Ahí está La parte. la parte incómoda de de cuando genera los tres botones como en tridivista no se no se para nunca tienes que ir ahí. midiendo donde crear el hotspot transparente Esto es. una animación al pinchar ahí es una APNG Sí, mira aquí lo. vamos a ver ya directamente tridivista Ah bueno lo tengo. lo tengo escondido ¿No? Pero viene siendo este Ah, yo aquí. estoy No lo tengo la S Es. lo que enseguidermo aquí Ah. pues ahí te espero de ahí le vas midiendo a ver dónde cae dónde cae dónde cae pero Guillermo dice pues exporta el peneje que está eh hijo trabaja. sobre ese y ya lo replazas por por la animación Pero más lo. que está bajando ahora es una. única imagen o son tres hotspot una una Es este la animación es. una imagen pero por debajo tengo que ver ahí ahí ahí ahí ahí. ahí ahí o sea realmente está está un hotspot que es el que. va a similar que le está. picando al botón pero están invisibles para que no lo ve el. cliente Ahí está la magia. Sí O sea realmente la la acción. la traen estos hotspot de cuadrados invisibles Este es. solo una animación que no hace. nada de nada más Es vista. Esto está esto está mucho más bonito que lo que he hecho yo. con el ascensor Sí Me. parece que está muy bonito. Pero de ahí pues Pero ya tienes. ahora la opción Exacto. Cada uno es un uso eh Oscar no para mí me ha sorprendido tanto el tuyo como este Este es. porque lo estaba buscando Pero. el otro te ha quedado muy chulo. yo de hecho no pienso en un en hotspot para un multipiso y eso muy original estas ideas no no había pensado yo en esto Yo. siempre pongo ahí el el típico abajo tipo el de Google que es. un de los que es muy original. Yo el tema está en que yo no. he hecho dentro del ascensor, lo he hecho fuera porque eh hay. que recorrer todo el palacete. claro si tienes que ir eh. buscando el ascensor para llegar es una movida Entonces en la. primera Es que ahí marco. además cuando le da el botón se abre la puerta ¿No? Y ahí se abre la puerta Es que ya eso. ya es otra otra vuelta Es. una de las más técnicas iguales y la única que cambiaba pues. era la de la puerta La de la. puerta Entonces habrá pues se. ha dado otro piso diferente. Podemos ver cuando cuando picas a uno de los tres Podemos ver. la acción Sí esa esa esa fue o. sea le pico por ejemplo nos vamos a a perdón no lo he visto, no lo he visto, no lo he visto Está la pantalla arriba. Ahí estamos planta alta. Cerramos planta baja O sea, se. ha dado un poco de control. No Ahí sabes lo único que que. le veo para afinar Marcos. Sí, sí, claro dime Juega con. el tema del del punto de vista dinámico para que te coja la. la la misma la misma visualización sí Yo creo que. eso ya vamos ahí los los flipas ya Y ahí sí ya quedaría. al cien Sí En eso sí tienes. razón Muy chulo eh marco. Muy chulo Debra bueno Bueno. y bueno como plus de una vez que ya estamos en la página de. Lumay aquí lo lo utilicé en este tour Ya se ya es como un. plus, ¿No? Este es un museo y les hice un vuelo de dron con el Lumay Entonces tenemos ahí. como un un render, ¿No? De del exterior que este está eh.