240408 - Creación APNG

00:00:00

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

00:00:10

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

00:00:29

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

00:00:43

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

00:00:54

Marco, por favor cuando se mueve el ratón puede moverlo despacio por favor

00:01:00

Claro sin problema, de todos los todos los voy a dar este documentado

00:01:05

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

00:01:15

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

00:01:26

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

00:01:40

Simplemente es de arrastrarlo y lo arrastra dentro de la línea de tiempo

00:01:46

Ahí ya tenemos el apng creado, obviamente ahorita lo doy play y no me va a hacer nada el apng

00:01:52

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

00:01:59

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

00:02:17

Bueno nos quedamos aquí en la pantalla de edición ya tenemos nuestro apng que va a durar un segundo de tiempo de vida

00:02:28

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

00:02:41

Si te quedamos de este lado pues ves lo que es la entrada y la salida

00:02:47

En un segundito aquí vamos a agregar un nodo que es el de transformación

00:02:53

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

00:03:07

Pulsando en media in uno vamos a presionar esta mi segundo, es chif, la tecla chif y espacio

00:03:17

Te va a abrir los nodos que puedes agregar, aquí en este caso vamos a agregar el de transformar, transform que es este

00:03:25

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

00:03:38

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á

00:03:48

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

00:04:00

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

00:04:10

Astorita tenemos alguna duda o vamos bien? El largo de la raya no importa

00:04:18

Esto no tiene nada que ver, lo puedes alargar, chicar, yo lo pongo equipos para tenerlo todo más juntito

00:04:26

Con nodos y es como en chufes

00:04:29

Si digamos que si, es como un chufe, un tipo de snarball de nodos

00:04:34

Si alguien iba a hablar? No

00:04:39

Ok

00:04:40

Aquí ya nos vamos a hacer que se anime este mismo nodo

00:04:46

No sé si ya están familiarizados con los K-Frames, alguien? Estamos todos en blanco

00:04:51

Blanco, yo

00:04:53

Blanco, ok

00:04:54

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

00:05:10

Estos son los frames que tiene esta duración que es de 24 frames, lo que dura un segundo la animación

00:05:16

Vamos a estar aquí en el primer frame

00:05:17

Dándole a transform, esto se llama el inspector

00:05:24

El inspector viene siendo todo lo que le puede mover a ese nodo que tienes tu seleccionado

00:05:29

Entonces aquí en el inspector, aquí como nada más vamos a cambiar de tamaño

00:05:34

Yo aquí voy a agregar un nodo, un K-Frame le llama

00:05:37

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

00:05:48

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

00:05:59

Aquí esto es de 24 frames, nos vamos al frame 2, a la mitad de la línea de tiempo

00:06:02

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

00:06:12

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

00:06:22

Ahí estamos en 1

00:06:24

Yo al momento de darle play, ahí puedo verificar, es la animación que hice

00:06:27

¿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

00:06:46

Vamos a agregar otro nodo, escogiendo transform, le vamos a igual chif espacio para buscar los nodos

00:06:53

Este se llama, no sé cómo se pronuncia, server, saver, este es el que vamos a agregar

00:07:01

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

00:07:12

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

00:07:33

Entonces, estando en server nos vamos a ir a fusion, ah, dame un segundito, me salto un pedazo

00:07:38

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

00:07:49

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

00:08:08

Le damos guardar, nos vamos aquí a la parte de arriba en herramientas nos vamos a fusion y nos vamos a render our servers

00:08:15

Aquí le damos, ahí me lo generó y ya, esto es lo que hay que hacer en da Vinci

00:08:21

Aquí está la carpeta donde yo lo exporté, secuencia da Vinci y aquí tenemos los PNGs

00:08:27

Entonces ahí tenemos, yo te paso, bueno ahí estoy pasando de un PNG a otro, ahí está la animación

00:08:33

Ok, en cuestión de da Vinci esto sería todo, no sé si tienen alguna duda sobre cómo animar en da Vinci

00:08:40

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

00:08:54

El cómo está usando, el da Vinci que es de vídeo pues seguramente lo has portado 25 fotogramas por segundo

00:08:58

Sí, bueno acá se usa más 24 pero si venda a Vinci tu le puedes dar a 4 fotogramas, quieres trabajar tu proyecto

00:09:10

Roberto viene muy acelerado de las fiestas de Castellón

00:09:15

Aún estamos en fiestas, hoy es San Vicente en Castellón, bueno en Castellón no es fiesta, es fiesta en Almasora

00:09:24

Pero Roberto va donde está la fiesta? Siempre, eso siempre, siempre

00:09:30

Venga Marco

00:09:32

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

00:09:41

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

00:09:53

Ahorita para no tomarnos tanto más tiempo pues vamos a hacer la misma animación

00:09:59

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

00:10:19

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

00:10:33

Si, tienes razón, bueno me falta eso añadir, si tiene que ser objeto inteligente

00:10:38

Vale, ya tienes el primero, ahora vete al final del clip y dale al rombito de transformar

00:10:45

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

00:10:57

Tienes toda la razón, si es por el clip

00:11:00

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

00:11:10

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

00:11:29

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

00:11:44

Bueno, ya una vez que tenemos la animación, nos falta exportar ahora así como secuencia de imágenes PNG

00:11:51

Aquí nos vamos a ir a archivo, exportar y viene a interpretar en vídeo

00:11:59

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

00:12:09

Utage, creo que eso le ponen

00:12:11

Ok, aquí nos va a pedir el nombre de archivo fundidor A12, seleccionar carpeta donde la quieran guardar

00:12:18

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

00:12:31

Le damos a interpretar, ahí está exportando y de igual manera acá tengo secuencia PCD donde la guardé y aquí tenemos la secuencia hecho

00:12:45

Ok

