Image Transition Script Not Working

Help and Feedback Scripting Support
#1

Hi, developers. I’ve recently made an image transition script for a TV. However, Image1 flashes randomly while Image2 just stays there.

Can anyone help me find out what’s wrong with this? Each image is supposed to stay on the screen for 7 seconds and then fade away.

Thanks!

local Image1 = script.Parent.SurfaceGui.ImageLabel1
local Image2 = script.Parent.SurfaceGui.ImageLabel2
local Image3 = script.Parent.SurfaceGui.ImageLabel3

while true do
	Image1.Visible = true
	wait(7)
	Image1.ImageTransparency = 0.1
	Image1.BackgroundTransparency = 0.1
	wait(0.1)
	Image1.ImageTransparency = 0.2
	Image1.BackgroundTransparency = 0.2
	wait(0.1)
	Image1.ImageTransparency = 0.3
	Image1.BackgroundTransparency = 0.3
	wait(0.1)
	Image1.ImageTransparency = 0.4
	Image1.BackgroundTransparency = 0.4
	wait(0.1)
	Image1.ImageTransparency = 0.5
	Image1.BackgroundTransparency = 0.5
	wait(0.1)
	Image1.ImageTransparency = 0.6
	Image1.BackgroundTransparency = 0.6
	wait(0.1)
	Image1.ImageTransparency = 0.7
	Image1.BackgroundTransparency = 0.7
	wait(0.1)
	Image2.Visible = true
	Image1.Visible = false
	wait(7)
	Image2.ImageTransparency = 0.7
	Image2.BackgroundTransparency = 0.7
	wait(0.1)
	Image2.ImageTransparency = 0.6
	Image2.BackgroundTransparency = 0.6
	wait(0.1)
	Image2.ImageTransparency = 0.5
	Image2.BackgroundTransparency = 0.5
	wait(0.1)
	Image2.ImageTransparency = 0.4
	Image2.BackgroundTransparency = 0.4
	wait(0.1)
	Image2.ImageTransparency = 0.3
	Image2.BackgroundTransparency = 0.3
	wait(0.1)
	Image2.ImageTransparency = 0.2
	Image2.BackgroundTransparency = 0.2
	wait(0.1)
	Image2.ImageTransparency = 0.1
	Image2.BackgroundTransparency = 0.1
	wait(0.1)
	Image2.ImageTransparency = 0
	Image2.BackgroundTransparency = 0
	wait(7)
	Image2.Visible = false
end
#2

You can make your code much shorter by using for loops.

while true do
	Image1.Visible = true

	wait(7)

	for i = 0.1, 0.7, 0.1 do
		Image1.ImageTransparency = i
		Image1.BackgroundTransparency = i
		wait(0.1)
	end

	Image2.Visible = true
	Image1.Visible = false
	
	wait(7)
	
	for i = 0.1, 0.7, 0.1 do
		Image2.ImageTransparency = i
		Image2.BackgroundTransparency = i
		wait(0.1)
	end
	
	wait(7)
	
	Image2.Visible = false
end

Loops (roblox.com)

1 Like
#3

Ok, so it is a very simple fix (at least, I think so). You are using Background transparency and Visible at the same time, as well as using waits. This is very inefficient and to fix it, all you have to do is use the tween service.
The code would look something like this (I have added comments so that you understand):

local Image1 = script.Parent.SurfaceGui.ImageLabel1
local Image2 = script.Parent.SurfaceGui.ImageLabel2
local Image3 = script.Parent.SurfaceGui.ImageLabel3
local TweenService = game:GetService("TweenService")
while true do
        Image2.Visible = false
	Image1.Visible = true
        wait(7)
        TweenService:Create(
            Image1, -- The UI that you are going to tween
            TweenInfo.new(2), -- The time it should take
            {BackgroundTransparency= 1} -- The final result
         ):Play() -- Play the tween
         wait(2) -- Wait until tween finishes
         Image1.Visible = false
         Image2.Visible = true
         wait(7)
         -- Same thing, but Image2 this time
          TweenService:Create(
            Image2, -- The UI that you are going to tween
            TweenInfo.new(2), -- The time it should take
            {BackgroundTransparency = 1} -- The final result
         ):Play() -- Play the tween
         wait(2) -- Wait for the tween to finish.
