THE MISSION
Elearning Challenge #151 was to make an interaction demonstrating how the new Articulate Storyline 360 feature, interactive dials, can be used in e-learning.
THE INSPIRATION
Because I have played a lot with the Storyline slider feature, and taught a couple of seminars on advanced slider features, I was eager to try out the new dial. I was interested to see if some of my slider tricks would translate to dials. Instead of using dials in an expected way, I thought about unusual ways that dials could be used. One thing that came to mind was the old cardboard wheel charts where you line up information to make calculations or find information. I wanted to make an interaction as simple as possible, because I designed it from scratch. As the New Year was quickly approaching, the Chinese horoscopes came to mind.
THE PROCESS
I made two wheels in Illustrator. The smaller inside wheel had a red pie-shape at the top to highlight the selected years and an opening below to reveal the viewer’s horoscope animal. The larger wheel was placed behind, it contained all of the necessary information including the birth years and the animals. I decided to keep the inside wheel in one fixed position and allow the larger wheel behind to rotate 360 degrees.
First, I navigated to the Format tab and placed a large dial in the middle of the slide. I changed the pointer fill to no fill, and the face fill to picture. I inserted a .png image of the larger wheel as the picture and sized it to fit well on the slide.
Under the Design tab I changed the rotation to 360, the end value to 12 (one for each sign). I placed the smaller wheel on top of the back wheel and centered and sized it. When I previewed the result, I noticed that the back wheel could only be grabbed in four places, the top, the bottom, and the center of the left and right side. It worked, but was difficult to maneuver and the fact that it could only be grabbed in four locations made it more challenging to navigate.
I decided to add a slider to the bottom that controls the movement of the dial. To make this work, I changed the variable on the large wheel to slider 1 (under the Design tab) so that it would follow the slider’s movements.
THE OUTCOME
Overall, I’m happy with the way this project turned out. I did change one small thing after I initially published it, I moved the slider’s initial starting point to the center, instead of the far left of the slider. This way you can move the wheel in either direction from the center starting point.
I’m very excited to play some more with the dial feature to find out other uses for this feature in future elearning courses.
