Toggle Switch DEMO - using motion paths and toggle variable.

Sep 02, 2015

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

David Anderson
Staff

over 8 years ago09/02/15 at 8:57 pm (UTC)

Okay this is a very cool example, Kevin! We're doing a post and challenge on switches and toggle buttons this week. I'll be sure to include your example and download!

Kevin Thorn
Author

over 8 years ago09/02/15 at 9:49 pm (UTC)

Cool! Thanks David.

Phil Mayor
Hero

over 8 years ago09/05/15 at 8:30 am (UTC)

This is Great Kevin thanks for sharing

Jeff Kortenbosch
Hero

over 8 years ago09/06/15 at 1:38 pm (UTC)

Love this Kevin, Excellent use of motion paths. Thanks for sharing the source file.

David Tait
Hero

over 8 years ago09/08/15 at 11:45 am (UTC)

I like your demo, very nice.

Leslie McKerchie
Staff

over 8 years ago09/08/15 at 2:04 pm (UTC)

Thanks for sharing with everyone Kevin :)

Tracy Parish
Hero

over 8 years ago09/09/15 at 12:33 pm (UTC)

Very cool intergration of elements. Thank you for sharing.

Graham Matheson

over 8 years ago09/10/15 at 2:48 am (UTC)

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.

Leslie McKerchie
Staff

over 8 years ago09/10/15 at 1:39 pm (UTC)

Thanks for popping in to share your thoughts and suggestions as well Graham :)

over 8 years ago09/10/15 at 2:49 pm (UTC)

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!

Stephen Brodeur

over 8 years ago09/10/15 at 7:58 pm (UTC)

Did you have trouble getting the motion path to line up correctly? I am trying to do a similar interaction but the motion path moves my toggle switch just outside of the container or a little too far inside it. I am pulling my hair out.

Kevin Thorn
Author

over 8 years ago09/10/15 at 10:31 pm (UTC)

This post was removed by the author

over 8 years ago09/10/15 at 10:31 pm (UTC)

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.