240408 - Creación APNG

00:00:00

Well now that they touched on the subject of elevators, I'll show you right away there's a sample that we're also going to be able to do this with this that I'm going to explain to you, but I remember right now that standing up, I take out the elevator.

00:00:10

Here in this case the elevator, I say the buttons are not well designed, it is just a test but what I did is make a png where the buttons appear, you go to pd the elevator opens equally to any floor but it is another option that we have to make the animated buttons there

00:00:29

Here we are in the program where it starts, here are the different software that they handle within the same program, this time we are going to handle what is editing and merging

00:00:43

Here about editing we are going to, well first of all, here I am going to give you all this documented and if you have any doubts halfway, let me know because I more or less put it together there as I understood it.

00:00:54

Marco, please when you move the mouse can you move it slowly please?

00:01:00

Of course, no problem, I'm going to give this documented.

00:01:05

Here we are going to go to the bottom of the program and on the right side we go to the gear, these are the parameters that your screen will have

00:01:15

So here, how are we going to create a png? I'm going to do it in 500 by 500, but it depends on the size you're going to make your apng.

00:01:26

We're going to save it, I already have my 500 by 500 frame, here I already have a png that I created from those that Mario had given us from Figma, I can say any png really, whatever you want to put in

00:01:40

It's just a matter of dragging and dropping it into the timeline.

00:01:46

There we have the apng created, obviously now I press play and the apng will not do anything to me

00:01:52

The first thing we are going to do is give it the time it is going to last, which in this case we are going to make it only one second, since it is only an animation.

00:01:59

We're going to make a dipto. Sorry, that's da Vinci. This is da Vinci, this is da Vinci Resol, this is its version. Well, I have the studio version, but the free version can be done without any problem.

00:02:17

Well, we stay here on the editing screen and we already have our apng that will last one second of life time.

00:02:28

We are going to go here to the Fusion tab, this is what we should stop, these are the two nodes where it is telling you here, this is the input and what you are seeing is your final output which is this

00:02:41

If you stay on this side, you can see what the entrance and exit are.

00:02:47

In a second here we are going to add a node which is the transformation node.

00:02:53

For here what we are going to achieve in the png is that this same png becomes small and then becomes large, that is what we are going to do but with the same thing that I am going to explain to you, you can make any animation whatever your creativity comes up with.

00:03:07

Pressing on media in one we are going to press this my second, it is chif, the chif key and space

00:03:17

It will open the nodes that you can add, here in this case we are going to add the transform node, transform which is this one

00:03:25

You will add it and it will automatically be linked, if you have this node selected first and you add a new node it will be added right here

00:03:38

In case it comes out here and is not added, there are two ways to do it, you put this little arrow here and you connect it again here.

00:03:48

Ok, that's one way and the other way is given that what we get press and hold chif, grab what is the transform node and put it inside

00:04:00

It's that it becomes like the blue line goes, well from white it goes blue and yellow, that's where it entered, there the node is already inside

00:04:10

Astorita, do we have any questions or are we on the right track? The length of the line doesn't matter.

00:04:18

This has nothing to do with it, you can lengthen it, shorten it, I put teams to have everything closer together.

00:04:26

With nodes and it's like in plugs

00:04:29

Yes, let's say yes, it's like a plug, a kind of snarball of nodes

00:04:34

If anyone was going to speak? No.

00:04:39

Ok

00:04:40

Here we are going to animate this same node.

00:04:46

I don't know if anyone is familiar with K-Frames yet? We're all at a loss.

00:04:51

White, me

00:04:53

White, ok

00:04:54

Yes, sometimes I will give them step by step and at the end I give them a document where everything is step by step and if they have any questions they tell me, also if I go too fast, if you have any questions right now, they can interrupt me without any problem

00:05:10

These are the frames that have this duration, which is 24 frames, which is the duration of the animation in one second.

00:05:16

We'll be here in the first frame.

00:05:17

Hitting transform, this is called the inspector

00:05:24

The inspector is everything that can move that node that you have selected.

00:05:29

So here in the inspector, here we are going to change the size.

