Scripting Helpers is winding down operations and is now read-only. More info→

How do you create an automatic image slideshow?

Asked by

Tweakified 117

6 years ago

Edited by User#5423 6 years ago

Hello,

Recently, I have been working on a system which displays background images on my game: https://www.roblox.com/games/225780602/The-Arc

I wanted to create a system that changed between multiple pictures in a loop.

With this in mind, I created a gui: https://cdn.discordapp.com/attachments/356675974928007168/531941278330650634/unknown.png

I then added the script, with a few trial images:

01local back1 = script.Parent
02local back2 = script.Parent.Parent:FindFirstChild("Background2")
03images = {2721116470, 2673015024, 1417408619, 1417402706}
04 
05local one = 1
06local two = 2
07back1.Image = (images[one])
08back2.Image = (images[two])
09 
10local function change1()
11    local succ,err = pcall(function()
12        if one > #images then
13            one = 1
14        else
15            back1.Image = "http://www.roblox.com/asset/?id=" .. (images[one])
16        end
17    end)
18    if err then
19        change1()
20    end
21end
22 
23local function change2()
24    local succ2,err2 = pcall(function()
25        if two > #images then
26            two = 2
27        else
28            back2.Image = "http://www.roblox.com/asset/?id=" .. (images[two])
29        end
30    end)
31    if err2 then
32        change2()
33    end
34end
35 
36while true do
37    print("image 1 live")
38    wait(5)
39    for i= 1,10,1 do
40        back1.ImageTransparency = back1.ImageTransparency + 0.1
41        back2.ImageTransparency = back2.ImageTransparency - 0.1
42        wait(0.1)
43    end
44    print("image 2 live")
45    local one = one + 2
46    local two = two + 2
47    change1()
48    wait(5)
49    for i= 1,10,1 do
50        back1.ImageTransparency = back1.ImageTransparency - 0.1
51        back2.ImageTransparency = back2.ImageTransparency + 0.1
52        wait(0.1)
53    end
54    local one = one + 2
55    local two = two + 2
56    change2()
57end
 View all 57 lines...

Even with trying to use a pcall to fix it. The trial images I selected won't appear correctly. Please play the game to see for yourself.

It would be much appreciated if you could share any suggestions you have to this problem.

Edit:- please use [text](url) for links User#5423 17 — 6y

why are you using a server script in a GUI User#23365 30 — 6y

Good point. I will make it a local script. But it hasn't affected the problem though. Tweakified 117 — 6y

1 answer

Answered by

User#5423 17

6 years ago

Some of your image ids are incorrect. I first copy the id and put it into an image label, Studio will then format and get the correct image id for you. It saves a lot of time for me.

You can then remove the pcalls in the code. Loading a bad image will not stop the code from running.

You can also simplify your code a lot by only using one counter and swapping variables around making the visible image label fade out the next loop.

I would aslo recommend that you use the tween service as you can create a tween of both image labels and run them at the same time giving you the fade in/out effect you want.

Example(As EXpodo1234ALT said you should be using alocal script for client side gui things):-

01local idList = {
02    "2721116470", "2673015010", "1417408615", "1417402635"
03}
04 
05local tweenServ = game:GetService("TweenService")
06 
07local imageLabel1 = script.Parent.ImageLabel1
08local imageLabel2 = script.Parent.ImageLabel2
09 
10-- tween infromation
11local fadeOut = {ImageTransparency  = 1}
12local fadeIn = {ImageTransparency = 0}
13local tweenInfo = TweenInfo.new(4) 
14 
15local nextId = 1
16 
17local function nextIndex() -- manage counter function
18    nextId = nextId + 1
19    if nextId > #idList then
20        nextId = 1
21    end
22end
23 
24local function mkTween(imageLabel, tbl)
25    return tweenServ:Create(imageLabel, tweenInfo, tbl)
26end
27 
28while true do
29    nextIndex() -- inc counter
30 
31    imageLabel2.Image = "rbxassetid://" .. idList[nextId]
32 
33    local tween1, tween2 = mkTween(imageLabel1, fadeOut), mkTween(imageLabel2, fadeIn)
34    tween1:Play()
35    tween2:Play()
36 
37    tween2.Completed:Wait()
38 
39    wait(5)
40 
41    -- spaw variable around for next run
42    local tmp = imageLabel1
43    imageLabel1 = imageLabel2
44    imageLabel2 = tmp
45end
 View all 45 lines...

I have also uploaded the model here.

Hope this help, comment if you would like me to explain more about the tween service.

Works great. Thanks Tweakified 117 — 6y

Do you know a tutorial that teaches the basics of the Tween service? Tweakified 117 — 6y

Nope sorry. The function Create takes 3 arguments, the instance being tweened, the TweenInfo.new which contains how the tween should be done and a table of that setting are being tweened with the end goal. User#5423 17 — 6y

Okay. Thanks Tweakified 117 — 6y

How do you create an automatic image slideshow?

1 answer

Answer this question