Make a "function" in Storyline - without code!

Apr 25, 2023

Hey all,

You can write "functions" in Storyline - without Javascript or any other external anything! I assume some people are already doing this, but I came up with it on my own, and on the odd chance people haven't already also thought of it, I thought I'd share.

I'm putting "function" in quotations because it's not really a function per se, but it is a way to do what functions do, and I'm finding it a super handy trick. Here it is:

SCENARIO: You have ten objects (such as icons or buttons) on your slide each with states On and Off. You want to be able to set the states of these objects based on user input. Some subset of them may be On, some Off, and this is likely to change multiple times while the learner is on that slide. Normally you would have to account for every scenario and set trigger actions to set the states of the objects as needed, making your trigger list long and hard to manage. Enter the "function":
  1. Create a True/False variable for each of the ten objects, named varObj1, varObj2.. etc, for example. 
  2. Then create two numeric variables, such as fnClearObjects and fnSetObjects
  3. In the Variable Changed trigger for fnClearObjects, set the value of all ten object variables to False and the state of all ten objects to Off.
  4. In the Variable Changed trigger for fnSetObjects, set the state of each of the ten objects to On or Off depending on the value of each object's associated variable, such as:
    When fnSetObjects changes
         Set state of Obj1 to On
             If varObj1 = value True
                  Else set state of Obj1 to Off
         Set state of Obj2 to On
             If varObj2 = value True
                  Else set state of Obj2 to Off
    .......
    and so on to Obj10
  5. Now, when you want things changed, you just set varObj1...10 to True or False, then "call the function" by incrementing the value of fnSetObjects. You won't ever care what the actual numeric value of fnSetObjects is. All you are doing is incrementing it in order to call the Variable Changed event, where all your messy if/then statements reside.
The advantage of this method is that it tucks away all the lengthy, messy triggers doing the real work in the Variable Changed event for the fnSetObjects variable, so that the triggers you are really working with are clean and easy to read.

For example, when things need to change, my trigger might look something like this:
Add value 1 to fnClearObjects
Set varObj4 to True
Set varObj5 to True
Set varObj9 to True
Add value 1 to fnSetObjects

The first line sets the states of everything to Off, the last line changes the states for only the objects whose associated variables were set to True.

Here is one place I am using this technique. Note how the keyboard changes when chords are hovered over. This is all done using Storyline "functions"!
https://360.articulate.com/review/content/9bfd27a8-f8c7-451f-926a-8c15ae8d07c2/review

2 Replies
Walt Hamilton

In the spirit of further de-cluttering, I place the function in a subroutine.  That is, I place all those triggers on a layer. The triggers are set to fire "when timeline starts on this layer". The layer is set not to hide other layers, hide when timeline ends, and a timeline as short as I can make it. When I want to clear objects, instead of changing the variable, I show clearObjects layer. If there are a bunch of triggers, it really cleans thing up.