00:05:34

Here I'm going to add a node, a K-Frame I call it

00:05:37

Here, when clicking here, I am telling it that in frame 1 it should keep its size at 1%, that is, at 100%, not at scale.

00:05:48

Here, since what we want to do is make it smaller and then bigger, we are going to add a K-Frame in the middle of the second, making it smaller, and at the end of the second, returning it to its original size.

00:05:59

Here this is 24 frames, we go to frame 2, halfway through the timeline

00:06:02

Likewise, here it is no longer necessary to add the K-Frame, when moving here, it is only added, I don't know if you see here that it is painted in red

00:06:12

So I make it a little bit smaller and I go to the end of the frame and I'm going to tell it that at the end of the frame you return to its original size which is 1

00:06:22

There we are at 1

00:06:24

When I press play, I can check it, it is the animation I made

00:06:27

Okay? So far so good? Okay, let's add it. We already have the animation. Now all we need to do is export that animation to an image sequence. We want it to export it in PNG frame by frame, in this case the 23-24 frames.

00:06:46

Let's add another node, choosing transform, we'll give it the same space as the chif to search for the nodes

00:06:53

This one is called, I don't know how to pronounce it, server, saver, this is the one we're going to add

00:07:01

We add this node in the same way as I told you, if you add it outside we give it chif and put it in the middle, or the other way is to add this little arrow here so that they are in the middle

00:07:12

And there we have our animation, this is the media in, the input of the first PNG that I gave it, the transform is the animation that I gave it to make it big and small, the service will help us export all the PNGs and the media outpost is the final output file

00:07:33

So, being in the server we are going to go to fusion, ah, give me a second, I'll skip a piece

00:07:38

Once you have the server, we're going to go here on the right side, there's a tab that says bros, we click bros, that's where we want the options to be saved because we're going to exit

00:07:49

So here I give it da Vinci, here it is important to put it, give it its name, da Vinci and you have to put the extension here, da Vincipng and this is very important, like you have to put alfights so that they port them to you in PNG

00:08:08

We save it, we go here to the top in tools we go to fusion and we go to render our servers

00:08:15

Here we go, there it is generated and that's it, this is what you have to do in da Vinci

00:08:21

Here is the folder where I exported it, da Vinci sequence and here we have the PNGs

00:08:27

So there we have it, I'll pass it to you, well there I'm going from one PNG to another, there's the animation

00:08:33

Ok, in terms of da Vinci this would be all, I don't know if you have any questions about how to animate in da Vinci

00:08:40

Yes, as an aside, the video is 25 frames per second and the APNG or animated GIFs could have 12 or 10 frames per second, they could have less.

00:08:54

How are you using the da Vinci which is video, you have probably ported it to 25 frames per second?

00:08:58

Yes, well here 24 is used more but if you sell Vinci you can give it 4 frames, you want to work on your project

00:09:10

Roberto is coming back very excited from the Castellón festivities

00:09:15

We are still in the midst of festivities, today is San Vicente in Castellón, well in Castellón it is not a holiday, it is a holiday in Almasora

00:09:24

But Roberto goes where the party is? Always, always, always.

00:09:30

Come on Marco

00:09:32

The da Vinci part is everything, it's everything, it's just to give you an idea of how you can generate an animation and export it in a sequence of images.

00:09:41

Let's do this, I mean let's do it in good time, I'm going to explain it, do the same animation in Photoshop, which Photoshop is also open to, so everyone can create whatever animation they want with their creativity.

00:09:53

Now, so as not to take so much more time, we are going to do the same animation.

00:09:59

Generally you open Photoshop, I'm going to appear, here I have my PNG open and you appear the timeline so that the timeline appears you go to tools, we go to window and check the timeline

00:10:19

And here we already have the timeline, very important here, well for this type of effect we are going to use what is, we have two options, timeline and video or create frame animation, this time we are going to make video

00:10:33

Yes, you're right, well I need to add that, if it has to be a smart object

00:10:38

Okay, you already have the first one, now go to the end of the clip and click on the transform diamond

00:10:45

