Do you need a template?
What does it currently look like.
Dunno if this will help, but it sounds like you might need it:
UIPageLayout lets you JumpTo and JumpToIndex between pages. Additionally, you can use Mouse events and connect the buttons to these built-in methods. 
*Each page can show you one step in the tutorial or something like that
2 Likes
I need help with the scripting. I know how to make GUIs, but I don’t really know how to carry out this function with a script.
1 Like
Make your pages using UIPageLayout as linked in GGGGG14’s reply. Then make some GUI buttons that you’d like to use to switch between each page. And then you’d want a localscript that hooks into the click events on the buttons and triggers the Next and Previous methods of the UIPageLayout.
-- Example using a script sibling to a frame called Pages
-- with the layout inside, and sibling to the buttons.
local pageLayout = script.Parent.Pages.UIPageLayout
local nextButton = script.Parent.NextButton
local prevButton = script.Parent.PrevButton
nextButton.MouseButton1Click:Connect( function ()
pageLayout:Next()
end )
prevButton.MouseButton1Click:Connect( function ()
pageLayout:Previous()
end )
Hope that helps.
2 Likes
I’m still having some trouble setting this up. I think I might be doing something wrong with the locations of the script and UIPageLayout, can you let me know where each one is supposed to be?
Again, you need to give more info than just “trouble”. Are you getting script errors? Open up the console (output) window to double check if it’s just not working.
I did also notice a bug that Next() and Previous() don’t work without this line being added to the bottom of the script. Just put it at the bottom.
pageLayout:JumpToIndex( 0 )
In terms of hierarchy, the demo I gave would be:
- ScreenGui
- LocalScript
- Pages (Frame)
- UIPageLayout
- (your pages, each contained in a frame, go here)
- NextButton (TextButton/ImageButton)
- PrevButton (TextButton/ImageButton)
Contain each page in a frame. This can be transparent if you want and should be size {1,0,1,0} to fill the Pages frame. Make sure ClipDescendants is set true on Pages to prevent the user from seeing pages other than the current one.
If you’re still stuck, drop me a DM and I’ll send you a demo place that you can use to take a look at how the functions work. If you’re experienced with GUIs you should be able to do quite a lot without having to edit the script.
1 Like
I still can’t get it to work properly. I’ll send you a DM with some more information about the problem.
1 Like
Some people suggested to use UIPageLayout, but I can’t say anything about it as I haven’t tried them before, instead, I make my own.
Here’s a simple code of how to go back and forth between pages. Please note that you need all pages named like “Page” and then the number you want them to show in order, so like: “Page1”, “Page2”, etc.
Making your own page layout gives you more access to customizing them, adding special effects, sliding, and cool stuff like that. I’m not sure if UIPageLayout offers any of these, but if it doesn’t, well, you have the following code:
-- I hope this works, cause I haven't tested it out.
-- Changeable variables (settings).
local TotalPages = 4 -- How many total pages are there.
local SlidingEffect = true -- If true, the pages will slide, with any speed you input in the "SlidingSpeed" variable.
local SlidingSpeed = 0.5 -- Page sliding speed. If "SlidingEffect" is on, this will take place.
-- Unchangeable variables.
local CurrentPage = 1
local CanUseNext = true
local CanUsePrevious = false
-- Main Variables.
local UI = script.Parent -- The gui.
local PagesList = UI.List -- The frame that holds all pages.
local Next = UI.Next -- The "next" button.
local Previous = UI.Previous -- The "previous" button.
-- Functions.
function UpdateVariables()
if CurrentPage == TotalPages then
CanUseNext = false
elseif CurrentPage == 1 then
CanUsePrevious = false
end
if PagesList:FindFirstChild("Page".. (CurrentPage - 1)) then
CanUsePrevious = true
elseif PagesList:FindFirstChild("Page".. (CurrentPage + 1)) then
CanUseNext = true
end
end
UpdateVariables()
Next.MouseButton1Click:Connect(function()
if PagesList:FindFirstChild("Page".. (CurrentPage + 1)) and CanUseNext == true then
if SlidingEffect == true then
PagesList:FindFirstChild("Page".. CurrentPage):TweenPosition(UDim2.new(-1, 0, 0, 0), "Out", "Quad", SlidingSpeed, true) -- Slide to the left (off the screen).
else
PagesList:FindFirstChild("Page".. CurrentPage).Position = UDim2.new(-1, 0, 0, 0) -- Off the screen (no sliding effect).
end
CurrentPage = CurrentPage + 1
if SlidingEffect == true then
PagesList:FindFirstChild("Page".. CurrentPage):TweenPosition(UDim2.new(0, 0, 0, 0), "Out", "Quad", SlidingSpeed, true) -- Slide to the center.
else
PagesList:FindFirstChild("Page".. CurrentPage).Position = UDim2.new(0, 0, 0, 0) -- In the center (no sliding effect).
end
UpdateVariables()
end
end)
Previous.MouseButton1Click:Connect(function()
if PagesList:FindFirstChild("Page".. (CurrentPage - 1)) and CanUsePrevious == true then
if SlidingEffect == true then
PagesList:FindFirstChild("Page".. CurrentPage):TweenPosition(UDim2.new(1, 0, 0, 0), "Out", "Quad", SlidingSpeed, true) -- Slide to the right (off the screen).
else
PagesList:FindFirstChild("Page".. CurrentPage).Position = UDim2.new(1, 0, 0, 0) -- Off the screen (no sliding effect).
end
CurrentPage = CurrentPage - 1
if SlidingEffect == true then
PagesList:FindFirstChild("Page".. CurrentPage):TweenPosition(UDim2.new(0, 0, 0, 0), "Out", "Quad", SlidingSpeed, true) -- Slide to the center.
else
PagesList:FindFirstChild("Page".. CurrentPage).Position = UDim2.new(0, 0, 0, 0) -- In the center (no sliding effect).
end
UpdateVariables()
end
end)
I haven’t tested the code, but that’s how I do my “page layout”. Please tell me if this doesn’t work, and I’ll try to update it.
1 Like
For anyone who’s curious about the UIPageLayout solution, here’s the demo I sent to DeusRomanum. It might help a few other people out if you’re lurking waiting for a similar solution 
Might also be useful to you @vxioiz if you’ve never tried it before.
UIPageDemo.rbxl (562.4 KB)
Hit play solo or test and you’ll see how it works. Animation can be disabled as a property of UIPageLayout if you don’t like animations. Play about with the other properties too depending on the type of pagination you’re after.
13 Likes
Wow, didn’t thought it was that easy lol.
The UI objects are seriously awesome. UIListLayout, UIScale, UIGridLayout, et al are incredibly useful.
1 Like
UIGridLayout and UIListLayout are truly life saviors!
Here’s an Alternative (Video Sample)
BackBtn.MouseButton1Down:Connect(function()
Page = Page - 1
Page = Page < 1 and #(MaxPage) or Page
-- do stuff
end)
NextBtn.MouseButton1Down:Connect(function()
Page= Page + 1
Page= Page > #(MaxPage) and 1 or Page
-- do stuff
end)
With this method you don’t need to name your stuff Page1 , Page2…
Just store them in a Table
local Pages = {Page1,Page2}
and you can do
Pages[#]
I would say it’s less messy than the other methods above, but the UIPageLayout isn’t bad either.
You don’t need to name your Gui Objs Page1,Page2… tho just use LayoutOrder
Just to add on to that: if you’re using LayoutOrder and not naming convention to order your pages with UIPageLayout you’ll need to change the property SortOrder from Name to LayoutOrder.
Thanks for making this, it’s exactly what I was looking for.
2 Likes
I am using UIPageLayout and I’m trying to make the 2nd frame that they switch to invisible for them because it is shown how do I fix this?
Nevermind! I used ClipDescendants!
1 Like
Thanks - This was very useful.
What file did apparently have 2 viruses?
Sorry, That was meant for a different post. I removed the post.