Download

Fade a widget

Hi all…
When i have to close a widget i set remove from parent ecc ecc…
And if i want to fade? For example fade the widget?

I use UMG Animation. Starting at animation Timeline 0, set Alpha Value (in the Color and Opacity) to 1, set a animation Key, move to desired Timeline duration (I use 1.2 Second = .5), set the Alpha Value to 0, set another animation Key. Animate with the PlayAnimation BP Node Forward, to fade in, play the animation in Reverse.

I use UMG Animation. Starting at animation Timeline 0, set Alpha Value (in the Color and Opacity) to 1, set a animation Key, move to desired Timeline duration (I use 1.2 Second = .5), set the Alpha Value to 0, set another animation Key. Done. I animate with the PlayAnimation BP Node Forward, to fade in, play the animation in Reverse.

i don’t understand can you send me screen or something of this? Sorry or the inconvenience but i’m new to all this

[Example: Animated Main Menu

Below are two example animations used to mimic a simple Main Menu screen where Buttons fly in from the bottom of the screen and a Start Button blinks. After following the steps, you should end up with something similar to the example below.
This example is for demonstrating how to set up animation in UMG only as the Buttons do not do anything when clicked on.](https://docs.unrealengine.com/latest/INT/Engine/UMG/UserGuide/Animation/index.html)
[ol]
[li]Set up your Main Menu however you see fit and include a Vertical Box containing Buttons on your screen.https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation1.jpgClick image for full view. [/li][li]Click the New button in the Animations window and give the Animation a name such as StartAnimation.[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation2.jpg

[li]Click the Auto Key button in the Timeline Window (the name of your Animation should also appear in the Timeline).[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation3.jpg

[li]Move the Timeline Bar to 0.00 on the Timeline, then click on the Vertical Box containing your Button. [/li][li][Holding Control, click in the center of the Medallion Widget (green arrow) and drag the Vertical Box off screen (1).[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation4.jpg

This will add Keyframes for the current location on the Timeline (2).](https://docs.unrealengine.com/latest/INT/Engine/UMG/UserGuide/Animation/index.html)
[li]In the Details panel for the Vertical Box, click Anchors and select the Bottom Center option.[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation3b.jpg

[li]Move the Timeline Bar to 1.00 then holding Control, click and move the Vertical Box up so it is fully visible. [/li][li]In the Details panel for the Vertical Box, click Anchors and select the Center option.[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation4b.jpg

[li][In the Animations window, click the New button to add another animation called BlinkingButton.[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation9.jpg

Make sure that Auto Key is not checked.](https://docs.unrealengine.com/latest/INT/Engine/UMG/UserGuide/Animation/index.html)
[li]Move the Timeline Bar to 1.00 and click on your Start Button so it is selected. [/li][li]Under the Appearance section in the Details panel, click the Add Key button next to Background Color.[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation10.jpg

[li]Move the Timeline Bar to 2.00 then change the color for Background Color and add another Keyframe.[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation11.jpg

[li]The Timeline should now look like below for the BlinkingButton animation.[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation12.jpg

[li][Click the Graph tab, then drag in both animation variables and create the graph below.[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/Animation13.jpg

Here we are saying when the Widget Blueprint is constructed, play the Start Animation (our Buttons flying in from the bottom of the screen). We are then using the Set Timer node to call a Custom Event called StartBlinking every 2 seconds (the Set Timer node is set to Looping). Our StartBlinking Custom Event then plays the Blinking Button animation every 2 seconds (which is our color shift over time from white to green for our Start Button).](https://docs.unrealengine.com/latest/INT/Engine/UMG/UserGuide/Animation/index.html)
[li][Finally, create the Widget Blueprint from either the Level Blueprint or your playable Character Blueprint.[/li]
https://docs.unrealengine.com/latest/images/Engine/UMG/UserGuide/Animation/AnimationCreateWidget.jpg

In our MyCharacter Blueprint, we are creating the Widget containing the animations and UI layout of our Main Menu and adding it to the viewport by using the Add to Viewport node.](https://docs.unrealengine.com/latest/INT/Engine/UMG/UserGuide/Animation/index.html)
[/ol]

thanks ;D I love this forum :smiley:

Hey TechLord, thanks for creating and sharing this awesome tutorial. :slight_smile:

I did NOT create the tutorial, its in the Official UE4 Documentation. I highlighted the entire post as a hyperlink. UE4 Documentation is your friend.

I did NOT create the tutorial, its in the Official UE4 Documentation. UE4 Documentation is your friend.

Hmm, I didn’t know about UMG animations, when I faded my logo screen, I just used a custom count down that slowly faded it away. Animation could save some code room thanks for that info TechLord.

One things to note, My logo screen is not a standalone widget it is an image within the main menu widget. But here is my fade count down.

f37cd4f1363ca19134a4a25ee657b1751461c18b.png

Thanks to all i solve :smiley: