and today's Roblox series tutorial I'll
be teaching you how to make a tutorial GUI that when you press the next button it will go
through all the pages and eventually bring you back to the first one you can also press the
previous button to go back through some pages our first step to making this tutorial GUI is
by creating a frame let's do that here we go the first bit is done and if you're having troubles
getting your frame to show make sure that you have a screen GUI element inserted fir
st inside
a start UI our next step is going to be to add in some buttons an exit button a next button and
a previous button let's do that all the buttons are now in place we have our next previous and our
exit button now we just have to insert a scrolling frame if you don't know what scrolling frame is
just press this button and search for scrolling frame when you have put in your scrolling frame
we're gonna have to change up a few settings in it inside of here let's turn our background
tr
ansparency to one then let's go down into the scrolling tab we can easily filter Properties
by pressing Ctrl shift and P or simply pressing this up here and let's look for scroll ing here
we go and let's set our scroll bar transparency to be one and enter now that a scrolling frame is
transparent what we can do is click on it inside of our screen GUI and press this plus button and
insert a UI page layout just right here let's insert this and then in the properties tab let's
go ahead and mak
e sure that you cannot use this and let's also turn our tweeting time to set to
zero which will automatically be set to 0.01 up at the top where it says appearance what you're going
to do is make sure it's animated is turned off and circular is turned on if you want your tutorial to
stop at the last page press on your UI page layout and simply turn off circular this will stop it
from going past the last page the last step to creating your GUI is by going to the asset manager
and importing y
our images that you're going to use I already have my images so I'm just going to
copy and paste these into our scrolling frame just like that now it is time to code our GUI
inside of your next button click on this icon and we're going to add in a local script we can
rename this to change page there we go and let's start off with type local UI page is equal to
script dot parent dot parent dot scrolling frame thought you UI page layout then we can press
we can drop a few lines and simply typ
e in script dot parent dot mouse by
one click colon connect function and then we can type in those two brackets press
enter and inside of here we go UI page colon next let's copy this and paste it into our previous the
only difference we have to do here is we have to type in previous right here and there we go if
you've done everything correctly it should work there we go let's test it out and there you have
it your tutorial GUI all completed and ready to go click this video on the screen r
ight
now if you want to know how to make your own backpack system in your Roblox game
or subscribe the channel on the left [Music]
Comments