How do you make an animated HUD?

I’m trying to make an animated HUD in my game. Basically, I want to show a thumbnail for whatever gadget the player has picked up, on the HUD. The thumbnails all have a little animation, like so.


I have these animations in video format, and I also have the “mask” for it in video format (to remove the black background). I have searched on the forums but I can’t seem to find the solution. If I add an image widget and use the Media Texture on it, I can’t remove the black background (or don’t know how to). Also, every time I close the editor, the media player loses its reference to the video and I have to load it and save it again. Unless I do so, it just displays a blank.
I tried using the media texture in a material (Material Domain : User Interface), but didn’t have any luck. While dragging the media texture in the material BP, the cursor changes to the “not allowed” sign. If I still drag it in though, a blank TextureSample Node is created. Connecting that to “Final Color” does nothing.

I am unsure how to proceed. I’m not even sure if I have the assets in the correct format. Is this sort of thing implemented using animations in video format? If so, how? If not, what format should I have the animations in and how should I proceed from there? I’m stuck, and any help is greatly appreciated. Thanks!

I think you only wasting perframnce using video assets, you can do those animation using UMG animations

…or even better by making animation using material with time node since that animation seems simple

I think so too, that using video files shouldn’t be the appropriate way to do it. Can’t imagine they can be manipulated the way materials and textures can. The thing is though, I don’t know how to do it using UMG animations. From the tutorials I see online, UMG animations can change the position or color gradient and such, but I don’t know how I’d go about creating this “shine/glint” effect. Maybe using materials? I’m not good with those and don’t know where to start. If you could guide me a little further as to what the general setup would be, I’d really appreciate that. I’ve been stuck on it for 2 days now. Thanks!

So I started exploring the stuff in materials, and I think I’ve got it, except for one remaining issue.
This is the way I’ve set it up:

I will use the icon to display for Texture Sample ‘1’. For Texture Sample ‘2’, I’ll use the texture that’s supposed to draw the “shine/glint”. I’ve created a parameter “Effect Displacement” whose value when changed, displaces the texture it is hooked to in the final output, and I believe this could help me achieve what I want. I have two questions now:

  1. Changing the Effect Displacement parameter displaces that texture along both the X and Y axis. I do I displace it along just theX-axis?
  2. Once this setup is done, I’m planning to control/change the Effect Displacement parameter from a bit of code outside that changes its value every tick. Is there a way to do it inside within the material? I tried exploring the Time node but I haven’t figured that out yet.

And, I suppose I have a third question as well - Is this a good way to do it or should I adopt some other approach? It looks simple enough to me to not be a burden on processing times, but I don’t know better when it comes to materials.

Another option is to use flipbooks. Using a series of still images in sequence.