Scripting Helpers is winding down operations and is now read-only. More info→
Ad
Log in to vote
0

GUI Color tweening with button click?

Asked by 6 years ago

Hello, I was wondering how to make a GUI tween color with a click of a button?

3 answers

Log in to vote
0
Answered by 6 years ago

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:

gui = script.Parent -- TextLabel, not an actual Gui
function onClick()
    gui.BackgroundColor3 = Color3.new(43,99,3)
end
gui.MouseButton1Down:Connect(onClick)
2
I think he'd like to actually TWEEN something for a beautiful animation, not just instantly change the color :/ Fireorius 51 — 6y
Ad
Log in to vote
0
Answered by 6 years ago

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:

local TweenService = game:GetService("TweenService")

Then, you should define the TweenInfo (you can learn about different easing styles here):

local transitionInfo = TweenInfo.new(0.5, Enum.EasingStyle.Back)

Now, the action. First, call a function for when the button gets clicked:

script.Parent.MouseButton1Click:Connect(function()

end)

Then, you can make the tween:

script.Parent.MouseButton1Click:Connect(function()
    local tween = TweenService:Create(guiObject, transitionInfo, {BackgroundColor = Color3.fromRGB(255, 128, 0)})
end)

Now, play the tween:

script.Parent.MouseButton1Click:Connect(function()
    local tween = TweenService:Create(guiObject, transitionInfo, {BackgroundColor = Color3.fromRGB(255, 128, 0)})
    tween:Play()
end)

Here's the full code (please note that I need you to replace "guiObject" with the GuiObject you'd like to tween):

local TweenService = game:GetService("TweenService")
local transitionInfo = TweenInfo.new(0.5, Enum.EasingStyle.Back)

script.Parent.MouseButton1Click:Connect(function()
    local tween = TweenService:Create(guiObject, transitionInfo, {BackgroundColor = Color3.fromRGB(255, 128, 0)})
    tween:Play()
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!

Log in to vote
0
Answered by
Rare_tendo 3000 Moderation Voter Community Moderator
6 years ago

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):

local colour = Color3.new(1,1,1) -- This is equivalent to Color3.new(255/255, 255/255, 255/255)
local gui = script.Parent -- Let's say this is a frame
wait(2)

for i = 1, 10 do
       gui.BackgroundColor3 = gui.BackgroundColor3:lerp(colour, i/10)
       wait(.1)
end

Here's how you can use TweenService:

local gui = script.Parent
local ts = game:GetService('TweenService')
local tween = TweenInfo.new(1, 'Linear', 'Out') -- You should read up on TweenInfo.new
local t = ts:Create(gui, tween, {BackgroundColor3 = Color3.new(1,1,1)})

t:Play()

Answer this question