Forum Discussion
Spinning Wheel
Picking the brain of all the brilliant designers out there. I am looking for a way to spin a wheel like the wheel in the Price is Right, or it just be a 2D wheel that spins. Any ideas?
- Jonathan_HillSuper Hero
Hi Kelley,
As with all things in Storyline, there's more than one way to do this. Without extra coding, the two main methods are the 'spin' animation or a 0x0px circular motion path.
You might find last years 'roulette' challenge a useful place to start.
Creating Roulette & Spinning Wheel Games in E-Learning #458 | Articulate - Community
For that challenge I used the 'spin' animation method, but I used a state change to add a blur effect to the wheel when it's spinning, too. This reduces the risk your object will flicker in way that is distracting or dangerous for users with epilepsy.
In my demo, the spinning wheel acts as a menu. To determine it's end position, I converted the wheel into a custom dial, so its position can be tracked and controlled by a variable.
You can also download my source file here: https://bit.ly/elhc458dl
I encourage you to check out the other entries for the 'roulette' challenge as well, as there's some crazy inventive stuff in there.
- KelleyDurdella-Community Member
Thank you so much for the link to that challenge. There are some amazing examples in there!
I guess what I am hoping to find is a way to make the wheel more like a Ferris Wheel and not like a roulette. I don't want the items on it to turn upside down if that makes sense. The color piece would turn, but the icons would stay right side up. Would I just make states for each turn of the wheel?
- AmandaEckenroedCommunity Member
You can apply a circular motion path animation to each of your six items. Under Path Options, set Easing to None and avoid selecting Orient Shape to Path to maintain their original orientation. While this may not be the perfect solution, it will effectively achieve the desired outcome.
- NedimCommunity Member
I just posted something that seems to be on a similar topic. Check out my post.