HUD - Animation #4

10 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€93.70
List Price:  €131.19
You save:  €37.48
£80.17
List Price:  £112.24
You save:  £32.07
CA$137.56
List Price:  CA$192.60
You save:  CA$55.03
A$155.17
List Price:  A$217.25
You save:  A$62.07
S$135.98
List Price:  S$190.37
You save:  S$54.39
HK$783.01
List Price:  HK$1,096.25
You save:  HK$313.23
CHF 90.89
List Price:  CHF 127.26
You save:  CHF 36.36
NOK kr1,101.16
List Price:  NOK kr1,541.68
You save:  NOK kr440.51
DKK kr699.21
List Price:  DKK kr978.92
You save:  DKK kr279.71
NZ$168.70
List Price:  NZ$236.19
You save:  NZ$67.48
د.إ367.21
List Price:  د.إ514.11
You save:  د.إ146.90
৳10,942.52
List Price:  ৳15,319.96
You save:  ৳4,377.44
₹8,353.31
List Price:  ₹11,694.97
You save:  ₹3,341.66
RM478.30
List Price:  RM669.64
You save:  RM191.34
₦129,687.03
List Price:  ₦181,567.03
You save:  ₦51,880
₨27,754.24
List Price:  ₨38,857.05
You save:  ₨11,102.81
฿3,676.55
List Price:  ฿5,147.32
You save:  ฿1,470.77
₺3,250.48
List Price:  ₺4,550.80
You save:  ₺1,300.32
B$523.28
List Price:  B$732.62
You save:  B$209.33
R1,903.66
List Price:  R2,665.20
You save:  R761.54
Лв183.15
List Price:  Лв256.41
You save:  Лв73.26
₩137,464.20
List Price:  ₩192,455.38
You save:  ₩54,991.18
₪378.95
List Price:  ₪530.55
You save:  ₪151.59
₱5,720.89
List Price:  ₱8,009.48
You save:  ₱2,288.58
¥15,440.72
List Price:  ¥21,617.62
You save:  ¥6,176.90
MX$1,696.11
List Price:  MX$2,374.63
You save:  MX$678.51
QR363.78
List Price:  QR509.31
You save:  QR145.52
P1,378.02
List Price:  P1,929.29
You save:  P551.26
KSh13,298.67
List Price:  KSh18,618.67
You save:  KSh5,320
E£4,850.08
List Price:  E£6,790.31
You save:  E£1,940.22
ብር5,673.01
List Price:  ብር7,942.45
You save:  ብር2,269.43
Kz83,741.62
List Price:  Kz117,241.62
You save:  Kz33,500
CLP$97,883.21
List Price:  CLP$137,040.41
You save:  CLP$39,157.20
CN¥723.83
List Price:  CN¥1,013.40
You save:  CN¥289.56
RD$5,893.56
List Price:  RD$8,251.22
You save:  RD$2,357.66
DA13,447.21
List Price:  DA18,826.63
You save:  DA5,379.42
FJ$227.04
List Price:  FJ$317.87
You save:  FJ$90.82
Q775.43
List Price:  Q1,085.64
You save:  Q310.20
GY$20,874.74
List Price:  GY$29,225.48
You save:  GY$8,350.73
ISK kr14,084.59
List Price:  ISK kr19,718.99
You save:  ISK kr5,634.40
DH1,011.98
List Price:  DH1,416.82
You save:  DH404.83
L1,789.85
List Price:  L2,505.87
You save:  L716.01
ден5,767.34
List Price:  ден8,074.51
You save:  ден2,307.16
MOP$804.17
List Price:  MOP$1,125.87
You save:  MOP$321.70
N$1,897.84
List Price:  N$2,657.05
You save:  N$759.21
C$3,669.73
List Price:  C$5,137.77
You save:  C$1,468.04
रु13,346.58
List Price:  रु18,685.75
You save:  रु5,339.16
S/375.13
List Price:  S/525.19
You save:  S/150.06
K378.96
List Price:  K530.57
You save:  K151.60
SAR375.09
List Price:  SAR525.14
You save:  SAR150.05
ZK2,519.95
List Price:  ZK3,528.03
You save:  ZK1,008.08
L466.17
List Price:  L652.66
You save:  L186.48
Kč2,369.01
List Price:  Kč3,316.71
You save:  Kč947.70
Ft36,915.02
List Price:  Ft51,682.51
You save:  Ft14,767.48
SEK kr1,089.22
List Price:  SEK kr1,524.96
You save:  SEK kr435.73
ARS$86,913.85
List Price:  ARS$121,682.87
You save:  ARS$34,769.02
Bs690.45
List Price:  Bs966.66
You save:  Bs276.20
COP$391,130.80
List Price:  COP$547,598.77
You save:  COP$156,467.96
₡49,957.95
List Price:  ₡69,943.14
You save:  ₡19,985.18
L2,461.44
List Price:  L3,446.12
You save:  L984.67
₲737,867.79
List Price:  ₲1,033,044.43
You save:  ₲295,176.63
$U3,889.78
List Price:  $U5,445.86
You save:  $U1,556.07
zł405.87
List Price:  zł568.23
You save:  zł162.36
Already have an account? Log In

Transcript

All right, welcome back everyone that last video was going on a little bit too long. So in this video, we are going to continue creating our HUD right intro animation by focusing on these white magic elements right here. So if you took a break between that video in this video, how do you get back here well, over in the Content Browser, find your way to content Metroidvania widgets w b p HUD double click on there. And we were working with this HUD right intro animation. Okay, so continuing where we left off in the last one. This time I am going to select our white magic border that's w magic border widget right here.

