Toggle Switch DEMO - using motion paths and toggle variable.

As a closet animator, the new Motion Path feature introduced with SL2 was the very first thing I tinkered with.

While the first model worked well and was okay for a single slide interaction, it's been in the back of my mind how to improve the behavior for use as a global widget.

It's a simple button that when clicked follows an animation path. After completing the path, another object's state (background) changes its visual appearance. When clicking the button again, it reverses its path to its original starting position and the background changes its state back to original. 

Combining those two animation paths with a T/F variable and a Toggle trigger, this little button widget can do lots of cool things by simply evaluating the value of a single variable or when one of the animation paths complete!

DEMO

SOURCE

*since this uses the motion path animation, the source file is only for version SL2.

Enjoy!

15 Replies
Graham Matheson

Hi Kevin, I like your demo. Very cool. 

I am developing training for staff to complete on a desktop but all staff also have an iPhone so I wanted to develop a toggle similar to iPhone settings. 

This method it very clean. I found a very short slider with Start:0 and End:1 is also a really nice solution allowing for a drag rather than a click on the button. 

Kevin Thorn

Hey Graham,

Thanks! Designing for smartphone is a bit different than for a tablet. The form factor and screen aspect ratios are quite different. Since Storyline doesn't have (currently) gestures, "sliders" on a smartphone can be a bit challenging where a click/tap of a button that *behaves* like a slider is a different user experience yet same result.

The phenomenal thing about Storyline is there are megazillion ways to accomplish the same thing!

Kevin Thorn

I'm bald. That should tell you something, Stephen!

Motion Paths are a finicky little widget for sure. The best solution I've found is using guide lines or grid lines to line them up. And zoom in the best you can to 300% or more to be precise.

Once everything is lined up and your model is working, then delete the guidelines, turn off the grid, and zoom back out. Next resize or adjust location of the motion path and it's object(s) as needed.