GUI Color tweening with button click?
Hello, I was wondering how to make a GUI tween color with a click of a button?
3 answers
There is no such thing as "tween color". Guis do not have color objects, only labels, boxes and buttons do. Here is what you would be looking for:
1 | gui = script.Parent -- TextLabel, not an actual Gui |
2 | function onClick() |
3 | gui.BackgroundColor3 = Color3.new(43,99,3) |
4 | end |
5 | gui.MouseButton1Down:Connect(onClick) |
2
You need to learn how to tween stuff.
I'd learn about it from Eppobot or AlvinBlox.
If you'd like yours truly to teach you how to do the button thing (and possibly about tweening), here you go...
So first, you get the service. You can do:
1 | local TweenService = game:GetService("TweenService") |
Then, you should define the TweenInfo (you can learn about different easing styles here):
1 | local transitionInfo = TweenInfo.new(0.5, Enum.EasingStyle.Back) |
Now, the action. First, call a function for when the button gets clicked:
1 | script.Parent.MouseButton1Click:Connect(function() |
2 |
3 | end) |
Then, you can make the tween:
1 | script.Parent.MouseButton1Click:Connect(function() |
2 | local tween = TweenService:Create(guiObject, transitionInfo, {BackgroundColor = Color3.fromRGB(255, 128, 0)}) |
3 | end) |
Now, play the tween:
1 | script.Parent.MouseButton1Click:Connect(function() |
2 | local tween = TweenService:Create(guiObject, transitionInfo, {BackgroundColor = Color3.fromRGB(255, 128, 0)}) |
3 | tween:Play() |
4 | end) |
Here's the full code (please note that I need you to replace "guiObject" with the GuiObject you'd like to tween):
1 | local TweenService = game:GetService("TweenService") |
2 | local transitionInfo = TweenInfo.new(0.5, Enum.EasingStyle.Back) |
3 |
4 | script.Parent.MouseButton1Click:Connect(function() |
5 | local tween = TweenService:Create(guiObject, transitionInfo, {BackgroundColor = Color3.fromRGB(255, 128, 0)}) |
6 | tween:Play() |
7 | end) |
You have just made a beautiful animation with TweenSerivce. Congrats!
If you encounter a problem or this doesn't work, just let me know. Bye!
You can tween a Color3 value using TweenService or Color3:lerp(). I suggest you read up on them. I have provided you with how to use both:
Here's an example on how to do Color3 linear interpolation (lerp):
1 | local colour = Color3.new(1,1,1) -- This is equivalent to Color3.new(255/255, 255/255, 255/255) |
2 | local gui = script.Parent -- Let's say this is a frame |
3 | wait(2) |
4 |
5 | for i = 1, 10 do |
6 | gui.BackgroundColor3 = gui.BackgroundColor3:lerp(colour, i/10) |
7 | wait(.1) |
8 | end |
Here's how you can use TweenService:
1 | local gui = script.Parent |
2 | local ts = game:GetService('TweenService') |
3 | local tween = TweenInfo.new(1, 'Linear', 'Out') -- You should read up on TweenInfo.new |
4 | local t = ts:Create(gui, tween, {BackgroundColor3 = Color3.new(1,1,1)}) |
5 |
6 | t:Play() |