Welcome back everyone in this video, our goal is to create a starburst animation inside of our w BP HUD to indicate to the user that a black magic selection has occurred. So we've got the functionality hooked up to select and slot in a black magic onto our hood. Now I just want to add a little bit of visual flair to make that more clear to the user. Let's come under our content Metroidvania widgets folder, find your W BP HUD. And let's double click on that to open it up. And what I'm talking about here is way up in the upper right here.
Hiding behind some of our other widgets. We have this be magic Starburst piece of art that looks something like this. And what we're going to do is once the user has slotted in a black magic skill of their choosing, we're going to play an animation here so that this kind of flares out from behind this piece of art to help indicate to the user that they have made a change. So let's come on to our animations. And let's create a brand new animation. Let's call this animation be magic slotted, like so.
And then let's select this animation. So we have a brand new fresh timeline down here. Let's take our timeline slider here and move it all the way back to the zero second mark. And the thing that I obviously want to animate here is going to be our B magic Starburst. So make sure you've got that selected. And then what we're going to do is over in the Details panel, we're going to scroll down until we find our transform section or render transform section.
And what we're going to change over time here is well both the rotation and the scale a little bit. So let's deal with rotation first, and then we'll deal with scale next. So Let's take are not the not the skill, the translation of this rather sorry, not the translation, the angle of this, what am I thinking the angle of this, we're going to add a keyframe for this. And now we can see it down on our timeline here. Let's, let's expand out our rotation and our scale as well. So something to note here rotation angle, that's this angle right here.
So at a time of zero, the value is going to be zero. Then we're going to set in another timeline at the one second mark right about there. And I'm going to click to add another keyframe for this. At the one second mark. I'm going to change the value our angle here to be 360. So we're essentially going to make this Starburst here this piece of art right here rotate in a circle, one time 360 degrees.
Okay, next, let's move our timeline slider back to the zero second mark. You can actually see that rotating like that as I scroll Get back and forth. We were timeline slaughter back to the one second mark. Let's add some scale keys. So coming under my Details panel, let's come under scale, I'm going to click the little plus button here to add some keys right down here at the zero second mark. And at the zero second mark, I want the x and y both to be one like they are now I'm going to move our timeline slider now to the half a second mark.
Here, I'm going to set the x and y to be four and four respectively, so much larger. And then I'm going to set a another key for this at the one second mark. Let's create some more keys for this to one and one. Now, we currently can't see anything just yet. In fact, if I play this now there's nothing calling for this animation to happen. But that's all we wanted to accomplish in this one was simply to make an animation for this.
So without further ado, let's Compile and Save. That'll do it all for this video guys see you in the next one where we get this functional