Button to: Go to next state (how to!)


#1

Hi Zappar!

I’m trying to use a button to go to the next state but I can’t find the proper code to make that happen.

I have one button and one controller with 6 states in there. What code do i need to make the pointer down of the button make the controller go to the next state?

Kind regards


#2

hi all,

So it took me a while but I found my answer. I just wanted to share my solution so it may (or not) help others. If you have any ideas on how to achieve the same effect in a better way i would love to hear. Anyway here’s the project.

Basicly I made a variable which can be incremented or decremented by 2 buttons. On every pointerdown it reads the number en if it’s matches a IF statement it activates the defined state.

Go to next state|690x489

// defined a var to count at wich state the controller was
      var start = 1;

symbol.nodes.Terug_Navigatiepijl0.on("pointerdown", (e) => {
    	// Runs when pointerdown occurs on the Terug_Navigatiepijl0 node
    	
    	if (start > 1){
    start--;
    if (start == 1){symbol.controllers.Content_1.elements.n16.activate();} 
    if (start == 2){symbol.controllers.Content_1.elements.n26.activate();}
    if (start == 3){symbol.controllers.Content_1.elements.n36.activate();}
    if (start == 4){symbol.controllers.Content_1.elements.n46.activate();}
    if (start == 5){symbol.controllers.Content_1.elements.n56.activate();}
    if (start == 6){symbol.controllers.Content_1.elements.n66.activate();}}
    });

symbol.nodes.Verder_Navigatiepijl.on("pointerdown", (e) => {
// Runs when pointerdown occurs on the Verder_Navigatiepijl node
    	
    if (start < 6){
    start++;

    if (start == 1){symbol.controllers.Content_1.elements.n16.activate();} 
    if (start == 2){symbol.controllers.Content_1.elements.n26.activate();}
    if (start == 3){symbol.controllers.Content_1.elements.n36.activate();}
    if (start == 4){symbol.controllers.Content_1.elements.n46.activate();}
    if (start == 5){symbol.controllers.Content_1.elements.n56.activate();}
    if (start == 6){symbol.controllers.Content_1.elements.n66.activate();}
    }
    	
    });

#3

Hi There,

This is indeed the type of solution we would suggest as well :slight_smile:

The following topic also discusses knowing which state is active, in the case where you just have 2 or 3 - Creating a button to toggle between two States

Thanks,
Mark


#4

I am confused on how to use it and where the code should be placed.

If I want to use “left” and “right” button to scroll between different states should this code be assigned to each “button” in the pointerdown function or should it be somewhere else?


#5

Hi @z.peciura,

Scripting can be confusing, and it can be particularly difficult to know where code actually goes. Luckily with Studio, it’s made pretty simple! If you’d like an element to fire code on certain events, you can:

  1. Right click the element in the ‘HIERARCHY’ module & go to ‘+ New’
  2. Go to ‘Script’
  3. Find the event you’d like from the menu and then click on it

Studio will then automatically create a script template for you - all you have to do is code whatever you’d like to happen on that event in between the brackets :grin:

We have a pretty good tutorial which exemplifies using left and right buttons using scripts, so that might be helpful for you!

The easiest way to activate states and timelines without scripting is with ‘Actions’; this answer is getting pretty long though so you can learn more here!

All the best,
Fran