Go To Next Layout - Making a Global UI


Attached Files

The following files have been attached to this tutorial:



5,793 visits, 7,514 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

I have made this as a way of teaching myself but I hope it is useful.

As a total noob I need things spelling out for me with no assumed former knowledge.

As I want to create an interactive book my aim was to be able to go backwards and forwards through layouts using a Global UI instead of having to set it up on each layout seperately.

The method obviously applies to make anything you want to appear/action throughout all your layouts.

I have made an example project with a Global Layout , A Cover Page/Layout and three other Pages/Layouts just to see it working. I have uploaded it to the arcade along with the capx.

So this is the method I used:

1. Create a new Layout, (I named my layout 'Global') and give its layer a distinctive label, (I have labelled mine 'ui').

2. Place the objects/sprites/text boxes that you want to appear on every other layout, on this one layer, in the position that you want them to appear. Remember to include the mouse object.

3. On the Global Event Sheet assign the events/actions that you want to apply throughout your whole project, in my case I am only using the forward and back arrows so it is just:

a) Add Event> Mouse >on object clicked > mouse button=left > choose sprite for the forward arrow>Done.

b) Add Action>System>Go to next/previous layout>choose next.

Then repeat this time choosing the back arrow sprite and 'previous layout'.


a) Go to: Global Layout>Layers>ui (or whatever you have labelled your layer) >Properties.

b) Set : Transparent>Yes, Parallax>0,0 Global>Yes, Visible in Editor>Yes.

5. Go to: empty space on each of your other event sheets: right click>include event sheet>choose your Global one from the list.

6. On my 'Cover' Event sheet I have set it so that the back arrow is destroyed on scene loaded so that you can not click back to the global layout:

a) Add Event>system>On Start of Layout

b) Add Action>Back Arrow Sprite>Destroy

7. On the last page I have added an event to make the forward arrow bring you back to the cover page. You could just destroy it instead so that you stay on that last layout/page/scene.

a) Add Event>Mouse>Clicked on Object> Forward arrow sprite.

b)Add Action>System>Go to Layout> choose from drop down list.

8. For it all to work correctly it is important that on every (non Global) layout you include an empty layer at the top of the layers list with the same name as the global one, mine is called 'ui' and set the parallax of this layer to 0,0

9. Then make sure you choose which layout you want your project to open with (so its not the Global one) Go to Project Settings> 'First layout'> Title page/layout etc.



  • Order by
Want to leave a comment? Login or Register an account!