Arrow (ImageButton) that skips through frames

  1. What do you want to achieve?
    I want the arrow button to skip throught the frames. I got a selection menu for skins so what it does is everytime I click the button it turns the current frame invisible and the next one visible and so on. I got 4 frames called Lynx1, Lynx2 etc.

  2. What is the issue?
    I don’t really know how to achieve this.

  3. What solutions have you tried so far?

Looked on the dev hub, couldn’t find anything related to my issue.

Here’s some code I tried:

local button = script.Parent

-- Different Skins --
local Lynx1 = button.Parent.LynxSkin1
local Lynx2 = button.Parent.LynxSkin2
local Lynx3 = button.Parent.LynxSkin3
local Lynx4 = button.Parent.LynxSkin4




local function onButtonActivated()
	print("Button activated!")
	Lynx1.Visible = false
	if Lynx1.Visible == false then
		Lynx2.Visible = true
		print("Skipped to 2")
	elseif onButtonActivated() then
		Lynx2.Visible = false
		Lynx3.Visible = true
		print("skipped to 3")
	else
		Lynx3.Visible = false
		Lynx4.Visible = true
		print("skipped to 4")
		end
	end

button.Activated:Connect(onButtonActivated)
2 Likes

I think this should help.
After it reaches the 4th frame it goes back to the first

local button = script.Parent

-- Different Skins --
local Lynx1 = button.Parent.LynxSkin1
local Lynx2 = button.Parent.LynxSkin2
local Lynx3 = button.Parent.LynxSkin3
local Lynx4 = button.Parent.LynxSkin4
local maxpages = 4
local page = 1

local function onButtonActivated()
	print("Button activated!")
	if page == maxpages then
		page = 1
		Lynx4.Visible = false
		Lynx1.Visible = true
	elseif page == 1 then
		page = 2
		Lynx1.Visible = false
		Lynx2.Visible = true
		print("Skipped to 2")
	elseif page == 2 then
		page = 3
		Lynx2.Visible = false
		Lynx3.Visible = true
		print("skipped to 3")
	elseif page == 3 then
		page = 4
		Lynx3.Visible = false
		Lynx4.Visible = true
		print("skipped to 4")
	end
end

button.Activated:Connect(onButtonActivated)
local button = script.Parent

local Lynx1 = button.Parent.LynxSkin1
local Lynx2 = button.Parent.LynxSkin2
local Lynx3 = button.Parent.LynxSkin3
local Lynx4 = button.Parent.LynxSkin4

local Lynxes = {Lynx1, Lynx2, Lynx3, Lynx4}
local ActiveLynx = 1

local function onButtonActivated()
	Lynxes[ActiveLynx].Visible = false
	ActiveLynx += 1
	if ActiveLynx > 4 then ActiveLynx = 1 end
	Lynxes[ActiveLynx].Visible = true
end

button.Activated:Connect(onButtonActivated)

Could use a table.

1 Like

I would like to suggest you to use UIPageLayout, instead of using .Visible you can use UIPageLayout:Next() and set Circular boolean on true.

1 Like

Thank you! It works as it should^^

1 Like