Sep 17, 20152 min read

Human brain and toggle button in Storyline 2

While I was looking for an inspiration for toggle/switch button challenge, I came across an intriguing science fact. Do you guys know that when you're awake your brain generates some amount of energy as is needed to light a bulb? Not every bulb of course. I thought this is interesting enough to use it for project which I started building in my mind (what a great connection between brain, energy, toggle and a bulb!).

I didn't want it to be as easy as: click the right toggle to light a bulb. I usually try to add this extra effort to create something unusual, more outside of the box. This time stepping away from computer brought a nice solution. I went non-digital and started to draw the interaction on paper. What if there'll be 3 bulbs and 3 toggles, but...the cables connecting the elements would be mixed up. That was this additional, engaging part I was searching for.

I kept the graphics simple (all created in PowerPoint) - only outlines and few solid fillings. It took me around 20 minutes to hand draw 3 different bulbs (10, 15 and 20 watts), set of switches and 3 curved cables as connectors.

Here comes Storyline 2 part and the best fun with interaction.

I wanted to show current "running" in the cable after clicking a switch to its associated bulb, that's why I inserted a small oval visualizing this process and used curved motion paths. Thanks to this I could perfectly recreate the shape of the cable.

Toggle button had two states (on and off) and a sound effect of switching is playing every time you click it. For setting buttons as a toggle I've used one variable only. Here's how the triggers panel for switch1 looked like:

If you'd like to learn any other toggle setting options - have a look how Kevin Thorn created his great example.

In this moment everything was ready for adding triggers showing animations. Every time you click a switch, one of 3 animations is playing and showing current "running" by cable to its bulb. If you get it wrong, red light appears and you can hear a silent buzz.