3-D Spinning Wheel

I wanted to create a game-show-style wheel in Storyline, but with a twist: instead of a flat wheel spinning in a circle, I wanted a vertical wheel that appeared to spin toward the viewer. I had trouble finding an example of this type of interaction, so I decided to create the illusion using image states, cue points, and variables. 

https://360.articulate.com/review/content/41bac6dd-0026-4d4d-a0b7-a67c96696c90/review 

 

Creating the Spinning Illusion

The spinning effect illusion is created with a background image that has 20 different states rather than 3-D animation. In each state, the numbers move down one position on the wheel. To create the illusion of a curved wheel, the numbers in the center are larger, and the numbers toward the top and bottom are shorter, angled, and darker with text effects options. 

When the states are displayed quickly in sequence, the wheel appears to rotate. To be honest, I was surprised that it worked since the lines between the spaces are static, but it actually looks like it is spinning.

Creating the Wheel Graphic with AI

I used ChatGPT to create the base wheel image, which took a little trial and error.

I started by uploading a link to a video showing a wheel similar to what I wanted and asked ChatGPT to generate sample flat images of the wheel in 12 states that I could use as a reference for the different wheel positions.

 

The first attempt helped me visualize the concept. I liked how the sections were larger in the middle and became smaller toward the top and bottom, but several details weren't quite right. The 50 section changes colors at it rotates, the red and green sections weren't positioned correctly, the pointer was already part of the image, and the numbers where not the ones I wanted. 

For the next version, I decided it would be easier to add the numbers myself. I prompted ChatGPT to create a single wheel image without numbers, with 20 spaces and a red section between two green sections.

This was closer, but there were still too many wheel sections visible, and it had a black section between the red and green sections.

For the final iteration, I simplified the prompt. I asked ChatGPT to make all of the wheel sections black, remove the pointer, and show only eight sections of the wheel at a time. This gave me the base graphic I needed. I could then control the numbers, colors, and pointer myself instead of relying on AI to reproduce those details consistently across multiple images.

Building 20 Wheel Positions

I brought the final wheel graphic into PowerPoint to create the 20 images needed for the Storyline states. I added the numbers, adjusted the font shape in text effect for the top and bottom numbers, and used custom shapes to create the colored wheel sections.

One helpful trick was to change the PowerPoint slide size to a square and position the wheel graphic in the exact center and middle of the slide. This helped me to make sure the image was in the same position on each slide so that the states wouldn't wobble when I import them in Storyline. I then duplicated the slide and changed the numbers to move them down one wheel position for each successive slide. 

Once all 20 positions were complete, I exported the PowerPoint slides as PNG files. PowerPoint automatically saved each slide as a separate image in a folder.

Back in Storyline, I opened the wheel object's Edit States window and used the picture icon to insert the exported images. I added all 20 images at once, and Storyline created all of the individual states.

The pointer is a separate shape that I created using Merge Shapes in Storyline. Keeping it separate from the wheel image allows the wheel to move underneath it. I also added a shadow to the pointer to help create the illusion that it sits above the wheel.

Making the Wheel Spin

The wheel animation uses 20 cue points, 20 image states, and state-change triggers.

At each cue point, a trigger changes the wheel to the next state (at cue point 1, change to state 1; at cue point 2, change to state 2; etc.)

The animation occurs on several Storyline layers. The cue points are close together on the first layer and become progressively farther apart on subsequent layers to make it look like the spinning speed slows as it stops. 

Stopping the Wheel Randomly

Getting the wheel to stop on a random position was one of the trickier parts. I created a number variable (WheelResult) and created a trigger to adjust the variable to a random number when the user clicks on the spin button. 

On the final spinning layer, the wheel continues moving through its states. Each cue point has a conditional trigger that pauses the timeline when the cue point matches WheelResult.

For example: Pause timeline when timeline reaches Cue Point 7 if WheelResult = 7.

I then added triggers to translate the WheelResult number into a corresponding score to add to the player's score. 

Adding Wheel Sounds

The beeping and applause sounds are free downloads from Pixabay.

Initially, I added a Play Media trigger at every cue point so the pointer flapper would make a sound each time the wheel moved to the next position. This worked well on the first spin but became sporadic on subsequent spins, particularly during the fastest portion of the animation. I think Storyline had trouble with an audio playback limit with so many overlapping audio files.

To make the audio more reliable, I combined the rapid beeps into one audio track for each spinning layer. The timing of the beeps in the audio file corresponds with the cue points on that layer so that each layer plays one audio track. 

Finishing Touches

To finish the game-show effect, I added applause and confetti when the final results are displayed. 

The confetti effect uses JavaScript based on an example shared by Jay Chun in his YouTube tutorial.