Animated buttons are designed to grab the learner’s attention as well as allow them to interact with the eLearning content. In this sample (click the image above to view), I wanted to utilize Storyline 2’s capabilities to create three types of buttons. You can see other examples of buttons on Articulate’s website as part of their weekly challenge titled, Creative Button Styles and Effects, Challenge #89.
The first button is a simple On and Off switch. I created the switch in PowerPoint using gradients. By adding a hotspot over the On and Off areas of the button and then triggering a state change, it simulates a simple toggle switch. Where could this be used? Turn the light on or off while entering an office or room in a scenario? Perhaps as a power switch on a machine or other electrical device as part of a detailed step-by-step interaction. I’m sure you can think of other ideas for this one!
For button #2, building on the previous idea, I wanted to create a similar on and off effect using Storyline 2’s slider feature. In this case, the slider is set to update while the slider is dragged and uses a Start position of 0; end position of 1. I used a state change on the slider object as follows:
Action: Change state of; On Object: Slider 1; To State: ON; When: Slider moves; Slider: Slider 1; Condition: ==Equal to 1
Action: Change state of; On Object: Slider 1; To State: Off; When: Slider moves; Slider: Slider 1; Condition: ==Equal to 0
For the final example, button #3, I created four items. There are two rectangles for each button (One large and a smaller one along the bottom). By the way, I used the Webdings font to create the icon images.
As you can see below, each large rectangle was assigned three states. For the normal state, the Webding font is set to an off-grey color. For the hover state, I changed it to white and then to a random color for the SelectIt state. Note: I could have used the built-in state of Selected but that would be no fun!
The smaller rectangle, along the bottom, was assigned two states. The SelectIt state is triggered when the user selects the larger rectangle and changes its’ state. An entry animation was added to the SelectIt state rectangle which is also a different color (matched to the icon above). I’ve also included the Buttons Master Storyline 2 File if you are interested in seeing how these animations were created. Feel free to download and use if you want.