Attached is my version of a Wheel of Fortune style of spinner.
The spinner leverages the dial functionality of SL3/360.
The amount of spin is determined by a random variable generated by JavaScript each time you press the spin button but it will always make at least 1 full rotation.
The wheel always starts from where you left it.
There is no limit to the number of times you can spin the wheel.
I hate to disappoint you Montse, but I cheated and used regular ol' JavaScript. I needed to reset the random number for each spin but not restart the slide each time. I haven't worked with the new random number variable enough to know how to do that so I went with what I know. :-)
I wanted to demonstrate that if you "drag" a dial, you are limited to its start & stop values. However, if you change the values through some other means (triggers/events) you can "reset" the dial and essentially spin it forever.
All dials have a starting and an ending value. If a users uses their mouse to rotate the dial, they cannot go beyond the start or the ending value, even in a full 360° dial.
All dials control (or can be controlled by) an assigned variable. Rotating the dial changes the variable's value. Changing the variable's value, rotates the dial.
Any image can be converted into a dial.
So, in my example, I am using an off-screen animation to add 1 to the dial to achieve the rotation and subtracting 1 from a randomly generated control number that tells me how many times to do this. But because my dial has a start value of 1 and a top value of 11, it can't move to a value of 12. By monitoring the dial value, I can subtract 10 from the variable instead of adding 1 anytime the value is 11 so the dial "moves" from its end position to its starting one. Visually, this looks just like a continuation of the rotation when in reality, it is a reset to the lowest (initial) value.
9 Replies
Fun use of Storyline 360's random number variable, Owen! Can't wait to check out your source file:-)
I hate to disappoint you Montse, but I cheated and used regular ol' JavaScript. I needed to reset the random number for each spin but not restart the slide each time. I haven't worked with the new random number variable enough to know how to do that so I went with what I know. :-)
I also wanted this to be accessible to SL3 users.
Well what do you know? You did use JavaScript:-) The example is still wonderful, Owen!
I wanted to demonstrate that if you "drag" a dial, you are limited to its start & stop values. However, if you change the values through some other means (triggers/events) you can "reset" the dial and essentially spin it forever.
This is super cool, Owen! Nice work :)
Thanks for sharing Owen! This is really cool!
This is really awesome Owen! You are a JS Guru :)
If you have time, could you kindly explain bit further on how you spin the wheel using a dial interaction ("reset the dial and spin forever")?
Things to keep in mind:
So, in my example, I am using an off-screen animation to add 1 to the dial to achieve the rotation and subtracting 1 from a randomly generated control number that tells me how many times to do this. But because my dial has a start value of 1 and a top value of 11, it can't move to a value of 12. By monitoring the dial value, I can subtract 10 from the variable instead of adding 1 anytime the value is 11 so the dial "moves" from its end position to its starting one. Visually, this looks just like a continuation of the rotation when in reality, it is a reset to the lowest (initial) value.
Oh I got the point!
Thank you so much for taking time and effort to update such a comprehensive explanation, Owen.
I must say, that your thinking is incredible :)
This discussion is closed. You can start a new discussion or contact Articulate Support.