There it is, there we have an animation that doesn't animate anything, but that animation, now you go to the middle and you don't pay attention anymore, you're absolutely right.

00:10:57

You're absolutely right, if it's for the clip

00:11:00

Yes, this is a good tip, I hadn't analyzed it that way and yes, you're no longer arguing about whether it ended up exactly the same size or not.

00:11:10

That's why I say that, the way I explain keyframes is, they are data stores, in this case if we are only going to change it, the transform, the width and height, that is what it will save for us, it saves some values at the beginning, they will be the same at the end

00:11:29

And in the middle, we've made that modification, we memorize it again in a keyframe and in between he says, look, how are we going to change these values? If it's a way, I think 100 is simpler and more accurate because you're not going to get the size wrong anymore.

00:11:44

Well, once we have the animation, we now need to export it as a sequence of PNG images.

00:11:51

Here we are going to go to file, export and it comes to interpret in video

00:11:59

So in English I don't know how it works, but well, they are more or less arranged at the same heights and there must be something about the video, I don't know how it is translated into English.

00:12:09

Utage, I think that's what they put on it

00:12:11

Ok, here it will ask us for the file name A12 foundry, select the folder where you want to save it

00:12:18

And here the only important thing is that it is PNG and give me another second, all the frames must be selected, I think that comes by default

00:12:31

We give it to interpret, there it is exporting and in the same way here I have the PCD sequence where I saved it and here we have the sequence done

00:12:45

Ok

00:12:46

But you don't have to put a loop on it

00:12:49

No, what it is doing here, I don't know if you can see it there, but what it is doing is just taking a PNG of each frame every frame per second, which in this case is 24

00:13:01

So here in the photo chufaron 30, it generates the first, the second, the third, the fourth and we'll give it to you.

00:13:07

Now we go to the next step of converting it to PNG, right now we only have the sequence of PNG images

00:13:16

We go to any sequence that we have taken, this is the Photoshop Vinchila, it is the same, what we are going to do is the PNG images, make them a sequence in APNG

00:13:26

We drag the image sequences here

00:13:30

Here it tells us that it is reading, where it is uploading the sequence of images

00:13:36

We wait a moment and it depends on how bad the images are and the internet speed.

00:13:42

It seems to me that we have a simple Photoshop that from Vinchila

00:13:47

Yes, it could be, I mean it depends on what your family says most.

00:13:51

What happens is that in that little Fusion tab it allows you 3D, if you know, there where it will seem more powerful to you.

00:14:03

But yes, right now for what we are talking about an icon, I would not complicate things with DaVinci, it is good to know for those of us who know DaVinci, for those of you who want to get into it, because it is very powerful.

00:14:13

But it is clear that right now, just listening to Marco, there is a huge gap of difficulty between the two.

00:14:22

But here for example, I say, the advantage of DaVinci that you can find for example in the Callouts or any animation, there are already many on the web, even if you are offered something of embarrassment, I have embarrassment, look for something and I will pass you the files

00:14:36

They are already made in DaVinci, you no longer have to export as a PNG sequence and you already have the animation done, that is, you don't have to create it from scratch, that's the advantage, there is a lot of DaVinci material done

00:14:50

Well, continuing here with it, to convert it to PNG, we already uploaded the images, here it is

00:15:01

from the part of which

00:15:02

load in delay time we will see it at zero and here at the bottom you have to mark

00:15:08

this little cap that says where

00:15:10

is frames Let's read Make a PNG it might take a while if this one is similar to the one

00:15:19

taught eh Mario there are there are several to do them I say in this case I know this but but there are several it is the shame of what is going to be done

00:15:30

program of these good ones eh export it already like this if it is paid this one no this is free this is free David is free and Photoshop is paid and here we have the preview of the PNG we are going to save it in this case it goes directly to downloads and there we have the 3D seen nothing more to send it to call and see that it works but already

00:16:03

with that you shouldn't stop any problem let's go here to hotspot we're going to add one of downloads it went was this two and forty-five three and a little more of the extra APNG working that

00:16:28

