And apologies here, if I start moving a little bit quicker, I want to make sure I get this in under 20 minutes, which is the required amount of time I gotta get this video in. So with that, I just collapsed my portrait background here by clicking this little triangle to give me some more space to work. Make sure your timeline is set back here to zero seconds, you've got your HUD left intro animation selected. Next, select your health background. And the thing we want to change about this first is going to be our position x. I'm going to click this button right here, but before I do, I actually want to change the default position for this. I don't want it to be to 10 by default, I'm going to change it to be negative 500.

Like so. So it's gonna be starting off on the left hand portion of the screen. I'm going to change all of its default parameters right away. So negative 500. for that position x, under the color and opacity, I'm going to change that a value to be zero. And anything else I want to change about this? No, so those are going to be the two.

So timeline at zero, gonna change our position x here over time, so click right here to add a keyframe for this. And you can see our health background widget has been added to our timeline. I'm going to open up this triangle right here to reveal our left which is equal to position x, negative 500, negative 500. So at a time of zero, we do want our value to be negative 500. I'm going to next set a key at point two five seconds, click right here to add a keyframe and I'm going to change the value of left here to still be negative 500. Then I'm going to move our time Line slider over 2.55 seconds, we're going to add another key value of this one I'm going to change to be to 10.

And hopefully you're you're catching on to my workflow here, moving the timeline slider here now to 1.5 seconds clicking to add a keyframe for the left property. And here too, I'm going to leave it at 210. So you can see how that's going to kind of slide in from the side. Okay, next I'm going to move our timeline slider back to the zero second mark. Let's come under the Details panel. Find our color and opacity and let's change this a value over time.

The alpha value, so clicking this little drop down triangle to reveal that so at zero seconds, I want that to be zero. Key two, I'm going to set to be point two five seconds click right here to add a key I'm going to leave that at zero seconds, then I'm going to move it over 2.55 seconds, we're going to add a another key here, I'm going to change a value to be 1.0. So now you can see that element, that widget. last key, moving the timeline slider all the way to 1.5. I'm going to click this plus button, and I do want that a value to be 1.0. So you can see that it's going to slide in from the side and also sort of fade in as well.

Here too, I want to highlight all these keys. So left click right about here in drag to highlight them all. I'm going to right click on any one of them and I'm going to change their key interpolation to be linear. So it's not going to do that little bit of bounce when it slides in from the side. So that's what we got so far. Just scrubbing through left and right.

Okay, I'm gonna collapse this now. And our next element here that we We are going to be animating is going to be our health meter itself. So you got HUD left intro selected health meter, select that next. And the properties that we're going to change about this one are going to be the position x, as well as the opacity. Again, before I add this to our timeline down here, I'm going to change the default position of our position x here is not going to be to 30 anymore. I'm going to change this to be negative 500.

And scrolling down under the style section, not under the style section. Where am I looking for this one? Aha, the appearance fill color and opacity right here. I'm gonna change this to be zero by default. Excuse me. Okay, and then with all that done, scroll back up to the top.

And I'm going to select our position x little button right here to add a key for this to our timeline. And you can see now our health meter has been added to our HUD left intro. You can expand this out. So at zero seconds, we want the left value to be negative 500. Moving 2.25 we're going to click on our plus button right here. We're going to leave that at negative 500.

Moving the timeline slider over 2.55 adding a another keyframe. We're going to change this one to be 230. Sliding that in moving the timeline slider out to one and a half seconds clicking this plus button, we're going to also leave that at 230. Now let's move our timeline slider all the way back to the beginning. That's good. Let's change our filler build color.

And opacity a value. So, timeline center back to the zero second mark. Click this button right here to add a key for our alpha. There is our fill color and opacity settings. Currently, our a value at time zero is also zero, which we want. Let's move our timeline slider 2.25 seconds, add a key, leave that value at 0.0.

Next, we're going to move the timeline slider 2.55 seconds. Let's change the A here to be one. And then we're also going to slide this all the way over to 1.5 seconds and add a key for this to ensure that that is one as well. Let's left click select all of these and I am also going to then right click to set the key interpolation for this to be linear as well. So now you're starting to see our intro animation. Come to four tuition is all starting to come together.

Just a couple more HUD elements to animate here are portrait and this numerical value. Let's collapse our health meter here. I am going to select our health current, this numerical value. Next. And with that, I'm going to come over in the Details panel and change out some of the default values. The position y here, I'm going to change that from being 40 to negative 100.

That's going to be the new default for that. And I'm going to change the scale setting for this. So scrolling down and find scale. I'm going to change the default for this to be zero in the X and zero in the y So essentially, you can't see it. Okay, so make sure your timeline sliders back at the zero second mark. I'm going to click on our position Y button right here to add a keyframe for that We've added our health current widget to our timeline gonna expand out this triangle.

So the zero second mark, I do want the top value here, which is the equivalent to position y to be negative 100. Now I'm going to move our timeline slider all the way to point eight five seconds, add a keyframe and the value I want for this is going to now be 40. When it was before, move our timeline slider back to the zero second mark. Let's come find those scale settings. There they are plus button right there. expand this out expand up the scale settings.

And at the zero second mark, I do want them to be zero as the point five five second mark, I'm going to add some keyframes for these and I'm going to also want them to be zero. Then let's move the time on slider 2.7 seconds, add some keys for this and here. I'm going to change the x and y to be 1.5, not 15 1.5 and 1.5. Then I'm going to move the timeline slider out 2.8 by five, add keys for our X and Y scale. And here I'm going to set the value to be x one and whoops x one and y one so you can see how that's gonna be popping into view, right? You got a little play button here if you want to see what that's gonna look like.

Okay, now I actually do want to set these two be linearly interpolated as well. So I'm just going to left click right here, highlight all of them. Then I'm going to right click and set the key interpolation to be linear for those as well. Okay, one more series of a want to say animations here to go for this HUD left intro animation. So I collapse that series, right, they're going to move our timeline slider all the way back to zero seconds. And we want to modify our portrait picture next.

For this one, I only want to change the opacity of it over time. So come over in the Details panel, and I want to find our color and opacity settings. I'm going to click the plus button right here. Actually, before I click that plus button here to I'm going to change the default in the color and opacity a value to be zero. Then I'm going to click right here to add a keyframe for this. You can see that our portrait pic has been added to our timeline, expanding out the properties here.

So at time zero, I do want the a value to be zero. Moving the timeline slider to half a second I'm going to click this plus button to add a keyframe for that property. Setting the value to be zero as well. And then going to be moving the timeline slider all the way out to one and a half seconds, setting our a value here to be one. So let's play this back moving the timeline slider all the way back to the zero second mark. If I now hit the play button down here you can see how that's all going to come together when it slides in.

Looks pretty nice, right? All right, with that, make sure that you have saved everything. This won't actually appear like that just yet. If you were to click the play button, we actually need to tell our game to play this animation. That will be upcoming soon, but in our next video, we're going to work on creating an animation for animating the right side of our HUD elements. We will see you guys in the next video.