Storyline 1: Building a Simple Counter

Article Last Updated

This article applies to:

Let's look at working with number variables to add and subtract values from number variables. This is really easy to do in Storyline. Check out the final example:

View the published example | Download the source file

If you're following along, I'm working in Counter_START.story.

Step 1: Create the Number Variable

  1. In the Trigger panel, click the Manage project variables icon
  2. Click the Create new variable icon
  3. Name: Counter
  4. Type: Number
  5. Value: 0
  6. Click OK

Now that our variable is created, the next step is to create a trigger that increases or decreases the variable's value.

Step 2: Add the Trigger

In this step, we'll set up a trigger to increase our variable by +1 each time the user clicks a button.

  1. Insert a new button on your slide
  2. Create a new trigger for the button (Trigger panel > Create a new trigger)
  3. Action: Adjust variable
  4. Variable: Counter
  5. Operator: +Add
  6. Value: Value 1
  7. When: User clicks
  8. Object: Button 1
  9. Click OK

We have our variable set up and a trigger that increases the value. But how do we know this is working? We can insert a reference to the variable on our slide that will dynamically update when we click the button.

Step 3: Insert the Variable Reference

  1. Go to Insert > Text > Text Box and click once on your slide to create an active text box.
  2. With the text box selected, go back to Insert > Text > Reference
  3. Select Counter and click OK

Preview your project and click the button. Each time you click, the variable reference updates by a value of 1.

Step 4: Subtract from the Value

Want to see things go in the opposite direction? Add another trigger to subtract from the Counter variable. Since we already have the first button and trigger created, we can duplicate it and modify the trigger.

  1. Duplicate the first button by pressing CTRL-D
  2. Double click its trigger in the Trigger panel
  3. Change the Operator to -Subtract
  4. Leave the Value set to 1
  5. Click OK

Preview your movie.

You can add any value to increase, subtract, divide or multiply the values.