00:12:46

Pero no hay que ponerle loop

00:12:49

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

00:13:01

Entonces bueno aquí en foto chufaron 30, me genera el primero, el segundo, el tercero, el cuarto y ya te lo damos

00:13:07

Ahorita vamos al siguiente paso de convertirlo a PNG, ahorita nada más tenemos la secuencia de imágenes de PNG

00:13:16

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

00:13:26

Arrastramos aquí las secuencias imágenes

00:13:30

Aquí nos dice que está leyendo, donde está subiendo la secuencia de imágenes

00:13:36

Nos esperamos un momentito y depende qué tanto pecen las imágenes y la velocidad de internet

00:13:42

Me parece que hemos un sencillo Photoshop que de Vinchila

00:13:47

Sí pues puede ser, digo depende qué es lo que más se te familia dice

00:13:51

Lo que pasa es que en esa pestañita de Fusion te permite 3D, si conoces, ahí donde te parecerá más potente

00:14:03

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

00:14:13

Pero está claro que ahora mismo, yo solo escuchando a Marco, vamos hay un abismo de dificultad entre uno y otro

00:14:22

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

00:14:36

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

00:14:50

Bueno, prosiguiendo acá con el, para convertirlo ya a PNG, ya subimos las imágenes, aquí está

00:15:01

de la parte de la que

00:15:02

carguen en delay time vamos a ver el en cero y aquí en la parte de abajo hay que marcar

00:15:08

esta caecilla que dice donde

00:15:10

está frames Leamos Make a PNG igual se va a tardar un ratito si este es parecido al que

00:15:19

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

00:15:30

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

00:16:03

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

00:16:28

igualmente aquí este le puedes dar este puedes jugar con la velocidad creo que estaba

00:16:33

jugando el otro con la velocidad también aquí te viene frames por segundos ahí está cincuenta nosotros lo hicimos creo que a

00:16:40

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í

00:17:21

se paró Ahí está La parte

00:17:24

la parte incómoda de de cuando genera los tres botones como en tridivista no se no se para nunca tienes que ir ahí

00:17:31

midiendo donde crear el hotspot transparente Esto es

00:17:34

una animación al pinchar ahí es una APNG Sí, mira aquí lo

00:17:38

vamos a ver ya directamente tridivista Ah bueno lo tengo

00:17:42

lo tengo escondido ¿No? Pero viene siendo este Ah, yo aquí

00:17:47

estoy No lo tengo la S Es

00:17:49

lo que enseguidermo aquí Ah

00:17:51

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

00:18:00

sobre ese y ya lo replazas por por la animación Pero más lo

00:18:04

que está bajando ahora es una

00:18:05

única imagen o son tres hotspot una una Es este la animación es

00:18:11

una imagen pero por debajo tengo que ver ahí ahí ahí ahí ahí

00:18:19

ahí ahí o sea realmente está está un hotspot que es el que

00:18:24

va a similar que le está

00:18:25

picando al botón pero están invisibles para que no lo ve el

00:18:29

cliente Ahí está la magia

00:18:30

Sí O sea realmente la la acción

00:18:32

la traen estos hotspot de cuadrados invisibles Este es

00:18:35

solo una animación que no hace

00:18:36

nada de nada más Es vista

00:18:39

Esto está esto está mucho más bonito que lo que he hecho yo

00:18:43

con el ascensor Sí Me

00:18:46

parece que está muy bonito

00:18:48

Pero de ahí pues Pero ya tienes

00:18:49

ahora la opción Exacto

00:18:52

Cada uno es un uso eh Oscar no para mí me ha sorprendido tanto el tuyo como este Este es

00:18:58

porque lo estaba buscando Pero

00:18:59

el otro te ha quedado muy chulo

00:19:01

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

00:19:10

siempre pongo ahí el el típico abajo tipo el de Google que es

00:19:16

un de los que es muy original

00:19:18

Yo el tema está en que yo no

00:19:19

he hecho dentro del ascensor, lo he hecho fuera porque eh hay

00:19:24

que recorrer todo el palacete

00:19:26

claro si tienes que ir eh

00:19:28

buscando el ascensor para llegar es una movida Entonces en la

00:19:34

primera Es que ahí marco

00:19:35

además cuando le da el botón se abre la puerta ¿No? Y ahí se abre la puerta Es que ya eso

00:19:41

ya es otra otra vuelta Es

00:19:45

una de las más técnicas iguales y la única que cambiaba pues

00:19:49

era la de la puerta La de la

00:19:50

puerta Entonces habrá pues se

00:19:51

ha dado otro piso diferente

00:19:52

Podemos ver cuando cuando picas a uno de los tres Podemos ver

00:19:57

la acción Sí esa esa esa fue o

00:20:00

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

00:20:06

Ahí estamos planta alta

00:20:09

Cerramos planta baja O sea, se

00:20:14

ha dado un poco de control

00:20:16

No Ahí sabes lo único que que

00:20:18

le veo para afinar Marcos

00:20:20

Sí, sí, claro dime Juega con

00:20:22

el tema del del punto de vista dinámico para que te coja la

00:20:27

la la misma la misma visualización sí Yo creo que

00:20:30

eso ya vamos ahí los los flipas ya Y ahí sí ya quedaría

00:20:33

al cien Sí En eso sí tienes

00:20:35

razón Muy chulo eh marco

00:20:37

Muy chulo Debra bueno Bueno

00:20:40

y bueno como plus de una vez que ya estamos en la página de

00:20:46

Lumay aquí lo lo utilicé en este tour Ya se ya es como un

00:20:50

plus, ¿No? Este es un museo y les hice un vuelo de dron con el Lumay Entonces tenemos ahí

00:20:56

como un un render, ¿No? De del exterior que este está eh

Transcription