[TUTORIAL] States, Variables & Triggers

This just an example to help you understand how to make states, variables and triggers to work together.

View what the final output will look like here:

VIEW DEMO

Download the practice file below and follow along for the most effectiveness.

DOWNLOAD PRACTICE FILE

Objective: 

Provide a visual cue about how many more objectives I need to view on a page.

Lets get familiar with the structure. The scene is simple and composed of the following assets:

1. The image is what I want to change based on different conditions. Click on the Adam and look at the different states. We start out with a normal state and have added states for the number of objectives left and a final one for the completion of all objectives, which we named thumbs up.

2. 3 buttons that show the relevant layer. So for each button I have a separate layer, which  we have called Tab one to Tab three.

3. We also have defined a variable called objectives to keep track of how many objectives are still to be viewed.

You can hit preview and see how Tab one (Storyline) and Tab two (Features) function. As you notice in the demo, when you click and view a tab, the character changes the number of fingers he is holding up to reflect how many more objectives need to be viewed. 

For this example we will focus on tab 3. The same logic applies to the other tabs too.

[Base Layer] Show Layer

The first thing we need to do is make a trigger that will show us Tab Three.

We need to add 3 more triggers at each layer level (tabs). All the triggers are set to execute when a user clicks on X.

So three things we want to achieve when a user clicks x:

1. Close the current layer
2. Update the tab to tell the user that they have already visited it
3. Finally update our variable to show that one objective has been viewed

[Layer] Close Layer

We added a trigger to close the current layer, when user clicks X.

[Layer] Change the State of button to show that its visited

We added a trigger that changes the state of the relevant button (tab) to be set to viewed state when the user clicks the X.

Adjust the variable to show that an objective has been viewed

As each tab is visited, we need to subtract from our list of objectives to keep track of how many more need to be viewed. Simple trigger with the settings below:

For this trigger we also need to add a condition, that objectives variable should only be updated the first time a user visits. Why should we have this condition? Because otherwise every time a user revisits the same layer, it would keep subtracting from the variable.

The condition is simple as below:

Basically, for every button that the state is normal, we will subtract from the variable.

The last thing we need to do to get our concept to work is add 3 triggers to the base layer.

If you look at Adam, he has 4 states:

1. Normal (Three fingers)
2. Two fingers
3. One finger
4. Thumbs up

Our normal state, when we start this slide is Adam holding up 3 fingers to signify the number of objectives that need to be viewed. As each objective is viewed, Adam counts down with his fingers to signify the number of objectives left and finally a thumbs up to show that all objectives have been viewed.

So we need to add 3 triggers for Adam to hold up a finger based on the number of objectives left. In the example below we are looking at the setting for when Adam should hold up two fingers.

It basically says, show the two finger state, whenever the variable changes (Remember how our variable is adjusted every time we visit a tab?), based on the number of objectives being equal to 2 set in the conditions.

Have a look at the other triggers and they follow a similar logic.

Thats it, we are done. Hope the tutorial was easy to follow and helpful.

----------------------------------------------------------------------------------------------------------------------------------------------------

Do you like the ADAM character? We will be releasing character packs soon.

You can sign up to receive a free character at launch at: www.elearningcircus.com

You can see a preview here: http://www.youtube.com/watch?v=YeLYcOTVylc