All right, welcome back everybody in the last video, we created a notify here a little notification message for when we are going to be able to interact with something. In this video, our goal is to create an animation to bring on this w BP notify in an eye pleasing manner because it would seem a little weird to just kind of have this pop into existence. Not very exciting, and we wouldn't really learn about Widget Blueprint animations. So let's create an animation for this. If you took a break between videos and don't remember how to get back to where we were, I am currently in the content Metroidvania widgets folder, and we are right here in web p notify. So open that guy up.

And this is where we left off. In the lower left hand portion of the Widget Blueprint Designer tab we're going to create a new animation so click that green Plus animation button. We're going to call this animation intro. It's going to be our intro animation. Okay, with that selected, what do I want to change here? Well, I want to change our background black.

I'm going to change several things here, but I'm going to start with my background black. So select that guy. Then over in the Details panel, one of the properties I want to change about it is its color and opacity right here. Now, I am going to change the default values for these now to be something else, I have the values what I have them at right now so that you could see where this message is going to appear on screen, and what it's going to look like when this animation is finished. With that done though, I'm going to change the default values for the very beginning point of their animation. So with black background, black selected, come over to the Details panel under color and opacity and we're going to change this a value here.

To now be zero, so you're not going to see one of those black backgrounds. Okay, then I'm going to click right here to add a keyframe for that property to our timeline. And I'm going to bring this on up a little bit, try to maximize our screen real estate like so. Okay, and with our color and opacity expanded out here, so at the zero second mark, I do want that a value there to be zero, meaning you can't see it at a time of point three, I'm going to add another key and I'm going to set the value to be one. Okay, next I am going to change the x and y scale of this particular widget. So I'm going to set our timeline slider back to the zero second mark.

Scrolling down a little bit in my Details panel background black, there is my scale settings the render transform settings. Let's click right here to actually before we click right here, I'm going to change my default scale to be zero in the X and zero in the Y. Now I'm going to click right here to add keyframes for the scale properties. It's going to add that down to our timeline, expand out the triangle, reveal our scale settings. So at the zero second mark, I want the value to be zero at the point one second mark and you can hold down the Ctrl key and scroll wheel in to expand or squish your timeline. I'm gonna just gonna expand it out here a little bit.

So at the point one second mark, I am going to set some keys, add some keys, the x value I'm going to set to be you One and the y value I'm going to change to be two. Okay and then I'm going to move the time on slider 2.3 seconds I'm going to add some more keys for the scale and I am going to set the value for both of these the x and the y to be one. So you can see how that one black ink there is going to kind of like flare out and then squish back down. Cool, right? Okay, I'm gonna move our timeline solder back to zero seconds. That is enough for background black.

Let's do background Black 180. Maybe I should have called it upside down right. Okay, first thing I'm going to change about this is the default color and opacity. So instead of a value of one here for a I'm going to set that to zero. I'm going to click right here to add the keys keyframe for this property to the timeline down below. So zero seconds, I do want that a value to be zero.

At point three seconds, I'm going to add another keyframe in here, I want that value to be one. Let's go change the x and the y scale. Next I'm going to move the timeline slider all the way back like so, zero second mark. Scroll down in our list of details, there are my scale settings. I'm going to set the default in the x and the y to be zero and zero. And then I'm going to click right here to add a keyframe for that property at time zero.

There are my skill settings. Next, I'm going to go to the point one second mark. I'm going to add some scale keys here I'm going to set the x value to be one point Five and I'm going to set the y to be one. Okay. And then I'm going to set my timeline slider to the point three second mark, add some more keys for the scale. And the x and y here are going to be one as well.

So you kind of get an idea as to what this is going to look like one's going to flare out a little bit more one's going to flare up a little bit more. It's looking pretty cool, right? Okay, I'm going to squish that set of parameters. Let's do our background pink next, like that widget. Here to go scroll up in the Details panel, find our color and opacity settings. I'm going to set that a value to be zero by default.

Then I'm going to click right here to add keyframe for this to our timeline. There's our background pink color and opacity. A value at time zero is also zero. Move that timeline slider 2.3 seconds, add another key for our a alpha value. And here we're going to set the value to be one. And you can see that transition right here from completely transparent to completely opaque.

Moving our timeline slider back to the zero second mark. Scrolling down in our Details panel, let's adjust the scale of this one over time. I'm going to set the x and y to be zero and zero Now by default, we're going to add a keyframe for this property to our timeline there they are transforms scale. So at the zero second mark, x and y are zero. At the point one five second mark, I'm going to add some more scale keys. Here the x scale is going to be going to flip over my page Oh notes.

The X value is going to be 1.5 and the y value is going to be 2.0. You can already see it up there. Then I'm going to move my timeline slider to three tenths of a second, add some more scale keys. x here will be one, and the y will be one as well. Looking pretty good so far, let's collapse these set of parameters. Move that timeline slider back to the zero second mark.

And now let's deal with our button interact widget right. Let's come under the Details panel and find the color and opacity settings for it. gonna set that a value, defaulted back down to zero for the time being. I will click right here to add this to our timeline. There's our button interact color and opacity. A value is zero at time zero.

Let's move The timeline slider to 0.15 add another key and I'm going to maintain that value of zero so I still want it to be zeroed out halfway through. Then with the timeline slider at point three seconds, we're going to add a another key and here the a value is going to be one. So you kind of see how that's going to work it's gonna, all that ink is gonna flare in and then the buttons gonna fade in like so. All right, I got my timeline slider back to the zero second mark. We're going to collapse these properties and let's see we need our message. Let's select our message widget next.

And the first one we are going to deal with here is our color and opacity where is it in here got to scroll up scroll it there it is. appearance, color and opacity. Let's change our a value here is going to be Zero by default. Now, let's add this to our timeline clicking right here. So at the zero second mark, I want the value to be zero for the alpha. Moving the timeline slider 2.3 seconds, we're going to add another keyframe and I'm going to change that value to be one.

And then I'm going to move the timeline slider back to the zero second mark because the next thing I want to change over on the right hand side, I've got to find our scale settings. There they are under render transform. Let's set the default here to be zero and zero in the x and the y. clicking right here to add a keyframe for the scale properties down to our timeline. Did I not click that I don't think I must have missed it. There we go. Okay, expand out our scale properties.

So times zero the value is going to be zero. moving our timeline slider to the halfway point. 0.15 I all I do not want the value to still be zero, but I am going to add more keys. x value here is going to be 1.5. And the y value is going to be 1.5 as well. And then I'm going to move our timeline slider over to three tenths of a second, add some more scale keys.

In here, the x value is going to be one, and the y value is going to be one as well. So backing up our timeline here, I'm just going to collapse everything kind of maximize our screen real estate. I'm going to click right here to move our timeline to the front. And if I click play, you see what that's gonna look like. It's just gonna kind of flare out like that. That's pretty cool, right?

Not too bad. Okay, so no scripting yet. We'll do that when a situation needing for this notification occurs. But with that we can Compile and Save That's all we wanted to accomplish in this one, we now have a notification animation job well done. We'll see you guys in the next video.