end

I’m not sure about this code, I haven’t tested it yet. If it gives any bugs, let me know!

#4

Although I really appreciate the time you spent to make this code, I think I should note that using a “for” loop to do it is the same thing as what the original poster did, just in a loop. It will work, but could produce errors as waits are unreliable. A smoother and more efficient solution would be to use the tween service. Again, I really appreciate your effort, this is just a tip for later! :grinning:

#5

I know, I just wanted to show a shorter way to do it since the way he originally did it was really repetitive.

I don’t know what you mean by this, waits are reliable.

1 Like
#6

Yes, they are reliable. I used them in the tween service code as well. But… to use them to change a property of something such as Background Transparency, would work, but if the player’s network or game quality is bad, it is possible to produce an error or just not run completely. Sorry for not clearing that up at the start!

#7

I strongly recommend using TweenService for this. It provides a method for interpolation of numerical properties. It’s a lot cleaner, a lot more efficient, and it may even solve the problem that you have now. You can read up on that here.

Beyond that, truly, I’d recommend a rewrite. I’ve done that here, and although it’s untested, feel free to observe it and pick out some elements that you feel your script should have. Consider the following:

The script only looks big because of the comments trust me

-- TweenService to the rescue!
local TweenService = game:GetService("TweenService")

-- Have a some settings at the top for ease in changing.
local FadeTime = 1
local TimePerImage = 7

-- Have one image label for the thingy. Later on, we'll change its image property.
local ImageLabel = script.parent.SurfaceGui.ImageLabel

-- Have a list of image IDs you want to display.
-- Don't actually use these IDs, I don't know what images they go to lol
local ImageIDs = {
    "rbxassetid://35235345",
    "rbxassetid://765467675",
    "rbxassetid://3454546543",
}

-- Have a function to fade the image in and out so that we don't reuse the same code unnecessarily.
local function Fade(Label, Start, End)
    --[[ 
        Label is the ImageLabel that we want to fade.
        Start is our starting transparency, and end is our ending transparency.
        If we wanted to fade out, we'd pass in 0 and 1 as our start and end respectively.
    ]]--

    -- Here we set the transparencies to our starting value.
    Label.ImageTransparency = Start
    Label.BackgroundTransparency = Start

    -- This is a TweenInfo. We need it to get ready for our tween.
    local Info = TweenInfo.new(
        FadeTime, -- This is how long the fade will take.
        Enum.EasingStyle.Linear, -- This is the easing style. This'll just give a nice, even transition.
        Enum.EasingDirection.InOut -- This is the direction. For the easing style we're using, it probably doesn't matter.
    )
    -- Now, we create and play our tween
    local Tween = TweenService:Create(
        Label, -- The instance that we want to tween
        Info, -- Our tween info that we just created
        { -- A table of properties we want to tween, and their target values.
            ImageTransparency = End,
            BackgroundTransparency = End
        }
    )
    Tween:Play() -- This plays our tween that we just created.
end


-- Now, we can loop through our image IDs from the list near the top.
while true do -- This makes the cycle of images repeat forever.
    for a = 1, #ImageIDs do -- Creates a variable (called "a"), starts it at 1, and repeats it the number of times of the amount of items in ImageIDs. It increments a by 1 each time it loops. We can now use a         inside of this loop.
        Fade(ImageLabel, 0, 1) -- Fading out
        wait(FadeTime) -- We do this because playing a tween does not cause the script to yield.
        ImageLabel.Image = ImageIDs[a] -- Change the image to item "a" of ImageIDs.
        FadeImage(ImageLabel, 1, 0) -- Fading in
        wait(TimePerImage)
    end
end

This should fix your problem while also making your code a lot more efficient and easier to manage. If you try it, let me know how it works! If it doesn’t work, shoot me a message and let me know what errors it’s throwing at you, and we’ll work on debugging.