• 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. .
• 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 .
• 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 .
• 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. .
• Marco, please when you move the mouse can you move it slowly please? .
• Of course, no problem, I'm going to give this documented. .
• 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 .
• 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. .
• 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 .
• It's just a matter of dragging and dropping it into the timeline. .
• There we have the apng created, obviously now I press play and the apng will not do anything to me .
• 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. .
• 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. .
• Well, we stay here on the editing screen and we already have our apng that will last one second of life time. .
• 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 .
• If you stay on this side, you can see what the entrance and exit are. .
• In a second here we are going to add a node which is the transformation node. .
• 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. .
• Pressing on media in one we are going to press this my second, it is chif, the chif key and space .
• 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 .
• 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 .
• 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. .
• 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 .
• 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 .
• Astorita, do we have any questions or are we on the right track? The length of the line doesn't matter. .
• This has nothing to do with it, you can lengthen it, shorten it, I put teams to have everything closer together. .
• With nodes and it's like in plugs .
• Yes, let's say yes, it's like a plug, a kind of snarball of nodes .
• If anyone was going to speak? No. .
• Ok .
• Here we are going to animate this same node. .
• I don't know if anyone is familiar with K-Frames yet? We're all at a loss. .
• White, me .
• White, ok .
• 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 .
• These are the frames that have this duration, which is 24 frames, which is the duration of the animation in one second. .
• We'll be here in the first frame. .
• Hitting transform, this is called the inspector .
• The inspector is everything that can move that node that you have selected. .
• So here in the inspector, here we are going to change the size. .
• Here I'm going to add a node, a K-Frame I call it .
• 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. .
• 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. .
• Here this is 24 frames, we go to frame 2, halfway through the timeline .
• 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 .
• 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 .
• There we are at 1 .
• When I press play, I can check it, it is the animation I made .
• 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. .
• Let's add another node, choosing transform, we'll give it the same space as the chif to search for the nodes .
• This one is called, I don't know how to pronounce it, server, saver, this is the one we're going to add .
• 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 .
• 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 .
• So, being in the server we are going to go to fusion, ah, give me a second, I'll skip a piece .
• 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 .
• 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 .
• We save it, we go here to the top in tools we go to fusion and we go to render our servers .
• Here we go, there it is generated and that's it, this is what you have to do in da Vinci .
• Here is the folder where I exported it, da Vinci sequence and here we have the PNGs .
• 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 .
• 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 .
• 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. .
• How are you using the da Vinci which is video, you have probably ported it to 25 frames per second? .
• 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 .
• Roberto is coming back very excited from the Castellón festivities .
• 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 .
• But Roberto goes where the party is? Always, always, always. .
• Come on Marco .
• 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. .
• 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. .
• Now, so as not to take so much more time, we are going to do the same animation. .
• 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 .
• 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 .
• Yes, you're right, well I need to add that, if it has to be a smart object .
• Okay, you already have the first one, now go to the end of the clip and click on the transform diamond .
• 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. .
• You're absolutely right, if it's for the clip .
• 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. .
• 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 .
• 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. .
• Well, once we have the animation, we now need to export it as a sequence of PNG images. .
• Here we are going to go to file, export and it comes to interpret in video .
• 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. .
• Utage, I think that's what they put on it .
• Ok, here it will ask us for the file name A12 foundry, select the folder where you want to save it .
• 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 .
• 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 .
• Ok .
• But you don't have to put a loop on it .
• 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 .
• So here in the photo chufaron 30, it generates the first, the second, the third, the fourth and we'll give it to you. .
• Now we go to the next step of converting it to PNG, right now we only have the sequence of PNG images .
• 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 .
• We drag the image sequences here .
• Here it tells us that it is reading, where it is uploading the sequence of images .
• We wait a moment and it depends on how bad the images are and the internet speed. .
• It seems to me that we have a simple Photoshop that from Vinchila .
• Yes, it could be, I mean it depends on what your family says most. .
• 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. .
• 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. .
• But it is clear that right now, just listening to Marco, there is a huge gap of difficulty between the two. .
• 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 .
• 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 .
• Well, continuing here with it, to convert it to PNG, we already uploaded the images, here it is .
• from the part of which .
• load in delay time we will see it at zero and here at the bottom you have to mark .
• this little cap that says where .
• is frames Let's read Make a PNG it might take a while if this one is similar to the one .
• 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 .
• 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 .
• 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 .
• Likewise here you can give this one, you can play with the speed, I think it was .
• playing the other one with the speed also here you get frames per second there is fifty we did it I think that .
• 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 .
• He stopped There is the part .
• 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 .
• measuring where to create the transparent hotspot This is .
• an animation when clicking there is an APNG Yes, look here it is .
• Let's see now directly tridivist Ah well I have it .
• I have it hidden, right? But it's becoming this Ah, me here .
• I am I don't have it the S Is .
• what's next here Ah .
• 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 .
• about that and you replace it with animation But more .
• that is going down now is a .
• single image or are there three hotspots one by one Is this the animation? .
• an image but underneath I have to see there there there there there .
• there there, that is to say, there really is a hotspot which is the one that .
• It's going to be similar to what it is .
• by pressing the button but they are invisible so that the user does not see it .
• client That's where the magic is .
• Yes, that is really the action. .
• These invisible square hotspots bring it to you. This is .
• just an animation that doesn't do anything .
• nothing else It is seen .
• This is much prettier than what I did. .
• with the elevator Yes Me .
• it seems to be very pretty .
• But from there, well, But you already have .
• now the Exact option .
• Each one has a use, eh Oscar, no, for me yours has surprised me as much as this one. This is .
• because I was looking for it But .
• the other one looks really cool .
• 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. .
• I always put the typical one below like the one from Google that is .
• one of the most original .
• The thing is that I don't .
• I've done it inside the elevator, I've done it outside because eh there is .
• to go through the entire palace .
• Of course, if you have to go, eh? .
• looking for the elevator to get there is a hassle. Then in the .
• First, that's where the mark is .
• Also when you press the button the door opens, right? And then the door opens. That's it. .
• It's another round. It's another round. .
• one of the most technically equal and the only one that changed because .
• It was the one at the door The one at the .
• door Then there will be then .
• has given another different floor .
• We can see when you bite one of the three We can see .
• the action Yes that that that was or .
• 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 .
• There we are upstairs .
• We close the ground floor. That is, .
• has given a little control .
• No. There you know the only thing that .
• I see you to fine-tune Marcos .
• Yes, yes, of course tell me Play with .
• the topic of the dynamic point of view so that you get the .
• the same the same visualization yes I think that .
• That's it, we're going there, you're going to freak out, and that's it. .
• One hundred percent Yes In that you do have .
• reason Very cool eh marco .
• Very cool Debra good Good .
• And well, as a bonus, since we are already on the page of .
• Lumay here I used it on this tour I already know it's like a .
• Plus, right? This is a museum and I took a drone flight with the Lumay. So we have it there. .
• like a render, right? From the outside that this one is, eh? .