Likewise here you can give this one, you can play with the speed, I think it was

00:16:33

playing the other one with the speed also here you get frames per second there is fifty we did it I think that

00:16:40

thirty this this says if you give it more then it's going to look taller right? But there you play with the speed of the wall for my part I don't know if you have any doubts about it brilliant here here it is I don't know if you can read it Okay? Here is where the mouse is take it off to see here it doesn't preview it no no up to up to already this up to create the the previous no good yes up to create the tridivist right? Yes Trac and there

00:17:21

He stopped There is the part

00:17:24

The awkward part of when it generates the three buttons like in tridivisivo, I don't know, it never stops, you have to go there

00:17:31

measuring where to create the transparent hotspot This is

00:17:34

an animation when clicking there is an APNG Yes, look here it is

00:17:38

Let's see now directly tridivist Ah well I have it

00:17:42

I have it hidden, right? But it's becoming this Ah, me here

00:17:47

I am I don't have it the S Is

00:17:49

what's next here Ah

00:17:51

Well, I'll wait for you there, from there you measure it to see where it falls, where it falls, where it falls, but Guillermo says, well, export the penis that's there, eh, son, work

00:18:00

about that and you replace it with animation But more

00:18:04

that is going down now is a

00:18:05

single image or are there three hotspots one by one Is this the animation?

00:18:11

an image but underneath I have to see there there there there there

00:18:19

there there, that is to say, there really is a hotspot which is the one that

00:18:24

It's going to be similar to what it is

00:18:25

by pressing the button but they are invisible so that the user does not see it

00:18:29

client That's where the magic is

00:18:30

Yes, that is really the action.

00:18:32

These invisible square hotspots bring it to you. This is

00:18:35

just an animation that doesn't do anything

00:18:36

nothing else It is seen

00:18:39

This is much prettier than what I did.

00:18:43

with the elevator Yes Me

00:18:46

it seems to be very pretty

00:18:48

But from there, well, But you already have

00:18:49

now the Exact option

00:18:52

Each one has a use, eh Oscar, no, for me yours has surprised me as much as this one. This is

00:18:58

because I was looking for it But

00:18:59

the other one looks really cool

00:19:01

I actually don't think about a hotspot for a multi-story apartment and that's very original, these ideas, no, I hadn't thought about this.

00:19:10

I always put the typical one below like the one from Google that is

00:19:16

one of the most original

00:19:18

The thing is that I don't

00:19:19

I've done it inside the elevator, I've done it outside because eh there is

00:19:24

to go through the entire palace

00:19:26

Of course, if you have to go, eh?

00:19:28

looking for the elevator to get there is a hassle. Then in the

00:19:34

First, that's where the mark is

00:19:35

Also when you press the button the door opens, right? And then the door opens. That's it.

00:19:41

It's another round. It's another round.

00:19:45

one of the most technically equal and the only one that changed because

00:19:49

It was the one at the door The one at the

00:19:50

door Then there will be then

00:19:51

has given another different floor

00:19:52

We can see when you bite one of the three We can see

00:19:57

the action Yes that that that was or

00:20:00

be the peak for example we are going to sorry I haven't seen it, I haven't seen it, I haven't seen it The screen is up

00:20:06

There we are upstairs

00:20:09

We close the ground floor. That is,

00:20:14

has given a little control

00:20:16

No. There you know the only thing that

00:20:18

I see you to fine-tune Marcos

00:20:20

Yes, yes, of course tell me Play with

00:20:22

the topic of the dynamic point of view so that you get the

00:20:27

the same the same visualization yes I think that

00:20:30

That's it, we're going there, you're going to freak out, and that's it.

00:20:33

One hundred percent Yes In that you do have

00:20:35

reason Very cool eh marco

00:20:37

Very cool Debra good Good

00:20:40

And well, as a bonus, since we are already on the page of

00:20:46

Lumay here I used it on this tour I already know it's like a

00:20:50

Plus, right? This is a museum and I took a drone flight with the Lumay. So we have it there.

00:20:56

like a render, right? From the outside that this one is, eh?

Transcription