I’m assuming this belongs to Scripting Support due to image manipulation with scripts, but how do you say, transition from the left one to the right one and vice versa?
Do you mean changing the image?
If so, you can do this:
script.Parent.Image = "rbxassetid://".."yourIDHERE"
This is assuming the script is under an ImageLabel
Nvm. I originally meant something like lerp the colors into what they were supposed to be or whatever.
Do you mean a tween?
You can change the colors using tweening, but I don’t think you can change images.
are you trying to change the colors when you hover over it?
If you want to change between the two images, you can make a script that changes the offset of them.
Well, not immediately. Like, it’ll transition the color from white to orange and back through like a .5 second transition.
The property you’re looking for is ImageColor3 if you’re trying to transition an image to a different color. For your use case, it looks like the image you’re trying to transition to isn’t just one color so I’d recommend transitioning from one image to the other using transparency and overlaying them on top of one another.
And learn how to make it transition using the TweenService. You can set your 0.5 second transition and set the reverse property to true to achieve this. There is a code example at the bottom of the page.
1 Like
Do you mean how long it takes for it to change color because I think thats what you are referring to.
If so then i have made something to make this work.
This might not be what you are looking for though
I know this is like a 7-8 months late but whatever
what you would want is to use TweenService to fade between the images
You want 2 images, one called off, one called on, and a text button with a localscript
then put this code in the localscript that way you can switch between images:
local off = script.Parent.Parent.Man_off -- White Image
local on = script.Parent.Parent.Man_on -- Yellow Image
local button = script.Parent -- Text Button
local tween_service = game:GetService("TweenService")
_G.Clicked = false -- tracks if you have clicked or not :D
local function Tween_Trans1(value, speed)
local tween_info = TweenInfo.new(speed, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out) -- How you want the fade from image-to-image to look like
local tween = tween_service:Create(off, tween_info, {ImageTransparency = value})
tween:Play()
end
local function Tween_Trans2(value, speed)
local tween_info = TweenInfo.new(speed, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
local tween = tween_service:Create(on, tween_info, {ImageTransparency = value})
tween:Play()
end
button.MouseButton1Click:Connect(function()
if _G.Clicked then
-- turns Button on
_G.Clicked = false
Tween_Trans1(0.50, 1.5) -- set white to 50% opacity in 1.5 seconds // on
Tween_Trans2(1, 1.5) -- set Yellow to 100% opacity in 1.5 seconds // off
else
-- turns Button off
_G.Clicked = true
Tween_Trans2(0, 1.5) -- set Yellow to 0 opacity in 1.5 seconds // on
end
end)
button.MouseEnter:Connect(function() -- when you hover your mouse over it will highlight it yellow
if _G.Clicked then
return -- do nothing
else
Tween_Trans1(0.25, 1.5)
Tween_Trans2(0.25, 1.5) -- Highlight yellow
end
end)
button.MouseLeave:Connect(function()
if _G.Clicked then
return -- do nothing
else
Tween_Trans1(0.50, 1.5) -- go back to white
Tween_Trans2(1, 1.5)
end
end)
video of this in action:
of course you can switch the yellow and white depending on what you want, you just gotta change the image’s yourself which is easy
you can also probably use a third image if you just change to a third image on the MouseButton1Click function or something
if you want to change the color, you wanna change the “ImageTransparency = value” into “ImageColor3 = value” then you would wanna do Tween_Color(color3.new(255,255,255), 1.5)
code example:
local function Tween_Color(value, speed)
local tween_info = TweenInfo.new(speed, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
local tween = tween_service:Create(off, tween_info, {ImageColor3 = value})
tween:Play()
end
Tween_Color(color3.new(255, 204, 230), 1.5) -- cute pink color :3
with this tween you could probably make a rainbow thing if you just copied and pasted a bunch I guess, but I haven’t tried because I’m too lazy, but you can try it if you want ;o
hope this helps even though I’m very late, or if you already figured it out hopefully it helps out anyone who stumbles upon this thread 
or if you did figure it out but my version is better then, woohoo :DD
1 Like
Well, better late than never. Also, I’m planning on just doing some sort of coroutine lerp with colors. Seems simpler and probably wouldn’t need as much image. Just incase you don’t know, if a UI has any white on it or any variation of gray, you can actually change its color with Roblox
1 Like