And over in the Details panel, I'm going to change we are going to change the position why of this over time. I'm going to The default value here from negative five to negative 238. That is going to jump it up top here. And then I am going to select right here to add a keyframe for that property down to our timeline with our timeline at zero, you can expand these properties out again, position y equates to this top right down here. Why they have different names I'll never know. And so at the zero second mark is set to negative 238.

Let's move our timeline slider over to the nine tenths of a second mark. add a keyframe. The value will stay at negative 238 at that time, gonna move our timeline slider down to 1.2 seconds. And here we're going to add a key with a value set to negative five. Then we're gonna move our timeline slider to one and a half. seconds, add another key and the value here is going to remain at negative five.

Okay, I'm going to collapse this series of parameters for right now, I'm going to kind of slide this up and give us ourselves a little bit more room here starting to get a little tight. I'm going to bring our timeline slider back to the zero second mark. But you know what? Something else I do want to do with our white magic border selected, I just expanded out that triangle. I'm going to left click, drag around all these keys then right click and set the key interpolation there to be linear so it doesn't have that little bounce when it moves on down. Okay, timeline solder back to zero collapsing these parameters.

The next one I want to change is our white magic button widget select that guy. Over in the Details panel, find your way on down to the scale settings here to we're going to set our default settings from one to be 00 in The X and the Y I'm gonna click right here to add keyframes for this property to our timeline. There they are expanding out our triangles. So at the zero second mark, we want them to be zero at the 1.3 second mark, we're gonna add some keys. And we still want the value here to be zero. Coming to the 1.4 second mark can add more keys starting to get good at this by now I bet scale will be 1.5 in the x and the y.

Then we're going to move our timeline slider over to one and a half seconds, add some more scale keys and the value here will be one and one for the x and the y. Just like we've been doing, I'm gonna collapse these series Actually, you know what, let me see what this is gonna look like. You see it's got that little bouncer as well. So let's set some key interpolation for this left click drag, right click, we're going to set our key interpolation here for these to be linear. That's going to be good. moving our timeline slider back to the zero second mark collapsing this set of parameters.

The next one we are going to change is our w match Magic Man accost, select that widget. And here to In the Details panel, we're going to set the scale setting so find your way on down to the render transform scale settings. We will set the new default for the x and the y to be zero and zero. And then we will click right here to add keyframes for this property. There they are, scale. So at the zero second mark, we do want the value to be zero at the 1.3 second mark Right there, we're going to add some more keys, we still want the value to be zero at the 1.4. second mark going to add more keys.

And the value for this is going to be 1.5 and 1.5 in the x and the y, moving our timeline slider over to one and a half seconds, we're going to add more scale keys and the value as you may have guessed in the x and the y will be one and one. All right, you're seeing how this is all coming together. Here too, I want to set these keys left click drag to interpolate linearly so they don't do that weird bounce. Move that time on slider back to the zero second mark, collapse these. We are almost finished with this. So stay with me, we're going to select our white magic overlay.

That's w magic. Overlay and we are going to change do the position y. Currently it's set to 33. I'm going to set the value for this to be negative 200. By default, that's going to jump it up there are a little ways that I'm going to set some keys for this position why so click right here. It adds it down to our timeline.

So at the zero second mark, we want it to be negative 200 at the nine tenths of a second mark going to add another key, I still want it to be negative 200. Jumping to 1.2 seconds, I'm going to add a nother key but the value here is going to be 33 and then moving our timeline slider over to one and a half. Adding another key and the value here can remain at 33 Alright, next one we're going to change. Let's see how this looks. Yeah, you know what I better set these to be linear as well. I will left click and drag, right click linear, so we don't have that weird bounce.

Everything works nicely. All right timeline slider back to the zero second mark. We're going to collapse these. The next one we're going to change is our w magic. Ready? That ready text right up there.

Okay, and when we got a couple more properties, we're going to change here or widgets rather, we are going to come down to the scale settings right click, or sorry, scroll down into the Details panel until you find the scale settings not right click, there's your scale settings. We will set the default to be zero in the x zero in the y click right here to add keyframes for the scale settings down to our timeline. So at the zero second mark, we want the scale to be zero. At the 1.3 second mark, we're going to add some keyframes. And we still want this to the scale to be 00. At 1.4 seconds, however, we're going to add some keyframes and we want the value here to be 1.5.

In the X 1.5 and the Y, move the timeline slider to a second and a half, add some more keyframes and the scale here is going to be one and one in the x and the y. Then here two, I'm going to left click and drag and we will set these to linearly interpolate, have trouble saying that word so apologies on that. Going to move our timeline slider back over to the zero seconds collapsing this series of parameters. And lastly, we're going to select our white magic Starburst, this guy right up here w magic Starburst. come under your Details panel and find the color and opacity settings. I'm going to set this a value here to be a new default of zero that is going to make it disappear.

Now, anything between zero and one makes it semi transparent, right? So I'm going to set it to be zero so I can't see it at all. Then I'm going to add a keyframe for this property down to our timeline. Zero second mark I want that property to be zero. At the 1.2 second mark, we're going to add a keyframe and I still want the value to be zero. And then I'm going to move our timeline slider over to One and a half seconds, add a another keyframe here the value for a, our alpha value is going to be one, like so.

So now I'm gonna jump to the front. And I'm gonna move this down a little bit. We don't need to see all those properties right. And if I click the play button, you can see how our manna information are white and black magic skills are going to animate onto our HUD. That was a lot of work. But guys, that looks pretty, pretty snazzy.

So with that, always make sure you Compile and Save as a good sanity check for anything that you're doing and unreal. That's gonna do it all for this video. We will see you guys in the next one.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.